@wordpress/block-editor 12.4.0 → 12.5.0

package/src/components/block-inspector/style.scss

@@ -20,7 +20,8 @@
 
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
-	.components-query-controls {
+	.components-query-controls,
+	.components-range-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

package/src/components/block-lock/toolbar.js

@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
 
 /**
@@ -12,7 +13,7 @@ import { lock } from '@wordpress/icons';
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
 
-export default function BlockLockToolbar( { clientId } ) {
+export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
@@ -20,11 +21,37 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLock ) {
-		return null;
-	}
+	const lockButtonRef = useRef( null );
+	const isFirstRender = useRef( true );
+
+	const shouldHideBlockLockUI =
+		! canLock || ( canEdit && canMove && canRemove );
+
+	// Restore focus manually on the first focusable element in the toolbar
+	// when the block lock modal is closed and the block is not locked anymore.
+	// See https://github.com/WordPress/gutenberg/issues/51447
+	useEffect( () => {
+		if ( isFirstRender.current ) {
+			isFirstRender.current = false;
+			return;
+		}
+
+		if ( ! isModalOpen && shouldHideBlockLockUI ) {
+			focus.focusable
+				.find( wrapperRef.current, {
+					sequential: false,
+				} )
+				.find(
+					( element ) =>
+						element.tagName === 'BUTTON' &&
+						element !== lockButtonRef.current
+				)
+				?.focus();
+		}
+		// wrapperRef is a reference object and should be stable
+	}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );
 
-	if ( canEdit && canMove && canRemove ) {
+	if ( shouldHideBlockLockUI ) {
 		return null;
 	}
 
@@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
+					ref={ lockButtonRef }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -213,16 +213,12 @@ const BlockActionsMenu = ( {
 			id: 'convertToRegularBlocksOption',
 			label:
 				innerBlockCount > 1
-					? __( 'Convert to regular blocks' )
-					: __( 'Convert to regular block' ),
+					? __( 'Detach patterns' )
+					: __( 'Detach pattern' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
-				const successNotice =
-					innerBlockCount > 1
-						? /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular blocks' )
-						: /* translators: %s: name of the reusable block */
-						  __( '%s converted to regular block' );
+				/* translators: %s: name of the synced block */
+				const successNotice = __( '%s detached' );
 				createSuccessNotice(
 					sprintf(
 						successNotice,

package/src/components/block-parent-selector/index.js

@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -24,14 +25,15 @@ import { store as blockEditorStore } from '../../store';
 export default function BlockParentSelector() {
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
+	const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const parents = getBlockParents( selectedBlockClientId );
@@ -41,11 +43,14 @@ export default function BlockParentSelector() {
 			const settings = getSettings();
 			return {
 				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
+				isVisible:
+					_firstParentClientId &&
+					getBlockEditingMode( _firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						_parentBlockType,
+						'__experimentalParentSelector',
+						true
+					),
 				isDistractionFree: settings.isDistractionFree,
 			};
 		},
@@ -66,7 +71,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

package/src/components/block-removal-warning-modal/index.js

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -16,38 +16,26 @@ import { __, _n } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-// In certain editing contexts, we'd like to prevent accidental removal of
-// important blocks. For example, in the site editor, the Query Loop block is
-// deemed important. In such cases, we'll ask the user for confirmation that
-// they intended to remove such block(s).
-//
-// @see https://github.com/WordPress/gutenberg/pull/51145
-export const blockTypePromptMessages = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-};
-
-export function BlockRemovalWarningModal() {
+export function BlockRemovalWarningModal( { rules } ) {
 	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
 		( select ) =>
 			unlock( select( blockEditorStore ) ).getRemovalPromptData()
 	);
 
 	const {
-		clearRemovalPrompt,
-		toggleRemovalPromptSupport,
+		clearBlockRemovalPrompt,
+		setBlockRemovalRules,
 		privateRemoveBlocks,
 	} = unlock( useDispatch( blockEditorStore ) );
 
-	// Signalling the removal prompt is in place.
+	// Load block removal rules, simultaneously signalling that the block
+	// removal prompt is in place.
 	useEffect( () => {
-		toggleRemovalPromptSupport( true );
+		setBlockRemovalRules( rules );
 		return () => {
-			toggleRemovalPromptSupport( false );
+			setBlockRemovalRules();
 		};
-	}, [ toggleRemovalPromptSupport ] );
+	}, [ rules, setBlockRemovalRules ] );
 
 	if ( ! blockNamesForPrompt ) {
 		return;
@@ -55,34 +43,33 @@ export function BlockRemovalWarningModal() {
 
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
-		clearRemovalPrompt();
+		clearBlockRemovalPrompt();
 	};
 
 	return (
 		<Modal
 			title={ __( 'Are you sure?' ) }
-			onRequestClose={ clearRemovalPrompt }
+			onRequestClose={ clearBlockRemovalPrompt }
+			style={ {
+				maxWidth: '40rem',
+			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
 			) : (
 				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
 					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>
-							{ blockTypePromptMessages[ name ] }
-						</li>
+						<li key={ name }>{ rules[ name ] }</li>
 					) ) }
 				</ul>
 			) }
 			<p>
-				{ _n(
-					'Removing this block is not advised.',
-					'Removing these blocks is not advised.',
-					blockNamesForPrompt.length
-				) }
+				{ blockNamesForPrompt.length > 1
+					? __( 'Removing these blocks is not advised.' )
+					: __( 'Removing this block is not advised.' ) }
 			</p>
 			<HStack justify="right">
-				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button variant="primary" onClick={ onConfirmRemoval }>

package/src/components/block-toolbar/index.js

@@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -123,18 +125,19 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	} );
 
 	return (
-		<div className={ classes }>
+		<div className={ classes } ref={ toolbarWrapperRef }>
 			{ ! isMultiToolbar &&
 				isLargeViewport &&
 				blockEditingMode === 'default' && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					blockEditingMode === 'default' && (
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+				blockEditingMode === 'default' && (
+					<div ref={ nodeRef } { ...showMoversGestures }>
 						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 							<BlockSwitcher clientIds={ blockClientIds } />
 							{ ! isMultiToolbar && (
 								<BlockLockToolbar
 									clientId={ blockClientIds[ 0 ] }
+									wrapperRef={ toolbarWrapperRef }
 								/>
 							) }
 							<BlockMover
@@ -142,8 +145,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
-					) }
-			</div>
+					</div>
+				) }
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
 			) }

