@wordpress/block-editor 12.9.0 → 12.10.0

package/src/components/inserter/tabs.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { symbol as reusableBlockIcon } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -16,12 +15,7 @@ const patternsTab = {
 	/* translators: Theme and Directory Patterns tab title in the block inserter. */
 	title: __( 'Patterns' ),
 };
-const reusableBlocksTab = {
-	name: 'reusable',
-	/* translators: Locally created Patterns tab title in the block inserter. */
-	title: __( 'Synced patterns' ),
-	icon: reusableBlockIcon,
-};
+
 const mediaTab = {
 	name: 'media',
 	/* translators: Media tab title in the block inserter. */
@@ -31,7 +25,6 @@ const mediaTab = {
 function InserterTabs( {
 	children,
 	showPatterns = false,
-	showReusableBlocks = false,
 	showMedia = false,
 	onSelect,
 	prioritizePatterns,
@@ -48,11 +41,8 @@ function InserterTabs( {
 		if ( showMedia ) {
 			tempTabs.push( mediaTab );
 		}
-		if ( showReusableBlocks ) {
-			tempTabs.push( reusableBlocksTab );
-		}
 		return tempTabs;
-	}, [ prioritizePatterns, showPatterns, showReusableBlocks, showMedia ] );
+	}, [ prioritizePatterns, showPatterns, showMedia ] );
 
 	return (
 		<TabPanel

package/src/components/inserter/test/index.native.js

@@ -67,9 +67,8 @@ describe( 'Inserter', () => {
 			fireEvent( addBlockButton, 'onLongPress' );
 
 			// Get Add To Beginning option
-			const addBlockToBeginningButton = await getByLabelText(
-				'Add To Beginning'
-			);
+			const addBlockToBeginningButton =
+				await getByLabelText( 'Add To Beginning' );
 			expect( addBlockToBeginningButton ).toBeVisible();
 			fireEvent.press( addBlockToBeginningButton );
 
@@ -97,9 +96,8 @@ describe( 'Inserter', () => {
 			fireEvent( addBlockButton, 'onLongPress' );
 
 			// Get Add Block Before option
-			const addBlockBeforeButton = await getByLabelText(
-				'Add Block Before'
-			);
+			const addBlockBeforeButton =
+				await getByLabelText( 'Add Block Before' );
 			expect( addBlockBeforeButton ).toBeVisible();
 			fireEvent.press( addBlockBeforeButton );
 
@@ -135,9 +133,8 @@ describe( 'Inserter', () => {
 			fireEvent( addBlockButton, 'onLongPress' );
 
 			// Get Add Block After option
-			const addBlockAfterButton = await getByLabelText(
-				'Add Block After'
-			);
+			const addBlockAfterButton =
+				await getByLabelText( 'Add Block After' );
 			expect( addBlockAfterButton ).toBeVisible();
 			fireEvent.press( addBlockAfterButton );
 
@@ -233,9 +230,8 @@ describe( 'Inserter', () => {
 			await addBlock( screen, 'Heading' );
 
 			// Select the title
-			const titleInputElement = await getAllByLabelText(
-				'Post title. test'
-			)[ 0 ];
+			const titleInputElement =
+				await getAllByLabelText( 'Post title. test' )[ 0 ];
 			expect( titleInputElement ).toBeVisible();
 			fireEvent.press( titleInputElement );
 

package/src/components/inspector-controls/block-support-slot-container.js

@@ -2,11 +2,27 @@
  * WordPress dependencies
  */
 import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+export default function BlockSupportSlotContainer( {
+	Slot,
+	fillProps,
+	...props
+} ) {
+	// Add the toolspanel context provider and value to existing fill props
 	const toolsPanelContext = useContext( ToolsPanelContext );
+	const computedFillProps = useMemo(
+		() => ( {
+			...( fillProps ?? {} ),
+			forwardedContext: [
+				...( fillProps?.forwardedContext ?? [] ),
+				[ ToolsPanelContext.Provider, { value: toolsPanelContext } ],
+			],
+		} ),
+		[ toolsPanelContext, fillProps ]
+	);
+
 	return (
-		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
 	);
 }

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

@@ -7,7 +7,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -60,28 +60,42 @@ export default function InspectorControlsFill( {
 	);
 }
 
-function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
-	const { registerResetAllFilter, deregisterResetAllFilter } = fillProps;
+function RegisterResetAll( { resetAllFilter, children } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } =
+		useContext( ToolsPanelContext );
 	useEffect( () => {
-		if ( resetAllFilter && registerResetAllFilter ) {
+		if (
+			resetAllFilter &&
+			registerResetAllFilter &&
+			deregisterResetAllFilter
+		) {
 			registerResetAllFilter( resetAllFilter );
-		}
-		return () => {
-			if ( resetAllFilter && deregisterResetAllFilter ) {
+			return () => {
 				deregisterResetAllFilter( resetAllFilter );
-			}
-		};
+			};
+		}
 	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+	return children;
+}
+
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
+	// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
+	// that should wrap the fill markup.
+	const { forwardedContext = [] } = fillProps;
 
 	// Children passed to InspectorControlsFill will not have
 	// access to any React Context whose Provider is part of
 	// the InspectorControlsSlot tree. So we re-create the
 	// Provider in this subtree.
-	const value =
-		fillProps && Object.keys( fillProps ).length > 0 ? fillProps : null;
-	return (
-		<ToolsPanelContext.Provider value={ value }>
+	const innerMarkup = (
+		<RegisterResetAll resetAllFilter={ resetAllFilter }>
 			{ children }
-		</ToolsPanelContext.Provider>
+		</RegisterResetAll>
+	);
+	return forwardedContext.reduce(
+		( inner, [ Provider, props ] ) => (
+			<Provider { ...props }>{ inner }</Provider>
+		),
+		innerMarkup
 	);
 }

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

@@ -5,6 +5,9 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBackground = createSlotFill(
+	'InspectorControlsBackground'
+);
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
@@ -21,15 +24,16 @@ const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	background: InspectorControlsBackground,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
-	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
+	filter: InspectorControlsFilter,
 	list: InspectorControlsListView,
+	position: InspectorControlsPosition,
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
-	position: InspectorControlsPosition,
 };
 
 export default groups;

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import {
+	__experimentalUseSlotFills as useSlotFills,
+	__unstableMotionContext as MotionContext,
+} from '@wordpress/components';
+import { useContext, useMemo } from '@wordpress/element';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -16,6 +20,7 @@ export default function InspectorControlsSlot( {
 	__experimentalGroup,
 	group = 'default',
 	label,
+	fillProps,
 	...props
 } ) {
 	if ( __experimentalGroup ) {
@@ -31,6 +36,20 @@ export default function InspectorControlsSlot( {
 	}
 	const Slot = groups[ group ]?.Slot;
 	const fills = useSlotFills( Slot?.__unstableName );
+
+	const motionContextValue = useContext( MotionContext );
+
+	const computedFillProps = useMemo(
+		() => ( {
+			...( fillProps ?? {} ),
+			forwardedContext: [
+				...( fillProps?.forwardedContext ?? [] ),
+				[ MotionContext.Provider, { value: motionContextValue } ],
+			],
+		} ),
+		[ motionContextValue, fillProps ]
+	);
+
 	if ( ! Slot ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
@@ -43,10 +62,16 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					fillProps={ computedFillProps }
+					Slot={ Slot }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually />;
+	return (
+		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
+	);
 }

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -32,6 +32,10 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot
+				group="background"
+				label={ __( 'Background image' ) }
+			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
 				group="typography"

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

@@ -14,6 +14,7 @@ import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { keyboardReturn } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -355,6 +356,7 @@ function LinkControl( {
 						className={ classnames( {
 							'block-editor-link-control__search-input-wrapper': true,
 							'has-text-control': showTextControl,
+							'has-actions': showActions,
 						} ) }
 					>
 						{ showTextControl && (
@@ -388,6 +390,17 @@ function LinkControl( {
 							}
 							hideLabelFromVision={ ! showTextControl }
 						/>
+						{ ! showActions && (
+							<div className="block-editor-link-control__search-enter">
+								<Button
+									onClick={ isDisabled ? noop : handleSubmit }
+									label={ __( 'Submit' ) }
+									icon={ keyboardReturn }
+									className="block-editor-link-control__search-submit"
+									aria-disabled={ isDisabled }
+								/>
+							</div>
+						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -475,5 +488,6 @@ function LinkControl( {
 }
 
 LinkControl.ViewerFill = ViewerFill;
+LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
 export default LinkControl;

package/src/components/link-control/settings.js

@@ -26,6 +26,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 			label={ setting.title }
 			onChange={ handleSettingChange( setting ) }
 			checked={ value ? !! value[ setting.id ] : false }
+			help={ setting?.help }
 		/>
 	) );
 

package/src/components/link-control/style.scss

@@ -46,7 +46,8 @@ $preview-image-height: 140px;
 }
 
 // Provides positioning context for search actions
-.block-editor-link-control__search-input-container {
+.block-editor-link-control__search-input-container,
+.block-editor-link-control__search-input-wrapper {
 	position: relative;
 }
 
@@ -79,6 +80,17 @@ $preview-image-height: 140px;
 	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
+.block-editor-link-control__search-enter {
+	position: absolute;
+	right: 19px; // specific to place the button properly.
+	top: 3px;
+
+	svg {
+		position: relative;
+		top: -2px; // the icon itself is not centered within the bounds; this centers it.
+	}
+}
+
 .block-editor-link-control__search-actions {
 	display: flex;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
@@ -401,19 +413,19 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__setting {
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0;
 	flex: 1;
 	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
+	.components-base-control__field {
+		display: flex; // don't allow label to wrap under checkbox.
+	}
+
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
 		margin-left: 0;
 	}
 
-	&.block-editor-link-control__setting:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-preview & {
 		padding: 20px $grid-unit-10 $grid-unit-10 0;
 	}
@@ -427,6 +439,10 @@ $preview-image-height: 140px;
 		padding-left: 0;
 		gap: 0;
 
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
 		// Point downwards when open (same as list view expander)
 		&[aria-expanded="true"] svg {
 			visibility: visible;
@@ -452,10 +468,15 @@ $preview-image-height: 140px;
 		left: auto;
 		bottom: auto;
 		top: calc(50% - #{$spinner-size} / 2);
-		right: $grid-unit-20;
+		right: $grid-unit-50;
 	}
 }
 
+.block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
+	top: calc(50% + #{$spinner-size} / 4); // Add top spacing because this input has a visual label.
+	right: $grid-unit-15;
+}
+
 .block-editor-link-control__search-item-action {
 	margin-left: auto; // push to far right hand side
 	flex-shrink: 0;

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

@@ -766,9 +766,6 @@ describe( 'Manual link entry', () => {
 					name: 'Save',
 				} );
 
-				// debug the UI state
-				// screen.debug();
-
 				// Verify the submission UI is disabled.
 				expect( submitButton ).toBeVisible();
 				expect( submitButton ).toHaveAttribute(
@@ -939,6 +936,92 @@ describe( 'Manual link entry', () => {
 	} );
 } );
 
+describe( 'Link submission', () => {
+	it( 'should show a submit button when creating a link', async () => {
+		const user = userEvent.setup();
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( {} );
+
+			return <LinkControl value={ link } onChange={ setLink } />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Link',
+		} );
+
+		const submitButton = screen.getByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		expect( submitButton ).toBeVisible();
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Click the button and check it's not possible to prematurely submit the link.
+		await user.click( submitButton );
+
+		expect( searchInput ).toBeVisible();
+		expect( submitButton ).toBeVisible();
+
+		await user.type( searchInput, 'https://wordpress.org' );
+
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'false' );
+	} );
+
+	it( 'should show a submit button when editing a link', async () => {
+		const user = userEvent.setup();
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( fauxEntitySuggestions[ 0 ] );
+
+			return (
+				<LinkControl
+					forceIsEditingLink
+					value={ link }
+					onChange={ setLink }
+				/>
+			);
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Link',
+		} );
+
+		const createSubmitButton = screen.queryByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		// Check the submit button for "creation" of links is not displayed.
+		expect( createSubmitButton ).not.toBeInTheDocument();
+
+		const editSubmitButton = screen.getByRole( 'button', {
+			name: 'Save',
+		} );
+
+		expect( editSubmitButton ).toBeVisible();
+		expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Click the button and check it's not possible to prematurely submit the link.
+		await user.click( editSubmitButton );
+
+		expect( searchInput ).toBeVisible();
+		expect( editSubmitButton ).toBeVisible();
+
+		await user.type( searchInput, '#appendtolinktext' );
+
+		// As typing triggers the search handler, we need to wait for the
+		// search results to be returned. We can use the presence of the
+		// search results listbox as a proxy for this.
+		expect( await screen.findByRole( 'listbox' ) ).toBeVisible();
+
+		expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' );
+	} );
+} );
+
 describe( 'Default search suggestions', () => {
 	it( 'should display a list of initial search suggestions when there is no search value or suggestions', async () => {
 		render( <LinkControl showInitialSuggestions /> );
@@ -1135,9 +1218,8 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			// Resolve the `createSuggestion` promise.
 			resolver();
 
-			const currentLink = await screen.findByLabelText(
-				'Currently selected'
-			);
+			const currentLink =
+				await screen.findByLabelText( 'Currently selected' );
 
 			expect( currentLink ).toHaveTextContent( entityNameText );
 			expect( currentLink ).toHaveTextContent( '/?p=123' );

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

@@ -233,9 +233,7 @@ function ListViewBlockSelectButton(
 					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
-							<span className="block-editor-list-view-block-select-button__sticky">
-								<Icon icon={ pinSmall } />
-							</span>
+							<Icon icon={ pinSmall } />
 						</Tooltip>
 					) }
 					{ images.length ? (

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

@@ -23,6 +23,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 import { focus } from '@wordpress/dom';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -72,7 +73,9 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle = blockInformation?.title || __( 'Untitled' );
+	const blockTitle =
+		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
+
 	const block = useSelect(
 		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
@@ -148,6 +151,20 @@ function ListViewBlock( {
 		}
 	}, [] );
 
+	// If multiple blocks are selected, deselect all blocks when the user
+	// presses the escape key.
+	const onKeyDown = ( event ) => {
+		if (
+			event.keyCode === ESCAPE &&
+			! event.defaultPrevented &&
+			selectedClientIds.length > 0
+		) {
+			event.stopPropagation();
+			event.preventDefault();
+			selectBlock( event, undefined );
+		}
+	};
+
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
 		toggleBlockHighlight( clientId, true );
@@ -255,6 +272,7 @@ function ListViewBlock( {
 	return (
 		<ListViewLeaf
 			className={ classes }
+			onKeyDown={ onKeyDown }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			onFocus={ onMouseEnter }

package/src/components/list-view/style.scss

@@ -335,8 +335,7 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock,
-	.block-editor-list-view-block-select-button__sticky {
+	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
 	}