From a890b5c0867a610fc82c72e7281a9fbcc43d17af Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 25 Oct 2019 15:02:02 +0800 Subject: [PATCH 1/5] Add appender to Block Navigator --- .../src/components/block-navigation/list.js | 16 ++++++++++++++++ .../src/components/block-navigation/style.scss | 18 ++++++++++++++++++ .../navigation-menu/block-navigation-list.js | 1 + 3 files changed, 35 insertions(+) diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index a0910caf5b41cc..0a4a9b4a80e82f 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -16,6 +16,7 @@ import { create, getTextContent } from '@wordpress/rich-text'; * Internal dependencies */ import BlockIcon from '../block-icon'; +import BlockListAppender from '../button-block-appender'; /** * Get the block display name, if it has one, or the block title if it doesn't. @@ -43,8 +44,14 @@ export default function BlockNavigationList( { blocks, selectedBlockClientId, selectBlock, + showAppender, + + // Internal use only. showNestedBlocks, + parentBlockClientId, } ) { + const shouldShowAppender = showAppender && !! parentBlockClientId; + return ( /* * Disable reason: The `list` ARIA role is redundant but @@ -75,12 +82,21 @@ export default function BlockNavigationList( { blocks={ block.innerBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + parentBlockClientId={ block.clientId } + showAppender={ showAppender } showNestedBlocks /> ) } ); } ) } + { shouldShowAppender && ( +
  • +
    + +
    +
    • + ) } /* eslint-enable jsx-a11y/no-redundant-roles */ ); diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index fbd5a71c989bdb..737353fedf67bc 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -16,6 +16,24 @@ $tree-item-height: 36px; margin: 0; } +.block-editor-block-navigation__list .block-editor-button-block-appender { + outline: none; + background: none; + padding: $grid-size; + margin-left: 0.8em; + width: $icon-button-size; + border-radius: 4px; + + &:hover:not(:disabled):not([aria-disabled="true"]) { + @include menu-style__hover; + outline: none; + } + + &:focus:not(:disabled):not([aria-disabled="true"]) { + @include menu-style__focus; + } +} + .block-editor-block-navigation__list .block-editor-block-navigation__list { margin-top: 2px; border-left: $tree-border-width solid $light-gray-900; diff --git a/packages/block-library/src/navigation-menu/block-navigation-list.js b/packages/block-library/src/navigation-menu/block-navigation-list.js index f984c27e5d688f..77adcd01cae366 100644 --- a/packages/block-library/src/navigation-menu/block-navigation-list.js +++ b/packages/block-library/src/navigation-menu/block-navigation-list.js @@ -35,6 +35,7 @@ export default function BlockNavigationList( { clientId } ) { selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } showNestedBlocks + showAppender /> ); } From 519c4afa9a4b6b3d865c8e8c962663b282f45f95 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 30 Oct 2019 17:08:37 +0800 Subject: [PATCH 2/5] Use correct name for component --- packages/block-editor/src/components/block-navigation/list.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index 0a4a9b4a80e82f..2011b2ae1e5321 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -16,7 +16,7 @@ import { create, getTextContent } from '@wordpress/rich-text'; * Internal dependencies */ import BlockIcon from '../block-icon'; -import BlockListAppender from '../button-block-appender'; +import ButtonBlockAppender from '../button-block-appender'; /** * Get the block display name, if it has one, or the block title if it doesn't. @@ -93,7 +93,7 @@ export default function BlockNavigationList( { { shouldShowAppender && (
  • - +
    • ) } From 6f817bbd1d1793f2e49fa681ce9aa30cd15e9578 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 30 Oct 2019 17:57:06 +0800 Subject: [PATCH 3/5] Avoid selecting block on insert --- .../src/components/block-navigation/list.js | 5 ++++- .../src/components/button-block-appender/index.js | 3 ++- .../block-editor/src/components/inserter/index.js | 15 +++++++++++++-- .../block-editor/src/components/inserter/menu.js | 12 +++++++++--- 4 files changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index 2011b2ae1e5321..5ee630b7f5afb4 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -93,7 +93,10 @@ export default function BlockNavigationList( { { shouldShowAppender && (
  • - +
    • ) } diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 1cbbb5980903a2..e3e81f61cb0f51 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -15,12 +15,13 @@ import { _x, sprintf } from '@wordpress/i18n'; import BlockDropZone from '../block-drop-zone'; import Inserter from '../inserter'; -function ButtonBlockAppender( { rootClientId, className } ) { +function ButtonBlockAppender( { rootClientId, className, __experimentalSelectBlockOnInsert: selectBlockOnInsert } ) { return ( <> { let label; if ( hasSingleBlockType ) { diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 012ca34ef2eef4..6fc5f13ae18618 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -90,7 +90,13 @@ class Inserter extends Component { * @return {WPElement} Dropdown content element. */ renderContent( { onClose } ) { - const { rootClientId, clientId, isAppender, showInserterHelpPanel } = this.props; + const { + rootClientId, + clientId, + isAppender, + showInserterHelpPanel, + __experimentalSelectBlockOnInsert: selectBlockOnInsert, + } = this.props; return ( ); } @@ -133,10 +140,12 @@ export default compose( [ const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId ); const hasSingleBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 ); + let allowedBlockType = false; if ( hasSingleBlockType ) { allowedBlockType = allowedBlocks[ 0 ]; } + return { hasItems: hasInserterItems( rootClientId ), hasSingleBlockType, @@ -151,6 +160,7 @@ export default compose( [ const { hasSingleBlockType, allowedBlockType, + __experimentalSelectBlockOnInsert: selectBlockOnInsert, } = ownProps; if ( ! hasSingleBlockType ) { @@ -187,7 +197,8 @@ export default compose( [ insertBlock( blockToInsert, getInsertionIndex(), - rootClientId + rootClientId, + selectBlockOnInsert ); }, }; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7522c553698653..873e69cf1557ad 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -531,21 +531,27 @@ export default compose( const { getSelectedBlock, } = select( 'core/block-editor' ); - const { isAppender } = ownProps; + const { + isAppender, + onSelect, + __experimentalSelectBlockOnInsert: selectBlockOnInsert, + } = ownProps; const { name, initialAttributes } = item; const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes ); + if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) { replaceBlocks( selectedBlock.clientId, insertedBlock ); } else { insertBlock( insertedBlock, getInsertionIndex(), - ownProps.destinationRootClientId + ownProps.destinationRootClientId, + selectBlockOnInsert ); } - ownProps.onSelect(); + onSelect(); return insertedBlock; }, }; From 85eaa1f5b884b3b3b1f31cb1ecc536ea1bef2fa7 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 31 Oct 2019 17:18:00 +0800 Subject: [PATCH 4/5] Add spoken message indicating block has been inserted --- packages/block-editor/src/components/inserter/index.js | 10 ++++++++++ packages/block-editor/src/components/inserter/menu.js | 9 ++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 6fc5f13ae18618..4964cf54f821ea 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -5,6 +5,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ +import { speak } from '@wordpress/a11y'; import { __, _x, sprintf } from '@wordpress/i18n'; import { Dropdown, IconButton } from '@wordpress/components'; import { Component } from '@wordpress/element'; @@ -112,9 +113,11 @@ class Inserter extends Component { render() { const { position, hasSingleBlockType, insertOnlyAllowedBlock } = this.props; + if ( hasSingleBlockType ) { return this.renderToggle( { onToggle: insertOnlyAllowedBlock } ); } + return ( Date: Tue, 5 Nov 2019 15:47:34 +0800 Subject: [PATCH 5/5] Use CSS to hide inner blocks instead of conditional rendering. Solves an issue where allowedBlocks for menu items are not registered until the menu item is clicked on --- .../block-library/src/navigation-menu-item/edit.js | 10 ++++------ .../block-library/src/navigation-menu-item/editor.scss | 9 +++++++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 2755acf775b0bf..b1e6ab69f24df5 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -193,12 +193,10 @@ function NavigationMenuItemEdit( { placeholder={ __( 'Add item…' ) } withoutInteractiveFormatting /> - { ( isSelected || isParentOfSelectedBlock ) && - - } + ); diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss index 6ac463a5cc0258..ddb17939c4ba4f 100644 --- a/packages/block-library/src/navigation-menu-item/editor.scss +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -21,6 +21,15 @@ // and the edit container should compensate. // This is to make sure the edit and view are the same. padding: 0 $grid-size; + + // Only display inner blocks when the block is being edited. + .block-editor-inner-blocks { + display: none; + } + + &.is-editing .block-editor-inner-blocks { + display: block; + } } .wp-block-navigation-menu-item__edit-container {