From c6e777b34b005c17d0f027f71a4ac3a43b8183a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 28 Apr 2020 14:20:55 +0200 Subject: [PATCH 01/10] First stab at editable menu items in navigator Use Slot/Fill instead of hardcoded components Disable slots/fills in global editor block navigator Grab clientId from context instead of requiring a prop Improve readability of block-navigation/list.js Use context to determine whether or not given BlockNavigation may be customized with slots Restore default value for selectBlock in navigation-structure-panel.js Remove obsolete onChange passed to NavigationStructurePanel Use constant value for BlockNavigationContext Use memo() in BlockStyles Remove performance changes from BlockStyles Generalize BlockNavigationListItem and remove the BlockNavigationListItemFill for now Rename useBlockNavigationSlots to withBlockNavigationSlots Restore RichText in the navigator Sort out BlockNavigationListItem and BlockNavigationListItemWrapper Rename BlockNavigationListItemWrapper to BlockNavigationBranch --- .../components/block-navigation/list-item.js | 58 ++++++++++++ .../src/components/block-navigation/list.js | 91 +++++++++++++------ packages/block-editor/src/components/index.js | 7 +- .../block-library/src/navigation-link/edit.js | 57 ++++++++---- .../components/header/header-toolbar/index.js | 7 +- 5 files changed, 170 insertions(+), 50 deletions(-) create mode 100644 packages/block-editor/src/components/block-navigation/list-item.js diff --git a/packages/block-editor/src/components/block-navigation/list-item.js b/packages/block-editor/src/components/block-navigation/list-item.js new file mode 100644 index 00000000000000..c34f4dc3fe9859 --- /dev/null +++ b/packages/block-editor/src/components/block-navigation/list-item.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { Button, VisuallyHidden } from '@wordpress/components'; +import { + __experimentalGetBlockLabel as getBlockLabel, + getBlockType, +} from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import BlockIcon from '../block-icon'; + +export default function BlockNavigationListItem( { + block, + onClick, + isSelected, + wrapperComponent: WrapperComponent, + children, +} ) { + const blockType = getBlockType( block.name ); + + return ( +
+ + + { children + ? children + : getBlockLabel( blockType, block.attributes ) } + { isSelected && ( + + { __( '(selected block)' ) } + + ) } + +
+ ); +} + +BlockNavigationListItem.defaultProps = { + onClick: () => {}, + wrapperComponent: ( props ) => - + selectBlock( block.clientId ) } + > { showNestedBlocks && !! block.innerBlocks && !! block.innerBlocks.length && ( @@ -78,7 +69,7 @@ export default function BlockNavigationList( { showNestedBlocks /> ) } - + ); } ) } { shouldShowAppender && ( @@ -95,3 +86,43 @@ export default function BlockNavigationList( { /* eslint-enable jsx-a11y/no-redundant-roles */ ); } + +BlockNavigationList.defaultProps = { + selectBlock: () => {}, +}; + +const BlockNavigationBranch = ( { withSlot, children, ...props } ) => { + if ( ! withSlot ) { + return ; + } + + return ( +
  • + + { ( fills ) => { + if ( ! fills.length ) { + return ; + } + + return Children.map( fills, ( fill ) => + cloneElement( fill, { + ...props, + ...fill.props, + } ) + ); + } } + + { children } +
    • + ); +}; + +const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`; + +export const BlockNavigationListItemSlot = ( { blockId, ...props } ) => ( + +); +export const BlockNavigationListItemFill = ( props ) => { + const { clientId } = useContext( BlockListBlockContext ); + return ; +}; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 2e9230b150f70e..8154f8ba291488 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -16,7 +16,12 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; -export { default as __experimentalBlockNavigationList } from './block-navigation/list'; +export { + default as __experimentalBlockNavigationList, + BlockNavigationContext as __experimentalBlockNavigationContext, + BlockNavigationListItemFill as __experimentalBlockNavigationListItemFill, +} from './block-navigation/list'; +export { default as __experimentalBlockNavigationListItem } from './block-navigation/list-item'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export { default as ButtonBlockerAppender } from './button-block-appender'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 60ebdb45a68c7a..d9cc963e82d9e3 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -29,9 +29,17 @@ import { RichText, __experimentalLinkControl as LinkControl, __experimentalBlock as Block, + __experimentalBlockNavigationListItemFill as BlockNavigationListItemFill, + __experimentalBlockNavigationListItem as BlockNavigationListItem, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; -import { Fragment, useState, useEffect, useRef } from '@wordpress/element'; +import { + Fragment, + useState, + useEffect, + useRef, + cloneElement, +} from '@wordpress/element'; import { placeCaretAtHorizontalEdge } from '@wordpress/dom'; import { link as linkIcon } from '@wordpress/icons'; @@ -40,6 +48,8 @@ import { link as linkIcon } from '@wordpress/icons'; */ import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons'; +const noop = () => {}; + function NavigationLinkEdit( { attributes, hasDescendants, @@ -129,6 +139,25 @@ function NavigationLinkEdit( { }; } + const editField = ( + + setAttributes( { label: labelValue } ) + } + placeholder={ itemLabelPlaceholder } + keepPlaceholderOnFocus + withoutInteractiveFormatting + allowedFormats={ [ + 'core/bold', + 'core/italic', + 'core/image', + 'core/strikethrough', + ] } + /> + ); + return ( @@ -193,6 +222,14 @@ function NavigationLinkEdit( { /> + + + { editField } + +
    - - setAttributes( { label: labelValue } ) - } - placeholder={ itemLabelPlaceholder } - keepPlaceholderOnFocus - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } - /> + { cloneElement( editField, { ref } ) } { isLinkOpen && ( - + + + { displayBlockToolbar && (
    From 96d16ec242fd399261ef83ee20c0968a115a804a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 5 May 2020 12:46:10 +0200 Subject: [PATCH 02/10] Move BlockNavigationBranch to a different file --- .../src/components/block-navigation/branch.js | 50 +++++++++++++++++++ .../src/components/block-navigation/list.js | 47 +---------------- packages/block-editor/src/components/index.js | 2 +- .../block-library/src/navigation-link/edit.js | 2 +- 4 files changed, 54 insertions(+), 47 deletions(-) create mode 100644 packages/block-editor/src/components/block-navigation/branch.js diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js new file mode 100644 index 00000000000000..35ab5b226a0112 --- /dev/null +++ b/packages/block-editor/src/components/block-navigation/branch.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { Children, cloneElement, useContext } from '@wordpress/element'; +import { Fill, Slot } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import BlockNavigationListItem from './list-item'; +import { BlockListBlockContext } from '../block-list/block'; + +const BlockNavigationBranch = ( { withSlot, children, ...props } ) => { + if ( ! withSlot ) { + return ; + } + + return ( +
  • + + { ( fills ) => { + if ( ! fills.length ) { + return ; + } + + return Children.map( fills, ( fill ) => + cloneElement( fill, { + ...props, + ...fill.props, + } ) + ); + } } + + { children } +
    • + ); +}; + +export default BlockNavigationBranch; + +const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`; + +export const BlockNavigationListItemSlot = ( { blockId, ...props } ) => ( + +); + +export const BlockNavigationListItemFill = ( props ) => { + const { clientId } = useContext( BlockListBlockContext ); + return ; +}; diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index e9f451d16a43c6..44b3905c3de182 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -6,20 +6,13 @@ import { isNil, map, omitBy } from 'lodash'; /** * WordPress dependencies */ -import { Slot, Fill } from '@wordpress/components'; -import { - Children, - cloneElement, - useContext, - createContext, -} from '@wordpress/element'; +import { useContext, createContext } from '@wordpress/element'; /** * Internal dependencies */ -import BlockNavigationListItem from './list-item'; import ButtonBlockAppender from '../button-block-appender'; -import { BlockListBlockContext } from '../block-list/block'; +import BlockNavigationBranch from './branch'; export const BlockNavigationContext = createContext( { withBlockNavigationSlots: true, @@ -90,39 +83,3 @@ export default function BlockNavigationList( { BlockNavigationList.defaultProps = { selectBlock: () => {}, }; - -const BlockNavigationBranch = ( { withSlot, children, ...props } ) => { - if ( ! withSlot ) { - return ; - } - - return ( -
  • - - { ( fills ) => { - if ( ! fills.length ) { - return ; - } - - return Children.map( fills, ( fill ) => - cloneElement( fill, { - ...props, - ...fill.props, - } ) - ); - } } - - { children } -
    • - ); -}; - -const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`; - -export const BlockNavigationListItemSlot = ( { blockId, ...props } ) => ( - -); -export const BlockNavigationListItemFill = ( props ) => { - const { clientId } = useContext( BlockListBlockContext ); - return ; -}; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 8154f8ba291488..18166b9748cf0b 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -19,8 +19,8 @@ export { default as BlockNavigationDropdown } from './block-navigation/dropdown' export { default as __experimentalBlockNavigationList, BlockNavigationContext as __experimentalBlockNavigationContext, - BlockNavigationListItemFill as __experimentalBlockNavigationListItemFill, } from './block-navigation/list'; +export { BlockNavigationListItemFill as __experimentalBlockNavigationListItemFill } from './block-navigation/branch'; export { default as __experimentalBlockNavigationListItem } from './block-navigation/list-item'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index d9cc963e82d9e3..eb268be29ed89c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -29,8 +29,8 @@ import { RichText, __experimentalLinkControl as LinkControl, __experimentalBlock as Block, - __experimentalBlockNavigationListItemFill as BlockNavigationListItemFill, __experimentalBlockNavigationListItem as BlockNavigationListItem, + __experimentalBlockNavigationListItemFill as BlockNavigationListItemFill, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; import { From 57f929c4746f9fef95c1c847635626c4ee2bf1eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 5 May 2020 13:28:09 +0200 Subject: [PATCH 03/10] Refactor BlockNavigationContext to be an internal detail --- .../src/components/block-navigation/branch.js | 19 +++++++++++---- .../components/block-navigation/dropdown.js | 7 ++++-- .../src/components/block-navigation/index.js | 3 +++ .../src/components/block-navigation/list.js | 23 +++++++++++++++---- .../src/navigation/block-navigation-list.js | 6 ++++- packages/block-library/src/navigation/edit.js | 8 +++++-- .../src/navigation/use-block-navigator.js | 10 ++++++-- .../menu-editor/navigation-structure-panel.js | 1 + .../components/header/header-toolbar/index.js | 7 +----- 9 files changed, 62 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js index 35ab5b226a0112..e31e983f8efedb 100644 --- a/packages/block-editor/src/components/block-navigation/branch.js +++ b/packages/block-editor/src/components/block-navigation/branch.js @@ -1,18 +1,29 @@ /** * WordPress dependencies */ -import { Children, cloneElement, useContext } from '@wordpress/element'; +import { + Children, + cloneElement, + useContext, +} from '@wordpress/element'; import { Fill, Slot } from '@wordpress/components'; /** * Internal dependencies */ import BlockNavigationListItem from './list-item'; +import { BlockNavigationContext } from './list'; import { BlockListBlockContext } from '../block-list/block'; -const BlockNavigationBranch = ( { withSlot, children, ...props } ) => { - if ( ! withSlot ) { - return ; +const BlockNavigationBranch = ( { children, ...props } ) => { + const { withBlockNavigationSlots } = useContext( BlockNavigationContext ); + if ( ! withBlockNavigationSlots ) { + return ( +
  • + + { children } +
    • + ); } return ( diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index b230aac4236add..d86e1973ab52d0 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -53,7 +53,7 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) { ); } -function BlockNavigationDropdown( { isDisabled } ) { +function BlockNavigationDropdown( { isDisabled, withBlockNavigationSlots } ) { const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] @@ -71,7 +71,10 @@ function BlockNavigationDropdown( { isDisabled } ) { /> ) } renderContent={ ( { onClose } ) => ( - + ) } /> ); diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 4d25ffda1bb01e..3fd5076dd8ba61 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -21,6 +21,7 @@ function BlockNavigation( { rootBlocks, selectedBlockClientId, selectBlock, + withBlockNavigationSlots, } ) { if ( ! rootBlocks || rootBlocks.length === 0 ) { return null; @@ -44,6 +45,7 @@ function BlockNavigation( { blocks={ [ rootBlock ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + withBlockNavigationSlots={ withBlockNavigationSlots } showNestedBlocks /> ) } @@ -52,6 +54,7 @@ function BlockNavigation( { blocks={ rootBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + withBlockNavigationSlots={ withBlockNavigationSlots } /> ) } diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index 44b3905c3de182..d28b63dd9af689 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -6,7 +6,7 @@ import { isNil, map, omitBy } from 'lodash'; /** * WordPress dependencies */ -import { useContext, createContext } from '@wordpress/element'; +import { useMemo, createContext } from '@wordpress/element'; /** * Internal dependencies @@ -15,10 +15,10 @@ import ButtonBlockAppender from '../button-block-appender'; import BlockNavigationBranch from './branch'; export const BlockNavigationContext = createContext( { - withBlockNavigationSlots: true, + withBlockNavigationSlots: false, } ); -export default function BlockNavigationList( { +function BlockNavigationList( { blocks, selectedBlockClientId, selectBlock, @@ -28,7 +28,6 @@ export default function BlockNavigationList( { showNestedBlocks, parentBlockClientId, } ) { - const { withBlockNavigationSlots } = useContext( BlockNavigationContext ); const shouldShowAppender = showAppender && !! parentBlockClientId; return ( @@ -42,7 +41,6 @@ export default function BlockNavigationList( { const isSelected = block.clientId === selectedBlockClientId; return ( {}, }; + +export default function BlockNavigationListWrapper( { + withBlockNavigationSlots, + ...props +} ) { + const blockNavigationContext = useMemo( + () => ( { withBlockNavigationSlots } ), + [ withBlockNavigationSlots ] + ); + return ( + + + + ); +} diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js index 43bc0793e057e0..903a8f07e97420 100644 --- a/packages/block-library/src/navigation/block-navigation-list.js +++ b/packages/block-library/src/navigation/block-navigation-list.js @@ -4,7 +4,10 @@ import { __experimentalBlockNavigationList } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; -export default function BlockNavigationList( { clientId } ) { +export default function BlockNavigationList( { + clientId, + withBlockNavigationSlots, +} ) { const { block, selectedBlockClientId } = useSelect( ( select ) => { const { getSelectedBlockClientId, getBlock } = select( @@ -26,6 +29,7 @@ export default function BlockNavigationList( { clientId } ) { blocks={ [ block ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + withBlockNavigationSlots={ withBlockNavigationSlots } showNestedBlocks showAppender /> diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 9e3013682fb1c7..74e62c214e248d 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -82,7 +82,8 @@ function Navigation( { ); const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( - clientId + clientId, + true ); // Builds navigation links from default Pages. @@ -229,7 +230,10 @@ function Navigation( { { navigatorModal } - + ); -export default function useBlockNavigator( clientId ) { +export default function useBlockNavigator( + clientId, + withBlockNavigationSlots +) { const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false ); const navigatorToolbarButton = ( @@ -41,7 +44,10 @@ export default function useBlockNavigator( clientId ) { setIsNavigationListOpen( false ); } } > - + ); diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js index 085260b41863da..5c73c053a2d8d2 100644 --- a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js @@ -24,6 +24,7 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) { blocks={ blocks } selectedBlockClientId={ selectedBlockClientIds[ 0 ] } selectBlock={ selectBlock } + withBlockNavigationSlots={ true } showNestedBlocks showAppender /> diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 047550900c6781..4e386d22cc4f70 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -9,7 +9,6 @@ import { NavigableToolbar, BlockNavigationDropdown, ToolSelector, - __experimentalBlockNavigationContext as BlockNavigationContext, } from '@wordpress/block-editor'; import { TableOfContents, @@ -19,8 +18,6 @@ import { import { Button } from '@wordpress/components'; import { plus } from '@wordpress/icons'; -const blockNavigationContext = { withBlockNavigationSlots: false }; - function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { const { hasFixedToolbar, @@ -80,9 +77,7 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { - - - + { displayBlockToolbar && (
    From edb8c67955cd9e7076a453686438d53d3b39381b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 5 May 2020 15:22:07 +0200 Subject: [PATCH 04/10] Lint --- .../block-editor/src/components/block-navigation/branch.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js index e31e983f8efedb..6070747ca95365 100644 --- a/packages/block-editor/src/components/block-navigation/branch.js +++ b/packages/block-editor/src/components/block-navigation/branch.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -import { - Children, - cloneElement, - useContext, -} from '@wordpress/element'; +import { Children, cloneElement, useContext } from '@wordpress/element'; import { Fill, Slot } from '@wordpress/components'; /** From 528a06ba6ebe046fcfdb55a12bf5545b17ac9504 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 7 May 2020 13:22:09 +0200 Subject: [PATCH 05/10] Rename all occurences of withBlockNavigationSlots to __experimentalWithBlockNavigationSlots --- .../src/components/block-navigation/branch.js | 6 ++++-- .../src/components/block-navigation/dropdown.js | 9 +++++++-- .../src/components/block-navigation/index.js | 10 +++++++--- .../src/components/block-navigation/list.js | 8 ++++---- .../src/navigation/block-navigation-list.js | 6 ++++-- packages/block-library/src/navigation/edit.js | 2 +- .../src/navigation/use-block-navigator.js | 6 ++++-- .../menu-editor/navigation-structure-panel.js | 2 +- 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js index 6070747ca95365..3b3b5839772d1f 100644 --- a/packages/block-editor/src/components/block-navigation/branch.js +++ b/packages/block-editor/src/components/block-navigation/branch.js @@ -12,8 +12,10 @@ import { BlockNavigationContext } from './list'; import { BlockListBlockContext } from '../block-list/block'; const BlockNavigationBranch = ( { children, ...props } ) => { - const { withBlockNavigationSlots } = useContext( BlockNavigationContext ); - if ( ! withBlockNavigationSlots ) { + const { __experimentalWithBlockNavigationSlots } = useContext( + BlockNavigationContext + ); + if ( ! __experimentalWithBlockNavigationSlots ) { return (
  • diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index d86e1973ab52d0..ba0e824c3667c0 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -53,7 +53,10 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) { ); } -function BlockNavigationDropdown( { isDisabled, withBlockNavigationSlots } ) { +function BlockNavigationDropdown( { + isDisabled, + __experimentalWithBlockNavigationSlots, +} ) { const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] @@ -73,7 +76,9 @@ function BlockNavigationDropdown( { isDisabled, withBlockNavigationSlots } ) { renderContent={ ( { onClose } ) => ( ) } /> diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 3fd5076dd8ba61..cd00328440c6e4 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -21,7 +21,7 @@ function BlockNavigation( { rootBlocks, selectedBlockClientId, selectBlock, - withBlockNavigationSlots, + __experimentalWithBlockNavigationSlots, } ) { if ( ! rootBlocks || rootBlocks.length === 0 ) { return null; @@ -45,7 +45,9 @@ function BlockNavigation( { blocks={ [ rootBlock ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } - withBlockNavigationSlots={ withBlockNavigationSlots } + __experimentalWithBlockNavigationSlots={ + __experimentalWithBlockNavigationSlots + } showNestedBlocks /> ) } @@ -54,7 +56,9 @@ function BlockNavigation( { blocks={ rootBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } - withBlockNavigationSlots={ withBlockNavigationSlots } + __experimentalWithBlockNavigationSlots={ + __experimentalWithBlockNavigationSlots + } /> ) } diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index d28b63dd9af689..c8228aba8f32f6 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -15,7 +15,7 @@ import ButtonBlockAppender from '../button-block-appender'; import BlockNavigationBranch from './branch'; export const BlockNavigationContext = createContext( { - withBlockNavigationSlots: false, + __experimentalWithBlockNavigationSlots: false, } ); function BlockNavigationList( { @@ -83,12 +83,12 @@ BlockNavigationList.defaultProps = { }; export default function BlockNavigationListWrapper( { - withBlockNavigationSlots, + __experimentalWithBlockNavigationSlots, ...props } ) { const blockNavigationContext = useMemo( - () => ( { withBlockNavigationSlots } ), - [ withBlockNavigationSlots ] + () => ( { __experimentalWithBlockNavigationSlots } ), + [ __experimentalWithBlockNavigationSlots ] ); return ( diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js index 903a8f07e97420..30edddba26abfd 100644 --- a/packages/block-library/src/navigation/block-navigation-list.js +++ b/packages/block-library/src/navigation/block-navigation-list.js @@ -6,7 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; export default function BlockNavigationList( { clientId, - withBlockNavigationSlots, + __experimentalWithBlockNavigationSlots, } ) { const { block, selectedBlockClientId } = useSelect( ( select ) => { @@ -29,7 +29,9 @@ export default function BlockNavigationList( { blocks={ [ block ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } - withBlockNavigationSlots={ withBlockNavigationSlots } + __experimentalWithBlockNavigationSlots={ + __experimentalWithBlockNavigationSlots + } showNestedBlocks showAppender /> diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 74e62c214e248d..4f9c708d20592f 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -232,7 +232,7 @@ function Navigation( { diff --git a/packages/block-library/src/navigation/use-block-navigator.js b/packages/block-library/src/navigation/use-block-navigator.js index e2f2ceed302139..c71552a38407a9 100644 --- a/packages/block-library/src/navigation/use-block-navigator.js +++ b/packages/block-library/src/navigation/use-block-navigator.js @@ -23,7 +23,7 @@ const NavigatorIcon = ( export default function useBlockNavigator( clientId, - withBlockNavigationSlots + __experimentalWithBlockNavigationSlots ) { const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false ); @@ -46,7 +46,9 @@ export default function useBlockNavigator( > ); diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js index 5c73c053a2d8d2..353d7b04a2a19a 100644 --- a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js @@ -24,7 +24,7 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) { blocks={ blocks } selectedBlockClientId={ selectedBlockClientIds[ 0 ] } selectBlock={ selectBlock } - withBlockNavigationSlots={ true } + __experimentalWithBlockNavigationSlots={ true } showNestedBlocks showAppender /> From 3840737518e632bb19ca1ef4849397bef2342503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 7 May 2020 13:22:43 +0200 Subject: [PATCH 06/10] Remove export of BlockNavigationContext --- packages/block-editor/src/components/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 18166b9748cf0b..ebc42de4eece2d 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -16,10 +16,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; -export { - default as __experimentalBlockNavigationList, - BlockNavigationContext as __experimentalBlockNavigationContext, -} from './block-navigation/list'; +export { default as __experimentalBlockNavigationList } from './block-navigation/list'; export { BlockNavigationListItemFill as __experimentalBlockNavigationListItemFill } from './block-navigation/branch'; export { default as __experimentalBlockNavigationListItem } from './block-navigation/list-item'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; From 774ba8ea55971ea2243a2fd2a2e7fed7579046e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 7 May 2020 13:24:40 +0200 Subject: [PATCH 07/10] Adjust class names --- .../src/components/block-navigation/list-item.js | 4 ++-- .../block-editor/src/components/block-navigation/style.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/list-item.js b/packages/block-editor/src/components/block-navigation/list-item.js index c34f4dc3fe9859..965f2d648e8b05 100644 --- a/packages/block-editor/src/components/block-navigation/list-item.js +++ b/packages/block-editor/src/components/block-navigation/list-item.js @@ -28,10 +28,10 @@ export default function BlockNavigationListItem( { const blockType = getBlockType( block.name ); return ( -
    +
    Date: Fri, 8 May 2020 10:23:49 +0200 Subject: [PATCH 08/10] Remove the fill from edit.js for now --- .../block-library/src/navigation-link/edit.js | 50 +++++++------------ 1 file changed, 17 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index eb268be29ed89c..0673d243cc0b57 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -29,8 +29,6 @@ import { RichText, __experimentalLinkControl as LinkControl, __experimentalBlock as Block, - __experimentalBlockNavigationListItem as BlockNavigationListItem, - __experimentalBlockNavigationListItemFill as BlockNavigationListItemFill, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; import { @@ -38,7 +36,6 @@ import { useState, useEffect, useRef, - cloneElement, } from '@wordpress/element'; import { placeCaretAtHorizontalEdge } from '@wordpress/dom'; import { link as linkIcon } from '@wordpress/icons'; @@ -48,8 +45,6 @@ import { link as linkIcon } from '@wordpress/icons'; */ import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons'; -const noop = () => {}; - function NavigationLinkEdit( { attributes, hasDescendants, @@ -139,25 +134,6 @@ function NavigationLinkEdit( { }; } - const editField = ( - - setAttributes( { label: labelValue } ) - } - placeholder={ itemLabelPlaceholder } - keepPlaceholderOnFocus - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } - /> - ); - return ( @@ -222,14 +198,6 @@ function NavigationLinkEdit( { /> - - - { editField } - -
    - { cloneElement( editField, { ref } ) } + + setAttributes( { label: labelValue } ) + } + placeholder={ itemLabelPlaceholder } + keepPlaceholderOnFocus + withoutInteractiveFormatting + allowedFormats={ [ + 'core/bold', + 'core/italic', + 'core/image', + 'core/strikethrough', + ] } + /> { isLinkOpen && ( Date: Fri, 8 May 2020 15:39:01 +0200 Subject: [PATCH 09/10] Update class name in e2e tests --- packages/e2e-tests/specs/editor/blocks/columns.test.js | 2 +- .../e2e-tests/specs/editor/plugins/block-icons.test.js | 2 +- .../editor/various/block-hierarchy-navigation.test.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js index b92e763d9bf041..c4ce364df6f241 100644 --- a/packages/e2e-tests/specs/editor/blocks/columns.test.js +++ b/packages/e2e-tests/specs/editor/blocks/columns.test.js @@ -21,7 +21,7 @@ describe( 'Columns', () => { await page.click( '[aria-label="Block navigation"]' ); const columnBlockMenuItem = ( await page.$x( - '//button[contains(concat(" ", @class, " "), " block-editor-block-navigation__item-button ")][text()="Column"]' + '//button[contains(concat(" ", @class, " "), " block-editor-block-navigation__list-item-button ")][text()="Column"]' ) )[ 0 ]; await columnBlockMenuItem.click(); diff --git a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js index fd506d98fb3f7a..56d93927d30d0c 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js +++ b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js @@ -40,7 +40,7 @@ async function getFirstInserterIcon() { async function selectFirstBlock() { await pressKeyWithModifier( 'access', 'o' ); const navButtons = await page.$$( - '.block-editor-block-navigation__item-button' + '.block-editor-block-navigation__list-item-button' ); await navButtons[ 0 ].click(); } diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 63ae6d57ecd1fb..e4ce4f002cd1e5 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -13,7 +13,7 @@ import { async function openBlockNavigator() { await pressKeyWithModifier( 'access', 'o' ); await page.waitForSelector( - '.block-editor-block-navigation__item-button.is-selected' + '.block-editor-block-navigation__list-item-button.is-selected' ); } @@ -38,7 +38,7 @@ describe( 'Navigating the block hierarchy', () => { await page.click( '[aria-label="Block navigation"]' ); const columnsBlockMenuItem = ( await page.$x( - "//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Columns')]" + "//button[contains(@class,'block-editor-block-navigation__list-item') and contains(text(), 'Columns')]" ) )[ 0 ]; await columnsBlockMenuItem.click(); @@ -57,7 +57,7 @@ describe( 'Navigating the block hierarchy', () => { await page.click( '[aria-label="Block navigation"]' ); const lastColumnsBlockMenuItem = ( await page.$x( - "//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Column')]" + "//button[contains(@class,'block-editor-block-navigation__list-item') and contains(text(), 'Column')]" ) )[ 3 ]; await lastColumnsBlockMenuItem.click(); @@ -163,7 +163,7 @@ describe( 'Navigating the block hierarchy', () => { await page.click( '[aria-label="Block navigation"]' ); const groupMenuItem = ( await page.$x( - "//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Group')]" + "//button[contains(@class,'block-editor-block-navigation__list-item') and contains(text(), 'Group')]" ) )[ 0 ]; await groupMenuItem.click(); From a038c0a3d1ce78c07f064a50fd79cc1a44b717e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Fri, 8 May 2020 15:39:53 +0200 Subject: [PATCH 10/10] Link --- packages/block-library/src/navigation-link/edit.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 0673d243cc0b57..60ebdb45a68c7a 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -31,12 +31,7 @@ import { __experimentalBlock as Block, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; -import { - Fragment, - useState, - useEffect, - useRef, -} from '@wordpress/element'; +import { Fragment, useState, useEffect, useRef } from '@wordpress/element'; import { placeCaretAtHorizontalEdge } from '@wordpress/dom'; import { link as linkIcon } from '@wordpress/icons';