Use Slot/Fill instead of hardcoded components

WordPress · Apr 29, 2020 · 8f4efb4 · 8f4efb4
1 parent e7c6988
commit 8f4efb4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 73 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
@@ -23,7 +23,7 @@ export default function BlockNavigationListItem( {
 	onClick,
 	isSelected,
 	wrapperComponent: WrapperComponent,
-	labelComponent: LabelComponent,
+	children,
 } ) {
 	const blockType = getBlockType( block.name );
 
@@ -39,10 +39,7 @@ export default function BlockNavigationListItem( {
 				onClick={ onClick }
 			>
 				<BlockIcon icon={ blockType.icon } showColors />
-				<LabelComponent
-					block={ block }
-					label={ getBlockLabel( blockType, block.attributes ) }
-				/>
+				{ children ? children : getBlockLabel( blockType, block.attributes ) }
 				{ isSelected && (
 					<VisuallyHidden as="span">
 						{ __( '(selected block)' ) }
@@ -55,6 +52,5 @@ export default function BlockNavigationListItem( {
 
 BlockNavigationListItem.defaultProps = {
 	onClick: () => {},
-	labelComponent: ( { label } ) => label,
 	wrapperComponent: ( props ) => <Button { ...props } />,
 };
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
@@ -3,18 +3,28 @@
  */
 import { isNil, map, omitBy } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { Slot, Fill } from "@wordpress/components";
+import { Children, cloneElement } from "@wordpress/element";
+
 /**
  * Internal dependencies
  */
-import BlockNavigationListItem from './list-item';
+import ListItem from './list-item';
 import ButtonBlockAppender from '../button-block-appender';
 
+const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`;
+
+export const ListItemSlot = ( { blockId, ...props } ) => <Slot { ...props } name={ listItemSlotName( blockId ) }/>;
+export const ListItemFill = ( { blockId, ...props } ) => <Fill { ...props } name={ listItemSlotName( blockId ) }/>;
+
 export default function BlockNavigationList( {
 	blocks,
 	selectedBlockClientId,
 	onItemClick,
 	showAppender,
-	listItemComponent: ListItemComponent,
 
 	// Internal use only.
 	showNestedBlocks,
@@ -31,13 +41,19 @@ export default function BlockNavigationList( {
 		<ul className="block-editor-block-navigation__list" role="list">
 			{ map( omitBy( blocks, isNil ), ( block ) => {
 				const isSelected = block.clientId === selectedBlockClientId;
+				const itemProps = {
+					block,
+					isSelected,
+					onClick: () => onItemClick( block.clientId )
+				};
 				return (
 					<li key={ block.clientId }>
-						<ListItemComponent
-							block={ block }
-							isSelected={ isSelected }
-							onClick={ () => onItemClick( block.clientId ) }
-						/>
+						<ListItemSlot blockId={ block.clientId }>
+							{ ( fills ) => fills.length
+								? Children.map( fills, fill => cloneElement( fill, itemProps ) )
+								: ( <ListItem { ...itemProps } key="item1" /> ) }
+						</ListItemSlot>
+
 						{ showNestedBlocks &&
 							!! block.innerBlocks &&
 							!! block.innerBlocks.length && (
@@ -48,7 +64,6 @@ export default function BlockNavigationList( {
 									}
 									onItemClick={ onItemClick }
 									parentBlockClientId={ block.clientId }
-									listItemComponent={ ListItemComponent }
 									showAppender={ showAppender }
 									showNestedBlocks
 								/>
@@ -72,6 +87,5 @@ export default function BlockNavigationList( {
 }
 
 BlockNavigationList.defaultProps = {
-	onItemClick: () => {},
-	listItemComponent: BlockNavigationListItem,
+	onItemClick: () => {}
 };
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -15,7 +15,10 @@ 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,
+	ListItemFill 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';

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -29,9 +29,11 @@ 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';
 
@@ -42,6 +44,7 @@ import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons';
 
 function NavigationLinkEdit( {
 	attributes,
+	clientId,
 	hasDescendants,
 	isSelected,
 	isParentOfSelectedBlock,
@@ -129,6 +132,25 @@ function NavigationLinkEdit( {
 		};
 	}
 
+	const editField = (
+		<RichText
+			className="wp-block-navigation-link__label"
+			value={ label }
+			onChange={ ( labelValue ) =>
+				setAttributes( { label: labelValue } )
+			}
+			placeholder={ itemLabelPlaceholder }
+			keepPlaceholderOnFocus
+			withoutInteractiveFormatting
+			allowedFormats={ [
+				'core/bold',
+				'core/italic',
+				'core/image',
+				'core/strikethrough',
+			] }
+		/>
+	);
+
 	return (
 		<Fragment>
 			<BlockControls>
@@ -193,6 +215,11 @@ function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<BlockNavigationListItemFill blockId={ clientId }>
+				<BlockNavigationListItem wrapperComponent="div">
+					{editField}
+				</BlockNavigationListItem>
+			</BlockNavigationListItemFill>
 			<Block.li
 				className={ classnames( {
 					'is-editing': isSelected || isParentOfSelectedBlock,
@@ -210,23 +237,7 @@ function NavigationLinkEdit( {
 				} }
 			>
 				<div className="wp-block-navigation-link__content">
-					<RichText
-						ref={ ref }
-						className="wp-block-navigation-link__label"
-						value={ label }
-						onChange={ ( labelValue ) =>
-							setAttributes( { label: labelValue } )
-						}
-						placeholder={ itemLabelPlaceholder }
-						keepPlaceholderOnFocus
-						withoutInteractiveFormatting
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
-					/>
+					{ cloneElement( editField, { ref } ) }
 					{ isLinkOpen && (
 						<Popover
 							position="bottom center"

diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -2,14 +2,10 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBlockNavigationListItem,
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
-	RichText,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -44,42 +40,10 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 					blocks={ blocks }
 					initialOpen={ isLargeViewport }
 					onChange={ ( updatedBlocks ) => setBlocks( updatedBlocks ) }
-					listItemComponent={ EditableNavigationItem }
 				/>
 				<BlockEditorPanel saveBlocks={ saveBlocks } />
 			</BlockEditorProvider>
 		</div>
 	);
 }
 
-const EditableNavigationItem = ( props ) => {
-	return (
-		<__experimentalBlockNavigationListItem
-			{ ...props }
-			wrapperComponent="div"
-			labelComponent={ EditableLabel }
-		/>
-	);
-};
-
-const EditableLabel = ( { block, label } ) => {
-	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
-	return (
-		<RichText
-			className="wp-block-navigation-link__label"
-			value={ label }
-			onChange={ ( newLabel ) =>
-				updateBlockAttributes( block.clientId, { label: newLabel } )
-			}
-			placeholder={ __( 'Add link…' ) }
-			keepPlaceholderOnFocus={ false }
-			withoutInteractiveFormatting
-			allowedFormats={ [
-				'core/bold',
-				'core/italic',
-				'core/image',
-				'core/strikethrough',
-			] }
-		/>
-	);
-};
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
@@ -8,7 +8,6 @@ import { __ } from '@wordpress/i18n';
 export default function NavigationStructurePanel( {
 	blocks,
 	initialOpen,
-	listItemComponent,
 } ) {
 	return (
 		<Panel className="edit-navigation-menu-editor__navigation-structure-panel">
@@ -20,7 +19,6 @@ export default function NavigationStructurePanel( {
 					<__experimentalBlockNavigationList
 						blocks={ blocks }
 						selectedBlockClientId={ blocks[ 0 ].clientId }
-						listItemComponent={ listItemComponent }
 						showNestedBlocks
 						showAppender
 					/>