diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e7cb6414121292..2048c343227536 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-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js new file mode 100644 index 00000000000000..7fb79764bbe477 --- /dev/null +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -0,0 +1,60 @@ +/** + * WordPress dependencies + */ +import { getBlockType } from '@wordpress/blocks'; +import { Button } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import BlockIcon from '../block-icon'; + +/** + * Block parent selector component, displaying the hierarchy of the + * current block selection as a single icon to "go up" a level. + * + * @return {WPComponent} Parent block selector. + */ +export default function BlockParentSelector() { + const { selectBlock } = useDispatch( 'core/block-editor' ); + const { parentBlockType, firstParentClientId } = useSelect( ( select ) => { + const { + getBlockName, + getBlockParents, + getSelectedBlockClientId, + } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); + const parents = getBlockParents( selectedBlockClientId ); + const _firstParentClientId = parents[ parents.length - 1 ]; + const parentBlockName = getBlockName( _firstParentClientId ); + return { + parentBlockType: getBlockType( parentBlockName ), + firstParentClientId: _firstParentClientId, + }; + }, [] ); + + if ( firstParentClientId !== undefined ) { + return ( +
+
+ ); + } + + return null; +} diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss new file mode 100644 index 00000000000000..ffe18863d8d1bc --- /dev/null +++ b/packages/block-editor/src/components/block-parent-selector/style.scss @@ -0,0 +1,14 @@ +.block-editor-block-parent-selector { + background: $white; + border: 1px solid $dark-gray-primary; + border-radius: $radius-block-ui; + padding: 8px; + line-height: 1; + + .block-editor-block-parent-selector__button { + width: 32px; + min-width: auto; + height: 32px; + padding: 0; + } +} diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index cc1c1b5d8d548c..85c868702d4364 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -100,7 +100,7 @@ export class BlockSwitcher extends Component { } /> @@ -140,7 +140,7 @@ export class BlockSwitcher extends Component { onClick={ onToggle } aria-haspopup="true" aria-expanded={ isOpen } - label={ label } + title={ label } onKeyDown={ openOnArrowDown } showTooltip icon={ } diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap index 0c98e6d00431bd..5dc22def8ff0af 100644 --- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap @@ -20,7 +20,7 @@ exports[`BlockSwitcher should render disabled block switcher with multi block of showColors={true} /> } - label="Block icon" + title="Block icon" /> `; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index d2dc21fff63c20..a96b3aa123b71b 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -12,6 +12,7 @@ import { useViewportMatch } from '@wordpress/compose'; * Internal dependencies */ import BlockMover from '../block-mover'; +import BlockParentSelector from '../block-parent-selector'; import BlockSwitcher from '../block-switcher'; import BlockControls from '../block-controls'; import BlockFormatControls from '../block-format-controls'; @@ -88,6 +89,7 @@ export default function BlockToolbar( { hideDragHandle } ) { const classes = classnames( 'block-editor-block-toolbar', + shouldShowMovers && 'is-showing-movers', ! displayHeaderToolbar && 'has-responsive-movers' ); @@ -97,6 +99,12 @@ export default function BlockToolbar( { hideDragHandle } ) { className="block-editor-block-toolbar__mover-switcher-container" ref={ nodeRef } > + { ! isMultiToolbar && ( +
+ +
+ ) } +
+ { ( shouldShowVisualToolbar || isMultiToolbar ) && (
) }
+ { shouldShowVisualToolbar && ! isMultiToolbar && ( <>