From b54cf0f8df01854feee64369541a595c08219c8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 29 Apr 2020 12:07:28 +0200 Subject: [PATCH] Disable slots/fills in global editor block navigator --- .../components/block-navigation/dropdown.js | 2 +- .../src/components/block-navigation/index.js | 7 +++ .../components/block-navigation/list-item.js | 4 +- .../src/components/block-navigation/list.js | 45 +++++++++++++------ packages/block-editor/src/components/index.js | 2 +- .../block-library/src/navigation-link/edit.js | 17 +++++-- .../src/navigation/block-navigation-list.js | 5 ++- .../src/components/menu-editor/index.js | 1 - .../menu-editor/navigation-structure-panel.js | 5 +-- 9 files changed, 62 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index b230aac4236ad..2d3824fa387e6 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -71,7 +71,7 @@ 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..f83f4f6c28241 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, + withSlots, } ) { if ( ! rootBlocks || rootBlocks.length === 0 ) { return null; @@ -44,6 +45,7 @@ function BlockNavigation( { blocks={ [ rootBlock ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + withSlots={ withSlots } showNestedBlocks /> ) } @@ -52,12 +54,17 @@ function BlockNavigation( { blocks={ rootBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } + withSlots={ withSlots } /> ) } ); } +BlockNavigation.defaultProps = { + withSlots: true, +}; + export default compose( withSelect( ( select ) => { const { 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 7fdc08aaad6e0..c34f4dc3fe985 100644 --- a/packages/block-editor/src/components/block-navigation/list-item.js +++ b/packages/block-editor/src/components/block-navigation/list-item.js @@ -39,7 +39,9 @@ export default function BlockNavigationListItem( { onClick={ onClick } > - { children ? children : getBlockLabel( blockType, block.attributes ) } + { children + ? children + : getBlockLabel( blockType, block.attributes ) } { isSelected && ( { __( '(selected block)' ) } diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index 55438318abf60..f46e43372b315 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/packages/block-editor/src/components/block-navigation/list.js @@ -6,8 +6,8 @@ import { isNil, map, omitBy } from 'lodash'; /** * WordPress dependencies */ -import { Slot, Fill } from "@wordpress/components"; -import { Children, cloneElement } from "@wordpress/element"; +import { Slot, Fill } from '@wordpress/components'; +import { Children, cloneElement } from '@wordpress/element'; /** * Internal dependencies @@ -17,14 +17,19 @@ import ButtonBlockAppender from '../button-block-appender'; const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`; -export const ListItemSlot = ( { blockId, ...props } ) => ; -export const ListItemFill = ( { blockId, ...props } ) => ; +export const ListItemSlot = ( { blockId, ...props } ) => ( + +); +export const ListItemFill = ( { blockId, ...props } ) => ( + +); export default function BlockNavigationList( { blocks, selectedBlockClientId, - onItemClick, + selectBlock, showAppender, + withSlots, // Internal use only. showNestedBlocks, @@ -44,15 +49,27 @@ export default function BlockNavigationList( { const itemProps = { block, isSelected, - onClick: () => onItemClick( block.clientId ) + onClick: () => selectBlock( block.clientId ), }; + const defaultListItem = ; return (
  • - - { ( fills ) => fills.length - ? Children.map( fills, fill => cloneElement( fill, itemProps ) ) - : ( ) } - + { withSlots ? ( + + { ( fills ) => + fills.length + ? Children.map( fills, ( fill ) => + cloneElement( fill, { + ...itemProps, + ...fill.props, + } ) + ) + : defaultListItem + } + + ) : ( + defaultListItem + ) } { showNestedBlocks && !! block.innerBlocks && @@ -62,7 +79,8 @@ export default function BlockNavigationList( { selectedBlockClientId={ selectedBlockClientId } - onItemClick={ onItemClick } + withSlots={ withSlots } + selectBlock={ selectBlock } parentBlockClientId={ block.clientId } showAppender={ showAppender } showNestedBlocks @@ -87,5 +105,6 @@ export default function BlockNavigationList( { } BlockNavigationList.defaultProps = { - onItemClick: () => {} + selectBlock: () => {}, + withSlots: true, }; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 38f3634c54661..baad5592260e1 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -17,7 +17,7 @@ export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { default as __experimentalBlockNavigationList, - ListItemFill as __experimentalBlockNavigationListItemFill + ListItemFill as __experimentalBlockNavigationListItemFill, } from './block-navigation/list'; export { default as __experimentalBlockNavigationListItem } from './block-navigation/list-item'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 974926ae5f03d..44efb40776a29 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -33,7 +33,13 @@ import { __experimentalBlockNavigationListItem as BlockNavigationListItem, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; -import { Fragment, useState, useEffect, useRef, cloneElement } from '@wordpress/element'; +import { + Fragment, + useState, + useEffect, + useRef, + cloneElement, +} from '@wordpress/element'; import { placeCaretAtHorizontalEdge } from '@wordpress/dom'; import { link as linkIcon } from '@wordpress/icons'; @@ -42,6 +48,8 @@ import { link as linkIcon } from '@wordpress/icons'; */ import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons'; +const noop = () => {}; + function NavigationLinkEdit( { attributes, clientId, @@ -216,8 +224,11 @@ function NavigationLinkEdit( { - - {editField} + + { editField } { const { getSelectedBlockClientId, getBlock } = select( @@ -25,7 +25,8 @@ export default function BlockNavigationList( { clientId } ) { <__experimentalBlockNavigationList blocks={ [ block ] } selectedBlockClientId={ selectedBlockClientId } - onItemClick={ selectBlock } + selectBlock={ selectBlock } + withSlots={ withSlots } showNestedBlocks showAppender /> diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index df749336a1366..15726372a91d8 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -46,4 +46,3 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) { ); } - 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 7647abd220900..de40497cc8d71 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 @@ -5,10 +5,7 @@ import { __experimentalBlockNavigationList } from '@wordpress/block-editor'; import { Panel, PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -export default function NavigationStructurePanel( { - blocks, - initialOpen, -} ) { +export default function NavigationStructurePanel( { blocks, initialOpen } ) { return (