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

package/src/components/global-styles/typography-panel.js

@@ -11,7 +11,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -25,8 +24,15 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
+import ColorGradientDropdownItem from './color-gradient-dropdown-item';
+import { useHasTextPanel } from './color-panel';
+import { useColorGradientSettings } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import {
+	extractPresetSlug,
+	encodeColorValueWithPalette,
+} from '../../utils/color-values';
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
@@ -48,6 +54,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
+	const hasTextColor = useHasTextPanel( settings );
 
 	return (
 		hasFontFamily ||
@@ -60,7 +67,8 @@ export function useHasTypographyPanel( settings ) {
 		hasTextDecoration ||
 		hasTextIndent ||
 		hasWritingMode ||
-		hasTextColumns
+		hasTextColumns ||
+		hasTextColor
 	);
 }
 
@@ -143,7 +151,7 @@ function getMergedFontSizes( settings ) {
 	];
 }
 
-function TypographyToolsPanel( {
+export function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
 	value,
@@ -161,6 +169,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			__experimentalFirstVisibleItemClass="first"
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
@@ -169,6 +178,7 @@ function TypographyToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
+	textColor: true,
 	fontFamily: true,
 	fontSize: true,
 	fontAppearance: true,
@@ -191,9 +201,47 @@ export default function TypographyPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	isGlobalStyles = false,
+	contrastWarning,
 } ) {
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
+	const { colors, allColors, areCustomSolidsEnabled, decodeValue } =
+		useColorGradientSettings( settings );
+
+	// Text color. Writes to `color.text` (unchanged storage path). The
+	// control is rendered here instead of the Color panel because text
+	// color is a typographic concern.
+	const hasTextColorEnabled = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColorValue = () => !! value?.color?.text;
+	const setTextColor = ( newColor, newSlug ) => {
+		const encoded = encodeColorValueWithPalette(
+			allColors,
+			newColor,
+			newSlug
+		);
+		let changedObject = setImmutably( value, [ 'color', 'text' ], encoded );
+		// Keep an in-sync link color following the text color (e.g. a
+		// Button's link color tracks its text color). Compare raw encoded
+		// references (e.g. `var:preset|color|slug`), not decoded hex values.
+		// Two palette entries can share the same hex but carry different
+		// slugs (e.g. `var:preset|color|dark-background` and
+		// `var:preset|color|dark-text` both resolving to `#000`); comparing
+		// decoded values would conflate them and incorrectly force the link
+		// color to follow the text color even when the user deliberately
+		// chose a different palette slot.
+		if (
+			inheritedValue?.color?.text ===
+			inheritedValue?.elements?.link?.color?.text
+		) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encoded
+			);
+		}
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
@@ -490,12 +538,25 @@ export default function TypographyPanel( {
 	const hasTextAlign = () => !! value?.typography?.textAlign;
 	const resetTextAlign = () => setTextAlign( undefined );
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			typography: {},
-		};
-	}, [] );
+	const resetAllFilter = useCallback(
+		( previousValue ) => {
+			if ( ! hasTextColorEnabled ) {
+				return {
+					...previousValue,
+					typography: {},
+				};
+			}
+			return {
+				...previousValue,
+				typography: {},
+				color: {
+					...previousValue?.color,
+					text: undefined,
+				},
+			};
+		},
+		[ hasTextColorEnabled ]
+	);
 
 	return (
 		<Wrapper
@@ -504,6 +565,34 @@ export default function TypographyPanel( {
 			onChange={ onChange }
 			panelId={ panelId }
 		>
+			{ hasTextColorEnabled && (
+				<ColorGradientDropdownItem
+					label={ __( 'Color' ) }
+					hasValue={ hasTextColorValue }
+					resetValue={ resetTextColor }
+					isShownByDefault={ defaultControls.textColor }
+					indicators={ [ textColor ] }
+					contrastWarning={ contrastWarning }
+					tabs={ [
+						{
+							key: 'text',
+							label: __( 'Color' ),
+							inheritedValue: textColor,
+							inheritedSlug: extractPresetSlug(
+								inheritedValue?.color?.text,
+								'color'
+							),
+							setValue: setTextColor,
+							userValue: userTextColor,
+						},
+					] }
+					colorGradientControlSettings={ {
+						colors,
+						disableCustomColors: ! areCustomSolidsEnabled,
+					} }
+					panelId={ panelId }
+				/>
+			) }
 			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font' ) }

package/src/components/inspector-controls/README.md

@@ -114,7 +114,6 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
-							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -204,7 +203,6 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
-					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {

package/src/components/inspector-controls/groups.js

@@ -16,6 +16,7 @@ const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
 const InspectorControlsLayout = createSlotFill( 'InspectorControlsLayout' );
+const InspectorControlsElements = createSlotFill( 'InspectorControlsElements' );
 const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
@@ -35,6 +36,7 @@ const groups = {
 	content: InspectorControlsContent,
 	dimensions: InspectorControlsDimensions,
 	effects: InspectorControlsEffects,
+	elements: InspectorControlsElements,
 	filter: InspectorControlsFilter,
 	layout: InspectorControlsLayout,
 	list: InspectorControlsListView,

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,14 +14,22 @@ import PositionControls from './position-controls-panel';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { useBlockSettings } from '../../hooks/utils';
 import { store as blockEditorStore } from '../../store';
-import { ColorEdit } from '../../hooks/color';
+import { ElementsEdit } from '../../hooks/elements';
+import { TypographyPanel } from '../../hooks/typography';
+import { BackgroundImagePanel } from '../../hooks/background';
 import { ColorToolsPanel } from '../global-styles/color-panel';
+import { TypographyToolsPanel } from '../global-styles/typography-panel';
+import { BackgroundToolsPanel } from '../global-styles/background-panel';
 
-function SectionBlockColorControls( {
-	blockName,
-	clientId,
-	contentClientIds,
-} ) {
+// Section blocks present a curated subset of the normal block style panels.
+// Their block-support fills are gated off by editing mode (see
+// `BlockStyleControls` in hooks/style.js), so each panel is direct-rendered
+// here rather than via the inspector slots, with settings restricted to the
+// supports a section should expose:
+// - Typography: text color only (font controls disabled).
+// - Background: color + gradient only (image controls disabled).
+// - Elements: link/heading/button/caption colors (unchanged).
+function SectionStyleControls( { blockName, clientId, contentClientIds } ) {
 	const settings = useBlockSettings( blockName );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
@@ -42,21 +51,51 @@ function SectionBlockColorControls( {
 		updateBlockAttributes( clientId, newAttributes );
 	};
 
+	const typographySettings = useMemo(
+		() => ( { ...settings, typography: {} } ),
+		[ settings ]
+	);
+	const backgroundSettings = useMemo(
+		() => ( {
+			...settings,
+			background: {
+				...settings.background,
+				backgroundImage: false,
+				backgroundSize: false,
+			},
+		} ),
+		[ settings ]
+	);
+
 	return (
-		<ColorEdit
-			clientId={ clientId }
-			name={ blockName }
-			settings={ settings }
-			setAttributes={ setAttributes }
-			asWrapper={ ColorToolsPanel }
-			label={ __( 'Color' ) }
-			defaultControls={ {
-				text: true,
-				background: true,
-				button: hasButtons,
-				heading: hasHeading,
-			} }
-		/>
+		<>
+			<TypographyPanel
+				clientId={ clientId }
+				name={ blockName }
+				settings={ typographySettings }
+				setAttributes={ setAttributes }
+				asWrapper={ TypographyToolsPanel }
+			/>
+			<BackgroundImagePanel
+				clientId={ clientId }
+				name={ blockName }
+				settings={ backgroundSettings }
+				setAttributes={ setAttributes }
+				asWrapper={ BackgroundToolsPanel }
+			/>
+			<ElementsEdit
+				clientId={ clientId }
+				name={ blockName }
+				settings={ settings }
+				setAttributes={ setAttributes }
+				asWrapper={ ColorToolsPanel }
+				label={ __( 'Elements' ) }
+				defaultControls={ {
+					button: hasButtons,
+					heading: hasHeading,
+				} }
+			/>
+		</>
 	);
 }
 
@@ -72,8 +111,8 @@ const StylesTab = ( {
 	return (
 		<>
 			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
-			{ isSectionBlock && (
-				<SectionBlockColorControls
+			{ isSectionBlock && blockName !== 'core/template-part' && (
+				<SectionStyleControls
 					blockName={ blockName }
 					clientId={ clientId }
 					contentClientIds={ contentClientIds }
@@ -81,10 +120,16 @@ const StylesTab = ( {
 			) }
 			{
 				// Extenders have in the past always been allowed to add controls to group
-				// the restrictions are lessened for that block.
+				// the restrictions are lessened for that block. Template parts are
+				// excluded from the curated section controls above and fall through
+				// to the full panel set here.
 			 }
 			{ ( ! isSectionBlock || blockName === 'core/template-part' ) && (
 				<>
+					<InspectorControls.Slot
+						group="typography"
+						label={ __( 'Typography' ) }
+					/>
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }
@@ -92,14 +137,10 @@ const StylesTab = ( {
 					/>
 					<InspectorControls.Slot
 						group="background"
-						label={ __( 'Background image' ) }
+						label={ __( 'Background' ) }
 						className="background-block-support-panel__inner-wrapper"
 					/>
 					<InspectorControls.Slot group="filter" />
-					<InspectorControls.Slot
-						group="typography"
-						label={ __( 'Typography' ) }
-					/>
 					<InspectorControls.Slot
 						group="layout"
 						label={ __( 'Layout' ) }
@@ -112,6 +153,11 @@ const StylesTab = ( {
 						group="border"
 						label={ borderPanelLabel }
 					/>
+					<InspectorControls.Slot
+						group="elements"
+						label={ __( 'Elements' ) }
+						className="elements-block-support-panel__inner-wrapper"
+					/>
 					<PositionControls />
 					<InspectorControls.Slot group="styles" />
 				</>

package/src/components/link-control/index.js

@@ -677,7 +677,6 @@ function LinkControl( {
 								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
-								__next40pxDefaultSize
 							/>
 						) }
 						<LinkControlSearchInput

package/src/components/link-control/test/index.js

@@ -1731,7 +1731,7 @@ describe( 'Selecting links', () => {
 					);
 				};
 
-				const { container } = render( <LinkControlConsumer /> );
+				render( <LinkControlConsumer /> );
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
@@ -1804,8 +1804,7 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Make sure focus is retained after submission.
-				// eslint-disable-next-line testing-library/no-node-access
-				expect( container.firstChild ).toHaveFocus();
+				expect( currentLinkAnchor ).toHaveFocus();
 
 				expect( currentLink ).toBeVisible();
 				expect(

package/src/components/list-view/block-select-button.js

@@ -12,15 +12,8 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import {
-	Icon,
-	lockSmall as lock,
-	pinSmall,
-	unseen,
-	symbol,
-} from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
 
 import { Tooltip } from '@wordpress/ui';
 
@@ -33,7 +26,6 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
-import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );
@@ -63,13 +55,6 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const hasPatternName = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = unlock( select( blockEditorStore ) );
-			return !! getBlockAttributes( clientId )?.metadata?.patternName;
-		},
-		[ clientId ]
-	);
 
 	const shouldShowLockIcon = isLocked;
 	const isSticky = blockInformation?.positionType === 'sticky';
@@ -115,7 +100,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ hasPatternName ? symbol : blockInformation?.icon }
+				icon={ blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>

package/src/components/provider/use-block-sync.js

@@ -252,6 +252,7 @@ export default function useBlockSync( {
 					cloneBlockWithMapping( block, idMappingRef.current )
 				);
 
+				__unstableMarkNextChangeAsNotPersistent();
 				setHasControlledInnerBlocks( clientId, true );
 
 				if ( subscribedRef.current ) {
@@ -278,12 +279,13 @@ export default function useBlockSync( {
 	// Clean up the changes made by setControlledBlocks() when the component
 	// containing useBlockSync() unmounts.
 	const unsetControlledBlocks = () => {
-		__unstableMarkNextChangeAsNotPersistent();
 		if ( clientId ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setHasControlledInnerBlocks( clientId, false );
 			__unstableMarkNextChangeAsNotPersistent();
 			replaceInnerBlocks( clientId, [] );
 		} else {
+			__unstableMarkNextChangeAsNotPersistent();
 			resetBlocks( [] );
 		}
 	};

package/src/components/rich-text/content.scss

@@ -10,6 +10,8 @@
 		// Use opacity to work in various editor styles.
 		// We don't specify the color here, because blocks or editor styles might provide their own.
 		opacity: 0.62;
+		// Reset the text shadow from the global styles.
+		text-shadow: none;
 	}
 
 	&:focus {

package/src/components/url-popover/image-url-input-ui.js

@@ -233,7 +233,6 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
@@ -249,7 +248,6 @@ const ImageURLInputUI = ( {
 				) }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }

package/src/components/use-block-display-information/index.js

@@ -15,6 +15,8 @@ import { symbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { isIsolatedEditorKey } from '../../store/private-keys';
 
 /** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
 
@@ -72,11 +74,13 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! clientId ) {
 				return null;
 			}
+			const blockEditorSelect = select( blockEditorStore );
 			const {
 				getBlockName,
 				getBlockAttributes,
 				__experimentalGetParsedPattern,
-			} = select( blockEditorStore );
+				getSettings,
+			} = blockEditorSelect;
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -85,11 +89,20 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
+			const { isWithinEditedContentOnlySection } =
+				unlock( blockEditorSelect );
+			const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
+			const isEditedContentOnlySection =
+				isWithinEditedContentOnlySection( clientId );
 
-			if ( patternName ) {
+			if (
+				patternName &&
+				! isEditedContentOnlySection &&
+				! isIsolatedEditor
+			) {
 				const pattern = __experimentalGetParsedPattern( patternName );
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {

package/src/components/use-block-display-information/test/index.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { symbol } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useBlockDisplayInformation from '../';
+import { isIsolatedEditorKey } from '../../../store/private-keys';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: ( value ) => ( {
+		registerPrivateActions: jest.fn(),
+		registerPrivateSelectors: jest.fn(),
+		...value,
+	} ),
+} ) );
+
+const groupIcon = 'group-icon';
+
+function TestComponent( { onChange } ) {
+	const blockInformation = useBlockDisplayInformation( 'client-id' );
+	useEffect( () => {
+		onChange( blockInformation );
+	}, [ blockInformation, onChange ] );
+	return null;
+}
+
+function setupUseSelect( {
+	attributes = {
+		anchor: 'hero',
+		metadata: {
+			name: 'Hero pattern',
+			patternName: 'theme/hero',
+		},
+		style: {
+			position: {
+				type: 'sticky',
+			},
+		},
+	},
+	blockName = 'core/group',
+	blockType = {
+		name: 'core/group',
+		title: 'Group',
+		icon: groupIcon,
+		description: 'Gather blocks in a layout container.',
+	},
+	getActiveBlockVariation = () => null,
+	settings = {},
+	isWithinEditedSection = false,
+} = {} ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getBlockName: () => blockName,
+			getBlockAttributes: () => attributes,
+			getSettings: () => settings,
+			__experimentalGetParsedPattern: () => ( {
+				title: 'Hero pattern',
+				description: 'Pattern description.',
+			} ),
+			isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			getBlockType: () => blockType,
+			getActiveBlockVariation,
+		} ) )
+	);
+}
+
+describe( 'useBlockDisplayInformation', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'displays pattern information for a pattern section that is not being edited', () => {
+		setupUseSelect();
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Pattern',
+				icon: symbol,
+				description: 'Pattern description.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for a pattern section that is being edited', () => {
+		setupUseSelect( { isWithinEditedSection: true } );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for a pattern wrapper in an isolated editor', () => {
+		setupUseSelect( {
+			attributes: {
+				metadata: {
+					name: 'Header',
+					patternName: 'theme/header-wrapper',
+				},
+			},
+			settings: {
+				[ isIsolatedEditorKey ]: true,
+			},
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Header',
+			} )
+		);
+	} );
+} );

package/src/hooks/anchor.js

@@ -55,7 +55,6 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__next40pxDefaultSize
 				className="html-anchor-control"
 				label={ __( 'HTML anchor' ) }
 				help={