@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "17.1.0",
+	"version": "17.2.1-next.v.202609171837.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,65 +60,64 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.55.0",
-		"@wordpress/base-styles": "^13.1.0",
-		"@wordpress/blob": "^4.55.0",
-		"@wordpress/block-serialization-default-parser": "^5.55.0",
-		"@wordpress/blocks": "^16.0.0",
-		"@wordpress/commands": "^1.55.0",
-		"@wordpress/components": "^40.1.0",
-		"@wordpress/compose": "^8.8.0",
-		"@wordpress/data": "^10.55.0",
-		"@wordpress/dataviews": "^19.0.0",
-		"@wordpress/date": "^5.55.0",
-		"@wordpress/deprecated": "^4.55.0",
-		"@wordpress/dom": "^4.55.0",
-		"@wordpress/element": "^8.7.0",
-		"@wordpress/global-styles-engine": "^1.22.0",
-		"@wordpress/hooks": "^4.55.0",
-		"@wordpress/html-entities": "^4.55.0",
-		"@wordpress/i18n": "^6.28.0",
-		"@wordpress/icons": "^16.0.0",
-		"@wordpress/image-cropper": "^1.19.0",
-		"@wordpress/interactivity": "^6.55.0",
-		"@wordpress/is-shallow-equal": "^5.55.0",
-		"@wordpress/kebab-case": "^1.2.0",
-		"@wordpress/keyboard-shortcuts": "^5.55.0",
-		"@wordpress/keycodes": "^4.55.0",
-		"@wordpress/notices": "^5.55.0",
-		"@wordpress/preferences": "^4.55.0",
-		"@wordpress/priority-queue": "^3.55.0",
-		"@wordpress/private-apis": "^1.55.0",
-		"@wordpress/rich-text": "^7.55.0",
-		"@wordpress/style-engine": "^2.55.0",
-		"@wordpress/token-list": "^3.55.0",
-		"@wordpress/ui": "^0.22.0",
-		"@wordpress/upload-media": "^0.40.0",
-		"@wordpress/url": "^4.55.0",
-		"@wordpress/warning": "^3.55.0",
+		"@wordpress/a11y": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/base-styles": "^13.2.1-next.v.202609171837.0",
+		"@wordpress/blob": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/block-serialization-default-parser": "^5.55.1-next.v.202609171837.0",
+		"@wordpress/blocks": "^16.1.1-next.v.202609171837.0",
+		"@wordpress/commands": "^1.55.2-next.v.202609171837.0",
+		"@wordpress/components": "^41.0.1-next.v.202609171837.0",
+		"@wordpress/compose": "^8.8.2-next.v.202609171837.0",
+		"@wordpress/data": "^10.56.1-next.v.202609171837.0",
+		"@wordpress/dataviews": "^19.0.2-next.v.202609171837.0",
+		"@wordpress/date": "^5.55.1-next.v.202609171837.0",
+		"@wordpress/deprecated": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/dom": "^4.55.2-next.v.202609171837.0",
+		"@wordpress/element": "^8.7.1-next.v.202609171837.0",
+		"@wordpress/global-styles-engine": "^1.23.1-next.v.202609171837.0",
+		"@wordpress/hooks": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/html-entities": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/i18n": "^6.28.1-next.v.202609171837.0",
+		"@wordpress/icons": "^17.0.1-next.v.202609171837.0",
+		"@wordpress/image-cropper": "^1.19.1-next.v.202609171837.0",
+		"@wordpress/interactivity": "^6.55.1-next.v.202609171837.0",
+		"@wordpress/is-shallow-equal": "^5.55.1-next.v.202609171837.0",
+		"@wordpress/kebab-case": "^1.2.1-next.v.202609171837.0",
+		"@wordpress/keyboard-shortcuts": "^5.56.1-next.v.202609171837.0",
+		"@wordpress/keycodes": "^4.56.1-next.v.202609171837.0",
+		"@wordpress/notices": "^5.55.1-next.v.202609171837.0",
+		"@wordpress/preferences": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/priority-queue": "^3.55.1-next.v.202609171837.0",
+		"@wordpress/private-apis": "^1.55.1-next.v.202609171837.0",
+		"@wordpress/rich-text": "^7.55.2-next.v.202609171837.0",
+		"@wordpress/style-engine": "^2.56.1-next.v.202609171837.0",
+		"@wordpress/token-list": "^3.55.1-next.v.202609171837.0",
+		"@wordpress/ui": "^0.23.1-next.v.202609171837.0",
+		"@wordpress/upload-media": "^0.40.2-next.v.202609171837.0",
+		"@wordpress/url": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/warning": "^3.55.1-next.v.202609171837.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
-		"colord": "^2.9.3",
+		"colord": "^2.9.4",
 		"diff": "^8.0.3",
 		"fast-deep-equal": "^3.1.3",
 		"parsel-js": "^1.1.2",
 		"postcss": "^8.4.38",
 		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
-		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.4.2",
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@ariakit/test": "^0.7.4",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.3",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/postcss-prefix-selector": "^1.16.3",
-		"@wordpress/block-library": "^11.0.0",
+		"@wordpress/block-library": "^11.0.2-next.v.202609171837.0",
 		"deep-freeze": "^0.0.1",
 		"storybook": "^10.5.3",
-		"vitest": "^5.0.0"
+		"vitest": "^5.0.0",
+		"vitest-browser-react": "^2.3.0"
 	},
 	"peerDependencies": {
 		"@types/react": "^18 || ^19",
@@ -133,5 +132,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
+	"gitHead": "7fc9f6676debc888d2f071d17cb71837040d4b48"
 }

package/src/autocompleters/block.jsx

@@ -71,11 +71,11 @@ function createBlockCompleter() {
 							categories,
 							collections,
 							filterValue
-					  )
+						)
 					: orderInserterBlockItems(
 							orderBy( items, 'frecency', 'desc' ),
 							prioritizedBlocks
-					  );
+						);
 
 				return initialFilteredItems
 					.filter( ( item ) => item.id !== selectedBlockId )
@@ -133,7 +133,7 @@ function createBlockCompleter() {
 					syncStatus === 'unsynced'
 						? ( blocks ?? [] ).map( ( block ) =>
 								cloneBlock( block )
-						  )
+							)
 						: createBlock(
 								name,
 								initialAttributes,
@@ -141,7 +141,7 @@ function createBlockCompleter() {
 									innerBlocks
 								),
 								innerContent
-						  ),
+							),
 			};
 		},
 	};

package/src/components/alignment-control/ui.jsx

@@ -54,7 +54,7 @@ function AlignmentUI( {
 		: {
 				toggleProps: description ? { description } : {},
 				popoverProps: POPOVER_PROPS,
-		  };
+			};
 
 	return (
 		<UIComponent

package/src/components/background-image-control/index.jsx

@@ -30,7 +30,7 @@ import { getResolvedValue } from '@wordpress/global-styles-engine';
 import { hasBackgroundImageValue } from '../global-styles/background-panel';
 import {
 	InheritanceResetButton,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from '../global-styles/inheritance';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
@@ -160,7 +160,7 @@ function InspectorImagePreviewItem( {
 									/* translators: %s: file name */
 									__( 'Background image: %s' ),
 									filename || label
-							  )
+								)
 							: __( 'No background image selected' ) }
 					</VisuallyHidden>
 				</FlexBlock>
@@ -687,7 +687,7 @@ export default function BackgroundImagePanel( {
 	inheritedValue = value,
 	settings,
 	defaultValues = {},
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 } ) {
 	/*
 	 * Resolve inherited `ref` pointers for background controls.

package/src/components/block-alignment-control/test/index.jsdom.test.jsx

@@ -2,6 +2,8 @@ import { afterEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BlockAlignmentUI from '../ui';
+import { LayoutProvider } from '../../block-list/layout';
+import { BlockEditorProvider } from '../../provider';
 
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
@@ -115,3 +117,268 @@ describe( 'BlockAlignmentUI', () => {
 		expect( onChange ).toHaveBeenCalledWith( 'center' );
 	} );
 } );
+
+/**
+ * A theme offering both wide and full. Without one, those alignments were never
+ * on the table and are not reported as withheld.
+ */
+const THEME_LAYOUT = { contentSize: '600px', wideSize: '1200px' };
+
+function renderWithTheme( ui, layout = THEME_LAYOUT, settings = {} ) {
+	return render(
+		<BlockEditorProvider
+			value={ [] }
+			settings={ { __experimentalFeatures: { layout }, ...settings } }
+		>
+			{ ui }
+		</BlockEditorProvider>
+	);
+}
+
+describe( 'BlockAlignmentUI unavailable alignments', () => {
+	// The block supports every alignment; the default flow layout offers only
+	// none/left/center/right, so wide and full are taken away by the parent.
+	const controls = [ 'left', 'center', 'right', 'wide', 'full' ];
+	const onChange = vi.fn();
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	async function openMenu() {
+		const user = userEvent.setup();
+		renderWithTheme(
+			<BlockAlignmentUI onChange={ onChange } controls={ controls } />
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+		return user;
+	}
+
+	test( 'lists them rather than omitting them, in their usual position', async () => {
+		await openMenu();
+
+		expect(
+			screen
+				.getAllByRole( 'menuitemradio' )
+				.map( ( item ) => item.textContent )
+		).toEqual( [
+			'None',
+			'Wide widthNot available',
+			'Full widthNot available',
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+	} );
+
+	test( 'marks them as disabled while keeping them reachable', async () => {
+		await openMenu();
+
+		const wide = screen.getByRole( 'menuitemradio', {
+			name: /Wide width/,
+		} );
+
+		expect( wide ).toHaveAttribute( 'aria-disabled', 'true' );
+		// `disabled` would remove it from the accessibility tree entirely,
+		// taking the explanation with it.
+		expect( wide ).toBeEnabled();
+	} );
+
+	test( 'does not change the alignment when one is chosen', async () => {
+		const user = await openMenu();
+
+		await user.click(
+			screen.getByRole( 'menuitemradio', { name: /Full width/ } )
+		);
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	test( 'leaves the menu alone when the layout offers every alignment', async () => {
+		const user = userEvent.setup();
+		renderWithTheme(
+			<LayoutProvider
+				value={ {
+					type: 'constrained',
+					contentSize: '600px',
+					wideSize: '1200px',
+				} }
+			>
+				<BlockAlignmentUI onChange={ onChange } controls={ controls } />
+			</LayoutProvider>
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+
+		expect( screen.queryAllByText( 'Not available' ) ).toHaveLength( 0 );
+		expect(
+			screen
+				.getAllByRole( 'menuitemradio' )
+				.map( ( item ) => item.textContent )
+		).toEqual( [
+			'NoneMax 600px wide',
+			'Wide widthMax 1200px wide',
+			'Full width',
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+	} );
+} );
+
+describe( 'BlockAlignmentUI with no available alignments', () => {
+	// Group supports only wide and full, so a flow layout leaves it nothing.
+	const controls = [ 'wide', 'full' ];
+	const onChange = vi.fn();
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	test( 'still offers None alongside what the layout withholds', async () => {
+		const user = userEvent.setup();
+		renderWithTheme(
+			<BlockAlignmentUI onChange={ onChange } controls={ controls } />
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+
+		expect(
+			screen
+				.getAllByRole( 'menuitemradio' )
+				.map( ( item ) => item.textContent )
+		).toEqual( [
+			'None',
+			'Wide widthNot available',
+			'Full widthNot available',
+		] );
+	} );
+
+	test( 'renders nothing when the layout places children itself', () => {
+		const { container } = renderWithTheme(
+			<LayoutProvider value={ { type: 'flex' } }>
+				<BlockAlignmentUI onChange={ onChange } controls={ controls } />
+			</LayoutProvider>
+		);
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );
+
+describe( 'BlockAlignmentUI when the theme withholds alignments', () => {
+	// A theme offering neither is curating its own options globally, so those
+	// alignments stay hidden rather than being reported as unavailable.
+	const controls = [ 'left', 'center', 'right', 'wide', 'full' ];
+	const onChange = vi.fn();
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	async function openMenuForTheme( layout ) {
+		const user = userEvent.setup();
+		renderWithTheme(
+			<BlockAlignmentUI onChange={ onChange } controls={ controls } />,
+			layout
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+	}
+
+	function menuItems() {
+		return screen
+			.getAllByRole( 'menuitemradio' )
+			.map( ( item ) => item.textContent );
+	}
+
+	test( 'hides both when the theme sets no layout at all', async () => {
+		// No provider at all, so the store holds no global layout.
+		const user = userEvent.setup();
+		render(
+			<BlockAlignmentUI onChange={ onChange } controls={ controls } />
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+
+		expect( menuItems() ).toEqual( [
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+	} );
+
+	test( 'hides Wide when the theme sets no wide size', async () => {
+		await openMenuForTheme( { contentSize: '600px' } );
+
+		expect( menuItems() ).toEqual( [
+			'None',
+			'Full widthNot available',
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+	} );
+} );
+
+describe( 'BlockAlignmentUI on a theme without layout support', () => {
+	// Classic themes opt into wide alignments with `add_theme_support`, which
+	// arrives as the `alignWide` setting. There is no layout to withhold
+	// anything, so the menu either offers wide and full or leaves them out.
+	const controls = [ 'left', 'center', 'right', 'wide', 'full' ];
+	const onChange = vi.fn();
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	async function openMenuWithAlignWide( alignWide ) {
+		const user = userEvent.setup();
+		renderWithTheme(
+			<BlockAlignmentUI onChange={ onChange } controls={ controls } />,
+			undefined,
+			{ supportsLayout: false, alignWide }
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Align block' } )
+		);
+	}
+
+	function menuItems() {
+		return screen
+			.getAllByRole( 'menuitemradio' )
+			.map( ( item ) => item.textContent );
+	}
+
+	test( 'offers both when the theme supports wide alignments', async () => {
+		await openMenuWithAlignWide( true );
+
+		expect( screen.queryAllByText( 'Not available' ) ).toHaveLength( 0 );
+		expect( menuItems() ).toEqual( [
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		] );
+	} );
+
+	test( 'hides both when the theme does not support wide alignments', async () => {
+		await openMenuWithAlignWide( false );
+
+		expect( menuItems() ).toEqual( [
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+		] );
+	} );
+} );

package/src/components/block-alignment-control/ui.jsx

@@ -6,7 +6,7 @@ import {
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import useAvailableAlignments from './use-available-alignments';
+import { useAlignmentMenu } from './use-available-alignments';
 import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';
 
 function BlockAlignmentUI( {
@@ -18,13 +18,39 @@ function BlockAlignmentUI( {
 	label = __( 'Align block' ),
 	description,
 } ) {
-	const enabledControls = useAvailableAlignments( controls );
-	const hasEnabledControls = !! enabledControls.length;
+	/*
+	 * Wide and Full are the alignments users look for and fail to find. When a
+	 * parent layout does not offer them they disappear from this menu with no
+	 * explanation, which reads as the editor losing the setting. List them as
+	 * unavailable instead, so the menu says why it cannot do what was asked.
+	 */
+	const { enabled: enabledControls, unavailable: unavailableControls } =
+		useAlignmentMenu( controls );
 
-	if ( ! hasEnabledControls ) {
+	if ( ! enabledControls.length && ! unavailableControls.length ) {
 		return null;
 	}
 
+	/*
+	 * A block whose alignments are all unavailable still needs somewhere to
+	 * anchor them, and `None` is always a valid choice for it.
+	 */
+	const menuControls = enabledControls.length
+		? [ ...enabledControls ]
+		: [ { name: 'none' } ];
+	const enabledNames = menuControls.map( ( { name } ) => name );
+
+	// Unavailable alignments sit where they would have sat had they been
+	// offered, which is directly after `none`.
+	menuControls.splice(
+		enabledNames.indexOf( 'none' ) + 1,
+		0,
+		...unavailableControls.map( ( name ) => ( {
+			name,
+			isUnavailable: true,
+		} ) )
+	);
+
 	function onChangeAlignment( align ) {
 		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
 	}
@@ -53,20 +79,27 @@ function BlockAlignmentUI( {
 						onClick: () => onChangeAlignment( controlName ),
 					};
 				} ),
-		  }
+			}
 		: {
 				toggleProps: description ? { description } : {},
 				children: ( { onClose } ) => {
 					return (
 						<>
 							<MenuGroup className="block-editor-block-alignment-control__menu-group">
-								{ enabledControls.map(
-									( { name: controlName, info } ) => {
+								{ menuControls.map(
+									( {
+										name: controlName,
+										info,
+										isUnavailable,
+									} ) => {
 										const { icon, title } =
 											BLOCK_ALIGNMENTS_CONTROLS[
 												controlName
 											];
 										// If no value is provided, mark as selected the `none` option.
+										// An unavailable alignment can still be the saved value, and
+										// showing it as selected is how the menu says the setting
+										// exists but has no effect in this position.
 										const isSelected =
 											controlName === value ||
 											( ! value &&
@@ -83,6 +116,7 @@ function BlockAlignmentUI( {
 													}
 												) }
 												isSelected={ isSelected }
+												disabled={ isUnavailable }
 												onClick={ () => {
 													onChangeAlignment(
 														controlName
@@ -90,7 +124,11 @@ function BlockAlignmentUI( {
 													onClose();
 												} }
 												role="menuitemradio"
-												info={ info }
+												info={
+													isUnavailable
+														? __( 'Not available' )
+														: info
+												}
 											>
 												{ title }
 											</MenuItem>
@@ -101,7 +139,7 @@ function BlockAlignmentUI( {
 						</>
 					);
 				},
-		  };
+			};
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;
 }