Make parts of the BlockNavigationList overridable using slots

packages/block-editor/src/components/block-navigation/branch.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+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 = ( { children, ...props } ) => {
+ const { __experimentalWithBlockNavigationSlots } = useContext(
+ BlockNavigationContext
+ );
+ if ( ! __experimentalWithBlockNavigationSlots ) {
+ return (
+ <li>
+ <BlockNavigationListItem { ...props } />
+ { children }
+ </li>
+ );
+ }
+
+ return (
+ <li>
+ <BlockNavigationListItemSlot blockId={ props.block.clientId }>
+ { ( fills ) => {
+ if ( ! fills.length ) {
+ return <BlockNavigationListItem { ...props } />;
+ }
+
+ return Children.map( fills, ( fill ) =>
+ cloneElement( fill, {
+ ...props,
+ ...fill.props,
+ } )
+ );
+ } }
+ </BlockNavigationListItemSlot>
+ { children }
+ </li>
+ );
+};
+
+export default BlockNavigationBranch;
+
+const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`;
+
+export const BlockNavigationListItemSlot = ( { blockId, ...props } ) => (
+ <Slot { ...props } name={ listItemSlotName( blockId ) } />
+);
+
+export const BlockNavigationListItemFill = ( props ) => {
+ const { clientId } = useContext( BlockListBlockContext );
+ return <Fill { ...props } name={ listItemSlotName( clientId ) } />;
+};

packages/block-editor/src/components/block-navigation/dropdown.js

@@ -53,7 +53,10 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
  );
 }
 
-function BlockNavigationDropdown( { isDisabled } ) {
+function BlockNavigationDropdown( {
+ isDisabled,
+ __experimentalWithBlockNavigationSlots,
+} ) {
  const hasBlocks = useSelect(
  ( select ) => !! select( 'core/block-editor' ).getBlockCount(),
  []
@@ -71,7 +74,12 @@ function BlockNavigationDropdown( { isDisabled } ) {
  />
  ) }
  renderContent={ ( { onClose } ) => (
- <BlockNavigation onSelect={ onClose } />
+ <BlockNavigation
+ onSelect={ onClose }
+ __experimentalWithBlockNavigationSlots={
+ __experimentalWithBlockNavigationSlots
+ }
+ />
  ) }
  />
  );

packages/block-editor/src/components/block-navigation/index.js

@@ -21,6 +21,7 @@ function BlockNavigation( {
  rootBlocks,
  selectedBlockClientId,
  selectBlock,
+ __experimentalWithBlockNavigationSlots,
 } ) {
  if ( ! rootBlocks || rootBlocks.length === 0 ) {
  return null;
@@ -44,6 +45,9 @@ function BlockNavigation( {
  blocks={ [ rootBlock ] }
  selectedBlockClientId={ selectedBlockClientId }
  selectBlock={ selectBlock }
+ __experimentalWithBlockNavigationSlots={
+ __experimentalWithBlockNavigationSlots
+ }
  showNestedBlocks
  />
  ) }
@@ -52,6 +56,9 @@ function BlockNavigation( {
  blocks={ rootBlocks }
  selectedBlockClientId={ selectedBlockClientId }
  selectBlock={ selectBlock }
+ __experimentalWithBlockNavigationSlots={
+ __experimentalWithBlockNavigationSlots
+ }
  />
  ) }
  </NavigableMenu>

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 (
+ <div className="block-editor-block-navigation__list-item">
+ <WrapperComponent
+ className={ classnames(
+ 'block-editor-block-navigation__list-item-button',
+ {
+ 'is-selected': isSelected,
+ }
+ ) }
+ onClick={ onClick }
+ >
+ <BlockIcon icon={ blockType.icon } showColors />
+ { children
+ ? children
+ : getBlockLabel( blockType, block.attributes ) }
+ { isSelected && (
+ <VisuallyHidden as="span">
+ { __( '(selected block)' ) }
+ </VisuallyHidden>
+ ) }
+ </WrapperComponent>
+ </div>
+ );
+}
+
+BlockNavigationListItem.defaultProps = {
+ onClick: () => {},
+ wrapperComponent: ( props ) => <Button { ...props } />,
+};

packages/block-editor/src/components/block-navigation/list.js

@@ -2,25 +2,23 @@
  * External dependencies
  */
 import { isNil, map, omitBy } from 'lodash';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
-import {
- __experimentalGetBlockLabel as getBlockLabel,
- getBlockType,
-} from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { useMemo, createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import BlockIcon from '../block-icon';
 import ButtonBlockAppender from '../button-block-appender';
+import BlockNavigationBranch from './branch';
 
-export default function BlockNavigationList( {
+export const BlockNavigationContext = createContext( {
+ __experimentalWithBlockNavigationSlots: false,
+} );
+
+function BlockNavigationList( {
  blocks,
  selectedBlockClientId,
  selectBlock,
@@ -40,30 +38,14 @@ export default function BlockNavigationList( {
  /* eslint-disable jsx-a11y/no-redundant-roles */
  <ul className="block-editor-block-navigation__list" role="list">
  { map( omitBy( blocks, isNil ), ( block ) => {
- const blockType = getBlockType( block.name );
  const isSelected = block.clientId === selectedBlockClientId;
-
  return (
- <li key={ block.clientId }>
- <div className="block-editor-block-navigation__item">
- <Button
- className={ classnames(
- 'block-editor-block-navigation__item-button',
- {
- 'is-selected': isSelected,
- }
- ) }
- onClick={ () => selectBlock( block.clientId ) }
- >
- <BlockIcon icon={ blockType.icon } showColors />
- { getBlockLabel( blockType, block.attributes ) }
- { isSelected && (
- <VisuallyHidden as="span">
- { __( '(selected block)' ) }
- </VisuallyHidden>
- ) }
- </Button>
- </div>
+ <BlockNavigationBranch
+ block={ block }
+ key={ block.clientId }
+ isSelected={ isSelected }
+ onClick={ () => selectBlock( block.clientId ) }
+ >
  { showNestedBlocks &&
  !! block.innerBlocks &&
  !! block.innerBlocks.length && (
@@ -78,7 +60,7 @@ export default function BlockNavigationList( {
  showNestedBlocks
  />
  ) }
- </li>
+ </BlockNavigationBranch>
  );
  } ) }
  { shouldShowAppender && (
@@ -95,3 +77,22 @@ export default function BlockNavigationList( {
  /* eslint-enable jsx-a11y/no-redundant-roles */
  );
 }
+
+BlockNavigationList.defaultProps = {
+ selectBlock: () => {},
+};
+
+export default function BlockNavigationListWrapper( {
+ __experimentalWithBlockNavigationSlots,
+ ...props
+} ) {
+ const blockNavigationContext = useMemo(
+ () => ( { __experimentalWithBlockNavigationSlots } ),
+ [ __experimentalWithBlockNavigationSlots ]
+ );
+ return (
+ <BlockNavigationContext.Provider value={ blockNavigationContext }>
+ <BlockNavigationList { ...props } />
+ </BlockNavigationContext.Provider>
+ );
+}

packages/block-editor/src/components/block-navigation/style.scss

@@ -34,7 +34,7 @@ $tree-item-height: 36px;
  margin-left: 1.5em;
  }
 
- .block-editor-block-navigation__item {
+ .block-editor-block-navigation__list-item {
  position: relative;
 
  &::before {
@@ -48,7 +48,7 @@ $tree-item-height: 36px;
  }
  }
 
- .block-editor-block-navigation__item-button {
+ .block-editor-block-navigation__list-item-button {
  margin-left: 0.8em;
  width: calc(100% - 0.8em);
  height: auto;
@@ -68,7 +68,7 @@ $tree-item-height: 36px;
  }
 }
 
-.block-editor-block-navigation__item-button {
+.block-editor-block-navigation__list-item-button {
  display: flex;
  align-items: center;
  width: 100%;

packages/block-editor/src/components/index.js

@@ -17,6 +17,8 @@ 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 { 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';
 export { default as ButtonBlockerAppender } from './button-block-appender';

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,
+ __experimentalWithBlockNavigationSlots,
+} ) {
  const { block, selectedBlockClientId } = useSelect(
  ( select ) => {
  const { getSelectedBlockClientId, getBlock } = select(
@@ -26,6 +29,9 @@ export default function BlockNavigationList( { clientId } ) {
  blocks={ [ block ] }
  selectedBlockClientId={ selectedBlockClientId }
  selectBlock={ selectBlock }
+ __experimentalWithBlockNavigationSlots={
+ __experimentalWithBlockNavigationSlots
+ }
  showNestedBlocks
  showAppender
  />

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 }
  <InspectorControls>
  <PanelBody title={ __( 'Navigation Structure' ) }>
- <BlockNavigationList clientId={ clientId } />
+ <BlockNavigationList
+ clientId={ clientId }
+ __experimentalWithBlockNavigationSlots
+ />
  </PanelBody>
  <PanelBody title={ __( 'Text settings' ) }>
  <FontSizePicker

packages/block-library/src/navigation/use-block-navigator.js

@@ -21,7 +21,10 @@ const NavigatorIcon = (
  </SVG>
 );
 
-export default function useBlockNavigator( clientId ) {
+export default function useBlockNavigator(
+ clientId,
+ __experimentalWithBlockNavigationSlots
+) {
  const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false );
 
  const navigatorToolbarButton = (
@@ -41,7 +44,12 @@ export default function useBlockNavigator( clientId ) {
  setIsNavigationListOpen( false );
  } }
  >
- <BlockNavigationList clientId={ clientId } />
+ <BlockNavigationList
+ clientId={ clientId }
+ __experimentalWithBlockNavigationSlots={
+ __experimentalWithBlockNavigationSlots
+ }
+ />
  </Modal>
  );
 

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();

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();
 }