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

package/src/hooks/typography.jsx

@@ -37,6 +37,7 @@ const TEXT_INDENT_SUPPORT_KEY = 'typography.textIndent';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const TEXT_SHADOW_SUPPORT_KEY = 'typography.textShadow';
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -52,6 +53,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
+	TEXT_SHADOW_SUPPORT_KEY,
 	FIT_TEXT_SUPPORT_KEY,
 ];
 
@@ -60,6 +62,7 @@ function styleToAttributes( style ) {
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
 	const textColorValue = style?.color?.text;
+	const textShadowValue = style?.typography?.textShadow;
 	const fontSizeSlug =
 		typeof fontSizeValue === 'string' &&
 		fontSizeValue?.startsWith( 'var:preset|font-size|' )
@@ -71,9 +74,15 @@ function styleToAttributes( style ) {
 		? fontFamilyValue.substring( 'var:preset|font-family|'.length )
 		: undefined;
 	const textColorSlug = extractPresetSlug( textColorValue, 'color' );
+	const textShadowSlug =
+		typeof textShadowValue === 'string' &&
+		textShadowValue?.startsWith( 'var:preset|text-shadow|' )
+			? textShadowValue.substring( 'var:preset|text-shadow|'.length )
+			: undefined;
 	updatedStyle.typography = {
 		...omit( updatedStyle.typography, [ 'fontFamily' ] ),
 		fontSize: fontSizeSlug ? undefined : fontSizeValue,
+		textShadow: textShadowSlug ? undefined : textShadowValue,
 	};
 	updatedStyle.color = {
 		...updatedStyle.color,
@@ -84,6 +93,7 @@ function styleToAttributes( style ) {
 		fontFamily: fontFamilySlug,
 		fontSize: fontSizeSlug,
 		textColor: textColorSlug,
+		textShadow: textShadowSlug,
 	};
 }
 
@@ -98,6 +108,9 @@ function attributesToStyle( attributes ) {
 			fontSize: attributes.fontSize
 				? 'var:preset|font-size|' + attributes.fontSize
 				: attributes.style?.typography?.fontSize,
+			textShadow: attributes.textShadow
+				? 'var:preset|text-shadow|' + attributes.textShadow
+				: attributes.style?.typography?.textShadow,
 		},
 		color: {
 			...attributes.style?.color,
@@ -144,33 +157,41 @@ export function TypographyPanel( {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasTypographyPanel( settings );
 
-	const { style, fontFamily, fontSize, fitText, textColor, className } =
-		useSelect(
-			( select ) => {
-				// Early return to avoid subscription when disabled.
-				if ( ! isEnabled ) {
-					return {};
-				}
-				const {
-					style: _style,
-					fontFamily: _fontFamily,
-					fontSize: _fontSize,
-					fitText: _fitText,
-					textColor: _textColor,
-					className: _className,
-				} = select( blockEditorStore ).getBlockAttributes( clientId ) ||
-				{};
-				return {
-					style: _style,
-					fontFamily: _fontFamily,
-					fontSize: _fontSize,
-					fitText: _fitText,
-					textColor: _textColor,
-					className: _className,
-				};
-			},
-			[ clientId, isEnabled ]
-		);
+	const {
+		style,
+		fontFamily,
+		fontSize,
+		fitText,
+		textColor,
+		textShadow,
+		className,
+	} = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled.
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				textShadow: _textShadow,
+				fitText: _fitText,
+				textColor: _textColor,
+				className: _className,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+				textColor: _textColor,
+				textShadow: _textShadow,
+				className: _className,
+			};
+		},
+		[ clientId, isEnabled ]
+	);
 
 	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
@@ -184,7 +205,13 @@ export function TypographyPanel( {
 		if ( isStateSelected ) {
 			return getStyleForState( style, selectedState );
 		}
-		return attributesToStyle( { style, fontFamily, fontSize, textColor } );
+		return attributesToStyle( {
+			style,
+			fontFamily,
+			fontSize,
+			textColor,
+			textShadow,
+		} );
 	}, [
 		isStateSelected,
 		selectedState,
@@ -192,6 +219,7 @@ export function TypographyPanel( {
 		fontSize,
 		fontFamily,
 		textColor,
+		textShadow,
 	] );
 
 	const onChange = isStateSelected
@@ -199,7 +227,7 @@ export function TypographyPanel( {
 				setAttributes( {
 					style: setStyleForState( style, selectedState, newStyle ),
 				} );
-		  }
+			}
 		: ( newStyle ) => {
 				const newAttributes = styleToAttributes( newStyle );
 
@@ -212,7 +240,7 @@ export function TypographyPanel( {
 				}
 
 				setAttributes( newAttributes );
-		  };
+			};
 
 	// Link color failures are reported by the Elements panel, which owns the
 	// link color selection.

package/src/hooks/utils.jsx

@@ -243,6 +243,7 @@ export function useBlockSettings( name, parentLayout ) {
 		textColumns,
 		textDecoration,
 		textIndent,
+		textShadow,
 		writingMode,
 		textTransform,
 		letterSpacing,
@@ -288,6 +289,10 @@ export function useBlockSettings( name, parentLayout ) {
 		isHeadingEnabled,
 		isButtonEnabled,
 		shadow,
+		defaultTextShadowPresetsEnabled,
+		customTextShadowPresets,
+		defaultTextShadowPresets,
+		themeTextShadowPresets,
 	] = useSettings(
 		'background.backgroundImage',
 		'background.backgroundSize',
@@ -307,6 +312,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'typography.textColumns',
 		'typography.textDecoration',
 		'typography.textIndent',
+		'typography.textShadow',
 		'typography.writingMode',
 		'typography.textTransform',
 		'typography.letterSpacing',
@@ -351,7 +357,11 @@ export function useBlockSettings( name, parentLayout ) {
 		'color.text',
 		'color.heading',
 		'color.button',
-		'shadow'
+		'shadow',
+		'typography.defaultTextShadowPresets',
+		'typography.textShadowPresets.custom',
+		'typography.textShadowPresets.default',
+		'typography.textShadowPresets.theme'
 	);
 
 	const rawSettings = useMemo( () => {
@@ -409,6 +419,13 @@ export function useBlockSettings( name, parentLayout ) {
 				textColumns,
 				textDecoration,
 				textIndent,
+				textShadow,
+				textShadowPresets: {
+					custom: customTextShadowPresets,
+					default: defaultTextShadowPresets,
+					theme: themeTextShadowPresets,
+				},
+				defaultTextShadowPresets: defaultTextShadowPresetsEnabled,
 				textTransform,
 				letterSpacing,
 				writingMode,
@@ -464,6 +481,11 @@ export function useBlockSettings( name, parentLayout ) {
 		textColumns,
 		textDecoration,
 		textIndent,
+		textShadow,
+		customTextShadowPresets,
+		defaultTextShadowPresets,
+		themeTextShadowPresets,
+		defaultTextShadowPresetsEnabled,
 		textTransform,
 		letterSpacing,
 		writingMode,

package/src/layouts/grid.jsx

@@ -579,10 +579,10 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 		gridPlacement === 'manual'
 			? __(
 					'Grid items can be manually placed in any position on the grid.'
-			  )
+				)
 			: __(
 					'Grid items are placed automatically depending on their order.'
-			  );
+				);
 
 	return (
 		<ToggleGroupControl

package/src/layouts/test/flex.jsdom.test.jsx

@@ -87,8 +87,9 @@ describe( 'getLayoutStyle', () => {
 } );
 
 describe( 'FlexLayoutInspectorControls', () => {
-	it( 'should not render the wrap toggle by default', () => {
+	it( 'should not render the wrap toggle by default', async () => {
 		renderInspectorControls();
+		await screen.findByRole( 'radio', { name: 'Justify items left' } );
 
 		expect(
 			screen.queryByRole( 'checkbox', {
@@ -97,13 +98,13 @@ describe( 'FlexLayoutInspectorControls', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should render the wrap toggle when it has a value', () => {
+	it( 'should render the wrap toggle when it has a value', async () => {
 		renderInspectorControls( {
 			layout: { flexWrap: 'nowrap' },
 		} );
 
 		expect(
-			screen.getByRole( 'checkbox', {
+			await screen.findByRole( 'checkbox', {
 				name: 'Allow to wrap to multiple lines',
 			} )
 		).toBeInTheDocument();

package/src/layouts/test/utils.js

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import { appendSelectors, getBlockGapCSS } from '../utils';
+import {
+	appendSelectors,
+	getBlockGapCSS,
+	normalizeLegacyLayout,
+} from '../utils';
 
 const layoutDefinitions = {
 	default: {
@@ -127,3 +131,46 @@ describe( 'appendSelectors', () => {
 		).toBe( '.first-selector .appended,.second-selector .appended' );
 	} );
 } );
+
+describe( 'normalizeLegacyLayout', () => {
+	it( 'should promote a layout using the legacy inherit flag to constrained', () => {
+		expect( normalizeLegacyLayout( { inherit: true } ) ).toEqual( {
+			inherit: true,
+			type: 'constrained',
+		} );
+	} );
+
+	it( 'should promote a layout with only a content size to constrained', () => {
+		expect( normalizeLegacyLayout( { contentSize: '600px' } ) ).toEqual( {
+			contentSize: '600px',
+			type: 'constrained',
+		} );
+	} );
+
+	it( 'should promote a layout with only a wide size to constrained', () => {
+		expect( normalizeLegacyLayout( { wideSize: '1200px' } ) ).toEqual( {
+			wideSize: '1200px',
+			type: 'constrained',
+		} );
+	} );
+
+	it( 'should return a typed layout unchanged', () => {
+		const layout = { type: 'flex', orientation: 'vertical' };
+
+		expect( normalizeLegacyLayout( layout ) ).toBe( layout );
+	} );
+
+	it( 'should return an explicitly flow layout unchanged', () => {
+		const layout = { type: 'default' };
+
+		expect( normalizeLegacyLayout( layout ) ).toBe( layout );
+	} );
+
+	it( 'should return an empty or missing layout unchanged', () => {
+		const layout = {};
+
+		expect( normalizeLegacyLayout( layout ) ).toBe( layout );
+		expect( normalizeLegacyLayout( null ) ).toBeNull();
+		expect( normalizeLegacyLayout( undefined ) ).toBeUndefined();
+	} );
+} );

package/src/layouts/utils.js

@@ -87,3 +87,22 @@ export function getAlignmentsInfo( layout ) {
 	}
 	return alignmentInfo;
 }
+
+/**
+ * Resolves the legacy layout shape to a typed one.
+ *
+ * Before layout types existed, a constrained layout was expressed as
+ * `inherit: true` or as bare `contentSize` / `wideSize` values with no `type`.
+ * Markup saved that way, such as a theme template's Post Content block, is
+ * still around, and consumers that read `type` alone would resolve it to the
+ * flow layout.
+ *
+ * @param {Object} layout The layout object.
+ * @return {Object} The layout, with `type: 'constrained'` set when it was
+ *                  expressed in the legacy form; otherwise the same object.
+ */
+export function normalizeLegacyLayout( layout ) {
+	return layout?.inherit || layout?.contentSize || layout?.wideSize
+		? { ...layout, type: 'constrained' }
+		: layout;
+}

package/src/private-apis.js

@@ -9,7 +9,9 @@ import {
 	extractWords,
 	getNormalizedSearchTerms,
 	normalizeString,
+	searchItems,
 } from './components/inserter/search-items';
+import { getPopulatedCategories } from './components/inserter/block-patterns-tab/utils';
 import { PrivateListView } from './components/list-view';
 import InspectorControlsLastItem from './components/inspector-controls/last-item';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
@@ -161,4 +163,6 @@ lock( privateApis, {
 	useNativeUndo,
 	usesNativeUndo,
 	isElementVisible,
+	getPopulatedCategories,
+	searchItems,
 } );

package/src/store/actions.js

@@ -12,6 +12,7 @@ import {
 	getBlockSupport,
 	isUnmodifiedDefaultBlock,
 	isUnmodifiedBlock,
+	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -29,9 +30,12 @@ import {
 	editContentOnlySection,
 } from './private-actions';
 import { getSiblingBlockAttributes } from '../utils/sibling-block-attributes';
+import { unlock } from '../lock-unlock';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
+const { editableRootKey } = unlock( blocksPrivateApis );
+
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -336,7 +340,7 @@ export const multiSelect =
 						),
 						blockCount,
 						blockCount + nestedBlockCount
-				  )
+					)
 				: sprintf(
 						/* translators: %s: number of selected blocks */
 						_n(
@@ -345,7 +349,7 @@ export const multiSelect =
 							blockCount
 						),
 						blockCount
-				  ),
+					),
 			'assertive'
 		);
 	};
@@ -721,6 +725,28 @@ export const insertBlocks =
 					blocksWithTemplates,
 					initialPosition
 				);
+				// Select the start of the inserted block's text when the block
+				// opts into the editable root, so its single field places the
+				// caret as it mounts. Focusing the field later would move focus
+				// off the host and back, which resets the iOS keyboard's
+				// capitalization.
+				if ( updateSelection && initialPosition === 0 ) {
+					const clientId = select.getSelectedBlockClientId();
+					const blockType =
+						clientId &&
+						getBlockType( select.getBlockName( clientId ) );
+					const attributeKey =
+						blockType?.[ editableRootKey ] &&
+						findRichTextAttributeKey( blockType );
+					if ( attributeKey ) {
+						dispatch.selectionChange(
+							clientId,
+							attributeKey,
+							0,
+							0
+						);
+					}
+				}
 			} );
 		}
 	};
@@ -1163,10 +1189,24 @@ export const __unstableSplitSelection =
 		}
 
 		if ( ! blocks.length ) {
-			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
-				head,
-				tail,
-			] );
+			registry.batch( () => {
+				dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+					head,
+					tail,
+				] );
+				// Select the start of the tail field in the same batch, like
+				// the branches below, so the field places the caret as it
+				// mounts rather than being focused later. Only for blocks
+				// that opt into the editable root. The tail may have changed
+				// block type, so read the key from its type.
+				const tailType = getBlockType( tail.name );
+				const tailKey =
+					tailType?.[ editableRootKey ] &&
+					findRichTextAttributeKey( tailType );
+				if ( tailKey ) {
+					dispatch.selectionChange( tail.clientId, tailKey, 0, 0 );
+				}
+			} );
 			return;
 		}
 
@@ -1927,7 +1967,7 @@ export const insertBeforeBlock =
 
 		const blockIndex = select.getBlockIndex( clientId );
 		const { defaultBlock: directInsertBlock } = rootClientId
-			? select.getBlockListSettings( rootClientId ) ?? {}
+			? ( select.getBlockListSettings( rootClientId ) ?? {} )
 			: {};
 
 		if ( ! directInsertBlock ) {
@@ -1940,7 +1980,7 @@ export const insertBeforeBlock =
 				? getSiblingBlockAttributes(
 						directInsertBlock.name,
 						select.getBlockAttributes( clientId )
-				  )
+					)
 				: {} ),
 		} );
 		return dispatch.insertBlock( block, blockIndex, rootClientId );
@@ -1961,7 +2001,7 @@ export const insertAfterBlock =
 
 		const blockIndex = select.getBlockIndex( clientId );
 		const { defaultBlock: directInsertBlock } = rootClientId
-			? select.getBlockListSettings( rootClientId ) ?? {}
+			? ( select.getBlockListSettings( rootClientId ) ?? {} )
 			: {};
 
 		if ( ! directInsertBlock ) {
@@ -1978,7 +2018,7 @@ export const insertAfterBlock =
 				? getSiblingBlockAttributes(
 						directInsertBlock.name,
 						select.getBlockAttributes( clientId )
-				  )
+					)
 				: {} ),
 		} );
 		return dispatch.insertBlock( block, blockIndex + 1, rootClientId );

