Use button block appender on group block (#14943)

* Use button block appender on group block * Update group block e2e tests for the new button appender * Add additional margin to the appender when a group has a background color. * Use more opaque versions of the appender background color To ensure greater compatibility when layered on top of a block with a background color. * Block Library: Display ButtonBlockAppender only if selected or empty * Only render button appender when the group has no inner blocks
WordPress · Apr 30, 2019 · c2c8276 · c2c8276
1 parent 1e96ec7
commit c2c8276
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 11 deletions.
diff --git a/assets/stylesheets/_colors.scss b/assets/stylesheets/_colors.scss
@@ -44,6 +44,7 @@ $dark-opacity-light-400: rgba(#95959c, 0.2);
 $dark-opacity-light-300: rgba(#829493, 0.15);
 $dark-opacity-light-200: rgba(#8b8b96, 0.1);
 $dark-opacity-light-100: rgba(#747474, 0.05);
+$dark-opacity-background-fill: rgba($dark-gray-700, 0.7); // Similar to $dark-opacity-light-200, but more opaque.
 
 // Light opacities, for use with dark themes.
 $light-opacity-900: rgba($white, 1);
@@ -64,6 +65,7 @@ $light-opacity-light-400: rgba($white, 0.25);
 $light-opacity-light-300: rgba($white, 0.2);
 $light-opacity-light-200: rgba($white, 0.15);
 $light-opacity-light-100: rgba($white, 0.1);
+$light-opacity-background-fill: rgba($light-gray-300, 0.8);  // Similar to $light-opacity-light-200, but more opaque.
 
 // Additional colors.
 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/.

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,5 +1,11 @@
 .block-list-appender {
 	margin: $block-padding;
+
+	// Add additional margin to the appender when inside a group with a background color.
+	// If changing this, be sure to sync up with group/editor.scss line 13.
+	.has-background & {
+		margin: ($block-padding*2 + $block-spacing) $block-padding;
+	}
 }
 
 .block-list-appender > .block-editor-inserter {

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -7,7 +7,7 @@
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;
-	background: $dark-opacity-light-100;
+	background: $light-opacity-background-fill;
 
 	&:hover,
 	&:focus {
@@ -22,7 +22,7 @@
 
 	// Use opacity to work in various editor styles
 	.is-dark-theme & {
-		background: $light-opacity-light-100;
+		background: $dark-opacity-background-fill;
 		color: $light-gray-100;
 
 		&:hover,

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -7,6 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
@@ -15,7 +17,14 @@ import {
 	withColors,
 } from '@wordpress/block-editor';
 
-function GroupEdit( { className, setBackgroundColor, backgroundColor } ) {
+const renderAppender = () => <InnerBlocks.ButtonBlockAppender />;
+
+function GroupEdit( {
+	className,
+	setBackgroundColor,
+	backgroundColor,
+	hasInnerBlocks,
+} ) {
 	const styles = {
 		backgroundColor: backgroundColor.color,
 	};
@@ -39,10 +48,25 @@ function GroupEdit( { className, setBackgroundColor, backgroundColor } ) {
 				/>
 			</InspectorControls>
 			<div className={ classes } style={ styles }>
-				<InnerBlocks />
+				<InnerBlocks
+					renderAppender={ ! hasInnerBlocks && renderAppender }
+				/>
 			</div>
 		</Fragment>
 	);
 }
 
-export default withColors( 'backgroundColor' )( GroupEdit );
+export default compose( [
+	withColors( 'backgroundColor' ),
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlock,
+		} = select( 'core/block-editor' );
+
+		const block = getBlock( clientId );
+
+		return {
+			hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+		};
+	} ),
+] )( GroupEdit );
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
@@ -2,16 +2,20 @@
 
 exports[`Group can be created using the block inserter 1`] = `
 "<!-- wp:group -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Group block</p>
-<!-- /wp:paragraph --></div>
+<div class=\\"wp-block-group\\"></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Group can be created using the slash inserter 1`] = `
 "<!-- wp:group -->
+<div class=\\"wp-block-group\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Group can have other blocks appended to it using the button appender 1`] = `
+"<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Group block</p>
+<p>Group Block with a Paragraph</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->"
 `;
diff --git a/packages/e2e-tests/specs/blocks/group.test.js b/packages/e2e-tests/specs/blocks/group.test.js
@@ -16,7 +16,6 @@ describe( 'Group', () => {
 	it( 'can be created using the block inserter', async () => {
 		await searchForBlock( 'Group' );
 		await page.click( '.editor-block-list-item-group' );
-		await page.keyboard.type( 'Group block' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -25,7 +24,16 @@ describe( 'Group', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '/group' );
 		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Group block' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'can have other blocks appended to it using the button appender', async () => {
+		await searchForBlock( 'Group' );
+		await page.click( '.editor-block-list-item-group' );
+		await page.click( '.block-editor-button-block-appender' );
+		await page.click( '.editor-block-list-item-paragraph' );
+		await page.keyboard.type( 'Group Block with a Paragraph' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );