@wordpress/block-editor 15.21.0 → 15.22.0

package/src/hooks/typography.js

@@ -4,6 +4,7 @@
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ import { FONT_SIZE_SUPPORT_KEY } from './font-size';
 import { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
 import { FIT_TEXT_SUPPORT_KEY } from './fit-text';
 import { cleanEmptyObject } from './utils';
+import { extractPresetSlug } from '../utils/color-values';
 import { store as blockEditorStore } from '../store';
 import {
 	getStyleForState,
@@ -27,6 +29,7 @@ import {
 	setStyleForState,
 	useBlockStyleState,
 } from './block-style-state';
+import useBlockColorContrastWarning from './contrast-checker';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -63,6 +66,7 @@ function styleToAttributes( style ) {
 	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
+	const textColorValue = style?.color?.text;
 	const fontSizeSlug =
 		typeof fontSizeValue === 'string' &&
 		fontSizeValue?.startsWith( 'var:preset|font-size|' )
@@ -73,14 +77,20 @@ function styleToAttributes( style ) {
 	)
 		? fontFamilyValue.substring( 'var:preset|font-family|'.length )
 		: undefined;
+	const textColorSlug = extractPresetSlug( textColorValue, 'color' );
 	updatedStyle.typography = {
 		...omit( updatedStyle.typography, [ 'fontFamily' ] ),
 		fontSize: fontSizeSlug ? undefined : fontSizeValue,
 	};
+	updatedStyle.color = {
+		...updatedStyle.color,
+		text: textColorSlug ? undefined : textColorValue,
+	};
 	return {
 		style: cleanEmptyObject( updatedStyle ),
 		fontFamily: fontFamilySlug,
 		fontSize: fontSizeSlug,
+		textColor: textColorSlug,
 	};
 }
 
@@ -96,6 +106,12 @@ function attributesToStyle( attributes ) {
 				? 'var:preset|font-size|' + attributes.fontSize
 				: attributes.style?.typography?.fontSize,
 		},
+		color: {
+			...attributes.style?.color,
+			text: attributes.textColor
+				? 'var:preset|color|' + attributes.textColor
+				: attributes.style?.color?.text,
+		},
 	};
 }
 
@@ -122,11 +138,20 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
+export function TypographyPanel( {
+	clientId,
+	name,
+	setAttributes,
+	settings,
+	// Allows rendering outside the `typography` inspector group (e.g. section
+	// blocks direct-render this panel because their support fills are gated
+	// off by editing mode). Defaults to the slot-based wrapper.
+	asWrapper,
+} ) {
 	const selectedState = useBlockStyleState();
 	const isEnabled = useHasTypographyPanel( settings );
 
-	const { style, fontFamily, fontSize, fitText } = useSelect(
+	const { style, fontFamily, fontSize, fitText, textColor } = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled.
 			if ( ! isEnabled ) {
@@ -137,12 +162,14 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 				fontFamily: _fontFamily,
 				fontSize: _fontSize,
 				fitText: _fitText,
+				textColor: _textColor,
 			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
 			return {
 				style: _style,
 				fontFamily: _fontFamily,
 				fontSize: _fontSize,
 				fitText: _fitText,
+				textColor: _textColor,
 			};
 		},
 		[ clientId, isEnabled ]
@@ -154,8 +181,15 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 		if ( isStateSelected ) {
 			return getStyleForState( style, selectedState );
 		}
-		return attributesToStyle( { style, fontFamily, fontSize } );
-	}, [ isStateSelected, selectedState, style, fontSize, fontFamily ] );
+		return attributesToStyle( { style, fontFamily, fontSize, textColor } );
+	}, [
+		isStateSelected,
+		selectedState,
+		style,
+		fontSize,
+		fontFamily,
+		textColor,
+	] );
 
 	const onChange = isStateSelected
 		? ( newStyle ) => {
@@ -177,23 +211,53 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 				setAttributes( newAttributes );
 		  };
 
