@wordpress/block-editor 12.0.0 → 12.2.0

package/src/components/inner-blocks/index.native.js

@@ -17,7 +17,6 @@ import useBlockContext from './use-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
-import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -73,9 +72,13 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection,
+		__experimentalCaptureToolbars: captureToolbars,
 		orientation,
 		renderAppender,
 		renderFooterAppender,
@@ -92,12 +95,21 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
-		useCompactList,
 	} = props;
 
 	const context = useBlockContext( clientId );
 
-	useNestedSettingsUpdate( clientId, allowedBlocks, templateLock );
+	useNestedSettingsUpdate(
+		clientId,
+		allowedBlocks,
+		prioritizedInserterBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
+		templateLock,
+		captureToolbars,
+		orientation,
+		layout
+	);
 
 	useInnerBlockTemplateSync(
 		clientId,
@@ -106,12 +118,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
-
 	return (
 		<LayoutProvider value={ layout }>
 			<BlockContextProvider value={ context }>
-				<BlockListComponent
+				<BlockList
 					marginVertical={ marginVertical }
 					marginHorizontal={ marginHorizontal }
 					rootClientId={ clientId }

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -25,6 +25,7 @@ const pendingSettingsUpdates = new WeakMap();
  * @param {string}               clientId                   The client ID of the block to update.
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
+ * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
  * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
  * @param {?Function|boolean}    __experimentalDirectInsert If a default block should be inserted directly by the
  *                                                          appender.
@@ -40,6 +41,7 @@ const pendingSettingsUpdates = new WeakMap();
 export default function useNestedSettingsUpdate(
 	clientId,
 	allowedBlocks,
+	prioritizedInserterBlocks,
 	__experimentalDefaultBlock,
 	__experimentalDirectInsert,
 	templateLock,
@@ -64,13 +66,27 @@ export default function useNestedSettingsUpdate(
 		[ clientId ]
 	);
 
-	// Memoize as inner blocks implementors often pass a new array on every
-	// render.
-	const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks );
+	// Memoize allowedBlocks and prioritisedInnerBlocks based on the contents
+	// of the arrays. Implementors often pass a new array on every render,
+	// and the contents of the arrays are just strings, so the entire array
+	// can be passed as dependencies.
+
+	const _allowedBlocks = useMemo(
+		() => allowedBlocks,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		allowedBlocks
+	);
+
+	const _prioritizedInserterBlocks = useMemo(
+		() => prioritizedInserterBlocks,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		prioritizedInserterBlocks
+	);
 
 	useLayoutEffect( () => {
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
+			prioritizedInserterBlocks: _prioritizedInserterBlocks,
 			templateLock:
 				templateLock === undefined || parentLock === 'contentOnly'
 					? parentLock
@@ -130,6 +146,7 @@ export default function useNestedSettingsUpdate(
 		clientId,
 		blockListSettings,
 		_allowedBlocks,
+		_prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,

package/src/components/inserter/index.js

@@ -150,7 +150,6 @@ class PrivateInserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
-			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -174,7 +173,6 @@ class PrivateInserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
-					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -426,13 +424,7 @@ export const ComposedPrivateInserter = compose( [
 ] )( PrivateInserter );
 
 const Inserter = forwardRef( ( props, ref ) => {
-	return (
-		<ComposedPrivateInserter
-			ref={ ref }
-			{ ...props }
-			orderInitialBlockItems={ undefined }
-		/>
-	);
+	return <ComposedPrivateInserter ref={ ref } { ...props } />;
 } );
 
 export default Inserter;

package/src/components/inserter/quick-inserter.js

@@ -32,7 +32,6 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	orderInitialBlockItems,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -125,7 +124,6 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
-					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			</div>
 

package/src/components/inserter/search-results.js

@@ -6,6 +6,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,6 +22,8 @@ import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import { orderInserterBlockItems } from '../../utils/order-inserter-block-items';
+import { store as blockEditorStore } from '../../store';
 
 const INITIAL_INSERTER_RESULTS = 9;
 /**
@@ -46,10 +49,22 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	orderInitialBlockItems,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
+	const { prioritizedBlocks } = useSelect(
+		( select ) => {
+			const blockListSettings =
+				select( blockEditorStore ).getBlockListSettings( rootClientId );
+
+			return {
+				prioritizedBlocks:
+					blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY,
+			};
+		},
+		[ rootClientId ]
+	);
+
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
@@ -89,10 +104,16 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
+
 		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
-		if ( ! filterValue && orderInitialBlockItems ) {
-			orderedItems = orderInitialBlockItems( orderedItems );
+
+		if ( ! filterValue && prioritizedBlocks.length ) {
+			orderedItems = orderInserterBlockItems(
+				orderedItems,
+				prioritizedBlocks
+			);
 		}
+
 		const results = searchBlockItems(
 			orderedItems,
 			blockTypeCategories,
@@ -108,8 +129,8 @@ function InserterSearchResults( {
 		blockTypes,
 		blockTypeCategories,
 		blockTypeCollections,
-		maxBlockTypes,
-		orderInitialBlockItems,
+		maxBlockTypesToShow,
+		prioritizedBlocks,
 	] );
 
 	// Announce search results on change.
@@ -124,7 +145,12 @@ function InserterSearchResults( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
+	}, [
+		filterValue,
+		debouncedSpeak,
+		filteredBlockTypes,
+		filteredBlockPatterns,
+	] );
 
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,

package/src/components/inserter-draggable-blocks/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
+import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -23,6 +24,9 @@ const InserterDraggableBlocks = ( {
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
+			onDragStart={ ( event ) => {
+				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }

package/src/components/inspector-controls/fill.js

@@ -41,7 +41,7 @@ export default function InspectorControlsFill( {
 	const isDisplayed = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 	if ( ! isDisplayed ) {

package/src/components/inspector-controls/fill.native.js

@@ -39,7 +39,7 @@ export default function InspectorControlsFill( {
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 	if ( ! isDisplayed ) {

package/src/components/inspector-controls/slot.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseSlot as useSlot,
-	__experimentalUseSlotFills as useSlotFills,
-} from '@wordpress/components';
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -33,15 +30,13 @@ export default function InspectorControlsSlot( {
 		group = __experimentalGroup;
 	}
 	const Slot = groups[ group ]?.Slot;
-	const slot = useSlot( Slot?.__unstableName );
 	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot || ! slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+	if ( ! Slot ) {
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( fills && fills.length );
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 

package/src/components/inspector-controls/slot.native.js

@@ -27,7 +27,7 @@ export default function InspectorControlsSlot( {
 	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 

package/src/components/line-height-control/index.js

@@ -85,12 +85,17 @@ const LineHeightControl = ( {
 		: { marginBottom: 24 };
 
 	const handleOnChange = ( nextValue, { event } ) => {
+		if ( nextValue === '' ) {
+			onChange();
+			return;
+		}
+
 		if ( event.type === 'click' ) {
-			onChange( adjustNextValue( nextValue, false ) );
+			onChange( adjustNextValue( `${ nextValue }`, false ) );
 			return;
 		}
 
-		onChange( nextValue );
+		onChange( `${ nextValue }` );
 	};
 
 	return (

package/src/components/line-height-control/stories/index.js

@@ -23,7 +23,7 @@ const Template = ( props ) => {
 export const Default = Template.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
-	__unstableInputWidth: '60px',
+	__unstableInputWidth: '100px',
 };
 
 export const UnconstrainedWidth = Template.bind( {} );

package/src/components/link-control/test/index.js

@@ -2235,6 +2235,48 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state on value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
 
 async function toggleSettingsDrawer( user ) {

package/src/components/link-control/use-internal-input-value.js

@@ -8,14 +8,15 @@ export default function useInternalInputValue( value ) {
 		value || ''
 	);
 
+	// If the value prop changes, update the internal state.
 	useEffect( () => {
-		/**
-		 * If the value changes then sync this
-		 * back up with state.
-		 */
-		if ( value && value !== internalInputValue ) {
-			setInternalInputValue( value );
-		}
+		setInternalInputValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
 	}, [ value ] );
 
 	return [ internalInputValue, setInternalInputValue ];

package/src/components/list-view/appender.js

@@ -4,7 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -12,11 +12,12 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useListViewContext } from './context';
 import Inserter from '../inserter';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
-		const [ insertedBlock, setInsertedBlock ] = useState( null );
+		const { insertedBlock, setInsertedBlock } = useListViewContext();
 
 		const instanceId = useInstanceId( Appender );
 		const { hideInserter } = useSelect(

package/src/components/list-view/block-contents.js

@@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -46,6 +47,9 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
 
+		const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
+			useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +66,34 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
-					/>
-				) }
-			</BlockDraggable>
+			<>
+				{ renderAdditionalBlockUI &&
+					renderAdditionalBlockUI(
+						block,
+						insertedBlock,
+						setInsertedBlock
+					) }
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );

package/src/components/list-view/block-select-button.js

@@ -84,7 +84,11 @@ function ListViewBlockSelectButton(
 				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"