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

package/src/content.scss

@@ -12,5 +12,6 @@
 @use "./components/iframe/content.scss" as *;
 @use "./components/media-placeholder/content.scss" as *;
 @use "./components/plain-text/content.scss" as *;
+@use "./components/plain-text/style.scss" as *;
 @use "./components/rich-text/content.scss" as *;
 @use "./components/warning/content.scss" as *;

package/src/hooks/align.jsx

@@ -6,7 +6,9 @@ import {
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { BlockControls, BlockAlignmentControl } from '../components';
-import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
+import useAvailableAlignments, {
+	useAlignmentMenu,
+} from '../components/block-alignment-control/use-available-alignments';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
@@ -110,11 +112,18 @@ function BlockEditAlignmentToolbarControlsPure( {
 		hasBlockSupport( blockName, 'alignWide', true )
 	);
 
-	const validAlignments = useAvailableAlignments(
-		blockAllowedAlignments
-	).map( ( { name } ) => name );
+	const { enabled, unavailable } = useAlignmentMenu( blockAllowedAlignments );
 	const blockEditingMode = useBlockEditingMode();
-	if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
+	/*
+	 * Render whenever there is something to say, which includes having only
+	 * unavailable alignments to report: a Group supports nothing but wide and
+	 * full, so in a layout offering neither the control would otherwise vanish
+	 * from the block most likely to want them.
+	 */
+	if (
+		( ! enabled.length && ! unavailable.length ) ||
+		blockEditingMode !== 'default'
+	) {
 		return null;
 	}
 
@@ -134,7 +143,14 @@ function BlockEditAlignmentToolbarControlsPure( {
 			<BlockAlignmentControl
 				value={ align }
 				onChange={ updateAlignment }
-				controls={ validAlignments }
+				/*
+				 * Pass the alignments the block itself supports rather than the
+				 * ones the current layout leaves available. The control filters
+				 * them again, but keeping the unfiltered list lets it tell the
+				 * difference between an alignment this block never had and one a
+				 * parent layout has taken away.
+				 */
+				controls={ blockAllowedAlignments }
 			/>
 		</BlockControls>
 	);

package/src/hooks/background.jsx

@@ -219,7 +219,7 @@ export function BackgroundImagePanel( {
 				...style?.background,
 				gradient: gradient
 					? 'var:preset|gradient|' + gradient
-					: style?.background?.gradient ?? style?.color?.gradient,
+					: ( style?.background?.gradient ?? style?.color?.gradient ),
 			},
 		} ),
 	};

package/src/hooks/block-bindings.jsx

@@ -26,7 +26,7 @@ const useToolsPanelDropdownMenuProps = () => {
 					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
 					offset: 259,
 				},
-		  }
+			}
 		: {};
 };
 

package/src/hooks/block-hooks.scss

@@ -2,7 +2,6 @@
 @use "@wordpress/base-styles/colors" as *;
 
 .block-editor-hooks__block-hooks {
-
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
@@ -16,8 +15,3 @@
 		margin-bottom: $grid-unit-20;
 	}
 }
-
-.block-editor-hooks__position-control-item-hint {
-	color: var(--wpds-color-foreground-content-neutral-weak);
-	margin-block-start: $grid-unit-05;
-}

package/src/hooks/border.jsx

@@ -173,10 +173,10 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 				setAttributes( {
 					style: setStyleForState( style, selectedState, newStyle ),
 				} );
-		  }
+			}
 		: ( newStyle ) => {
 				setAttributes( styleToAttributes( newStyle ) );
-		  };
+			};
 
 	if ( ! isEnabled ) {
 		return null;

package/src/hooks/contrast-checker.js

@@ -156,7 +156,7 @@ export default function useBlockColorContrastWarning( {
 				linkColor: checkLinkColor ? colors.linkColor : undefined,
 				messageOverride,
 				enableAlphaChecker: true,
-		  } )
+			} )
 		: null;
 
 	// The popover Notice that displays this warning is muted

package/src/hooks/dimensions.jsx

@@ -101,12 +101,12 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				setAttributes( {
 					style: setStyleForState( style, selectedState, newStyle ),
 				} );