+	// Link color failures are reported by the Elements panel, which owns the
+	// link color selection.
+	const enableContrastChecking =
+		! isStateSelected &&
+		! value?.color?.gradient &&
+		!! value?.color?.text &&
+		settings?.color?.text &&
+		false !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );
+
+	const contrastWarning = useBlockColorContrastWarning( {
+		clientId,
+		name,
+		enabled: !! enableContrastChecking,
+		checkLinkColor: false,
+		messageOverride: __(
+			'This color has poor contrast against the background. Consider increasing contrast.'
+		),
+	} );
+
 	if ( ! isEnabled ) {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( name, [
+	const typographyDefaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
+	const colorDefaultControls = getBlockSupport( name, [
+		'color',
+		'__experimentalDefaultControls',
+	] );
+	const defaultControls = {
+		...typographyDefaultControls,
+		textColor: colorDefaultControls?.text,
+	};
+
+	const Wrapper = asWrapper || TypographyInspectorControl;
 
 	return (
 		<StylesTypographyPanel
-			as={ TypographyInspectorControl }
+			as={ Wrapper }
 			panelId={ clientId }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			contrastWarning={ contrastWarning }
 		/>
 	);
 }

package/src/layouts/flex.js

@@ -1,13 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	justifyLeft,
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
 	justifyStretch,
+	justifyTop,
+	justifyCenterVertical,
+	justifyBottom,
+	justifyStretchVertical,
+	justifySpaceBetweenVertical,
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
@@ -62,6 +67,29 @@ const defaultAlignments = {
 	vertical: 'top',
 };
 
+const verticalAlignmentOptions = {
+	top: {
+		icon: justifyTop,
+		label: _x( 'Align top', 'Block vertical alignment setting' ),
+	},
+	center: {
+		icon: justifyCenterVertical,
+		label: _x( 'Align middle', 'Block vertical alignment setting' ),
+	},
+	bottom: {
+		icon: justifyBottom,
+		label: _x( 'Align bottom', 'Block vertical alignment setting' ),
+	},
+	stretch: {
+		icon: justifyStretchVertical,
+		label: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
+	},
+	'space-between': {
+		icon: justifySpaceBetweenVertical,
+		label: _x( 'Space between', 'Block vertical alignment setting' ),
+	},
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -77,6 +105,7 @@ export default {
 		const {
 			allowOrientation = true,
 			allowJustification = true,
+			allowVerticalAlignment = true,
 			allowWrap = true,
 		} = layoutBlockSupport;
 		const hasLayoutValue = ( key, defaultValue ) =>
@@ -84,6 +113,11 @@ export default {
 			( resetLayout?.[ key ] ?? defaultValue );
 		const hasJustificationValue = () =>
 			hasLayoutValue( 'justifyContent', 'left' );
+		const hasVerticalAlignmentValue = () =>
+			hasLayoutValue(
+				'verticalAlignment',
+				getDefaultVerticalAlignment( layout )
+			);
 		const hasOrientationValue = () =>
 			hasLayoutValue( 'orientation', 'horizontal' );
 		const hasWrapValue = () => hasLayoutValue( 'flexWrap', 'wrap' );
@@ -94,6 +128,16 @@ export default {
 					justifyContent: resetLayout?.justifyContent,
 				} )
 			);
+		const resetVerticalAlignment = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					verticalAlignment: getCompatibleVerticalAlignment(
+						resetLayout?.verticalAlignment,
+						layout?.orientation
+					),
+				} )
+			);
 		const resetOrientation = () => {
 			const { verticalAlignment, justifyContent } = layout;
 			const nextOrientation = resetLayout?.orientation;
@@ -163,6 +207,19 @@ export default {
 						) }
 					</Flex>
 				) }
+				{ allowVerticalAlignment && (
+					<ToolsPanelItem
+						label={ __( 'Alignment' ) }
+						hasValue={ hasVerticalAlignmentValue }
+						onDeselect={ resetVerticalAlignment }
+						panelId={ clientId }
+					>
+						<FlexLayoutVerticalAlignmentControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</ToolsPanelItem>
+				) }
 				{ allowWrap && (
 					<ToolsPanelItem
 						label={ __( 'Wrapping' ) }
@@ -204,6 +261,7 @@ export default {
 					<FlexLayoutVerticalAlignmentControl
 						layout={ layout }
 						onChange={ onChange }
+						isToolbar
 					/>
 				) }
 			</BlockControls>
@@ -325,15 +383,39 @@ export default {
 	},
 };
 
-function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
-	const { orientation = 'horizontal' } = layout;
+function getDefaultVerticalAlignment( { orientation = 'horizontal' } = {} ) {
+	return orientation === 'horizontal'
+		? defaultAlignments.horizontal
+		: defaultAlignments.vertical;
+}
 