package/src/components/block-tools/block-contextual-toolbar.js

@@ -15,7 +15,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { levelUp } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
@@ -57,6 +56,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
@@ -93,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 			{ isFixed && isLargeViewport && blockType && (
 				<ToolbarGroup
 					className={
@@ -104,13 +105,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					<ToolbarItem
 						as={ ToolbarButton }
 						ref={ toolbarButtonRef }
-						icon={
-							isCollapsed ? (
-								<BlockIcon icon={ blockType.icon } />
-							) : (
-								levelUp
-							)
-						}
+						icon={ isCollapsed ? next : previous }
 						onClick={ () => {
 							setIsCollapsed( ( collapsed ) => ! collapsed );
 							toolbarButtonRef.current.focus();
@@ -118,12 +113,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						label={
 							isCollapsed
 								? __( 'Show block tools' )
-								: __( 'Show document tools' )
+								: __( 'Hide block tools' )
 						}
 					/>
 				</ToolbarGroup>
 			) }
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }

package/src/components/block-tools/style.scss

@@ -121,17 +121,21 @@
 		}
 	}
 
+	&:has(.block-editor-block-toolbar:empty) {
+		display: none;
+	}
+
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
 
 	@include break-medium() {
 		&.is-fixed {
 
-			// leave room for block inserter
-			margin-left: $grid-unit-80;
+			// leave room for block inserter, undo and redo, list view
+			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit;
+			top: $admin-bar-height + $grid-unit - $border-width;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -141,32 +145,63 @@
 
 			&.is-collapsed {
 				width: initial;
-				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				// leave room for block inserter
-				margin-left: $grid-unit-80 + $grid-unit-70;
-				top: $grid-unit;
+				// leave room for block inserter, undo and redo, list view
+				// and some margin left
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
-					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar.is-showing-movers {
+				flex-grow: initial;
+				width: initial;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					height: 3 * $grid-unit;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-right: 0;
+					background-color: $gray-300;
+					position: relative;
+					left: math.div(-$grid-unit-05, 2);
+					top: -1px;
 				}
 			}
 
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
-				&::after {
+				&::before {
 					content: "";
 					width: $border-width;
-					height: 24px;
+					height: 3 * $grid-unit;
 					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
+					margin-right: $grid-unit-10;
 					background-color: $gray-300;
-					position: absolute;
-					left: 44px;
+					position: relative;
+					left: 0;
 					top: -1px;
 				}
 			}
@@ -174,6 +209,21 @@
 			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
 				&::before {
 					content: "";
@@ -182,27 +232,20 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -12px; //the padding of buttons
-					height: 24px;
+					left: -8px;
+					height: 3 * $grid-unit;
+					top: -1px;
 				}
 			}
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 6;
-				}
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
 
 				.is-fullscreen-mode & {
-					margin-left: $grid-unit-80 + $grid-unit-80;
-					&.is-collapsed {
-						margin-left: $grid-unit-80 * 7;
-					}
+					margin-left: $grid-unit * 18; // site hub, inserter and margin
 				}
 
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -230,12 +273,14 @@
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
+
 			.block-editor-block-parent-selector__button {
 				position: relative;
 				top: -1px;
 				border: 0;
 				padding-right: 6px;
 				padding-left: 6px;
+
 				&::after {
 					content: "\00B7";
 					font-size: 16px;
@@ -277,7 +322,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 

package/src/components/default-block-appender/content.scss

@@ -26,6 +26,17 @@
 		opacity: 0.62;
 	}
 
+	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
+	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
+	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
+	:where(body .is-layout-constrained) & {
+		> :first-child:first-child {
+			margin-block-start: 0;
+		}
+
+		// Since this particular appender will only ever appear on an entirely empty document, we don't account for last-child.
+	}
+
 	// Dropzone.
 	.components-drop-zone__content-icon {
 		display: none;

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {SelectControlProps[]}
+ */
+export const DEFAULT_ASPECT_RATIO_OPTIONS = [
+	{
+		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
+		value: 'auto',
+	},
+	{
+		label: _x(
+			'Square - 1:1',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '1',
+	},
+	{
+		label: _x(
+			'Standard - 4:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '4/3',
+	},
+	{
+		label: _x(
+			'Portrait - 3:4',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/4',
+	},
+	{
+		label: _x(
+			'Classic - 3:2',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '3/2',
+	},
+	{
+		label: _x(
+			'Classic Portrait - 2:3',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '2/3',
+	},
+	{
+		label: _x(
+			'Wide - 16:9',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '16/9',
+	},
+	{
+		label: _x(
+			'Tall - 9:16',
+			'Aspect ratio option for dimensions control'
+		),
+		value: '9/16',
+	},
+	{
+		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+		value: 'custom',
+		disabled: true,
+		hidden: true,
+	},
+];
+
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+export default function AspectRatioTool( {
+	panelId,
+	value,
+	onChange = () => {},
+	options = DEFAULT_ASPECT_RATIO_OPTIONS,
+	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+	const displayValue = value ?? 'auto';
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Aspect ratio' ) }
+			onDeselect={ () => onChange( undefined ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Aspect ratio' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				size={ '__unstable-large' }
+				__nextHasNoMarginBottom
+			/>
+		</ToolsPanelItem>
+	);
+}