-		  }
+			}
 		: ( newStyle ) => {
 				setAttributes( {
 					style: cleanEmptyObject( newStyle ),
 				} );
-		  };
+			};
 
 	if ( ! isEnabled ) {
 		return null;

package/src/hooks/duotone.jsx

@@ -186,7 +186,7 @@ function DuotonePanelPure( { style, setAttributes, name, clientId } ) {
 							: getDuotonePresetFromColors(
 									newDuotone,
 									duotonePalette
-							  );
+								);
 
 						const newStyle = {
 							...style,
@@ -301,7 +301,7 @@ function useDuotoneStyles( {
 							? getDuotoneStylesheet( selector, filterId )
 							: getDuotoneUnsetStylesheet( selector ),
 					__unstableType: 'presets',
-			  }
+				}
 			: undefined
 	);
 	usePrivateStyleOverride(
@@ -312,7 +312,7 @@ function useDuotoneStyles( {
 							? getDuotoneFilter( filterId, colors )
 							: '',
 					__unstableType: 'svgs',
-			  }
+				}
 			: undefined
 	);
 

package/src/hooks/elements.jsx

@@ -88,10 +88,10 @@ export function ElementsEdit( {
 				setAttributes( {
 					style: setStyleForState( style, selectedState, newStyle ),
 				} );
-		  }
+			}
 		: ( newStyle ) => {
 				setAttributes( { style: cleanEmptyObject( newStyle ) } );
-		  };
+			};
 
 	// Text and background color failures are reported by the Typography and
 	// Background panels, which own those selections.
@@ -123,7 +123,7 @@ export function ElementsEdit( {
 		: getBlockSupport( name, [
 				COLOR_SUPPORT_KEY,
 				'__experimentalDefaultControls',
-		  ] );
+			] );
 
 	const Wrapper = asWrapper || ElementsInspectorControl;
 

package/src/hooks/fit-text.jsx

@@ -297,7 +297,7 @@ export function FitTextControl( {
 						? __( 'Text will resize to fit its container.' )
 						: __(
 								'The text will resize to fit its container, resetting other font size settings.'
-						  )
+							)
 				}
 			/>
 		</ToolsPanelItem>

package/src/hooks/gap.js

@@ -1,4 +1,5 @@
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import { normalizeLegacyLayout } from '../layouts/utils';
 
 /**
  * Returns whether the current layout can use separate row and column gaps.
@@ -8,10 +9,7 @@ import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/util
  * @return {boolean} Whether axial block gap controls should be available.
  */
 export function isAxialBlockGapAllowed( layout, defaultLayout ) {
-	const usedLayout =
-		layout?.inherit || layout?.contentSize || layout?.wideSize
-			? { ...layout, type: 'constrained' }
-			: layout || defaultLayout || {};
+	const usedLayout = normalizeLegacyLayout( layout ) || defaultLayout || {};
 
 	return [ 'flex', 'grid' ].includes( usedLayout?.type );
 }

package/src/hooks/index.js

@@ -4,7 +4,6 @@ import {
 	createBlockSaveFilter,
 } from './utils';
 import './compat';
-import './cross-origin-isolation';
 import align from './align';
 import background from './background';
 import './lock';
@@ -21,6 +20,7 @@ import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
 import textAlign from './text-align';
+import textShadow from './text-shadow';
 import fitText from './fit-text';
 import border from './border';
 import customCSS from './custom-css';
