@wordpress/block-editor 11.3.5 → 11.3.7

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

@@ -537,7 +537,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.getByRole( 'button', {
-					name: 'Apply',
+					name: 'Submit',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -555,7 +555,7 @@ describe( 'Manual link entry', () => {
 				await user.keyboard( '[Enter]' );
 
 				submitButton = screen.getByRole( 'button', {
-					name: 'Apply',
+					name: 'Submit',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -578,7 +578,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.queryByRole( 'button', {
-					name: 'Apply',
+					name: 'Submit',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -597,7 +597,7 @@ describe( 'Manual link entry', () => {
 				await user.click( submitButton );
 
 				submitButton = screen.queryByRole( 'button', {
-					name: 'Apply',
+					name: 'Submit',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -608,135 +608,6 @@ describe( 'Manual link entry', () => {
 		);
 	} );
 
-	describe( 'Handling cancellation', () => {
-		it( 'should allow cancellation of the link creation process and reset any entered values', async () => {
-			const user = userEvent.setup();
-			const mockOnRemove = jest.fn();
-			const mockOnCancel = jest.fn();
-
-			render( <LinkControl onRemove={ mockOnRemove } /> );
-
-			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', {
-				name: 'URL',
-			} );
-
-			const cancelButton = screen.queryByRole( 'button', {
-				name: 'Cancel',
-			} );
-
-			expect( cancelButton ).toBeEnabled();
-			expect( cancelButton ).toBeVisible();
-
-			// Simulate adding a link for a term.
-			await user.type( searchInput, 'https://www.wordpress.org' );
-
-			// Attempt to submit the empty search value in the input.
-			await user.click( cancelButton );
-
-			// Verify the consumer can handle the cancellation.
-			expect( mockOnRemove ).toHaveBeenCalled();
-
-			// Ensure optional callback is not called.
-			expect( mockOnCancel ).not.toHaveBeenCalled();
-
-			expect( searchInput ).toHaveValue( '' );
-		} );
-
-		it( 'should allow cancellation of the link editing process and reset any entered values', async () => {
-			const user = userEvent.setup();
-			const initialLink = fauxEntitySuggestions[ 0 ];
-
-			const LinkControlConsumer = () => {
-				const [ link, setLink ] = useState( initialLink );
-
-				return (
-					<LinkControl
-						value={ link }
-						onChange={ ( suggestion ) => {
-							setLink( suggestion );
-						} }
-						hasTextControl
-					/>
-				);
-			};
-
-			render( <LinkControlConsumer /> );
-
-			let linkPreview = screen.getByLabelText( 'Currently selected' );
-
-			expect( linkPreview ).toBeInTheDocument();
-
-			// Click the "Edit" button to trigger into the editing mode.
-			let editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
-			} );
-
-			await user.click( editButton );
-
-			let searchInput = screen.getByRole( 'combobox', {
-				name: 'URL',
-			} );
-
-			let textInput = screen.getByRole( 'textbox', {
-				name: 'Text',
-			} );
-
-			// Make a change to the search input.
-			await user.type( searchInput, 'This URL value was changed!' );
-
-			// Make a change to the text input.
-			await user.type( textInput, 'This text value was changed!' );
-
-			const cancelButton = screen.queryByRole( 'button', {
-				name: 'Cancel',
-			} );
-
-			// Cancel the editing process.
-			await user.click( cancelButton );
-
-			linkPreview = screen.getByLabelText( 'Currently selected' );
-
-			expect( linkPreview ).toBeInTheDocument();
-
-			// Re-query the edit button as it's been replaced.
-			editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
-			} );
-
-			await user.click( editButton );
-
-			// Re-query the inputs as they have been replaced.
-			searchInput = screen.getByRole( 'combobox', {
-				name: 'URL',
-			} );
-
-			textInput = screen.getByRole( 'textbox', {
-				name: 'Text',
-			} );
-
-			// Expect to see the original link values and **not** the changed values.
-			expect( searchInput ).toHaveValue( initialLink.url );
-			expect( textInput ).toHaveValue( initialLink.text );
-		} );
-
-		it( 'should call onCancel callback when cancelling if provided', async () => {
-			const user = userEvent.setup();
-			const mockOnCancel = jest.fn();
-
-			render( <LinkControl onCancel={ mockOnCancel } /> );
-
-			const cancelButton = screen.queryByRole( 'button', {
-				name: 'Cancel',
-			} );
-
-			await user.click( cancelButton );
-
-			// Verify the consumer can handle the cancellation.
-			expect( mockOnCancel ).toHaveBeenCalled();
-		} );
-	} );
-
 	describe( 'Alternative link protocols and formats', () => {
 		it.each( [
 			[ 'mailto:example123456@wordpress.org', 'mailto' ],
@@ -1988,7 +1859,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Apply',
+			name: 'Submit',
 		} );
 
 		await user.click( submitButton );

package/src/components/media-replace-flow/test/index.js

@@ -137,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Apply',
+				name: 'Submit',
 			} )
 		);
 

package/src/components/off-canvas-editor/appender.js

@@ -4,7 +4,12 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -12,7 +17,14 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import Inserter from '../inserter';
+
+import { unlock } from '../../lock-unlock';
+import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+
+const prioritizedInserterBlocks = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, ...props }, ref ) => {
@@ -61,10 +73,23 @@ export const Appender = forwardRef(
 			);
 		}, [ insertedBlockTitle ] );
 
+		const orderInitialBlockItems = useCallback( ( items ) => {
+			items.sort( ( { id: aName }, { id: bName } ) => {
+				// Sort block items according to `prioritizedInserterBlocks`.
+				let aIndex = prioritizedInserterBlocks.indexOf( aName );
+				let bIndex = prioritizedInserterBlocks.indexOf( bName );
+				// All other block items should come after that.
+				if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length;
+				if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length;
+				return aIndex - bIndex;
+			} );
+			return items;
+		}, [] );
+
 		if ( hideInserter ) {
 			return null;
 		}
-
+		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
 		const description = sprintf(
 			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
@@ -76,7 +101,7 @@ export const Appender = forwardRef(
 
 		return (
 			<div className="offcanvas-editor-appender">
-				<Inserter
+				<PrivateInserter
 					ref={ ref }
 					rootClientId={ clientId }
 					position="bottom right"
@@ -91,6 +116,7 @@ export const Appender = forwardRef(
 							setInsertedBlock( maybeInsertedBlock );
 						}
 					} }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 				<div
 					className="offcanvas-editor-appender__description"

package/src/components/off-canvas-editor/block-contents.js

@@ -73,7 +73,7 @@ const ListViewBlockContents = forwardRef(
 			setInsertedBlockAttributes,
 		} = useInsertedBlock( lastInsertedBlockClientId );
 
-		const hasExistingLinkValue = insertedBlockAttributes?.id;
+		const hasExistingLinkValue = insertedBlockAttributes?.url;
 
 		useEffect( () => {
 			if (

package/src/components/off-canvas-editor/branch.js

@@ -97,6 +97,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -117,7 +118,7 @@ function ListViewBranch( props ) {
 	}
 
 	// Only show the appender at the first level.
-	const showAppender = level === 1;
+	const showAppender = showAppenderProp && level === 1;
 
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
@@ -205,6 +206,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								showAppender={ showAppenderProp }
 							/>
 						) }
 					</AsyncModeProvider>

package/src/components/off-canvas-editor/index.js

@@ -62,6 +62,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
  * @param {string}  props.description     Optional accessible description for the tree grid component.
  * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {string}  props.showAppender    Flag to show or hide the block appender.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
@@ -70,6 +71,7 @@ function OffCanvasEditor(
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
+		showAppender = true,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
@@ -234,6 +236,7 @@ function OffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
+							showAppender={ showAppender }
 						/>
 						<TreeGridRow
 							level={ 1 }

package/src/components/spacing-sizes-control/style.scss

@@ -126,7 +126,7 @@
 		}
 	}
 
-	[class*="ThumbWrapper-thumbColor"] {
+	.components-range-control__thumb-wrapper {
 		z-index: 3;
 	}
 

package/src/private-apis.js

@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
+import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -16,4 +17,5 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	LeafMoreMenu,
 	OffCanvasEditor,
+	PrivateInserter,
 } );

package/src/store/actions.js

@@ -232,17 +232,24 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 
 /**
  * Yields action objects used in signalling that the block preceding the given
- * clientId should be selected.
+ * clientId (or optionally, its first parent from bottom to top)
+ * should be selected.
  *
- * @param {string} clientId Block client ID.
+ * @param {string}  clientId         Block client ID.
+ * @param {boolean} fallbackToParent If true, select the first parent if there is no previous block.
  */
 export const selectPreviousBlock =
-	( clientId ) =>
+	( clientId, fallbackToParent = false ) =>
 	( { select, dispatch } ) => {
 		const previousBlockClientId =
 			select.getPreviousBlockClientId( clientId );
 		if ( previousBlockClientId ) {
 			dispatch.selectBlock( previousBlockClientId, -1 );
+		} else if ( fallbackToParent ) {
+			const firstParentClientId = select.getBlockRootClientId( clientId );
+			if ( firstParentClientId ) {
+				dispatch.selectBlock( firstParentClientId, -1 );
+			}
 		}
 	};
 
@@ -1175,8 +1182,11 @@ export const mergeBlocks =
  * the set of specified client IDs are to be removed.
  *
  * @param {string|string[]} clientIds      Client IDs of blocks to remove.
- * @param {boolean}         selectPrevious True if the previous block should be
- *                                         selected when a block is removed.
+ * @param {boolean}         selectPrevious True if the previous block
+ *                                         or the immediate parent
+ *                                         (if no previous block exists)
+ *                                         should be selected
+ *                                         when a block is removed.
  */
 export const removeBlocks =
 	( clientIds, selectPrevious = true ) =>
@@ -1197,7 +1207,7 @@ export const removeBlocks =
 		}
 
 		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ] );
