Merge pull request #6951 from getkirby/v5/fix/blocks-field-move-empty

Blocks field: fix empty display

panel/src/components/Forms/Blocks/Blocks.vue

@@ -54,18 +54,12 @@
 					@split="split(block, index, $event)"
 					@update="update(block, $event)"
 				/>
-
-				<!-- No blocks -->
-				<template v-if="blocks.length === 0" #footer>
-					<k-empty
-						class="k-blocks-empty"
-						icon="box"
-						@click="choose(blocks.length)"
-					>
-						{{ empty ?? $t("field.blocks.empty") }}
-					</k-empty>
-				</template>
 			</k-draggable>
+
+			<!-- No blocks -->
+			<k-empty class="k-blocks-empty" icon="box" @click="choose(blocks.length)">
+				{{ empty ?? $t("field.blocks.empty") }}
+			</k-empty>
 		</template>
 
 		<!-- No fieldsets -->
@@ -728,7 +722,7 @@ export default {
 .k-blocks {
 	border-radius: var(--rounded);
 }
-.k-blocks:not([data-empty="true"], [data-disabled="true"]) {
+.k-blocks:not(:has(> .k-blocks-list:empty), [data-disabled="true"]) {
 	background: var(--block-color-back);
 	box-shadow: var(--shadow);
 }
@@ -749,8 +743,12 @@ export default {
 	cursor: -moz-grabbing;
 	cursor: -webkit-grabbing;
 }
-.k-blocks-list > .k-blocks-empty {
+
+.k-blocks > .k-blocks-empty {
 	display: flex;
 	align-items: center;
 }
+.k-blocks > .k-blocks-list:not(:empty) + .k-blocks-empty {
+	display: none;
+}
 </style>

panel/src/components/Forms/Layouts/LayoutColumn.vue

@@ -88,7 +88,7 @@ export default {
 	> .k-block-container:last-of-type {
 	flex-grow: 1;
 }
-.k-layout-column > .k-blocks > .k-blocks-list > .k-blocks-empty.k-box {
+.k-layout-column > .k-blocks > .k-blocks-list + .k-blocks-empty.k-box {
 	--box-color-back: transparent;
 	position: absolute;
 	inset: 0;
@@ -97,7 +97,7 @@ export default {
 	transition: opacity 0.3s;
 	border: 0;
 }
-.k-layout-column > .k-blocks > .k-blocks-list > .k-blocks-empty:hover {
+.k-layout-column > .k-blocks > .k-blocks-list + .k-blocks-empty:hover {
 	opacity: 1;
 }
 </style>