Buttons block: lighten editor DOM even more.

WordPress · Sep 21, 2020 · 78a08c4 · 78a08c4
1 parent dac0df2
commit 78a08c4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -38,9 +38,7 @@ function BlockListAppender( {
 	if ( CustomAppender ) {
 		// Prefer custom render prop if provided.
 		appender = <CustomAppender />;
-	} else if ( canInsertDefaultBlock ) {
-		// Render the default block appender when renderAppender has not been
-		// provided and the context supports use of the default appender.
+	} else {
 		const isDocumentAppender = ! rootClientId;
 		const isParentSelected = selectedBlockClientId === rootClientId;
 		const isAnotherDefaultAppenderAlreadyDisplayed =
@@ -50,26 +48,31 @@ function BlockListAppender( {
 		if (
 			! isDocumentAppender &&
 			! isParentSelected &&
-			isAnotherDefaultAppenderAlreadyDisplayed
+			( ! selectedBlockClientId ||
+				isAnotherDefaultAppenderAlreadyDisplayed )
 		) {
 			return null;
 		}
 
-		appender = (
-			<DefaultBlockAppender
-				rootClientId={ rootClientId }
-				lastBlockClientId={ last( blockClientIds ) }
-			/>
-		);
-	} else {
-		// Fallback in the case no renderAppender has been provided and the
-		// default block can't be inserted.
-		appender = (
-			<ButtonBlockAppender
-				rootClientId={ rootClientId }
-				className="block-list-appender__toggle"
-			/>
-		);
+		if ( canInsertDefaultBlock ) {
+			// Render the default block appender when renderAppender has not been
+			// provided and the context supports use of the default appender.
+			appender = (
+				<DefaultBlockAppender
+					rootClientId={ rootClientId }
+					lastBlockClientId={ last( blockClientIds ) }
+				/>
+			);
+		} else {
+			// Fallback in the case no renderAppender has been provided and the
+			// default block can't be inserted.
+			appender = (
+				<ButtonBlockAppender
+					rootClientId={ rootClientId }
+					className="block-list-appender__toggle"
+				/>
+			);
+		}
 	}
 
 	return (

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -80,8 +80,8 @@ function BlockList(
 
 	return (
 		<Container
-			{ ...__experimentalPassedProps }
 			ref={ ref }
+			{ ...__experimentalPassedProps }
 			className={ classnames(
 				'block-editor-block-list__layout',
 				className,

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -23,15 +23,15 @@ const alignmentHooksSetting = {
 function ButtonsEdit() {
 	const blockWrapperProps = useBlockWrapperProps();
 	return (
-		<div { ...blockWrapperProps }>
-			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
-				<InnerBlocks
-					allowedBlocks={ ALLOWED_BLOCKS }
-					template={ BUTTONS_TEMPLATE }
-					orientation="horizontal"
-				/>
-			</AlignmentHookSettingsProvider>
-		</div>
+		<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				__experimentalPassedProps={ blockWrapperProps }
+				__experimentalTagName="div"
+				template={ BUTTONS_TEMPLATE }
+				orientation="horizontal"
+			/>
+		</AlignmentHookSettingsProvider>
 	);
 }
 

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -1,6 +1,9 @@
 .wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] {
 	display: inline-block;
 	width: auto;
+
+	// Override editor auto block margins.
+	margin-left: 0;
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {