@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.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

@@ -52,7 +52,6 @@ import {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
@@ -141,7 +140,6 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,

package/src/store/private-actions.js

@@ -558,3 +558,34 @@ export function setSelectedBlockStyleStateCanvasPreview( clientId, value ) {
 		value,
 	};
 }
+
+/**
+ * Sets the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ * Driven by the editor's device preview while Responsive editing is enabled.
+ *
+ * @param {string} viewport The selected viewport state (e.g. 'default', 'tablet', 'mobile').
+ *
+ * @return {Object} Action object.
+ */
+export function setStyleStateViewport( viewport ) {
+	return {
+		type: 'SET_STYLE_STATE_VIEWPORT',
+		viewport,
+	};
+}
+
+/**
+ * Sets whether Responsive editing is enabled. When enabled, the device preview
+ * also drives which viewport block style edits are applied to. Session-only.
+ *
+ * @param {boolean} enabled Whether Responsive editing is enabled.
+ *
+ * @return {Object} Action object.
+ */
+export function setResponsiveEditing( enabled ) {
+	return {
+		type: 'SET_RESPONSIVE_EDITING',
+		enabled,
+	};
+}

package/src/store/private-keys.js

@@ -10,7 +10,6 @@ export const mediaEditKey = Symbol( 'mediaEditKey' );
 export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const isIsolatedEditorKey = Symbol( 'isIsolatedEditor' );
 export const deviceTypeKey = Symbol( 'deviceTypeKey' );
-export const onViewportStateChangeKey = Symbol( 'onViewportStateChangeKey' );
 export const isNavigationOverlayContextKey = Symbol(
 	'isNavigationOverlayContext'
 );

package/src/store/private-selectors.js

@@ -1152,6 +1152,30 @@ const DEFAULT_BLOCK_STYLE_STATE = {
 	pseudo: 'default',
 };
 
+/**
+ * Returns the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The selected viewport style state.
+ */
+export function getStyleStateViewport( state ) {
+	return state.styleStateViewport ?? DEFAULT_BLOCK_STYLE_STATE.viewport;
+}
+
+/**
+ * Returns whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether Responsive editing is enabled.
+ */
+export function isResponsiveEditing( state ) {
+	return state.isResponsiveEditing;
+}
+
 /**
  * Returns the selected style state for a block's style controls.
  *
@@ -1160,13 +1184,25 @@ const DEFAULT_BLOCK_STYLE_STATE = {
  *
  * @return {Object} The selected block style state.
  */
