Introduce <BlockNavigationEditor /> component

WordPress · May 14, 2020 · 1854fa0 · 1854fa0
1 parent 2366592
commit 1854fa0
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 75 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/block-contents.js b/packages/block-editor/src/components/block-navigation/block-contents.js
@@ -96,51 +96,41 @@ const BlockNavigationBlockSelectButton = forwardRef( ( props, ref ) => (
 
 const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`;
 
-const BlockNavigationBlockSlot = forwardRef(
-	(
-		{ block, isSelected, onClick, position, siblingCount, level, ...props },
-		ref
-	) => {
-		const { clientId } = block;
-
-		return (
-			<Slot name={ getSlotName( clientId ) }>
-				{ ( fills ) => {
-					if ( ! fills.length ) {
-						return (
-							<BlockNavigationBlockSelectButton
-								ref={ ref }
-								block={ block }
-								onClick={ onClick }
-								isSelected={ isSelected }
-								position={ position }
-								siblingCount={ siblingCount }
-								level={ level }
-								{ ...props }
-							/>
-						);
-					}
+const noop = () => null;
+const BlockNavigationBlockSlot = forwardRef( ( props, ref ) => {
+	const { clientId } = props.block;
 
+	return (
+		<Slot name={ getSlotName( clientId ) }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
 					return (
-						<BlockNavigationBlockContentWrapper as="div">
-							{ Children.map( fills, ( fill ) =>
-								cloneElement( fill, {
-									...{
-										block,
-										isSelected,
-										onClick,
-										...props,
-									},
-									...fill.props,
-								} )
-							) }
-						</BlockNavigationBlockContentWrapper>
+						<BlockNavigationBlockSelectButton
+							ref={ ref }
+							{ ...props }
+						/>
 					);
-				} }
-			</Slot>
-		);
-	}
-);
+				}
+
+				return (
+					<BlockNavigationBlockContentWrapper
+						as="div"
+						{ ...props }
+						// Fills should implement onClick on their own
+						onClick={ noop }
+					>
+						{ Children.map( fills, ( fill ) =>
+							cloneElement( fill, {
+								...{ props },
+								...fill.props,
+							} )
+						) }
+					</BlockNavigationBlockContentWrapper>
+				);
+			} }
+		</Slot>
+	);
+} );
 
 export const BlockNavigationBlockFill = ( props ) => {
 	const { clientId } = useContext( BlockListBlockContext );

diff --git a/packages/block-editor/src/components/block-navigation/editor.js b/packages/block-editor/src/components/block-navigation/editor.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { RichText } from '../';
+import { BlockNavigationBlockFill } from './block-contents';
+
+export default function BlockNavigationEditor( { value, onChange } ) {
+	return (
+		<BlockNavigationBlockFill>
+			<RichText
+				className="wp-block-navigation-link__label"
+				value={ value }
+				onChange={ onChange }
+				placeholder={ __( 'Navigation item' ) }
+				keepPlaceholderOnFocus
+				withoutInteractiveFormatting
+				allowedFormats={ [
+					'core/bold',
+					'core/italic',
+					'core/image',
+					'core/strikethrough',
+				] }
+			/>
+		</BlockNavigationBlockFill>
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -18,6 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents';
+export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 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,16 +29,14 @@ import {
 	RichText,
 	__experimentalLinkControl as LinkControl,
 	__experimentalBlock as Block,
-	__experimentalBlockNavigationListItem as BlockNavigationListItem,
-	__experimentalBlockNavigationListItemFill as BlockNavigationListItemFill,
+	__experimentalBlockNavigationEditor as BlockNavigationEditor,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import {
 	Fragment,
 	useState,
 	useEffect,
 	useRef,
-	cloneElement,
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon } from '@wordpress/icons';
@@ -48,8 +46,6 @@ import { link as linkIcon } from '@wordpress/icons';
  */
 import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons';
 
-const noop = () => {};
-
 function NavigationLinkEdit( {
 	attributes,
 	hasDescendants,
@@ -141,25 +137,6 @@ 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>
@@ -224,14 +201,12 @@ function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<BlockNavigationListItemFill>
-				<BlockNavigationListItem
-					wrapperComponent="div"
-					onClick={ noop }
-				>
-					{ editField }
-				</BlockNavigationListItem>
-			</BlockNavigationListItemFill>
+			<BlockNavigationEditor
+				value={ label }
+				onChange={ ( labelValue ) =>
+					setAttributes( { label: labelValue } )
+				}
+			/>
 			<Block.li
 				className={ classnames( {
 					'is-editing': isSelected || isParentOfSelectedBlock,
@@ -249,7 +224,23 @@ function NavigationLinkEdit( {
 				} }
 			>
 				<div className="wp-block-navigation-link__content">
-					{ cloneElement( editField, { ref } ) }
+					<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',
+						] }
+					/>
 					{ isLinkOpen && (
 						<Popover
 							position="bottom center"