diff --git a/assets/stylesheets/_colors.scss b/assets/stylesheets/_colors.scss index 3575248e3c2241..cafa84fba44cac 100644 --- 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 index 026e899dbe3025..e1725aa00873a6 100644 --- 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 index 5c045aee8afb97..f153a2353f9b47 100644 --- 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 index b97ddbad17b8a9..4b06ec7945ccc8 100644 --- 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 = () => ; + +function GroupEdit( { + className, + setBackgroundColor, + backgroundColor, + hasInnerBlocks, +} ) { const styles = { backgroundColor: backgroundColor.color, }; @@ -39,10 +48,25 @@ function GroupEdit( { className, setBackgroundColor, backgroundColor } ) { />
- +
); } -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 index 4de439b09327f3..df7b3f6419f155 100644 --- 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`] = ` " -
-

Group block

-
+
" `; exports[`Group can be created using the slash inserter 1`] = ` " +
+" +`; + +exports[`Group can have other blocks appended to it using the button appender 1`] = ` +"
-

Group block

+

Group Block with a Paragraph

" `; diff --git a/packages/e2e-tests/specs/blocks/group.test.js b/packages/e2e-tests/specs/blocks/group.test.js index cb04ffdc64cd7e..7ce9021d26bd4b 100644 --- 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(); } );