From ea74f885fdd15807f75634834662adccb5511eed Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Fri, 20 Mar 2020 15:33:07 -0400 Subject: [PATCH 01/32] First pass. --- .../src/components/block-parent/index.js | 55 +++++++++++++++++++ .../src/components/block-toolbar/index.js | 17 ++++++ .../src/components/block-toolbar/style.scss | 12 +++- 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/components/block-parent/index.js diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent/index.js new file mode 100644 index 0000000000000..1586f6cd51bdb --- /dev/null +++ b/packages/block-editor/src/components/block-parent/index.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import BlockTitle from '../block-title'; + +/** + * Block parent component, displaying the hierarchy of the + * current block selection as a single icon to "go up" a level. + * + * @return {WPElement} Block Breadcrumb. + */ +const BlockParent = function() { + const { selectBlock, clearSelectedBlock } = useDispatch( + 'core/block-editor' + ); + const { clientId, parents, hasSelection } = useSelect( ( select ) => { + const { + getSelectionStart, + getSelectedBlockClientId, + getBlockParents, + } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); + return { + parents: getBlockParents( selectedBlockClientId ), + clientId: selectedBlockClientId, + hasSelection: !! getSelectionStart().clientId, + }; + }, [] ); + const firstParentClientID = parents[parents.length - 1]; + + if ( parents && parents.length ) { + return ( +
+ +
+ ); + } else { + return null; + } +}; + +export default BlockParent; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index d2dc21fff63c2..3c05af04064ff 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -8,10 +8,12 @@ import classnames from 'classnames'; import { useSelect } from '@wordpress/data'; import { useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; +import { Button } from '@wordpress/components'; /** * Internal dependencies */ import BlockMover from '../block-mover'; +import BlockParent from '../block-parent'; import BlockSwitcher from '../block-switcher'; import BlockControls from '../block-controls'; import BlockFormatControls from '../block-format-controls'; @@ -86,6 +88,12 @@ export default function BlockToolbar( { hideDragHandle } ) { transform: shouldShowMovers ? 'translateX(0px)' : 'translateX(100%)', }; + const animatedBlockParentStyles = { + opacity: shouldShowMovers ? 1 : 0, + transform: shouldShowMovers ? 'translateY(-55px)' : 'translateY(0)', + transitionDelay: shouldShowMovers ? 0 : 0, + }; + const classes = classnames( 'block-editor-block-toolbar', ! displayHeaderToolbar && 'has-responsive-movers' @@ -112,6 +120,14 @@ export default function BlockToolbar( { hideDragHandle } ) { /> + +
+ +
+ { ( shouldShowVisualToolbar || isMultiToolbar ) && (
) }
+ { shouldShowVisualToolbar && ! isMultiToolbar && ( <> Date: Sun, 22 Mar 2020 14:48:02 -0400 Subject: [PATCH 02/32] Adding the BlockIcon --- .../src/components/block-parent/index.js | 26 +++++++++++++++---- .../src/components/block-parent/style.scss | 11 ++++++++ .../src/components/block-switcher/index.js | 1 + .../src/components/block-toolbar/style.scss | 6 +---- packages/block-editor/src/style.scss | 1 + 5 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 packages/block-editor/src/components/block-parent/style.scss diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent/index.js index 1586f6cd51bdb..70d0ecc0f7ed8 100644 --- a/packages/block-editor/src/components/block-parent/index.js +++ b/packages/block-editor/src/components/block-parent/index.js @@ -4,10 +4,17 @@ import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { + getBlocksByClientId, + getBlockAttributes, + getBlockName, + getBlockType } from '@wordpress/blocks'; +import { image } from '@wordpress/icons'; /** * Internal dependencies */ +import BlockIcon from '../block-icon'; import BlockTitle from '../block-title'; /** @@ -33,18 +40,27 @@ const BlockParent = function() { hasSelection: !! getSelectionStart().clientId, }; }, [] ); + const firstParentClientID = parents[parents.length - 1]; + const { parentClientId, parentBlockType } = useSelect( ( select ) => { + const { getBlockName } = select( 'core/block-editor' ); + const parentBlockName = getBlockName( firstParentClientID ) + return { + parentBlockType: getBlockType( parentBlockName ), + }; + }, [] ); + if ( parents && parents.length ) { return ( -
+
+ label={ __( 'Select parent block' ) } + showTooltip + icon={ } + />
); } else { diff --git a/packages/block-editor/src/components/block-parent/style.scss b/packages/block-editor/src/components/block-parent/style.scss new file mode 100644 index 0000000000000..bc13bb1498f57 --- /dev/null +++ b/packages/block-editor/src/components/block-parent/style.scss @@ -0,0 +1,11 @@ +.block-editor-block-parent { + position: absolute; + left: -1px; + border: 1px solid $black; + border-radius: 2px; + background: $white; + + button.block-editor-block-parent__button { + padding: 0 12px; + } +} diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index cc1c1b5d8d548..7b1e9d7828157 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -143,6 +143,7 @@ export class BlockSwitcher extends Component { label={ label } onKeyDown={ openOnArrowDown } showTooltip + tooltipPosition="bottom" icon={ } /> diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index f8fff0b01eac0..029ff1e61cd7c 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -71,13 +71,9 @@ } .block-editor-block-toolbar__block-parent-wrapper { - position: absolute; - left: -1px; - border: 1px solid $black; - border-radius: 2px; transform: translateY(0); transition: all 60ms linear; - transition-delay: 300ms; + transition-delay: 420ms; z-index: -1; // This makes it slide out from underneath the toolbar. } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 55419603a6d1e..1a3b79d9d90f5 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -17,6 +17,7 @@ @import "./components/block-mobile-toolbar/style.scss"; @import "./components/block-mover/style.scss"; @import "./components/block-navigation/style.scss"; +@import "./components/block-parent/style.scss"; @import "./components/block-preview/style.scss"; @import "./components/block-settings-menu/style.scss"; @import "./components/block-styles/style.scss"; From 97ae63dd40e413ac272963d0182cde4ab85414b8 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 23 Mar 2020 17:14:21 -0400 Subject: [PATCH 03/32] Adjust the position to match the overall grid. --- packages/block-editor/src/components/block-toolbar/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 3c05af04064ff..04c0cca182db8 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -8,7 +8,6 @@ import classnames from 'classnames'; import { useSelect } from '@wordpress/data'; import { useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; -import { Button } from '@wordpress/components'; /** * Internal dependencies */ @@ -90,7 +89,7 @@ export default function BlockToolbar( { hideDragHandle } ) { const animatedBlockParentStyles = { opacity: shouldShowMovers ? 1 : 0, - transform: shouldShowMovers ? 'translateY(-55px)' : 'translateY(0)', + transform: shouldShowMovers ? 'translateY(-63px)' : 'translateY(0)', transitionDelay: shouldShowMovers ? 0 : 0, }; From dde200e05ba5861400bee4466e6cbca6a4c2f572 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 23 Mar 2020 17:15:55 -0400 Subject: [PATCH 04/32] Removing the delay on the Parent button transition. --- packages/block-editor/src/components/block-toolbar/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 029ff1e61cd7c..2f0ac1fedd038 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -73,7 +73,6 @@ .block-editor-block-toolbar__block-parent-wrapper { transform: translateY(0); transition: all 60ms linear; - transition-delay: 420ms; z-index: -1; // This makes it slide out from underneath the toolbar. } From 9c7e661c07a946df0d3be4c67ae5d6294333c1f1 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 12:01:08 -0400 Subject: [PATCH 05/32] Update the tooltip to display the parent block's title. Cleaning a bunch of stuff from pre-commit hooks I had been ignoring. --- .../src/components/block-parent/index.js | 68 +++++++++---------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent/index.js index 70d0ecc0f7ed8..a7a42cc7c944e 100644 --- a/packages/block-editor/src/components/block-parent/index.js +++ b/packages/block-editor/src/components/block-parent/index.js @@ -3,19 +3,13 @@ */ import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { - getBlocksByClientId, - getBlockAttributes, - getBlockName, - getBlockType } from '@wordpress/blocks'; -import { image } from '@wordpress/icons'; +import { __, sprintf } from '@wordpress/i18n'; +import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ import BlockIcon from '../block-icon'; -import BlockTitle from '../block-title'; /** * Block parent component, displaying the hierarchy of the @@ -24,10 +18,8 @@ import BlockTitle from '../block-title'; * @return {WPElement} Block Breadcrumb. */ const BlockParent = function() { - const { selectBlock, clearSelectedBlock } = useDispatch( - 'core/block-editor' - ); - const { clientId, parents, hasSelection } = useSelect( ( select ) => { + const { selectBlock } = useDispatch( 'core/block-editor' ); + const { parents } = useSelect( ( select ) => { const { getSelectionStart, getSelectedBlockClientId, @@ -41,31 +33,37 @@ const BlockParent = function() { }; }, [] ); - const firstParentClientID = parents[parents.length - 1]; + const firstParentClientID = parents[ parents.length - 1 ]; - const { parentClientId, parentBlockType } = useSelect( ( select ) => { - const { getBlockName } = select( 'core/block-editor' ); - const parentBlockName = getBlockName( firstParentClientID ) - return { - parentBlockType: getBlockType( parentBlockName ), - }; - }, [] ); + const { parentBlockType } = useSelect( ( select ) => { + const { getBlockName } = select( 'core/block-editor' ); + const parentBlockName = getBlockName( firstParentClientID ); + return { + parentBlockType: getBlockType( parentBlockName ), + }; + }, [] ); + + if ( parents && parents.length ) { + return ( +
+
+ ); + } - if ( parents && parents.length ) { - return ( -
-
- ); - } else { - return null; - } + return null; }; export default BlockParent; From e9acd3586766d2797ad3c272a0d2520d5f89fb9c Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 12:01:44 -0400 Subject: [PATCH 06/32] Adjust code indentation. --- packages/block-editor/src/components/block-parent/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent/index.js index a7a42cc7c944e..cc2e27f2dfcd9 100644 --- a/packages/block-editor/src/components/block-parent/index.js +++ b/packages/block-editor/src/components/block-parent/index.js @@ -53,8 +53,8 @@ const BlockParent = function() { className="block-editor-block-parent__button" onClick={ () => selectBlock( firstParentClientID ) } label={ sprintf( - __( 'Select %s' ), - parentBlockType.title + __( 'Select %s' ), + parentBlockType.title ) } showTooltip icon={ } From 7ca1bb0e3ff2ec7a67b6a347a78434f731f12396 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 24 Mar 2020 12:19:27 -0400 Subject: [PATCH 07/32] Don't show the Parent button if multiple blocks are selected. --- packages/block-editor/src/components/block-toolbar/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 04c0cca182db8..82099641b2517 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -120,12 +120,14 @@ export default function BlockToolbar( { hideDragHandle } ) {
+ { ( ! isMultiToolbar ) && (
+ ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && (
Date: Tue, 24 Mar 2020 12:19:56 -0400 Subject: [PATCH 08/32] Some auto spacing nonsense. --- .../src/components/block-toolbar/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 82099641b2517..5eb156b15557d 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -120,13 +120,13 @@ export default function BlockToolbar( { hideDragHandle } ) {
- { ( ! isMultiToolbar ) && ( -
- -
+ { ! isMultiToolbar && ( +
+ +
) } { ( shouldShowVisualToolbar || isMultiToolbar ) && ( From 409868bb57046171d0738a5585cba1c7faf70fc8 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 26 Mar 2020 13:45:52 -0400 Subject: [PATCH 09/32] Moving the parent button to change its tab order. --- .../src/components/block-toolbar/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 5eb156b15557d..f7d0d27c0b3ba 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -104,6 +104,15 @@ export default function BlockToolbar( { hideDragHandle } ) { className="block-editor-block-toolbar__mover-switcher-container" ref={ nodeRef } > + { ! isMultiToolbar && ( +
+ +
+ ) } +
- { ! isMultiToolbar && ( -
- -
- ) } - { ( shouldShowVisualToolbar || isMultiToolbar ) && (
Date: Thu, 26 Mar 2020 14:19:33 -0400 Subject: [PATCH 10/32] Clean up the spacing in the code to make the code-gods happy. --- .../src/components/block-parent/style.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-parent/style.scss b/packages/block-editor/src/components/block-parent/style.scss index bc13bb1498f57..3624ba8f749b7 100644 --- a/packages/block-editor/src/components/block-parent/style.scss +++ b/packages/block-editor/src/components/block-parent/style.scss @@ -1,11 +1,11 @@ .block-editor-block-parent { - position: absolute; - left: -1px; - border: 1px solid $black; - border-radius: 2px; - background: $white; + position: absolute; + left: -1px; + border: 1px solid $black; + border-radius: 2px; + background: $white; - button.block-editor-block-parent__button { - padding: 0 12px; - } + button.block-editor-block-parent__button { + padding: 0 12px; + } } From ba5efadc91c06b9a56425ea3b64e5ed315cae571 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 2 Apr 2020 14:58:55 -0400 Subject: [PATCH 11/32] Cleaning up some CSS. --- .../src/components/block-parent/style.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-parent/style.scss b/packages/block-editor/src/components/block-parent/style.scss index 3624ba8f749b7..0348ed438e1cd 100644 --- a/packages/block-editor/src/components/block-parent/style.scss +++ b/packages/block-editor/src/components/block-parent/style.scss @@ -1,11 +1,5 @@ .block-editor-block-parent { - position: absolute; - left: -1px; - border: 1px solid $black; - border-radius: 2px; background: $white; - - button.block-editor-block-parent__button { - padding: 0 12px; - } + border: 1px solid $dark-gray-primary; + border-radius: $radius-block-ui; } From 0f8aaf6f120dfcbae9180a952d2b3190a98ee94c Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 2 Apr 2020 15:08:47 -0400 Subject: [PATCH 12/32] Using a className for shouldShowMovers instead of the inline styles. --- .../src/components/block-toolbar/index.js | 12 ++---------- .../src/components/block-toolbar/style.scss | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index f7d0d27c0b3ba..08870560ad430 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -87,14 +87,9 @@ export default function BlockToolbar( { hideDragHandle } ) { transform: shouldShowMovers ? 'translateX(0px)' : 'translateX(100%)', }; - const animatedBlockParentStyles = { - opacity: shouldShowMovers ? 1 : 0, - transform: shouldShowMovers ? 'translateY(-63px)' : 'translateY(0)', - transitionDelay: shouldShowMovers ? 0 : 0, - }; - const classes = classnames( 'block-editor-block-toolbar', + shouldShowMovers && 'is-showing-movers', ! displayHeaderToolbar && 'has-responsive-movers' ); @@ -105,10 +100,7 @@ export default function BlockToolbar( { hideDragHandle } ) { ref={ nodeRef } > { ! isMultiToolbar && ( -
+
) } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 2f0ac1fedd038..4011e181f2b1f 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -66,14 +66,22 @@ } } -.block-editor-block-toolbar__mover-switcher-container { - display: flex; -} - .block-editor-block-toolbar__block-parent-wrapper { - transform: translateY(0); + position: absolute; + top: -1px; + left: -1px; + opacity: 0; transition: all 60ms linear; z-index: -1; // This makes it slide out from underneath the toolbar. + + .is-showing-movers & { + opacity: 1; + transform: translateY(-60px); + } +} + +.block-editor-block-toolbar__mover-switcher-container { + display: flex; } .block-editor-block-toolbar__block-switcher-wrapper { From ac1990a0f1b81823ef901467fbfcf9092df5215b Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 2 Apr 2020 15:29:26 -0400 Subject: [PATCH 13/32] Hide the Parent button in Top Toolbar mode. --- .../block-editor/src/components/block-toolbar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 4011e181f2b1f..98eb881eeeab9 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -78,6 +78,11 @@ opacity: 1; transform: translateY(-60px); } + + // Hide the Parent button in Top Toolbar mode. + .edit-post-header-toolbar__block-toolbar & { + display: none; + } } .block-editor-block-toolbar__mover-switcher-container { From 5e88bb6970a2c61abd6037ec5853187b767078f9 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 2 Apr 2020 15:39:42 -0400 Subject: [PATCH 14/32] Moving the z-index for the block toolbar so it renders above the top bar. Adjusting the position so it appears centered in the top bar. --- packages/base-styles/_z-index.scss | 4 ++-- packages/block-editor/src/components/block-toolbar/style.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e7cb641412129..2048c34322753 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -87,8 +87,8 @@ $z-layers: ( // .edit-post-header { z-index: 30 } ".components-notice-list": 29, - // Above the block list, under the header. - ".block-editor-block-list__block-popover": 29, + // Above the block list and the header. + ".block-editor-block-list__block-popover": 31, // Under the block popover (block toolbar). ".block-editor-block-list__insertion-point-popover": 28, diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 98eb881eeeab9..ed4d937dc3b09 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -76,7 +76,7 @@ .is-showing-movers & { opacity: 1; - transform: translateY(-60px); + transform: translateY(-54px); } // Hide the Parent button in Top Toolbar mode. From 90be934546e11369de3281e35bf086e48e8520f8 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 6 Apr 2020 13:44:54 -0400 Subject: [PATCH 15/32] Use the CSS variables for the spacing. --- packages/block-editor/src/components/block-toolbar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index ed4d937dc3b09..753c05478ef10 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -76,7 +76,7 @@ .is-showing-movers & { opacity: 1; - transform: translateY(-54px); + transform: translateY(-($block-toolbar-height + $grid-unit-15)); } // Hide the Parent button in Top Toolbar mode. From e2e407dd662663ea2f304ba299290dadfcdeb6e7 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 6 Apr 2020 13:45:20 -0400 Subject: [PATCH 16/32] Update the tooltip to use the word "parent" at a hope of making it more helpful. --- packages/block-editor/src/components/block-parent/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent/index.js index cc2e27f2dfcd9..51935ab46a5c1 100644 --- a/packages/block-editor/src/components/block-parent/index.js +++ b/packages/block-editor/src/components/block-parent/index.js @@ -53,7 +53,7 @@ const BlockParent = function() { className="block-editor-block-parent__button" onClick={ () => selectBlock( firstParentClientID ) } label={ sprintf( - __( 'Select %s' ), + __( 'Select parent (%s)' ), parentBlockType.title ) } showTooltip From 6e14ab45c81caa2e346899fd6d0a95754e4f5892 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 16 Apr 2020 11:38:46 -0400 Subject: [PATCH 17/32] Renaming the component to be more descriptive by adding "Selector". This component isn't the block's parent, its a way to select the block's parent. --- .../{block-parent => block-parent-selector}/index.js | 10 +++++----- .../{block-parent => block-parent-selector}/style.scss | 2 +- .../block-editor/src/components/block-toolbar/index.js | 6 +++--- .../src/components/block-toolbar/style.scss | 2 +- packages/block-editor/src/style.scss | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) rename packages/block-editor/src/components/{block-parent => block-parent-selector}/index.js (86%) rename packages/block-editor/src/components/{block-parent => block-parent-selector}/style.scss (71%) diff --git a/packages/block-editor/src/components/block-parent/index.js b/packages/block-editor/src/components/block-parent-selector/index.js similarity index 86% rename from packages/block-editor/src/components/block-parent/index.js rename to packages/block-editor/src/components/block-parent-selector/index.js index 51935ab46a5c1..98681678ae645 100644 --- a/packages/block-editor/src/components/block-parent/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -12,12 +12,12 @@ import { getBlockType } from '@wordpress/blocks'; import BlockIcon from '../block-icon'; /** - * Block parent component, displaying the hierarchy of the + * Block parent selector component, displaying the hierarchy of the * current block selection as a single icon to "go up" a level. * * @return {WPElement} Block Breadcrumb. */ -const BlockParent = function() { +const BlockParentSelector = function() { const { selectBlock } = useDispatch( 'core/block-editor' ); const { parents } = useSelect( ( select ) => { const { @@ -46,11 +46,11 @@ const BlockParent = function() { if ( parents && parents.length ) { return (