-export function getSelectedBlockStyleState( state, clientId ) {
-	if ( state.selectedBlockStyleState?.clientId !== clientId ) {
-		return DEFAULT_BLOCK_STYLE_STATE;
-	}
-
-	return state.selectedBlockStyleState.value ?? DEFAULT_BLOCK_STYLE_STATE;
-}
+export const getSelectedBlockStyleState = createSelector(
+	( state, clientId ) => {
+		const perBlockState =
+			state.selectedBlockStyleState?.clientId === clientId
+				? state.selectedBlockStyleState.value ??
+				  DEFAULT_BLOCK_STYLE_STATE
+				: DEFAULT_BLOCK_STYLE_STATE;
+
+		return {
+			...perBlockState,
+			// The viewport is tracked globally, so inject it here. This way
+			// consumers receive a single combined state object instead of
+			// merging the global viewport themselves, and selectors derived
+			// from this stay consistent.
+			viewport: getStyleStateViewport( state ),
+		};
+	},
+	( state ) => [ state.styleStateViewport, state.selectedBlockStyleState ]
+);
 
 /**
  * Returns whether a non-default style state is selected for a block.

package/src/store/reducer.js

@@ -2312,7 +2312,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 					...action.value,
@@ -2332,7 +2331,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas: action.value,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 				},
@@ -2390,6 +2388,41 @@ export function selectedBlockStyleState( state = undefined, action ) {
 	return state;
 }
 
+/**
+ * Reducer holding the globally selected viewport style state. When set to a
+ * value other than 'default', block style edits in the inspector are applied to
+ * that viewport. Driven by the editor's device preview (Responsive editing).
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function styleStateViewport( state = 'default', action ) {
+	if ( action.type === 'SET_STYLE_STATE_VIEWPORT' ) {
+		return action.viewport ?? 'default';
+	}
+
+	return state;
+}
+
+/**
+ * Reducer for whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isResponsiveEditing( state = false, action ) {
+	if ( action.type === 'SET_RESPONSIVE_EDITING' ) {
+		return action.enabled;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2426,6 +2459,8 @@ const combinedReducers = combineReducers( {
 	listViewContentPanelOpen,
 	requestedInspectorTab,
 	selectedBlockStyleState,
+	styleStateViewport,
+	isResponsiveEditing,
 } );
 
 /**

package/src/store/test/private-selectors.js

@@ -223,21 +223,22 @@ describe( 'private selectors', () => {
 			} );
 		} );
 
-		it( 'returns the selected state for the block', () => {
+		it( 'returns the per-block pseudo with the global viewport', () => {
 			const state = {
+				styleStateViewport: '@mobile',
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: ':hover' },
+					value: { pseudo: ':hover' },
 				},
 			};
 
 			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: ':hover',
 			} );
 		} );
 
-		it( 'returns default when the selected state has no value', () => {
+		it( 'returns default pseudo when the selected state has no value', () => {
 			const state = {
 				selectedBlockStyleState: {
 					clientId: 'client-1',
@@ -250,16 +251,17 @@ describe( 'private selectors', () => {
 			} );
 		} );
 
-		it( 'returns default when another block has the selected state', () => {
+		it( 'returns the global viewport even when another block holds the per-block state', () => {
 			const state = {
+				styleStateViewport: '@mobile',
 				selectedBlockStyleState: {
 					clientId: 'client-2',
-					value: { viewport: 'default', pseudo: ':hover' },
+					value: { pseudo: ':hover' },
 				},
 			};
 
 			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
-				viewport: 'default',
+				viewport: '@mobile',
 				pseudo: 'default',
 			} );
 		} );
@@ -283,11 +285,12 @@ describe( 'private selectors', () => {
 			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( false );
 		} );
 
-		it( 'returns true when a viewport state is selected', () => {
+		it( 'returns true when a global viewport state is selected', () => {
 			const state = {
+				styleStateViewport: '@mobile',
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: 'default' },
+					value: { pseudo: 'default' },
 				},
 			};
 
@@ -305,11 +308,12 @@ describe( 'private selectors', () => {
 			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( true );
 		} );
 
-		it( 'returns true when viewport and pseudo states are selected', () => {
+		it( 'returns true when global viewport and per-block pseudo states are selected', () => {
 			const state = {
+				styleStateViewport: '@mobile',
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: ':hover' },
+					value: { pseudo: ':hover' },
 				},
 			};
 
@@ -1661,6 +1665,7 @@ describe( 'private selectors', () => {
 			blockName = 'core/group',
 			patternName,
 			disableContentOnlyForUnsyncedPatterns,
+			disableContentOnlyForTemplateParts,
 			templateLock,
 			rootTemplateLock,
 		} = {} ) => {
@@ -1685,10 +1690,14 @@ describe( 'private selectors', () => {
 							: {},
 					],
 				] ),
-				settings:
-					disableContentOnlyForUnsyncedPatterns !== undefined
+				settings: {
+					...( disableContentOnlyForUnsyncedPatterns !== undefined
 						? { disableContentOnlyForUnsyncedPatterns }
-						: {},
+						: {} ),
+					...( disableContentOnlyForTemplateParts !== undefined
+						? { disableContentOnlyForTemplateParts }
+						: {} ),
+				},
 				editedContentOnlySection: undefined,
 			};
 		};
@@ -1732,6 +1741,22 @@ describe( 'private selectors', () => {
 			expect( isSectionBlock( state, 'block-1' ) ).toBe( true );
 		} );
 
+		it( 'should return false for template parts when disableContentOnlyForTemplateParts is true', () => {
+			const state = createState( {
+				blockName: 'core/template-part',
+				disableContentOnlyForTemplateParts: true,
+			} );
+			expect( isSectionBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'should return true for template parts when disableContentOnlyForTemplateParts is false', () => {
+			const state = createState( {
+				blockName: 'core/template-part',
+				disableContentOnlyForTemplateParts: false,
+			} );
+			expect( isSectionBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
 		it( 'returns false when nested inside another section block', () => {
 			const state = {
 				blocks: {