From 9c965e5c65457e14687782f23ac6e52fbc0f0b38 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 12 Apr 2019 16:56:38 +0800 Subject: [PATCH 1/6] Use button block appender on group block --- packages/block-library/src/group/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index b97ddbad17b8a..9a19c35c85fb0 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -39,7 +39,7 @@ function GroupEdit( { className, setBackgroundColor, backgroundColor } ) { />
- + } />
); From be263c34b9c3555a78fa8d2c583a8efc4718a3b2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 12 Apr 2019 17:19:19 +0800 Subject: [PATCH 2/6] Update group block e2e tests for the new button appender --- .../blocks/__snapshots__/group.test.js.snap | 12 ++++++++---- packages/e2e-tests/specs/blocks/group.test.js | 17 +++++++++++++++-- 2 files changed, 23 insertions(+), 6 deletions(-) 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 4de439b09327f..df7b3f6419f15 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 cb04ffdc64cd7..dcf10b7418e60 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,21 @@ 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.waitForSelector( '.block-editor-button-block-appender' ); + await page.click( '.block-editor-button-block-appender' ); + + await page.waitForSelector( '.editor-block-list-item-paragraph' ); + await page.click( '.editor-block-list-item-paragraph' ); + + await page.keyboard.type( 'Group Block with a Paragraph' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); From 926b2bf674abb2fabaf27bc751fddf68a2a47006 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 12 Apr 2019 12:46:34 -0400 Subject: [PATCH 3/6] Add additional margin to the appender when a group has a background color. --- .../src/components/block-list-appender/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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 026e899dbe302..e1725aa00873a 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 { From 473d62d0eae1d04b75acdb2afe806b4a1d0df68d Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 12 Apr 2019 12:48:15 -0400 Subject: [PATCH 4/6] Use more opaque versions of the appender background color To ensure greater compatibility when layered on top of a block with a background color. --- assets/stylesheets/_colors.scss | 2 ++ .../src/components/button-block-appender/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/stylesheets/_colors.scss b/assets/stylesheets/_colors.scss index 3575248e3c224..cafa84fba44ca 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/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss index 5c045aee8afb9..f153a2353f9b4 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, From c5f27fa64757ac3d8620ef384b8776edf0d69755 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 12 Apr 2019 15:48:14 -0400 Subject: [PATCH 5/6] Block Library: Display ButtonBlockAppender only if selected or empty --- packages/block-library/src/group/edit.js | 40 ++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 9a19c35c85fb0..d470672581216 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 } ) { +function GroupEdit( { + className, + setBackgroundColor, + backgroundColor, + isSelected, + hasInnerBlocks, + isInnerBlockSelected, +} ) { const styles = { backgroundColor: backgroundColor.color, }; @@ -24,6 +33,12 @@ function GroupEdit( { className, setBackgroundColor, backgroundColor } ) { 'has-background': !! backgroundColor.color, } ); + const isAppenderVisible = ( + isSelected || + isInnerBlockSelected || + ! hasInnerBlocks + ); + return ( @@ -39,10 +54,29 @@ function GroupEdit( { className, setBackgroundColor, backgroundColor } ) { />
- } /> + ( + isAppenderVisible && + ) } + />
); } -export default withColors( 'backgroundColor' )( GroupEdit ); +export default compose( [ + withColors( 'backgroundColor' ), + withSelect( ( select, { clientId } ) => { + const { + getBlock, + hasSelectedInnerBlock, + } = select( 'core/block-editor' ); + + const block = getBlock( clientId ); + + return { + hasInnerBlocks: !! ( block && block.innerBlocks.length ), + isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ), + }; + } ), +] )( GroupEdit ); From 443822c9babd5e1dd742a86b082d72594e6603ce Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 18 Apr 2019 13:05:38 +0800 Subject: [PATCH 6/6] Only render button appender when the group has no inner blocks --- packages/block-library/src/group/edit.js | 16 +++------------- packages/e2e-tests/specs/blocks/group.test.js | 5 ----- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index d470672581216..4b06ec7945ccc 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -17,13 +17,13 @@ import { withColors, } from '@wordpress/block-editor'; +const renderAppender = () => ; + function GroupEdit( { className, setBackgroundColor, backgroundColor, - isSelected, hasInnerBlocks, - isInnerBlockSelected, } ) { const styles = { backgroundColor: backgroundColor.color, @@ -33,12 +33,6 @@ function GroupEdit( { 'has-background': !! backgroundColor.color, } ); - const isAppenderVisible = ( - isSelected || - isInnerBlockSelected || - ! hasInnerBlocks - ); - return ( @@ -55,9 +49,7 @@ function GroupEdit( {
( - isAppenderVisible && - ) } + renderAppender={ ! hasInnerBlocks && renderAppender } />
@@ -69,14 +61,12 @@ export default compose( [ withSelect( ( select, { clientId } ) => { const { getBlock, - hasSelectedInnerBlock, } = select( 'core/block-editor' ); const block = getBlock( clientId ); return { hasInnerBlocks: !! ( block && block.innerBlocks.length ), - isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ), }; } ), ] )( GroupEdit ); diff --git a/packages/e2e-tests/specs/blocks/group.test.js b/packages/e2e-tests/specs/blocks/group.test.js index dcf10b7418e60..7ce9021d26bd4 100644 --- a/packages/e2e-tests/specs/blocks/group.test.js +++ b/packages/e2e-tests/specs/blocks/group.test.js @@ -31,13 +31,8 @@ describe( 'Group', () => { 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.waitForSelector( '.block-editor-button-block-appender' ); await page.click( '.block-editor-button-block-appender' ); - - await page.waitForSelector( '.editor-block-list-item-paragraph' ); await page.click( '.editor-block-list-item-paragraph' ); - await page.keyboard.type( 'Group Block with a Paragraph' ); expect( await getEditedPostContent() ).toMatchSnapshot();