package/src/store/private-selectors.js

@@ -400,7 +400,7 @@ export const getListViewClientIdsTree = createSelector(
 					state.blocks.attributes,
 					state.blockListSettings,
 					state.settings,
-			  ]
+				]
 			: [] ),
 	]
 );
@@ -633,11 +633,11 @@ export const getPatternBySlug = createRegistrySelector( ( select ) =>
 				? [
 						unlock( select( STORE_NAME ) ).getReusableBlocks(),
 						state.settings.__experimentalReusableBlocks,
-				  ]
+					]
 				: [
 						state.settings.__experimentalBlockPatterns,
 						state.settings[ selectBlockPatternsKey ]?.( select ),
-				  ]
+					]
 	)
 );
 
@@ -1427,8 +1427,8 @@ export const getSelectedBlockStyleState = createSelector(
 	( state, clientId ) => {
 		const perBlockState =
 			state.selectedBlockStyleState?.clientId === clientId
-				? state.selectedBlockStyleState.value ??
-				  DEFAULT_BLOCK_STYLE_STATE
+				? ( state.selectedBlockStyleState.value ??
+					DEFAULT_BLOCK_STYLE_STATE )
 				: DEFAULT_BLOCK_STYLE_STATE;
 
 		return {

package/src/store/reducer.js

@@ -416,7 +416,7 @@ function withPersistentBlockChange( reducer ) {
 		const pendingHistoryMode = nextHistoryMode;
 		nextHistoryMode =
 			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT'
-				? action.history ?? 'merge'
+				? ( action.history ?? 'merge' )
 				: undefined;
 
 		const isExplicitPersistentChange =
@@ -883,7 +883,7 @@ export const blocks = pipe(
 					const updatedAttributeEntries = Object.entries(
 						!! action.options?.uniqueByBlock
 							? action.attributes[ clientId ]
-							: action.attributes ?? {}
+							: ( action.attributes ?? {} )
 					);
 					if ( updatedAttributeEntries.length === 0 ) {
 						continue;
@@ -1722,11 +1722,11 @@ export function settings( state = SETTINGS_DEFAULTS, action ) {
 				? {
 						...SETTINGS_DEFAULTS,
 						...action.settings,
-				  }
+					}
 				: {
 						...state,
 						...action.settings,
-				  };
+					};
 
 			Object.defineProperty( updatedSettings, '__unstableIsPreviewMode', {
 				get() {
@@ -2292,7 +2292,7 @@ export function selectedBlockStyleState( state = undefined, action ) {
 			}
 			const showStateOnCanvas =
 				state?.clientId === action.clientId
-					? state.showStateOnCanvas ?? true
+					? ( state.showStateOnCanvas ?? true )
 					: true;
 			const previousValue =
 				state?.clientId === action.clientId ? state.value : {};
@@ -2616,7 +2616,7 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 					( clientId ) =>
 						state.blocks.attributes.get( clientId )?.metadata
 							?.patternName
-			  );
+				);
 	const disableContentOnlyForTemplateParts =
 		state.settings?.disableContentOnlyForTemplateParts;
 

package/src/store/selectors.js

@@ -2448,7 +2448,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 					? {
 							src: symbol,
 							foreground: 'var(--wp-block-synced-color)',
-					  }
+						}
 					: symbol;
 				const userPattern = mapUserPattern( reusableBlock );
 				const { time, count = 0 } =
@@ -2864,12 +2864,12 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
 										state,
 										name,
 										rootClientId
-								  )
+									)
 								: isBlockVisibleInTheInserter(
 										state,
 										name,
 										rootClientId
-								  )
+									)
 						)
 				);