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 0000000000000..c34f4dc3fe985 --- /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 2e9230b150f70..8154f8ba29148 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 60ebdb45a68c7..d9cc963e82d9e 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 0000000000000..35ab5b226a011 --- /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 e9f451d16a43c..44b3905c3de18 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 8154f8ba29148..18166b9748cf0 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 d9cc963e82d9e..eb268be29ed89 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 35ab5b226a011..e31e983f8efed 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 b230aac4236ad..d86e1973ab52d 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 4d25ffda1bb01..3fd5076dd8ba6 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 44b3905c3de18..d28b63dd9af68 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 43bc0793e057e..903a8f07e9742 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 9e3013682fb1c..74e62c214e248 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 085260b41863d..5c73c053a2d8d 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 047550900c678..4e386d22cc4f7 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 e31e983f8efed..6070747ca9536 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 6070747ca9536..3b3b5839772d1 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 d86e1973ab52d..ba0e824c3667c 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 3fd5076dd8ba6..cd00328440c6e 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 d28b63dd9af68..c8228aba8f32f 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 903a8f07e9742..30edddba26abf 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 74e62c214e248..4f9c708d20592 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 e2f2ceed30213..c71552a38407a 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 5c73c053a2d8d..353d7b04a2a19 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 18166b9748cf0..ebc42de4eece2 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 c34f4dc3fe985..965f2d648e8b0 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 eb268be29ed89..0673d243cc0b5 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 b92e763d9bf04..c4ce364df6f24 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 fd506d98fb3f7..56d93927d30d0 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 63ae6d57ecd1f..e4ce4f002cd1e 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 0673d243cc0b5..60ebdb45a68c7 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';