-	const defaultVerticalAlignment =
-		orientation === 'horizontal'
-			? defaultAlignments.horizontal
-			: defaultAlignments.vertical;
+function getCompatibleVerticalAlignment( verticalAlignment, orientation ) {
+	if (
+		( orientation === 'horizontal' &&
+			verticalAlignment === 'space-between' ) ||
+		( orientation === 'vertical' && verticalAlignment === 'stretch' )
+	) {
+		return undefined;
+	}
 
-	const { verticalAlignment = defaultVerticalAlignment } = layout;
+	return verticalAlignment;
+}
+
+function getVerticalAlignmentControls( orientation ) {
+	return orientation === 'horizontal'
+		? [ 'top', 'center', 'bottom', 'stretch' ]
+		: [ 'top', 'center', 'bottom', 'space-between' ];
+}
+
+function FlexLayoutVerticalAlignmentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	const { orientation = 'horizontal' } = layout;
+
+	const { verticalAlignment = getDefaultVerticalAlignment( layout ) } =
+		layout;
 
 	const onVerticalAlignmentChange = ( value ) => {
 		onChange( {
@@ -341,17 +423,38 @@ function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 			verticalAlignment: value,
 		} );
 	};
+	const controls = getVerticalAlignmentControls( orientation );
+
+	if ( isToolbar ) {
+		return (
+			<BlockVerticalAlignmentControl
+				onChange={ onVerticalAlignmentChange }
+				value={ verticalAlignment }
+				controls={ controls }
+			/>
+		);
+	}
 
 	return (
-		<BlockVerticalAlignmentControl
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			label={ __( 'Alignment' ) }
 			onChange={ onVerticalAlignmentChange }
 			value={ verticalAlignment }
-			controls={
-				orientation === 'horizontal'
-					? [ 'top', 'center', 'bottom', 'stretch' ]
-					: [ 'top', 'center', 'bottom', 'space-between' ]
-			}
-		/>
+			className="block-editor-hooks__flex-layout-alignment-controls"
+		>
+			{ controls.map( ( control ) => {
+				const { icon, label } = verticalAlignmentOptions[ control ];
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ control }
+						value={ control }
+						icon={ icon }
+						label={ label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
 

package/src/private-apis.js

@@ -16,6 +16,11 @@ import { PrivateListView } from './components/list-view';
 import InspectorControlsLastItem from './components/inspector-controls/last-item';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject, usePrivateStyleOverride } from './hooks/utils';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+} from './hooks/block-style-state';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import BlockManager from './components/block-manager';
@@ -98,6 +103,9 @@ lock( privateApis, {
 	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
 	usePrivateStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,

package/src/store/actions.js

@@ -822,6 +822,8 @@ export const __unstableDeleteSelection =
 					...targetBlock.attributes,
 					...updatedAttributes,
 				},
+				// Block A's inner blocks sit inside the selection; only B's survive.
+				innerBlocks: blockB.innerBlocks,
 			},
 			...( isForward ? [] : blocksWithTheSameType ),
 		];
@@ -1646,12 +1648,20 @@ export function __unstableMarkLastChangeAsPersistent() {
 }
 
 /**
- * Action that signals that the next block change should be marked explicitly as not persistent.
+ * Action that signals that the next block change should be marked explicitly
+ * as not persistent.
  *
+ * By default, non-persistent changes may still merge into undo history. Use
+ * `history: 'ignore'` for derived changes that should never be captured by undo.
+ *
+ * @param {Object} options         Options object.
+ * @param {string} options.history How the change should interact with history.
  * @return {Object} Action object.
  */
-export function __unstableMarkNextChangeAsNotPersistent() {
-	return { type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT' };
+export function __unstableMarkNextChangeAsNotPersistent( {
+	history = 'merge',
+} = {} ) {
+	return { type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT', history };
 }
 
 /**

package/src/store/private-actions.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { Platform } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
@@ -56,9 +55,7 @@ export function __experimentalUpdateSettings(
 
 	let cleanSettings = incomingSettings;
 
-	// There are no plugins in the mobile apps, so there is no
-	// need to strip the experimental settings:
-	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+	if ( stripExperimentalSettings ) {
 		cleanSettings = {};
 		for ( const key in incomingSettings ) {
 			if ( ! privateSettings.includes( key ) ) {

package/src/store/private-selectors.js

@@ -14,6 +14,7 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getBlockListSettings,
 	getSettings,
 	canInsertBlockType,
 	getBlockName,
@@ -116,6 +117,48 @@ export function isContainerInsertableToInContentOnlyMode(
 	);
 }
 
+function getClientIdWithClientIdsTreeUnmemoized( state, clientId ) {
+	return {
+		clientId,
+		innerBlocks: getClientIdsTreeUnmemoized( state, clientId ),
+	};
+}
+
+function getClientIdsTreeUnmemoized( state, rootClientId = '' ) {
+	return getBlockOrder( state, rootClientId ).map( ( clientId ) =>
+		getClientIdWithClientIdsTreeUnmemoized( state, clientId )
+	);
+}
+
+/**
+ * Returns a stripped down block object containing only its client ID,
+ * and its inner blocks' client IDs.
+ *
+ * @param {Object} state    Editor state.
+ * @param {string} clientId Client ID of the block to get.
+ *
+ * @return {Object} Client IDs of the post blocks.
+ */
+export const getClientIdWithClientIdsTree = createSelector(
+	getClientIdWithClientIdsTreeUnmemoized,
+	( state ) => [ state.blocks.order ]
+);
+
+/**
+ * Returns the block tree represented in the block-editor store from the
+ * given root, consisting of stripped down block objects containing only
+ * their client IDs, and their inner blocks' client IDs.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Client IDs of the post blocks.
+ */
+export const getClientIdsTree = createSelector(
+	getClientIdsTreeUnmemoized,
+	( state ) => [ state.blocks.order ]
+);
+
 function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 	const blockOrder = getBlockOrder( state, rootClientId );
 	const result = [];
@@ -1035,6 +1078,52 @@ export function getListViewExpandRevision( state ) {
 	return state.listViewExpandRevision || 0;
 }
 
+/**
+ * Returns whether a block instance participates in List View-specific UI for
+ * its inner blocks.
+ *
+ * Intentionally private: this is the derived participation logic (block type
+ * `listView` support and the `core/navigation` special case) shared by the List
+ * View consumers. A `listView`-supporting block drops out when it has no inner
+ * blocks and its `allowedBlocks` (`[]` or `false`) permits no block: the nested
+ * List View panel would render no rows and no appender, so it is hidden rather
+ * than shown empty. This is a signal, not a guarantee — a child naming this
+ * block as its `parent` stays insertable regardless (see `canInsertBlockType`);
+ * that edge case is accepted to keep the check cheap. Keeping the read internal
+ * lets this computation evolve without a back-compat commitment.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether the block participates in List View-specific UI.
+ */
+export function shouldRenderBlockListView( state, clientId ) {
+	const blockName = getBlockName( state, clientId );
+
+	// The navigation block always participates; its List View is core to how it
+	// is edited, regardless of how its menu is locked or populated.
+	if ( blockName === 'core/navigation' ) {
+		return true;
+	}
+
+	if ( ! hasBlockSupport( blockName, 'listView' ) ) {
+		return false;
+	}
+
+	// `allowedBlocks` permits no block when it is `[]` or `false`; an unset value
+	// is unrestricted and is intentionally not matched.
+	const allowedBlocks = getBlockListSettings(
+		state,
+		clientId
+	)?.allowedBlocks;
+	const isEmptyAndNoAllowedBlocks =
+		getBlockOrder( state, clientId ).length === 0 &&
+		( allowedBlocks === false ||
+			( Array.isArray( allowedBlocks ) && allowedBlocks.length === 0 ) );
+
+	return ! isEmptyAndNoAllowedBlocks;
+}
+
 /**
  * Returns the client IDs for the viewport modal, or null if
  * the modal is not open.

package/src/store/reducer.js

@@ -419,18 +419,20 @@ const withBlockTree =
  */
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
-	let markNextChangeAsNotPersistent = false;
+	let nextHistoryMode;
 
 	return ( state, action ) => {
 		const nextState = reducer( state, action );
 
-		const wasMarkedAsNotPersistent = markNextChangeAsNotPersistent;
-		markNextChangeAsNotPersistent =
-			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
+		const pendingHistoryMode = nextHistoryMode;
+		nextHistoryMode =
+			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT'
+				? action.history ?? 'merge'
+				: undefined;
 
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
-			wasMarkedAsNotPersistent;
+			pendingHistoryMode;
 
 		// Defer to previous state value (or default) unless changing or
 		// explicitly marking as persistent.
@@ -442,7 +444,7 @@ function withPersistentBlockChange( reducer ) {
 		}
 
 		const isPersistentChange = isExplicitPersistentChange
-			? ! wasMarkedAsNotPersistent
+			? ! pendingHistoryMode
 			: ! isUpdatingSameBlockAttribute( action, lastAction );
 
 		// In comparing against the previous action, consider only those which
@@ -450,7 +452,17 @@ function withPersistentBlockChange( reducer ) {
 		// have resulted in a changed state.
 		lastAction = action;
 
-		return { ...nextState, isPersistentChange };
+		if ( pendingHistoryMode === 'ignore' ) {
+			return {
+				...nextState,
+				isPersistentChange,
+				lastBlockChangeHistoryMode: 'ignore',
+			};
+		}
+
+		const { lastBlockChangeHistoryMode, ...blockChange } = nextState;
+
+		return { ...blockChange, isPersistentChange };
 	};
 }