@wordpress/block-editor 15.21.1 → 15.22.0

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/iframe/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { version as reactVersion } from 'react';
 
 /**
  * WordPress dependencies
@@ -102,6 +103,12 @@ function getIframeSrc( resolvedAssets ) {
 		return src;
 	}
 
+	let body = '';
+	if ( reactVersion.split( '.' )[ 0 ] === '18' ) {
+		body =
+			'<body><script>document.currentScript.parentElement.remove()</script></body>';
+	}
+
 	// Correct doctype is required to enable rendering in standards mode.
 	// Also preload the styles to avoid a flash of unstyled content.
 	const html = `<!doctype html>
@@ -125,9 +132,7 @@ function getIframeSrc( resolvedAssets ) {
 		${ resolvedAssets.styles ?? '' }
 		${ resolvedAssets.scripts ?? '' }
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
+	${ body }
 </html>`;
 
 	src = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );

package/src/components/inserter/media-tab/media-preview.js

@@ -27,7 +27,6 @@ import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
 import { getFilename } from '@wordpress/url';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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/fill.js

@@ -26,7 +26,6 @@ import {
 import { ListViewContentFill } from './list-view-content-popover';
 
 const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
-const TEMPLATE_PART_GROUPS = [ 'default', 'settings', 'advanced' ];
 
 export default function InspectorControlsFill( {
 	children,
@@ -56,17 +55,16 @@ export default function InspectorControlsFill( {
 
 	// During pattern editing:
 	// - All blocks can show pattern editing groups (content, list).
-	// - Template parts can show a settings tab (default, settings, advanced groups).
+	// - Template parts can show any inspector group.
 	// - Other blocks cannot show a settings tab.
 	if ( context[ mayDisplayPatternEditingControlsKey ] ) {
-		// Template parts are allowed to show a settings tab to allow access to the
-		// 'Design' and 'Advanced' panels.
+		// Template parts have also historically supported
+		// any block inspector groups for extenders. The settings
+		// tab is also used by core for the 'Design' panel. Specifically
+		// for that block the restrictions on allowed groups are lessened.
 		const isTemplatePart = context.name === 'core/template-part';
-		const isTemplatePartGroup = TEMPLATE_PART_GROUPS.includes( group );
 		const isPatternEditingGroup = PATTERN_EDITING_GROUPS.includes( group );
-
-		const canShowGroup =
-			( isTemplatePart && isTemplatePartGroup ) || isPatternEditingGroup;
+		const canShowGroup = isTemplatePart || isPatternEditingGroup;
 
 		if ( ! canShowGroup ) {
 			return null;

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/index.js

@@ -9,7 +9,6 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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,15 +111,25 @@ const StylesTab = ( {
 	return (
 		<>
 			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
-			{ isSectionBlock && (
-				<SectionBlockColorControls
+			{ isSectionBlock && blockName !== 'core/template-part' && (
+				<SectionStyleControls
 					blockName={ blockName }
 					clientId={ clientId }
 					contentClientIds={ contentClientIds }
 				/>
 			) }
-			{ ! isSectionBlock && (
+			{
+				// Extenders have in the past always been allowed to add controls to group
+				// 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' ) }
@@ -88,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' ) }
@@ -108,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,17 +12,9 @@ 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';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**
@@ -34,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 );
@@ -64,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';
@@ -116,7 +100,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ hasPatternName ? symbol : blockInformation?.icon }
+				icon={ blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>

package/src/components/preset-input-control/custom-value-controls.js

@@ -6,7 +6,6 @@ import {
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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 {