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

package/src/components/block-alignment-control/use-available-alignments.js

@@ -1,5 +1,6 @@
 import { useSelect } from '@wordpress/data';
 import { useLayout } from '../block-list/layout';
+import { useSettings } from '../use-settings';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
@@ -7,6 +8,32 @@ const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
+function useAlignmentSettings( isNoneOnly ) {
+	return useSelect(
+		( select ) => {
+			// If `isNoneOnly` is true, we'll be returning early because there is
+			// nothing to filter on an empty array. We won't need the info from
+			// the `useSelect` but we must call it anyway because Rules of Hooks.
+			// So the callback returns early to avoid block editor subscription.
+			if ( isNoneOnly ) {
+				return {
+					wideControlsEnabled: false,
+					themeSupportsLayout: false,
+					isBlockBasedTheme: false,
+				};
+			}
+
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				wideControlsEnabled: settings.alignWide ?? false,
+				themeSupportsLayout: settings.supportsLayout,
+				isBlockBasedTheme: settings.__unstableIsBlockBasedTheme,
+			};
+		},
+		[ isNoneOnly ]
+	);
+}
+
 export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	// Always add the `none` option if not exists.
 	if ( ! controls.includes( 'none' ) ) {
@@ -14,32 +41,34 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 	const isNoneOnly = controls.length === 1 && controls[ 0 ] === 'none';
 
-	const [ wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme ] =
-		useSelect(
-			( select ) => {
-				// If `isNoneOnly` is true, we'll be returning early because there is
-				// nothing to filter on an empty array. We won't need the info from
-				// the `useSelect` but we must call it anyway because Rules of Hooks.
-				// So the callback returns early to avoid block editor subscription.
-				if ( isNoneOnly ) {
-					return [ false, false, false ];
-				}
-
-				const settings = select( blockEditorStore ).getSettings();
-				return [
-					settings.alignWide ?? false,
-					settings.supportsLayout,
-					settings.__unstableIsBlockBasedTheme,
-				];
-			},
-			[ isNoneOnly ]
-		);
+	const settings = useAlignmentSettings( isNoneOnly );
 	const layout = useLayout();
 
 	if ( isNoneOnly ) {
 		return EMPTY_ARRAY;
 	}
 
+	return getAvailableAlignments( controls, layout, settings );
+}
+
+/**
+ * The store-free part of `useAvailableAlignments`, so the same rules can be
+ * evaluated against more than one layout without a subscription for each.
+ *
+ * @param {string[]} controls                     Alignments the block supports, including `none`.
+ * @param {Object}   layout                       Layout to evaluate against.
+ * @param {Object}   settings                     Editor settings from `useAlignmentSettings`.
+ * @param {boolean}  settings.wideControlsEnabled Whether the theme enables wide alignments.
+ * @param {boolean}  settings.themeSupportsLayout Whether the theme supports the layout config.
+ * @param {boolean}  settings.isBlockBasedTheme   Whether the theme is block based.
+ *
+ * @return {Object[]} The alignments the layout offers.
+ */
+function getAvailableAlignments(
+	controls,
+	layout,
+	{ wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme }
+) {
 	const layoutType = getLayoutType( layout?.type );
 
 	if ( themeSupportsLayout ) {
@@ -85,3 +114,60 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 
 	return alignments;
 }
+
+/**
+ * Returns the alignments a block supports, split into the ones the parent
+ * layout offers (`enabled`) and the wide alignments it does not (`unavailable`).
+ *
+ * An alignment is only `unavailable` when the block supports it, the theme
+ * offers it at the root, and the parent layout does not. The theme check is
+ * measured against the global layout settings, so a theme that sets no wide
+ * size, or no layout at all, is curating its own options rather than
+ * withholding them. Flex and Grid parents never offer alignments to anything,
+ * so under those both lists are empty.
+ *
+ * @param {string[]} controls Alignments the block supports.
+ *
+ * @return {{enabled: Object[], unavailable: string[]}} The split alignments.
+ */
+export function useAlignmentMenu( controls = DEFAULT_CONTROLS ) {
+	// Always add the `none` option if not exists.
+	if ( ! controls.includes( 'none' ) ) {
+		controls = [ 'none', ...controls ];
+	}
+	const isNoneOnly = controls.length === 1 && controls[ 0 ] === 'none';
+
+	const settings = useAlignmentSettings( isNoneOnly );
+	const layout = useLayout();
+	const [ globalLayout ] = useSettings( 'layout' );
+
+	if ( isNoneOnly ) {
+		return { enabled: EMPTY_ARRAY, unavailable: EMPTY_ARRAY };
+	}
+
+	const enabled = getAvailableAlignments( controls, layout, settings );
+	const layoutOffersAlignments = !! getAvailableAlignments(
+		DEFAULT_CONTROLS,
+		layout,
+		settings
+	).length;
+
+	if ( ! layoutOffersAlignments ) {
+		return { enabled, unavailable: EMPTY_ARRAY };
+	}
+
+	const themeNames = getAvailableAlignments(
+		DEFAULT_CONTROLS,
+		{ ...globalLayout, type: 'constrained' },
+		settings
+	).map( ( { name } ) => name );
+	const enabledNames = enabled.map( ( { name } ) => name );
+	const unavailable = controls.filter(
+		( name ) =>
+			WIDE_CONTROLS.includes( name ) &&
+			themeNames.includes( name ) &&
+			! enabledNames.includes( name )
+	);
+
+	return { enabled, unavailable };
+}

package/src/components/block-allowed-blocks/allowed-blocks-control.jsx

@@ -36,7 +36,7 @@ export default function BlockAllowedBlocksControl( { clientId } ) {
 			? filteredBlockTypes
 			: filteredBlockTypes.filter( ( blockType ) =>
 					selectedBlockNames.includes( blockType.name )
-			  );
+				);
 
 	return (
 		<div className="block-editor-block-allowed-blocks-control">

package/src/components/block-bindings/attribute-control.jsx

@@ -9,19 +9,18 @@ import {
 	__experimentalText as WCText,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Intentional early adoption of the new Menu, pending WordPress/gutenberg#76135.
+import { Menu } from '@wordpress/ui';
 import BlockContext from '../block-context';
 import BlockBindingsSourceFieldsList from './source-fields-list';
 import useBlockBindingsUtils from './use-block-bindings-utils';
 import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 
-const { Menu } = unlock( componentsPrivateApis );
-
 /**
  * Renders a control for viewing and editing a block attribute binding.
  *
@@ -132,11 +131,8 @@ export default function BlockBindingsAttributeControl( {
 				} )
 			}
 		>
-			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-				<Menu.TriggerButton
-					render={ <Item /> }
-					disabled={ ! hasCompatibleFields }
-				>
+			<Menu.Root disabled={ ! hasCompatibleFields }>
+				<Menu.Trigger render={ <Item /> }>
 					<VStack
 						className="block-editor-bindings__item"
 						spacing={ 0 }
@@ -150,29 +146,31 @@ export default function BlockBindingsAttributeControl( {
 							{ displayText }
 						</WCText>
 					</VStack>
-				</Menu.TriggerButton>
+				</Menu.Trigger>
 				{ ! isAttributeReadOnly && (
-					<Menu.Popover gutter={ isMobile ? 8 : 36 }>
-						<Menu
-							placement={
-								isMobile ? 'bottom-start' : 'left-start'
-							}
-						>
-							{ Object.entries( compatibleFields ).map(
-								( [ sourceKey, fields ] ) => (
-									<BlockBindingsSourceFieldsList
-										key={ sourceKey }
-										args={ binding?.args }
-										attribute={ attribute }
-										sourceKey={ sourceKey }
-										fields={ fields }
-									/>
-								)
-							) }
-						</Menu>
-					</Menu.Popover>
+					<Menu.Popup
+						positioner={
+							<Menu.Positioner
+								side={ isMobile ? 'bottom' : 'inline-start' }
+								align="start"
+								sideOffset={ isMobile ? 8 : 36 }
+							/>
+						}
+					>
+						{ Object.entries( compatibleFields ).map(
+							( [ sourceKey, fields ] ) => (
+								<BlockBindingsSourceFieldsList
+									key={ sourceKey }
+									args={ binding?.args }
+									attribute={ attribute }
+									sourceKey={ sourceKey }
+									fields={ fields }
+								/>
+							)
+						) }
+					</Menu.Popup>
 				) }
-			</Menu>
+			</Menu.Root>
 		</ToolsPanelItem>
 	);
 }

package/src/components/block-bindings/source-fields-list.jsx

@@ -1,15 +1,13 @@
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 import { getBlockBindingsSource } from '@wordpress/blocks';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Intentional early adoption of the new Menu, pending WordPress/gutenberg#76135.
+import { Menu } from '@wordpress/ui';
 import useBlockBindingsUtils from './use-block-bindings-utils';
-import { unlock } from '../../lock-unlock';
 import BlockContext from '../block-context';
 
-const { Menu } = unlock( componentsPrivateApis );
-
 function BlockBindingsSourceFieldsListItem( {
 	args,
 	attribute,
@@ -43,25 +41,11 @@ function BlockBindingsSourceFieldsListItem( {
 
 	return (
 		<Menu.CheckboxItem
-			onChange={ () => {
-				const isCurrentlySelected =
-					fastDeepEqual( args, field.args ) ??
-					// Deprecate key dependency in 7.0.
-					field.key === args?.key;
-
-				if ( isCurrentlySelected ) {
-					// Unset if the same field is selected again.
-					updateBlockBindings( {
-						[ attribute ]: undefined,
-					} );
-				} else {
-					updateBlockBindings( {
-						[ attribute ]: itemBindings,
-					} );
-				}
+			onCheckedChange={ ( checked ) => {
+				updateBlockBindings( {
+					[ attribute ]: checked ? itemBindings : undefined,
+				} );
 			} }
-			name={ attribute + '-binding' }
-			value={ values[ attribute ] }
 			checked={
 				fastDeepEqual( args, field.args ) ??
 				// Deprecate key dependency in 7.0.
@@ -69,7 +53,7 @@ function BlockBindingsSourceFieldsListItem( {
 			}
 		>
 			<Menu.ItemLabel>{ field.label }</Menu.ItemLabel>
-			<Menu.ItemHelpText>{ values[ attribute ] }</Menu.ItemHelpText>
+			<Menu.ItemDescription>{ values[ attribute ] }</Menu.ItemDescription>
 		</Menu.CheckboxItem>
 	);
 }
@@ -90,14 +74,20 @@ export default function BlockBindingsSourceFieldsList( {
 	const source = getBlockBindingsSource( sourceKey );
 
 	return (
-		<Menu
-			key={ sourceKey }
-			placement={ isMobile ? 'bottom-start' : 'left-start' }
-		>
-			<Menu.SubmenuTriggerItem>
+		<Menu.SubmenuRoot key={ sourceKey }>
+			<Menu.SubmenuTrigger>
 				<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
-			</Menu.SubmenuTriggerItem>
-			<Menu.Popover gutter={ 8 }>
+			</Menu.SubmenuTrigger>
+			<Menu.Popup
+				positioner={
+					<Menu.Positioner
+						side={ isMobile ? 'bottom' : 'inline-start' }
+						align="start"
+						sideOffset={ 8 }
+						alignOffset={ -4 }
+					/>
+				}
+			>
 				<Menu.Group>
 					{ fields.map( ( field ) => (
 						<BlockBindingsSourceFieldsListItem
@@ -113,7 +103,7 @@ export default function BlockBindingsSourceFieldsList( {
 						/>
 					) ) }
 				</Menu.Group>
-			</Menu.Popover>
-		</Menu>
+			</Menu.Popup>
+		</Menu.SubmenuRoot>
 	);
 }

package/src/components/block-bindings/test/attribute-control.jsdom.test.jsx

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getBlockBindingsSource } from '@wordpress/blocks';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import BlockBindingsAttributeControl from '../attribute-control';
+import useBlockBindingsUtils from '../use-block-bindings-utils';
+
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockPointerEvent();
+globalThis.wpVitest.mockScrollIntoView();
+
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	getBlockBindingsSource: vi.fn(),
+} ) );
+vi.mock( import( '@wordpress/components' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	__experimentalToolsPanelItem: ( { children } ) => children,
+} ) );
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useViewportMatch: vi.fn(),
+} ) );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
+vi.mock( import( '../use-block-bindings-utils' ), () => ( {
+	default: vi.fn(),
+} ) );
+
+const updateBlockBindings = vi.fn();
+const field = {
+	args: { key: 'seo_title' },
+	key: 'seo_title',
+	label: 'SEO title',
+	type: 'string',
+};
+const source = {
+	getValues: vi.fn(),
+	label: 'Post meta',
+};
+
+function renderControl( binding ) {
+	useViewportMatch.mockReturnValue( false );
+	getBlockBindingsSource.mockReturnValue( source );
+	useBlockBindingsUtils.mockReturnValue( { updateBlockBindings } );
+	useSelect.mockImplementation( ( _mapSelect, dependencies ) => {
+		if ( dependencies?.length === 3 ) {
+			return { 'core/post-meta': [ field ] };
+		}
+		if ( dependencies?.length === 4 ) {
+			return {};
+		}
+		return { canUpdateBlockBindings: true };
+	} );
+
+	return render(
+		<BlockBindingsAttributeControl
+			attribute="content"
+			binding={ binding }
+			blockName="core/paragraph"
+		/>
+	);
+}
+
+async function openFieldMenu( user ) {
+	await user.click( screen.getByRole( 'button', { name: /content/i } ) );
+	const sourceItem = await screen.findByRole( 'menuitem', {
+		name: 'Post meta',
+	} );
+	await user.click( sourceItem );
+	const fieldItem = await screen.findByRole( 'menuitemcheckbox', {
+		name: 'SEO title',
+	} );
+	return fieldItem;
+}
+
+describe( 'BlockBindingsAttributeControl', () => {
+	beforeEach( () => {
+		updateBlockBindings.mockReset();
+	} );
+
+	it( 'selects a source field', async () => {
+		const user = userEvent.setup();
+		renderControl();
+
+		const fieldItem = await openFieldMenu( user );
+		fireEvent.click( fieldItem );
+
+		expect( updateBlockBindings ).toHaveBeenCalledWith( {
+			content: {
+				source: 'core/post-meta',
+				args: field.args,
+			},
+		} );
+	} );
+
+	it( 'clears the selected source field', async () => {
+		const user = userEvent.setup();
+		renderControl( {
+			source: 'core/post-meta',
+			args: field.args,
+		} );
+
+		const fieldItem = await openFieldMenu( user );
+		fireEvent.click( fieldItem );
+
+		expect( updateBlockBindings ).toHaveBeenCalledWith( {
+			content: undefined,
+		} );
+	} );
+} );

package/src/components/block-canvas/index.jsx

@@ -70,7 +70,7 @@ export function ExperimentalBlockCanvas( {
 			? {
 					scale: zoomLevel,
 					frameSize: '40px',
-			  }
+				}
 			: {};
 
 	if ( ! shouldIframe ) {

package/src/components/block-card/index.jsx

@@ -1,10 +1,6 @@
 import clsx from 'clsx';
-import {
-	Button,
-	Icon as WCIcon,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { Text, Stack } from '@wordpress/ui';
+import { Button, Icon as WCIcon } from '@wordpress/components';
+import { Badge, Text, Stack } from '@wordpress/ui';
 import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -19,8 +15,6 @@ import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-const { Badge: WCBadge } = unlock( componentsPrivateApis );
-
 function OptionalParentSelectButton( { children, onClick } ) {
 	if ( ! onClick ) {
 		return children;
@@ -148,7 +142,7 @@ function BlockCard( {
 												__( 'Go to "%s" block' ),
 												getBlockType( parentBlockName )
 													?.title
-										  )
+											)
 										: __( 'Go to parent block' )
 								}
 								style={
@@ -172,7 +166,7 @@ function BlockCard( {
 								parentClientId
 									? () => {
 											selectBlock( parentClientId );
-									  }
+										}
 									: undefined
 							}
 						>
@@ -185,7 +179,7 @@ function BlockCard( {
 									{ ! parentClientId &&
 										! isChild &&
 										!! name?.length && (
-											<WCBadge>{ title }</WCBadge>
+											<Badge>{ title }</Badge>
 										) }
 								</TitleElement>
 								{ children }

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

@@ -27,6 +27,7 @@
 	align-items: center;
 	flex-wrap: wrap;
 	gap: calc($grid-unit-10 / 2) $grid-unit-10;
+	overflow-wrap: anywhere;
 
 	&.block-editor-block-card__title {
 		font-size: $default-font-size;

package/src/components/block-edit/edit.jsx

@@ -63,7 +63,7 @@ const EditWithGeneratedProps = ( props ) => {
 				attributes?.metadata?.bindings
 					? Object.values( attributes.metadata.bindings ).map(
 							( binding ) => registeredSources[ binding?.source ]
-					  )
+						)
 					: undefined
 			),
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(

package/src/components/block-heading-level-dropdown/index.jsx

@@ -55,7 +55,7 @@ export default function HeadingLevelDropdown( {
 									// translators: %d: heading level e.g: "1", "2", "3"
 									__( 'Heading %d' ),
 									targetLevel
-							  ),
+								),
 					isActive,
 					onClick() {
 						onChange( targetLevel );

package/src/components/block-icon/index.jsx

@@ -20,7 +20,7 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 		? {
 				backgroundColor: icon && icon.background,
 				color: icon && icon.foreground,
-		  }
+			}
 		: {};
 
 	return (

package/src/components/block-icon/test/index.browser.test.jsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { image } from '@wordpress/icons';
+import BlockIcon from '../';
+
+function getIconWrapper( container ) {
+	// The wrapper is intentionally non-semantic.
+	return container.firstChild;
+}
+
+describe( 'BlockIcon', () => {
+	it( 'renders an icon', async () => {
+		const { container } = await render( <BlockIcon icon={ image } /> );
+
+		// The decorative SVG is intentionally hidden from the accessibility tree.
+
+		const icon = container.querySelector( 'svg' );
+		expect( icon ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( icon ).toHaveAttribute( 'focusable', 'false' );
+	} );
+
+	it( 'renders a span without the has-colors classname', async () => {
+		const { container } = await render( <BlockIcon icon={ image } /> );
+
+		expect( getIconWrapper( container ) ).not.toHaveClass( 'has-colors' );
+	} );
+
+	it( 'renders a span with the has-colors classname', async () => {
+		const { container } = await render(
+			<BlockIcon icon={ image } showColors />
+		);
+
+		expect( getIconWrapper( container ) ).toHaveClass( 'has-colors' );
+	} );
+
+	it( 'supports adding a className to the wrapper', async () => {
+		const { container } = await render(
+			<BlockIcon icon={ image } className="foo-bar" />
+		);
+
+		expect( getIconWrapper( container ) ).toHaveClass( 'foo-bar' );
+	} );
+
+	it( 'skips adding background and foreground styles when colors are not enabled', async () => {
+		const { container } = await render(
+			<BlockIcon
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
+			/>
+		);
+
+		expect( getIconWrapper( container ) ).not.toHaveAttribute( 'style' );
+	} );
+
+	it( 'adds background and foreground styles when colors are enabled', async () => {
+		const { container } = await render(
+			<BlockIcon
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
+				showColors
+			/>
+		);
+
+		const styles = window.getComputedStyle( getIconWrapper( container ) );
+		expect( styles.backgroundColor ).toBe( 'rgb(255, 255, 255)' );
+		expect( styles.color ).toBe( 'rgb(0, 0, 0)' );
+	} );
+} );

package/src/components/block-inspector/edit-contents.jsx

@@ -77,9 +77,9 @@ function InlineEditButton( {
 			>
 				{ editedContentOnlySection
 					? /* translators: Button label to leave pattern editing mode. */
-					  __( 'Exit pattern' )
+						__( 'Exit pattern' )
 					: /* translators: Button label to enter pattern editing mode. */
-					  __( 'Edit pattern' ) }
+						__( 'Edit pattern' ) }
 			</Button>
 		</Stack>
 	);