@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.22.1

package/src/hooks/test/background.js

@@ -3,10 +3,69 @@
  */
 import {
 	setBackgroundStyleDefaults,
+	backgroundResetAllFilter,
 	BACKGROUND_BLOCK_DEFAULT_VALUES,
 } from '../background';
 
 describe( 'background', () => {
+	describe( 'backgroundResetAllFilter', () => {
+		it( 'clears every background-owned value, including a custom legacy color.gradient', () => {
+			const result = backgroundResetAllFilter( {
+				backgroundColor: 'primary',
+				gradient: 'vivid-cyan-blue',
+				className: 'is-style-fancy has-background',
+				style: {
+					color: {
+						text: 'var:preset|color|contrast',
+						background: 'var:preset|color|base',
+						gradient:
+							'linear-gradient(135deg,rgb(100,100,200) 0%,rgb(200,100,100) 100%)',
+					},
+					spacing: { padding: '10px' },
+					background: { backgroundImage: { url: 'image.png' } },
+				},
+			} );
+
+			// Background color and gradient attributes are cleared.
+			expect( result.backgroundColor ).toBeUndefined();
+			expect( result.gradient ).toBeUndefined();
+
+			// The legacy `color.gradient` (a raw/custom value) is cleared. This
+			// is the regression guard: it was previously kept for blocks
+			// without `background.gradient` support.
+			expect( result.style?.color?.gradient ).toBeUndefined();
+			expect( result.style?.color?.background ).toBeUndefined();
+			expect( result.style?.background ).toBeUndefined();
+
+			// Unrelated styles are preserved.
+			expect( result.style?.color?.text ).toBe(
+				'var:preset|color|contrast'
+			);
+			expect( result.style?.spacing ).toEqual( { padding: '10px' } );
+
+			// The `has-background` class is removed, other classes remain.
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+
+		it( 'drops className entirely when has-background was its only value', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'has-background',
+				style: {
+					color: { gradient: 'linear-gradient(0deg,#000,#fff)' },
+				},
+			} );
+			expect( result.className ).toBeUndefined();
+		} );
+
+		it( 'leaves className untouched when has-background is not present', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'is-style-fancy',
+				style: {},
+			} );
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+	} );
+
 	describe( 'setBackgroundStyleDefaults', () => {
 		const backgroundStyles = {
 			backgroundImage: { id: 123, url: 'image.png' },

package/src/hooks/test/block-style-state.js

@@ -38,12 +38,12 @@ describe( 'getStyleForState', () => {
 	it( 'returns the selected viewport state style', () => {
 		const style = {
 			color: { text: '#000000' },
-			mobile: { color: { text: '#ff0000' } },
+			'@mobile': { color: { text: '#ff0000' } },
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: 'default',
 			} )
 		).toEqual( {
@@ -53,14 +53,14 @@ describe( 'getStyleForState', () => {
 
 	it( 'returns the selected viewport pseudo state style', () => {
 		const style = {
-			mobile: {
+			'@mobile': {
 				':hover': { color: { text: '#ff0000' } },
 			},
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: ':hover',
 			} )
 		).toEqual( {
@@ -105,14 +105,14 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: { color: { text: '#ff0000' } },
+					'@mobile': { color: { text: '#ff0000' } },
 				},
-				{ viewport: 'mobile', pseudo: 'default' },
+				{ viewport: '@mobile', pseudo: 'default' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: { typography: { fontSize: '32px' } },
+			'@mobile': { typography: { fontSize: '32px' } },
 		} );
 	} );
 
@@ -121,17 +121,17 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: {
+					'@mobile': {
 						color: { text: '#ff0000' },
 						':hover': { color: { text: '#00ff00' } },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' },
+				{ viewport: '@mobile', pseudo: ':hover' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: {
+			'@mobile': {
 				color: { text: '#ff0000' },
 				':hover': { typography: { fontSize: '32px' } },
 			},
@@ -234,7 +234,7 @@ describe( 'scopeResetAllFilterToState', () => {
 		const attributes = {
 			style: {
 				color: { text: '#000000' },
-				mobile: {
+				'@mobile': {
 					color: { text: '#ff0000' },
 					':hover': { color: { text: '#00ff00' } },
 				},
@@ -242,17 +242,17 @@ describe( 'scopeResetAllFilterToState', () => {
 		};
 
 		const result = scopeResetAllFilterToState(
-			{ viewport: 'mobile', pseudo: ':hover' },
+			{ viewport: '@mobile', pseudo: ':hover' },
 			innerReset
 		)( attributes );
 
 		expect( innerReset ).toHaveBeenCalledWith( {
-			style: attributes.style.mobile[ ':hover' ],
+			style: attributes.style[ '@mobile' ][ ':hover' ],
 		} );
 		expect( result ).toEqual( {
 			style: {
 				color: { text: '#000000' },
-				mobile: { color: { text: '#ff0000' } },
+				'@mobile': { color: { text: '#ff0000' } },
 			},
 		} );
 	} );

package/src/hooks/test/layout.js

@@ -52,7 +52,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -74,7 +74,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -96,7 +96,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									minimumColumnWidth: '8rem',
 								},
@@ -118,7 +118,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -140,7 +140,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -165,7 +165,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							tablet: {
+							'@tablet': {
 								spacing: {
 									blockGap: '12px',
 								},

package/src/hooks/test/style.js

@@ -402,7 +402,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { text: 'red' },
 					},
 				},
@@ -418,7 +418,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { background: '#ff00d0' },
 						dimensions: { width: '50%' },
 					},
@@ -435,7 +435,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						dimensions: { objectFit: 'fill' },
 					},
 				},
@@ -451,7 +451,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { background: 'black' },
 						},
@@ -469,7 +469,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						elements: {
 							link: {
 								color: { text: 'blue' },
@@ -510,7 +510,7 @@ describe( 'getCanvasStateStyleValue', () => {
 						color: { text: 'red' },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { text: 'red' },
@@ -524,13 +524,13 @@ describe( 'getCanvasStateStyleValue', () => {
 					':hover': {
 						color: { background: 'blue', text: 'red' },
 					},
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { text: 'yellow' },
 						},
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { background: 'blue', text: 'yellow' },

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>
 	);
 }