@wordpress/block-editor 15.21.1 → 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/private-selectors.js

@@ -14,6 +14,7 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getBlockListSettings,
 	getSettings,
 	canInsertBlockType,
 	getBlockName,
@@ -1077,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/test/private-selectors.js

@@ -27,6 +27,7 @@ import {
 	getSelectedBlockStyleState,
 	hasSelectedStyleState,
 	isSelectedBlockStyleStateShownOnCanvas,
+	shouldRenderBlockListView,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
@@ -75,6 +76,143 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'shouldRenderBlockListView', () => {
+		const blockWithListViewSupport = 'core/test-list-view-support';
+		const blockWithoutListViewSupport = 'core/test-no-list-view-support';
+
+		const createState = (
+			blockName,
+			{ allowedBlocks, innerBlocks = [] } = {}
+		) => {
+			const blockListSettings = new Map();
+			if ( allowedBlocks !== undefined ) {
+				blockListSettings.set( 'client-1', { allowedBlocks } );
+			}
+
+			return {
+				blocks: {
+					byClientId: new Map( [
+						[ 'client-1', { name: blockName } ],
+					] ),
+					order: new Map( [ [ 'client-1', innerBlocks ] ] ),
+					parents: new Map(),
+				},
+				blockListSettings,
+			};
+		};
+
+		beforeAll( () => {
+			registerBlockType( blockWithListViewSupport, {
+				apiVersion: 3,
+				title: 'List View support',
+				category: 'text',
+				supports: {
+					listView: true,
+				},
+			} );
+			registerBlockType( blockWithoutListViewSupport, {
+				apiVersion: 3,
+				title: 'No List View support',
+				category: 'text',
+			} );
+		} );
+
+		afterAll( () => {
+			unregisterBlockType( blockWithListViewSupport );
+			unregisterBlockType( blockWithoutListViewSupport );
+		} );
+
+		it( 'returns true for blocks with list view support', () => {
+			const state = createState( blockWithListViewSupport );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+
+		it( 'returns false when empty and insertion is disallowed via `allowedBlocks: []`', () => {
+			const state = createState( blockWithListViewSupport, {
+				allowedBlocks: [],
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'returns false when empty and insertion is disallowed via `allowedBlocks: false`', () => {
+			const state = createState( blockWithListViewSupport, {
+				allowedBlocks: false,
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'returns true when empty but insertion is allowed', () => {
+			// e.g. a static, still-empty gallery: nothing yet, but the user can
+			// start inserting, so its List View stays available.
+			const state = createState( blockWithListViewSupport, {
+				allowedBlocks: [ 'core/image' ],
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+
+		it( 'returns true when empty with no allowedBlocks restriction', () => {
+			const state = createState( blockWithListViewSupport );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+
+		it( 'returns true when insertion is disallowed but the block still has inner blocks', () => {
+			const state = createState( blockWithListViewSupport, {
+				allowedBlocks: [],
+				innerBlocks: [ 'child-1' ],
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+
+		it( 'does not grant list view support to unsupported block types', () => {
+			const state = createState( blockWithoutListViewSupport, {
+				allowedBlocks: [],
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'preserves the navigation block special case', () => {
+			const state = createState( 'core/navigation' );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+
+		it( 'keeps navigation in list view even when empty and insertion is disallowed', () => {
+			// The navigation special case takes precedence over the
+			// `allowedBlocks` exclusion: even with nothing to show and no
+			// insertion allowed, navigation still participates in List View.
+			const state = createState( 'core/navigation', {
+				allowedBlocks: [],
+			} );
+
+			expect( shouldRenderBlockListView( state, 'client-1' ) ).toBe(
+				true
+			);
+		} );
+	} );
+
 	describe( 'getSelectedBlockStyleState', () => {
 		it( 'returns default when the block has no selected state', () => {
 			const state = {};
@@ -89,12 +227,12 @@ describe( 'private selectors', () => {
 			const state = {
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: ':hover' },
+					value: { viewport: '@mobile', pseudo: ':hover' },
 				},
 			};
 
 			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: ':hover',
 			} );
 		} );
@@ -149,7 +287,7 @@ describe( 'private selectors', () => {
 			const state = {
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: 'default' },
+					value: { viewport: '@mobile', pseudo: 'default' },
 				},
 			};
 
@@ -171,7 +309,7 @@ describe( 'private selectors', () => {
 			const state = {
 				selectedBlockStyleState: {
 					clientId: 'client-1',
-					value: { viewport: 'mobile', pseudo: ':hover' },
+					value: { viewport: '@mobile', pseudo: ':hover' },
 				},
 			};
 
@@ -1523,6 +1661,7 @@ describe( 'private selectors', () => {
 			blockName = 'core/group',
 			patternName,
 			disableContentOnlyForUnsyncedPatterns,
+			disableContentOnlyForTemplateParts,
 			templateLock,
 			rootTemplateLock,
 		} = {} ) => {
@@ -1547,10 +1686,14 @@ describe( 'private selectors', () => {
 							: {},
 					],
 				] ),
-				settings:
-					disableContentOnlyForUnsyncedPatterns !== undefined
+				settings: {
+					...( disableContentOnlyForUnsyncedPatterns !== undefined
 						? { disableContentOnlyForUnsyncedPatterns }
-						: {},
+						: {} ),
+					...( disableContentOnlyForTemplateParts !== undefined
+						? { disableContentOnlyForTemplateParts }
+						: {} ),
+				},
 				editedContentOnlySection: undefined,
 			};
 		};
@@ -1594,6 +1737,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: {