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

package/src/components/global-styles/text-shadow-panel.tsx

@@ -0,0 +1,257 @@
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Composite,
+	Dropdown,
+	SelectControl as WCSelectControl,
+} from '@wordpress/components';
+import { Stack, Text } from '@wordpress/ui';
+import { useRef, useMemo } from '@wordpress/element';
+import { shadow as textShadowIcon, Icon, check, reset } from '@wordpress/icons';
+import type { TextShadowPreset } from '@wordpress/global-styles-engine';
+import clsx from 'clsx';
+import { useSettings } from '../use-settings';
+
+type TextShadowValue = string | undefined;
+
+interface TextShadowProps {
+	textShadow: TextShadowValue;
+	onChange: ( textShadow: TextShadowValue ) => void;
+}
+
+interface TextShadowToggleProps extends TextShadowProps {
+	onToggle: () => void;
+	isOpen: boolean;
+}
+
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ */
+const EMPTY_ARRAY: TextShadowPreset[] = [];
+
+// Above this number of presets, the list is rendered as a compact dropdown
+// rather than a long list of options.
+const PRESETS_SELECT_THRESHOLD = 7;
+
+/**
+ * Extracts the preset slug from a raw text shadow value.
+ *
+ * @param rawValue The stored text shadow value.
+ * @return The preset slug, or undefined for custom values.
+ */
+function getTextShadowPresetSlug( rawValue: TextShadowValue ) {
+	if ( ! rawValue || typeof rawValue !== 'string' ) {
+		return undefined;
+	}
+
+	// Block supports use the `var:preset|text-shadow|slug` format.
+	if ( rawValue.startsWith( 'var:preset|text-shadow|' ) ) {
+		return rawValue.replace( 'var:preset|text-shadow|', '' );
+	}
+
+	// Global styles data uses the `var(--wp--preset--text-shadow--slug)` format.
+	const cssVarMatch = rawValue.match(
+		/^var\(--wp--preset--text-shadow--([^)]+)\)$/
+	);
+	if ( cssVarMatch ) {
+		return cssVarMatch[ 1 ];
+	}
+
+	return undefined;
+}
+
+export function TextShadowPopover( { textShadow, onChange }: TextShadowProps ) {
+	const popoverProps = {
+		placement: 'left-start' as const,
+		offset: 36,
+		shift: true,
+		className: 'block-editor-global-styles__text-shadow-popover',
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-global-styles__text-shadow-dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<TextShadowToggle
+					textShadow={ textShadow }
+					onChange={ onChange }
+					onToggle={ onToggle }
+					isOpen={ isOpen }
+				/>
+			) }
+			renderContent={ () => (
+				<TextShadowControl
+					textShadow={ textShadow }
+					onChange={ onChange }
+				/>
+			) }
+		/>
+	);
+}
+
+function TextShadowControl( { textShadow, onChange }: TextShadowProps ) {
+	const [
+		defaultPresetsEnabled,
+		defaultPresets,
+		themePresets,
+		customPresets,
+	] = useSettings(
+		'typography.defaultTextShadowPresets',
+		'typography.textShadowPresets.default',
+		'typography.textShadowPresets.theme',
+		'typography.textShadowPresets.custom'
+	) as [
+		boolean | undefined,
+		TextShadowPreset[] | undefined,
+		TextShadowPreset[] | undefined,
+		TextShadowPreset[] | undefined,
+	];
+
+	const presets = useMemo(
+		() => [
+			...( ( defaultPresetsEnabled && defaultPresets ) || EMPTY_ARRAY ),
+			...( themePresets || EMPTY_ARRAY ),
+			...( customPresets || EMPTY_ARRAY ),
+		],
+		[ defaultPresetsEnabled, defaultPresets, themePresets, customPresets ]
+	);
+
+	const choices = [
+		{ value: 'none', label: __( 'None' ) },
+		...presets.map( ( preset ) => ( {
+			value: `var:preset|text-shadow|${ preset.slug }`,
+			label: preset.name,
+		} ) ),
+	];
+
+	const activeSlug = getTextShadowPresetSlug( textShadow );
+	const activeValue = activeSlug
+		? `var:preset|text-shadow|${ activeSlug }`
+		: ( textShadow ?? '' );
+	const previewValue = activeSlug
+		? presets.find( ( preset ) => preset.slug === activeSlug )?.textShadow
+		: textShadow;
+
+	return (
+		<Stack
+			className="block-editor-global-styles__text-shadow"
+			direction="column"
+			gap="sm"
+		>
+			<Text variant="heading-sm" render={ <h2 /> }>
+				{ __( 'Text shadow' ) }
+			</Text>
+			<div
+				className="block-editor-global-styles__text-shadow-preview"
+				style={ { textShadow: previewValue } }
+			>
+				{ __( 'Code is poetry' ) }
+			</div>
+			{ presets.length >= PRESETS_SELECT_THRESHOLD ? (
+				<WCSelectControl
+					hideLabelFromVision
+					label={ __( 'Text shadow preset' ) }
+					value={ activeValue }
+					options={ [
+						{ value: '', label: __( 'Default' ) },
+						...choices,
+					] }
+					onChange={ onChange }
+				/>
+			) : (
+				<Composite
+					role="listbox"
+					aria-label={ __( 'Text shadow presets' ) }
+					render={ <Stack direction="column" /> }
+				>
+					{ choices.map( ( { value, label } ) => {
+						const isActive = value === activeValue;
+						return (
+							<Composite.Item
+								key={ value }
+								role="option"
+								aria-selected={ isActive }
+								className={ clsx(
+									'block-editor-global-styles__text-shadow-list-item',
+									{ 'is-active': isActive }
+								) }
+								onClick={ () => onChange( value ) }
+								render={ <Button __next40pxDefaultSize /> }
+							>
+								<span>{ label }</span>
+								<Icon icon={ check } />
+							</Composite.Item>
+						);
+					} ) }
+				</Composite>
+			) }
+			<Stack direction="row" justify="flex-end">
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ () => onChange( undefined ) }
+					disabled={ ! textShadow }
+					accessibleWhenDisabled
+				>
+					{ __( 'Clear' ) }
+				</Button>
+			</Stack>
+		</Stack>
+	);
+}
+
+function TextShadowToggle( {
+	textShadow,
+	onChange,
+	onToggle,
+	isOpen,
+}: TextShadowToggleProps ) {
+	const buttonRef = useRef< HTMLButtonElement >( undefined );
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				onClick={ onToggle }
+				className={ clsx(
+					'block-editor-global-styles__text-shadow-dropdown-toggle',
+					{ 'is-open': isOpen }
+				) }
+				aria-expanded={ isOpen }
+				ref={ buttonRef }
+			>
+				<Stack
+					direction="row"
+					justify="flex-start"
+					align="center"
+					gap="sm"
+				>
+					<Icon icon={ textShadowIcon } size={ 24 } />
+					<span>{ __( 'Text shadow' ) }</span>
+				</Stack>
+			</Button>
+			{ !! textShadow && (
+				<Button
+					__next40pxDefaultSize
+					size="small"
+					icon={ reset }
+					onClick={ () => {
+						if ( isOpen ) {
+							onToggle();
+						}
+						onChange( undefined );
+						// Return focus to parent button.
+						buttonRef.current?.focus();
+					} }
+					className={ clsx(
+						'block-editor-global-styles__text-shadow-remove-button',
+						{ 'is-open': isOpen }
+					) }
+					label={ __( 'Remove text shadow' ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/global-styles/typography-panel.jsx

@@ -17,6 +17,7 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
+import { TextShadowPopover } from './text-shadow-panel';
 import ColorGradientDropdownItem from './color-gradient-dropdown-item';
 import { useHasTextPanel } from './color-panel';
 import { useColorGradientSettings } from './hooks';
@@ -34,7 +35,7 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
 import {
 	getInheritanceProps,
 	InheritanceToolsPanelItem,
-	isGlobalStylesInheritanceEnabled,
+	isGlobalStylesInheritanceIndicatorUIEnabled,
 } from './inheritance';
 
 const MIN_TEXT_COLUMNS = 1;
@@ -79,6 +80,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 	const hasTextColor = useHasTextPanel( settings );
+	const hasTextShadow = useHasTextShadowControl( settings );
 
 	return (
 		hasFontFamily ||
@@ -92,7 +94,8 @@ export function useHasTypographyPanel( settings ) {
 		hasTextIndent ||
 		hasWritingMode ||
 		hasTextColumns ||
-		hasTextColor
+		hasTextColor ||
+		hasTextShadow
 	);
 }
 
@@ -158,6 +161,10 @@ function useHasTextIndentControl( settings ) {
 	return settings?.typography?.textIndent;
 }
 
+function useHasTextShadowControl( settings ) {
+	return settings?.typography?.textShadow;
+}
+
 /**
  * Concatenate all the font sizes into a single list for the font size picker.
  *
@@ -171,7 +178,7 @@ function getMergedFontSizes( settings ) {
 	return [
 		...( fontSizes?.custom ?? [] ),
 		...( fontSizes?.theme ?? [] ),
-		...( defaultFontSizesEnabled ? fontSizes?.default ?? [] : [] ),
+		...( defaultFontSizesEnabled ? ( fontSizes?.default ?? [] ) : [] ),
 	];
 }
 
@@ -214,6 +221,7 @@ const DEFAULT_CONTROLS = {
 	textIndent: true,
 	writingMode: true,
 	textColumns: true,
+	textShadow: true,
 };
 
 const EMPTY_VALUES = [ undefined, null, '' ];
@@ -248,7 +256,7 @@ export default function TypographyPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	isGlobalStyles = false,
-	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
 	contrastWarning,
 } ) {
 	const { colors, allColors, areCustomSolidsEnabled, decodeValue } =
@@ -276,13 +284,7 @@ export default function TypographyPanel( {
 			newSlug
 		);
 		let changedObject = setImmutably( value, [ 'color', 'text' ], encoded );
-		// With the experiment off, keep the pre-inheritance comparison on
-		// `inheritedValue`.
-		const syncLinkColor = isGlobalStylesInheritanceEnabled()
-			? shouldSyncLinkColor( value, inheritedValue )
-			: inheritedValue?.color?.text ===
-			  inheritedValue?.elements?.link?.color?.text;
-		if ( syncLinkColor ) {
+		if ( shouldSyncLinkColor( value, inheritedValue ) ) {
 			changedObject = setImmutably(
 				changedObject,
 				[ 'elements', 'link', 'color', 'text' ],
@@ -778,6 +780,25 @@ export default function TypographyPanel( {
 	const hasTextAlign = () => hasValue( value?.typography?.textAlign );
 	const resetTextAlign = () => setTextAlign( undefined );
 
+	// Text Shadow
+	const hasTextShadowControl = useHasTextShadowControl( settings );
+	const inheritedTextShadow = inheritedValue?.typography?.textShadow;
+	const textShadow = value?.typography?.textShadow ?? inheritedTextShadow;
+	const isTextShadowPlaceholder =
+		! hasValue( value?.typography?.textShadow ) &&
+		hasValue( inheritedTextShadow );
+	const setTextShadow = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textShadow' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextShadow = () => hasValue( value?.typography?.textShadow );
+	const resetTextShadow = () => setTextShadow( undefined );
+
 	const resetAllFilter = useCallback(
 		( previousValue ) => {
 			if ( ! hasTextColorEnabled ) {
@@ -943,7 +964,7 @@ export default function TypographyPanel( {
 										getNumericPlaceholder(
 											inheritedLineHeight
 										),
-							  }
+								}
 							: {} ) }
 					/>
 				</InheritanceToolsPanelItem>
@@ -977,7 +998,7 @@ export default function TypographyPanel( {
 							isLetterSpacingPlaceholder
 								? getNumericPlaceholder(
 										inheritedLetterSpacing
-								  )
+									)
 								: undefined
 						}
 					/>
@@ -1113,6 +1134,24 @@ export default function TypographyPanel( {
 					/>
 				</InheritanceToolsPanelItem>
 			) }
+			{ hasTextShadowControl && (
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isTextShadowPlaceholder,
+						hasTextShadow() && inheritedTextShadow !== undefined
+					) }
+					label={ __( 'Text shadow' ) }
+					hasValue={ hasTextShadow }
+					onDeselect={ resetTextShadow }
+					isShownByDefault={ defaultControls.textShadow }
+					panelId={ panelId }
+				>
+					<TextShadowPopover
+						textShadow={ textShadow }
+						onChange={ setTextShadow }
+					/>
+				</InheritanceToolsPanelItem>
+			) }
 			{ hasTextAlignmentControl && (
 				<InheritanceToolsPanelItem
 					{ ...inheritanceProps(

package/src/components/global-styles/typography-utils.js

@@ -142,7 +142,7 @@ export function findNearestStyleAndWeight(
 					( option ) =>
 						option.style.fontWeight ===
 						findNearestFontWeight( fontWeights, fontWeight )
-			  )?.style?.fontStyle;
+				)?.style?.fontStyle;
 	}
 
 	if ( ! hasFontWeight ) {
@@ -156,7 +156,7 @@ export function findNearestStyleAndWeight(
 					( option ) =>
 						option.style.fontStyle ===
 						( nearestFontStyle || fontStyle )
-			  )?.style?.fontWeight;
+				)?.style?.fontWeight;
 	}
 
 	return { nearestFontStyle, nearestFontWeight };

package/src/components/global-styles/utils.js

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

package/src/components/html-element-control/index.jsx

@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Notice,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -80,7 +80,7 @@ export default function HTMLElementControl( {
 
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
-			<SelectControl
+			<WCSelectControl
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }
 				value={ tagName }

package/src/components/iframe/index.jsx

@@ -83,7 +83,7 @@ const iframeSrcCache = new WeakMap();
 const iframeSrcCleanup = globalThis.FinalizationRegistry
 	? new globalThis.FinalizationRegistry( ( url ) =>
 			URL.revokeObjectURL( url )
-	  )
+		)
 	: undefined;
 
 function getIframeSrc( resolvedAssets ) {

package/src/components/iframe/use-scale-canvas.js

@@ -215,7 +215,7 @@ export function useScaleCanvas( {
 				containerWidth,
 				maxContainerWidth,
 				scaleContainerWidth,
-		  } )
+			} )
 		: scale;
 
 	/**

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

@@ -1,5 +1,5 @@
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -83,7 +83,7 @@ export default function ImageSizeControl( {
 	return (
 		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
-				<SelectControl
+				<WCSelectControl
 					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }

package/src/components/inner-blocks/index.jsx

@@ -18,6 +18,7 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
+import { normalizeLegacyLayout } from '../../layouts/utils';
 import { unlock } from '../../lock-unlock';
 
 const EMPTY_OBJECT = {};
@@ -94,11 +95,18 @@ function UncontrolledInnerBlocks( props ) {
 		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
+	// Legacy markup expresses a constrained layout as `inherit: true` or bare
+	// content/wide sizes with no `type`. Promote it the way the layout styling
+	// hooks do, so the inner blocks resolve to constrained rather than flow.
+	const normalizedLayout = useMemo(
+		() => normalizeLegacyLayout( layout ),
+		[ layout ]
+	);
 	// The support is a config object, e.g. `{ allowSwitching: false, default: { type: 'flex' } }`,
 	// so the layout itself lives under `default`. Passing the config through would leave the
 	// context without a `type`, and consumers would resolve it to the flow layout.
 	const usedLayout =
-		layout || defaultLayoutBlockSupport.default || EMPTY_OBJECT;
+		normalizedLayout || defaultLayoutBlockSupport.default || EMPTY_OBJECT;
 
 	const memoedLayout = useMemo(
 		() => ( {

package/src/components/inner-content/index.jsx

@@ -104,7 +104,7 @@ export default function InnerContent( { clientId } ) {
 							</AsyncModeProvider>,
 							slots[ index ],
 							childClientId
-					  )
+						)
 					: null
 			) }
 		</LayoutProvider>

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -1,5 +1,5 @@
 import { useMemo } from '@wordpress/element';
-import { _x, _n, sprintf } from '@wordpress/i18n';
+import { _n, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import usePatternsState from '../hooks/use-patterns-state';
 import {
@@ -7,19 +7,10 @@ import {
 	allPatternsCategory,
 	myPatternsCategory,
 	starterPatternsCategory,
+	getPopulatedCategories,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 
-function hasRegisteredCategory( pattern, allCategories ) {
-	if ( ! pattern.categories || ! pattern.categories.length ) {
-		return false;
-	}
-
-	return pattern.categories.some( ( cat ) =>
-		allCategories.some( ( category ) => category.name === cat )
-	);
-}
-
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 	const [ patterns, allCategories ] = usePatternsState(
 		undefined,
@@ -33,33 +24,16 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				: patterns.filter(
 						( pattern ) =>
 							! isPatternFiltered( pattern, sourceFilter )
-				  ),
+					),
 		[ sourceFilter, patterns ]
 	);
 
 	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
-		const categories = allCategories
-			.filter( ( category ) =>
-				filteredPatterns.some( ( pattern ) =>
-					pattern.categories?.includes( category.name )
-				)
-			)
-			.sort( ( a, b ) => a.label.localeCompare( b.label ) );
-
-		if (
-			filteredPatterns.some(
-				( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
-			) &&
-			! categories.find(
-				( category ) => category.name === 'uncategorized'
-			)
-		) {
-			categories.push( {
-				name: 'uncategorized',
-				label: _x( 'Uncategorized' ),
-			} );
-		}
+		const categories = getPopulatedCategories(
+			filteredPatterns,
+			allCategories
+		);
 		if (
 			filteredPatterns.some( ( pattern ) =>
 				pattern.blockTypes?.includes( 'core/post-content' )

package/src/components/inserter/block-patterns-tab/utils.js

@@ -26,6 +26,50 @@ export const starterPatternsCategory = {
 	label: __( 'Starter content' ),
 };
 
+function hasRegisteredCategory( pattern, allCategories ) {
+	if ( ! pattern.categories || ! pattern.categories.length ) {
+		return false;
+	}
+
+	return pattern.categories.some( ( cat ) =>
+		allCategories.some( ( category ) => category.name === cat )
+	);
+}
+
+/**
+ * Returns the categories that contain at least one of the given patterns,
+ * sorted by label. An "Uncategorized" category is appended when some pattern
+ * belongs to no registered category.
+ *
+ * @param {Array} patterns      The patterns to derive the categories from.
+ * @param {Array} allCategories The registered pattern categories.
+ *
+ * @return {Array} The populated categories.
+ */
+export function getPopulatedCategories( patterns, allCategories ) {
+	const categories = allCategories
+		.filter( ( category ) =>
+			patterns.some( ( pattern ) =>
+				pattern.categories?.includes( category.name )
+			)
+		)
+		.sort( ( a, b ) => a.label.localeCompare( b.label ) );
+
+	if (
+		patterns.some(
+			( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
+		) &&
+		! categories.find( ( category ) => category.name === 'uncategorized' )
+	) {
+		categories.push( {
+			name: 'uncategorized',
+			label: __( 'Uncategorized' ),
+		} );
+	}
+
+	return categories;
+}
+
 export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	const isUserPattern = pattern.name.startsWith( 'core/block' );
 	const isDirectoryPattern =

package/src/components/inserter/hooks/use-block-types-state.js

@@ -81,13 +81,13 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 				syncStatus === 'unsynced'
 					? parse( content, {
 							__unstableSkipMigrationLogs: true,
-					  } )
+						} )
 					: createBlock(
 							name,
 							initialAttributes,
 							createBlocksFromInnerBlocksTemplate( innerBlocks ),
 							innerContent
-					  );
+						);
 			onInsert(
 				insertedBlock,
 				undefined,

package/src/components/inserter/hooks/use-insertion-point.js

@@ -163,7 +163,7 @@ function useInsertionPoint( {
 								destinationIndex,
 								rootClientId: _rootClientId,
 								registry,
-						  } ),
+							} ),
 					isAppender || _rootClientId === undefined
 						? destinationRootClientId
 						: _rootClientId,

package/src/components/inserter/hooks/use-patterns-state.js

@@ -105,7 +105,7 @@ const usePatternsState = (
 				: getClosestAllowedInsertionPointForPattern(
 						pattern,
 						rootClientId
-				  );
+					);
 			if ( destinationRootClientId === null ) {
 				return;
 			}