@wordpress/block-editor 11.2.0 → 11.3.0

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

@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +20,21 @@ import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
-	__experimentalGroup: group = 'default',
+	group = 'default',
+	__experimentalGroup,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const isDisplayed = useDisplayBlockControls();
 
 	const Fill = groups[ group ]?.Fill;

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

@@ -15,6 +15,7 @@ const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
+const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -23,6 +24,8 @@ const groups = {
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
+	settings: InspectorControlsDefault, // Alias for default.
+	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
 	position: InspectorControlsPosition,
 };

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

@@ -10,14 +10,10 @@ InspectorControls.Slot = InspectorControlsSlot;
 
 // This is just here for backward compatibility.
 export const InspectorAdvancedControls = ( props ) => {
-	return (
-		<InspectorControlsFill { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsFill { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.Slot = ( props ) => {
-	return (
-		<InspectorControlsSlot { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';
 

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

@@ -6,6 +6,7 @@ import {
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,10 +16,22 @@ import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	label,
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
 	const fills = useSlotFills( Slot?.__unstableName );

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -9,9 +10,21 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );

package/src/components/inspector-controls-tabs/advanced-controls-panel.js

@@ -29,7 +29,7 @@ const AdvancedControls = () => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
+			<InspectorControls.Slot group="advanced" />
 		</PanelBody>
 	);
 };

package/src/components/inspector-controls-tabs/index.js

@@ -20,7 +20,7 @@ export default function InspectorControlsTabs( {
 } ) {
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
-	// available tabs so the panel defaults selection to the styles tab
+	// available tabs so the panel defaults selection to the settings tab
 	// which at the time is the first tab. This check allows blocks known to
 	// include the list view tab to set it as the tab selected by default.
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
@@ -52,9 +52,7 @@ export default function InspectorControlsTabs( {
 				}
 
 				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return (
-						<InspectorControls.Slot __experimentalGroup="list" />
-					);
+					return <InspectorControls.Slot group="list" />;
 				}
 			} }
 		</TabPanel>

package/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -29,7 +29,7 @@ const PositionControls = () => {
 			title={ __( 'Position' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="position" />
+			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };

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

@@ -28,22 +28,20 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				</div>
 			) }
 			<InspectorControls.Slot
-				__experimentalGroup="color"
+				group="color"
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="typography"
+				group="typography"
 				label={ __( 'Typography' ) }
 			/>
 			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
+				group="dimensions"
 				label={ __( 'Dimensions' ) }
 			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
+			<InspectorControls.Slot group="border" label={ __( 'Border' ) } />
+			<InspectorControls.Slot group="styles" />
 		</>
 	);
 };

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -38,16 +38,14 @@ export default function useInspectorControlsTabs( blockName ) {
 		dimensions: dimensionsGroup,
 		list: listGroup,
 		position: positionGroup,
+		styles: stylesGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
 	// List View Tab: If there are any fills for the list group add that tab.
 	const listViewDisabled = useIsListViewTabDisabled( blockName );
 	const listFills = useSlotFills( listGroup.Slot.__unstableName );
-
-	if ( ! listViewDisabled && !! listFills && listFills.length ) {
-		tabs.push( TAB_LIST_VIEW );
-	}
+	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
 
 	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
@@ -55,25 +53,38 @@ export default function useInspectorControlsTabs( blockName ) {
 		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
 	];
+	const hasStyleFills = styleFills.length;
 
-	if ( styleFills.length ) {
-		tabs.push( TAB_STYLES );
-	}
+	// Settings Tab: If we don't have multiple tabs to display
+	// (i.e. both list view and styles), check only the default and position
+	// InspectorControls slots. If we have multiple tabs, we'll need to check
+	// the advanced controls slot as well to ensure they are rendered.
+	const advancedFills =
+		useSlotFills( InspectorAdvancedControls.slotName ) || [];
 
-	// Settings Tab: If there are any fills for the general InspectorControls
-	// or Advanced Controls slot, then add this tab.
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	// Add the tabs in the order that they will default to if available.
+	// List View > Settings > Styles.
+	if ( hasListFills ) {
+		tabs.push( TAB_LIST_VIEW );
+	}
+
 	if ( settingsFills.length ) {
 		tabs.push( TAB_SETTINGS );
 	}
 
+	if ( hasStyleFills ) {
+		tabs.push( TAB_STYLES );
+	}
+
 	const tabSettings = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );

package/src/components/justify-content-control/ui.js

@@ -7,6 +7,7 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,7 @@ const icons = {
 	center: justifyCenter,
 	right: justifyRight,
 	'space-between': justifySpaceBetween,
+	stretch: justifyStretch,
 };
 
 function JustifyContentUI( {
@@ -66,6 +68,13 @@ function JustifyContentUI( {
 			isActive: 'space-between' === value,
 			onClick: () => handleClick( 'space-between' ),
 		},
+		{
+			name: 'stretch',
+			icon: justifyStretch,
+			title: __( 'Stretch items' ),
+			isActive: 'stretch' === value,
+			onClick: () => handleClick( 'stretch' ),
+		},
 	];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
-import { keyboardReturn } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -113,6 +112,7 @@ function LinkControl( {
 	settings = DEFAULT_LINK_SETTINGS,
 	onChange = noop,
 	onRemove,
+	onCancel,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -190,6 +190,8 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	const hasLinkValue = value?.url?.trim()?.length > 0;
+
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
@@ -235,6 +237,29 @@ function LinkControl( {
 		}
 	};
 
+	const resetInternalValues = () => {
+		setInternalUrlInputValue( value?.url );
+		setInternalTextInputValue( value?.title );
+	};
+
+	const handleCancel = ( event ) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		// Ensure that any unsubmitted input changes are reset.
+		resetInternalValues();
+
+		if ( hasLinkValue ) {
+			// If there is a link then exist editing mode and show preview.
+			stopEditing();
+		} else {
+			// If there is no link value, then remove the link entirely.
+			onRemove?.();
+		}
+
+		onCancel?.();
+	};
+
 	const currentUrlInputValue = propInputValue || internalUrlInputValue;
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
@@ -247,8 +272,9 @@ function LinkControl( {
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
-	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
+	const showTextControl = hasLinkValue && hasTextControl;
 
+	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	return (
 		<div
 			tabIndex={ -1 }
@@ -261,7 +287,7 @@ function LinkControl( {
 				</div>
 			) }
 
-			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
+			{ isEditing && (
 				<>
 					<div
 						className={ classnames( {
@@ -271,6 +297,7 @@ function LinkControl( {
 					>
 						{ showTextControl && (
 							<TextControl
+								__nextHasNoMarginBottom
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label="Text"
@@ -298,17 +325,7 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							useLabel={ showTextControl }
-						>
-							<div className="block-editor-link-control__search-actions">
-								<Button
-									onClick={ handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									disabled={ currentInputIsEmpty } // Disallow submitting empty values.
-								/>
-							</div>
-						</LinkControlSearchInput>
+						/>
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -333,15 +350,34 @@ function LinkControl( {
 				/>
 			) }
 
-			{ showSettingsDrawer && (
-				<div className="block-editor-link-control__tools">
-					<LinkControlSettingsDrawer
-						value={ value }
-						settings={ settings }
-						onChange={ onChange }
-					/>
-				</div>
-			) }
+			<div className="block-editor-link-control__drawer">
+				{ showSettingsDrawer && (
+					<div className="block-editor-link-control__tools">
+						<LinkControlSettingsDrawer
+							value={ value }
+							settings={ settings }
+							onChange={ onChange }
+						/>
+					</div>
+				) }
+
+				{ isEditing && (
+					<div className="block-editor-link-control__search-actions">
+						<Button
+							variant="primary"
+							onClick={ handleSubmit }
+							className="xblock-editor-link-control__search-submit"
+							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
+						>
+							{ __( 'Apply' ) }
+						</Button>
+						<Button variant="tertiary" onClick={ handleCancel }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</div>
+				) }
+			</div>
+
 			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);

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

@@ -49,7 +49,6 @@ $preview-image-height: 140px;
 	> .components-base-control__field {
 		display: flex;
 		align-items: center;
-		margin: 0;
 	}
 
 	.components-base-control__label {
@@ -65,7 +64,6 @@ $preview-image-height: 140px;
 		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
 		padding: 11px $grid-unit-20;
-		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
 		margin: 0;
 		position: relative;
 		border: 1px solid $gray-300;
@@ -78,20 +76,10 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-actions {
-	position: absolute;
-	/*
-	 * Actions must be positioned on top of URLInput, since the input will grow
-	 * when suggestions are rendered.
-	 *
-	 * Compensate for:
-	 *  - Border (1px)
-	 *  - Vertically, for the difference in height between the input (40px) and
-	 *    the icon buttons.
-	 *  - Horizontally, pad to the minimum of: default input padding, or the
-	 *    equivalent of the vertical padding.
-	 */
-	top: 1px + ( ( 40px - $button-size ) * 0.5 );
-	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
+	display: flex;
+	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
+	justify-content: flex-start;
+	gap: $grid-unit-10;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -438,9 +426,10 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
-.block-editor-link-control__tools {
+.block-editor-link-control__drawer {
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20;
@@ -480,14 +469,8 @@ $preview-image-height: 140px;
 		position: absolute;
 		left: auto;
 		bottom: auto;
-		/*
-		 * Position spinner to the left of the actions.
-		 *
-		 * Compensate for:
-		 *  - Input padding right ($button-size)
-		 */
 		top: calc(50% - #{$spinner-size} / 2);
-		right: $button-size;
+		right: $grid-unit-20;
 	}
 }
 

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

@@ -537,7 +537,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -555,7 +555,7 @@ describe( 'Manual link entry', () => {
 				await user.keyboard( '[Enter]' );
 
 				submitButton = screen.getByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -578,7 +578,7 @@ describe( 'Manual link entry', () => {
 				} );
 
 				let submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				expect( submitButton ).toBeDisabled();
@@ -597,7 +597,7 @@ describe( 'Manual link entry', () => {
 				await user.click( submitButton );
 
 				submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
+					name: 'Apply',
 				} );
 
 				// Verify the UI hasn't allowed submission.
@@ -608,6 +608,135 @@ 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' ],
@@ -1859,7 +1988,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Submit',
+			name: 'Apply',
 		} );
 
 		await user.click( submitButton );