@wordpress/block-editor 11.1.0 → 11.3.0

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import { default as InspectorControls } from '../inspector-controls';
+
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__position"
+			title={ __( 'Position' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot group="position" />
+		</PanelBody>
+	);
+};
+
+export default PositionControls;

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

@@ -2,11 +2,13 @@
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
+import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
+		<PositionControls />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />

package/src/components/inspector-controls-tabs/style.scss

@@ -0,0 +1,15 @@
+.show-icon-labels {
+	.block-editor-block-inspector__tabs .components-tab-panel__tabs {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
+}

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

@@ -16,12 +16,6 @@ import { store as blockEditorStore } from '../../store';
 const EMPTY_ARRAY = [];
 
 function getShowTabs( blockName, tabSettings = {} ) {
-	// Don't allow settings to force the display of tabs if the block inspector
-	// tabs experiment hasn't been opted into.
-	if ( ! window?.__experimentalEnableBlockInspectorTabs ) {
-		return false;
-	}
-
 	// Block specific setting takes precedence over generic default.
 	if ( tabSettings[ blockName ] !== undefined ) {
 		return tabSettings[ blockName ];
@@ -43,16 +37,15 @@ export default function useInspectorControlsTabs( blockName ) {
 		default: defaultGroup,
 		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.
@@ -60,27 +53,40 @@ 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( InspectorAdvancedControls.slotName ) || [] ),
+		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
+		...( 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()
-			.__experimentalBlockInspectorTabs;
+		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );

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/search-input.js

@@ -126,6 +126,7 @@ const LinkControlSearchInput = forwardRef(
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					__nextHasNoMarginBottom
 					label={ useLabel ? 'URL' : undefined }
 					className={ inputClasses }
 					value={ value }

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

@@ -49,12 +49,12 @@ $preview-image-height: 140px;
 	> .components-base-control__field {
 		display: flex;
 		align-items: center;
-		margin: 0;
 	}
 
 	.components-base-control__label {
 		margin-right: $grid-unit-20;
 		margin-bottom: 0;
+		min-width: 29px; // align with search results.
 	}
 
 	input[type="text"],
@@ -64,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;
@@ -77,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 {
@@ -437,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;
@@ -479,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;
 	}
 }