Try: Improve Stack and Row setup states. (#39935)

* Try: Improve Stack and Row setup states. * Add editor-only flex-class to affect only row and stack. This employs code from #39181, props @carolinan. * Change classname. Props @youknowriad * Restore old rule.
WordPress · Apr 5, 2022 · 437f014 · 437f014
1 parent c41596e
commit 437f014
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -3,12 +3,16 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-10;
 	width: 100%;
 	height: auto;
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
+	// Needs specificity to override button styles.
+	&.components-button.components-button {
+		padding: $grid-unit-15;
+	}
+
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -52,7 +52,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: `is-layout-${ type }`,
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -22,3 +22,34 @@
 		margin-bottom: $block-padding + $grid-unit-05;
 	}
 }
+
+// Affect the appender of the Row and Stack variants.
+.is-layout-flex.block-editor-block-list__block .block-list-appender:only-child {
+	gap: inherit;
+
+	&,
+	.block-editor-default-block-appender__content,
+	.block-editor-inserter {
+		display: inherit;
+		width: 100%;
+		flex-direction: inherit;
+		flex: 1;
+	}
+
+	&::after {
+		content: "";
+		display: flex;
+		border: $border-width dashed currentColor;
+		opacity: 0.4;
+		border-radius: $radius-block-ui;
+		flex: 1;
+		pointer-events: none;
+		min-height: $grid-unit-60;
+	}
+
+	// Let the parent be selectable in the placeholder area.
+	pointer-events: none;
+	.block-editor-inserter {
+		pointer-events: all;
+	}
+}