@@ -66,6 +66,7 @@ createBlockListBlockFilter( [
 	duotone,
 	fontFamily,
 	fontSize,
+	textShadow,
 	fitText,
 	border,
 	customCSS,
@@ -86,6 +87,7 @@ createBlockSaveFilter( [
 	style,
 	fontFamily,
 	fontSize,
+	textShadow,
 ] );
 
 export { useCustomSides } from './dimensions';

package/src/hooks/layout-child.jsx

@@ -65,7 +65,7 @@ export function getChildLayoutStyleRules( {
 		? {
 				...layout,
 				...viewportOverrides,
-		  }
+			}
 		: layout;
 	const hasViewportOverride = ( key ) =>
 		Object.hasOwn( viewportOverrides || {}, key );
@@ -121,9 +121,8 @@ export function getChildLayoutStyleRules( {
 		hasViewportOverride( 'columnSpan' )
 	) {
 		if ( columnStart && columnSpan ) {
-			declarations[
-				'grid-column'
-			] = `${ columnStart } / span ${ columnSpan }`;
+			declarations[ 'grid-column' ] =
+				`${ columnStart } / span ${ columnSpan }`;
 		} else if ( columnStart ) {
 			declarations[ 'grid-column' ] = `${ columnStart }`;
 		} else if ( columnSpan ) {

package/src/hooks/layout.jsx

@@ -23,6 +23,7 @@ import { useSettings } from '../components/use-settings';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
+import { normalizeLegacyLayout } from '../layouts/utils';
 import { cleanEmptyObject, useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 import { globalStylesDataKey } from '../store/private-keys';
@@ -162,9 +163,7 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
-		layout?.inherit || layout?.contentSize || layout?.wideSize
-			? { ...layout, type: 'constrained' }
-			: layout || defaultBlockLayout || {};
+		normalizeLegacyLayout( layout ) || defaultBlockLayout || {};
 
 	const layoutClassnames = [];
 
@@ -231,14 +230,13 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
  */
 export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	const { layout = {}, style = {} } = blockAttributes;
-	// Update type for blocks using legacy layouts.
-	const usedLayout =
-		layout?.inherit || layout?.contentSize || layout?.wideSize
-			? { ...layout, type: 'constrained' }
-			: layout || {};
+	const usedLayout = normalizeLegacyLayout( layout ) || {};
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
 	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
-	const hasBlockGapSupport = blockGapSupport !== null;
+	// Like the server's `isset()` check, an unset or `null` setting means the
+	// theme has not opted into block gap.
+	const hasBlockGapSupport =
+		blockGapSupport !== null && blockGapSupport !== undefined;
 	return fullLayoutType?.getLayoutStyle?.( {
 		blockName,
 		selector,
@@ -444,7 +442,7 @@ function LayoutPanelPure( {
 		? cleanEmptyObject( {
 				...baseLayout,
 				...stateLayout,
-		  } ) || {}
+			} ) || {}
 		: baseLayout;
 	const resetLayoutDefaults = isViewportLayoutState
 		? baseLayout
@@ -524,7 +522,7 @@ function LayoutPanelPure( {
 	const hasInheritToggleValue = () =>
 		isViewportLayoutState
 			? ( usedLayout?.type ?? 'default' ) !==
-			  ( resetLayoutDefaults?.type ?? 'default' )
+				( resetLayoutDefaults?.type ?? 'default' )
 			: layout?.type === 'constrained';
 	const hasLayoutTypeValue = () =>
 		( usedLayout?.type ?? 'default' ) !==
@@ -559,10 +557,10 @@ function LayoutPanelPure( {
 									isUsingContentWidth()
 										? __(
 												'Nested blocks use content width with options for full and wide widths.'
-										  )
+											)
 										: __(
 												'Nested blocks will fill the width of this container.'
-										  )
+											)
 								}
 							/>
 						</ToolsPanelItem>
@@ -696,14 +694,15 @@ function BlockWithLayoutStyles( {
 	const { default: defaultBlockLayout } =
 		getBlockSupport( name, layoutBlockSupportKey ) || {};
 	const usedLayout =
-		layout?.inherit || layout?.contentSize || layout?.wideSize
-			? { ...layout, type: 'constrained' }
-			: layout || defaultBlockLayout || {};
+		normalizeLegacyLayout( layout ) || defaultBlockLayout || {};
 
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }`;
-	const hasBlockGapSupport = blockGapSupport !== null;
+	// Like the server's `isset()` check, an unset or `null` setting means the
+	// theme has not opted into block gap.
+	const hasBlockGapSupport =
+		blockGapSupport !== null && blockGapSupport !== undefined;
 
 	// Get CSS string for the current layout type.
 	// The CSS and `style` element is only output if it is not empty.
@@ -800,7 +799,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						variationBlockGapValue = variationName
 							? globalStyles?.blocks?.[ name ]?.variations?.[
 									variationName
-							  ]?.spacing?.blockGap
+								]?.spacing?.blockGap
 							: undefined;
 					}
 

package/src/hooks/position.jsx

@@ -3,8 +3,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useId, useMemo } from '@wordpress/element';
-// eslint-disable-next-line @wordpress/use-recommended-components -- Use the portal-based popup to avoid inspector clipping.
+import { useMemo } from '@wordpress/element';
 import { SelectControl } from '@wordpress/ui';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
@@ -15,25 +14,22 @@ import { store as blockEditorStore } from '../store';
 const POSITION_SUPPORT_KEY = 'position';
 
 const DEFAULT_OPTION = {
-	key: 'default',
 	value: '',
 	label: __( 'Default' ),
 };
 
 const STICKY_OPTION = {
-	key: 'sticky',
 	value: 'sticky',
 	label: _x( 'Sticky', 'Name for the value of the CSS position property' ),
-	hint: __(
+	description: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
 };
 
 const FIXED_OPTION = {
-	key: 'fixed',
 	value: 'fixed',
 	label: _x( 'Fixed', 'Name for the value of the CSS position property' ),
-	hint: __( 'The block will not move when the page is scrolled.' ),
+	description: __( 'The block will not move when the page is scrolled.' ),
 };
 
 const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
@@ -210,7 +206,7 @@ export function PositionPanelPure( {
 						'The block will stick to the scrollable area of the parent %s block.'
 					),
 					blockInformation.title
-			  )
+				)
 			: null;
 
 	const options = useMemo( () => {
@@ -252,7 +248,6 @@ export function PositionPanelPure( {
 	const selectedOption = value
 		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
 		: DEFAULT_OPTION;
-	const hintIdPrefix = useId();
 
 	// Only display position controls if there is at least one option to choose from.
 	return options.length > 1 ? (
@@ -267,33 +262,7 @@ export function PositionPanelPure( {
 				onValueChange={ ( selectedItem ) => {
 					onChangeType( selectedItem.value );
 				} }
-			>
-				{ options.map( ( option ) => {
-					const hintId = option.hint
-						? `${ hintIdPrefix }-${ option.key }`
-						: undefined;
-
-					return (
-						<SelectControl.Item
-							key={ option.key }
-							value={ option }
-							label={ option.label }
-							aria-describedby={ hintId }
-						>
-							<div>{ option.label }</div>
-							{ option.hint && (
-								<div
-									id={ hintId }
-									className="block-editor-hooks__position-control-item-hint"
-									aria-hidden="true"
-								>
-									{ option.hint }
-								</div>
-							) }
-						</SelectControl.Item>
-					);
-				} ) }
-			</SelectControl>
+			/>
 		</InspectorControls>
 	) : null;
 }

package/src/hooks/states.jsx

@@ -71,9 +71,11 @@ const EMPTY_STATE_OPTIONS = [];
  * @param {string}   props.name     Block name.
  * @param {Object}   props.value    Currently selected style-state value.
  * @param {Function} props.onChange Callback when style-state selection changes.
+ * @param {Element}  props.children Optional menu content rendered after the
+ *                                  state groups.
  * @return {Element|null} State control component, or null if not applicable.
  */
-export function BlockStatesControl( { name, value, onChange } ) {
+export function BlockStatesControl( { name, value, onChange, children } ) {
 	const pseudoStateOptions = useMemo(
 		() => getPseudoStateOptions( name ),
 		[ name ]
@@ -91,7 +93,9 @@ export function BlockStatesControl( { name, value, onChange } ) {
 			onChangePseudoState={ ( pseudo ) => onChange( { pseudo } ) }
 			popoverProps={ dropdownMenuProps.popoverProps }
 			showText={ false }
-		/>
+		>
+			{ children }
+		</StateControl>
 	);
 }
 

package/src/hooks/test/layout.jsdom.test.js

@@ -1,13 +1,56 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
 import {
 	getLayoutStateOverrides,
 	getResetLayout,
 	getResponsiveLayoutStyles,
 	hasLayoutPanelControls,
+	useLayoutStyles,
 } from '../layout';
 import { getLayoutType } from '../../layouts';
+import { useSettings } from '../../components/use-settings';
+
+vi.mock(
+	import( '../../components/use-settings' ),
+	async ( importOriginal ) => ( {
+		...( await importOriginal() ),
+		useSettings: vi.fn(),
+	} )
+);
 
 describe( 'layout', () => {
+	describe( 'useLayoutStyles()', () => {
+		const attributes = {
+			layout: { type: 'flex' },
+			style: { spacing: { blockGap: '10px' } },
+		};
+
+		it.each( [ null, undefined ] )(
+			'outputs no layout styles when the block gap setting is %s',
+			( blockGapSetting ) => {
+				useSettings.mockReturnValue( [ blockGapSetting ] );
+
+				const { result } = renderHook( () =>
+					useLayoutStyles( attributes, 'test/block', '.my-container' )
+				);
+
+				expect( result.current ).toBe( '' );
+			}
+		);
+
+		it( 'outputs block gap styles when the theme opts into block gap', () => {
+			useSettings.mockReturnValue( [ true ] );
+
+			const { result } = renderHook( () =>
+				useLayoutStyles( attributes, 'test/block', '.my-container' )
+			);
+
+			expect( result.current ).toContain(
+				'.my-container { gap: 10px; }'
+			);
+		} );
+	} );
+
 	describe( 'hasLayoutPanelControls()', () => {
 		it( 'does not show the layout panel when every flex layout control is disabled', () => {
 			expect(

package/src/hooks/text-shadow.ts

@@ -0,0 +1,105 @@
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+import type { BlockType } from '@wordpress/blocks';
+import TokenList from '@wordpress/token-list';
+import { kebabCase } from '@wordpress/kebab-case';
+import { shouldSkipSerialization } from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+
+export const TEXT_SHADOW_SUPPORT_KEY = 'typography.textShadow';
+
+interface TextShadowAttributes {
+	textShadow?: string;
+}
+
+interface SaveProps {
+	className?: string;
+	[ key: string ]: unknown;
+}
+
+/**
+ * Filters registered block settings, extending attributes to include
+ * the `textShadow` attribute.
+ *
+ * @param settings Original block settings.
+ * @return Filtered block settings.
+ */
+function addAttributes( settings: BlockType ) {
+	if ( ! hasBlockSupport( settings, TEXT_SHADOW_SUPPORT_KEY ) ) {
+		return settings;
+	}
+
+	// Allow blocks to specify a default value if needed.
+	if ( ! settings.attributes.textShadow ) {
+		Object.assign( settings.attributes, {
+			textShadow: {
+				type: 'string',
+			},
+		} );
+	}
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject the text shadow preset
+ * class name.
+ *
+ * @param props      Additional props applied to save element.
+ * @param blockType  Block type.
+ * @param attributes Block attributes.
+ * @return Filtered props applied to save element.
+ */
+function addSaveProps(
+	props: SaveProps,
+	blockType: string | BlockType,
+	attributes: TextShadowAttributes | undefined
+) {
+	if ( ! hasBlockSupport( blockType, TEXT_SHADOW_SUPPORT_KEY ) ) {
+		return props;
+	}
+
+	if (
+		shouldSkipSerialization(
+			blockType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'textShadow'
+		)
+	) {
+		return props;
+	}
+
+	if ( ! attributes?.textShadow ) {
+		return props;
+	}
+
+	// Use TokenList to dedupe classes.
+	const classes = new TokenList( props.className );
+	classes.add( `has-${ kebabCase( attributes.textShadow ) }-text-shadow` );
+	const newClassName = classes.value;
+	props.className = newClassName ? newClassName : undefined;
+
+	return props;
+}
+
+function useBlockProps( {
+	name,
+	textShadow,
+}: TextShadowAttributes & { name: string } ) {
+	return addSaveProps( {}, name, { textShadow } );
+}
+
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'textShadow' ],
+	hasSupport( name: string ) {
+		return hasBlockSupport( name, TEXT_SHADOW_SUPPORT_KEY );
+	},
+};
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/textShadow/addAttribute',
+	addAttributes
+);