Nav offcanvas - handle non-direct insert block inserter (#46503)

* Pass blocks from block inserter to custom appender callback * Allow only blocks which support Link UI to trigger it’s rendering on insertion * Allow Link UI for all supporting blocks * Extract clearly named function to improve comprehension * Allow for programmatic disabling of selecting block on insertion via Quick Inserter * Fix stray false * Provide correct default to ensure behaviour is backwards compatible * Always pass selectBlockOnInsert
WordPress · Dec 15, 2022 · fefdd30 · fefdd30
1 parent ccf6e2b
commit fefdd30
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -39,6 +39,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
@@ -108,7 +109,7 @@ function useInsertionPoint( {
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					true,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +123,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -143,18 +143,31 @@ class Inserter extends Component {
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
 			prioritizePatterns,
+			onSelectOrClose,
+			selectBlockOnInsert,
 		} = this.props;
 
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ () => {
+					onSelect={ ( blocks ) => {
+						const firstBlock =
+							Array.isArray( blocks ) && blocks?.length
+								? blocks[ 0 ]
+								: blocks;
+						if (
+							onSelectOrClose &&
+							typeof onSelectOrClose === 'function'
+						) {
+							onSelectOrClose( firstBlock );
+						}
 						onClose();
 					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -380,7 +393,7 @@ export default compose( [
 
 				if ( onSelectOrClose ) {
 					onSelectOrClose( {
-						insertedBlockId: blockToInsert?.clientId,
+						clientId: blockToInsert?.clientId,
 					} );
 				}
 

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -31,13 +31,15 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -121,6 +123,7 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			</div>
 

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -60,6 +61,7 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,

diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -11,8 +11,13 @@ import Inserter from '../inserter';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
 export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlock, setInsertedBlock ] = useState();
+	const [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
 
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
@@ -31,40 +36,55 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const { insertedBlockAttributes } = useSelect(
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
 		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 
 			return {
-				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
 			};
 		},
-		[ insertedBlock ]
+		[ insertedBlockClientId ]
 	);
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const setAttributes =
-		( insertedBlockClientId ) => ( _updatedAttributes ) => {
-			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 
+	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
+		if ( ! _insertedBlock?.clientId ) {
+			return;
+		}
+
+		setInsertedBlockClientId( _insertedBlock?.clientId );
+	};
+
 	let maybeLinkUI;
 
-	if ( insertedBlock ) {
+	if (
+		insertedBlockClientId &&
+		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
+	) {
 		maybeLinkUI = (
 			<LinkUI
-				clientId={ insertedBlock }
+				clientId={ insertedBlockClientId }
 				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlock( null ) }
+				onClose={ () => setInsertedBlockClientId( null ) }
 				hasCreateSuggestion={ false }
 				onChange={ ( updatedValue ) => {
 					updateAttributes(
 						updatedValue,
-						setAttributes( insertedBlock ),
+						setAttributes( insertedBlockClientId ),
 						insertedBlockAttributes
 					);
-					setInsertedBlock( null );
+					setInsertedBlockClientId( null );
 				} }
 			/>
 		);
@@ -77,15 +97,15 @@ export const Appender = forwardRef( ( props, ref ) => {
 	return (
 		<div className="offcanvas-editor__appender">
 			{ maybeLinkUI }
+
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ ( { insertedBlockId } ) => {
-					setInsertedBlock( insertedBlockId );
-				} }
+				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
+				__experimentalIsQuick
 				{ ...props }
 			/>
 		</div>