+			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
 		}
 
 		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );

package/src/store/defaults.js

@@ -170,11 +170,24 @@ export const SETTINGS_DEFAULTS = {
 	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
-	// This setting is `private` now with `lock` API.
+	// These settings will be completely revamped in the future.
+	// The goal is to evolve this into an API which will instruct
+	// the block inspector to animate transitions between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
 	blockInspectorAnimation: {
+		animationParent: 'core/navigation',
 		'core/navigation': { enterDirection: 'leftToRight' },
 		'core/navigation-submenu': { enterDirection: 'rightToLeft' },
 		'core/navigation-link': { enterDirection: 'rightToLeft' },
+		'core/search': { enterDirection: 'rightToLeft' },
+		'core/social-links': { enterDirection: 'rightToLeft' },
+		'core/page-list': { enterDirection: 'rightToLeft' },
+		'core/spacer': { enterDirection: 'rightToLeft' },
+		'core/home-link': { enterDirection: 'rightToLeft' },
+		'core/site-title': { enterDirection: 'rightToLeft' },
+		'core/site-logo': { enterDirection: 'rightToLeft' },
 	},
 
 	generateAnchors: false,

package/src/store/selectors.js

@@ -2742,7 +2742,10 @@ export const __unstableGetContentLockingParent = createSelector(
 		let result;
 		while ( state.blocks.parents.has( current ) ) {
 			current = state.blocks.parents.get( current );
-			if ( getTemplateLock( state, current ) === 'contentOnly' ) {
+			if (
+				current &&
+				getTemplateLock( state, current ) === 'contentOnly'
+			) {
 				result = current;
 			}
 		}

package/src/store/test/actions.js

@@ -625,7 +625,8 @@ describe( 'actions', () => {
 			removeBlocks( clientIds )( { select, dispatch } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {
@@ -734,7 +735,8 @@ describe( 'actions', () => {
 			removeBlock( clientId )( { select, dispatch } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {