@wordpress/block-editor 15.21.0 → 15.22.0

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/justify-content-control/README.md

@@ -27,7 +27,7 @@ const MyJustifyToolbar = ( { attributes, setAttributes } ) => (
 );
 ```
 
-**NOTE:** The justfify toolbar does not add any classes to your component, you must do this using the `setAttributes` function. The toolbar does define the following classnames you should use:
+**NOTE:** The justify toolbar does not add any classes to your component, you must do this using the `setAttributes` function. The toolbar does define the following classnames you should use:
 
     items-justified-left
     items-justified-center

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,9 +26,7 @@ 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';
-import { getBlockVisibilityLabel } from '../block-visibility';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
@@ -55,6 +45,7 @@ function ListViewBlockSelectButton(
 		draggable,
 		isExpanded,
 		ariaDescribedBy,
+		visibilityLabel,
 	},
 	ref
 ) {
@@ -64,25 +55,11 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { hasPatternName, blockVisibility } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = unlock( select( blockEditorStore ) );
-			const attributes = getBlockAttributes( clientId );
-			return {
-				hasPatternName: !! attributes?.metadata?.patternName,
-				blockVisibility: attributes?.metadata?.blockVisibility,
-			};
-		},
-		[ clientId ]
-	);
 
 	const shouldShowLockIcon = isLocked;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	// Determine visibility label from blockVisibility metadata
-	const visibilityLabel = getBlockVisibilityLabel( blockVisibility );
-
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
 	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
@@ -123,7 +100,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ hasPatternName ? symbol : blockInformation?.icon }
+				icon={ blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>
@@ -166,9 +143,12 @@ function ListViewBlockSelectButton(
 					</span>
 				) : null }
 				{ !! visibilityLabel && (
-					// TODO: `visibilityLabel` is not exposed to
-					// assistive technology — the trigger is
-					// `aria-hidden`, so the label is sighted-hover-only.
+					// The tooltip below is a sighted-hover affordance for
+					// the (decorative) visibility icon. The same
+					// `visibilityLabel` is exposed to assistive technology
+					// via the row's `aria-describedby`, which references the
+					// hidden `AriaReferencedText` rendered by the parent
+					// `ListViewBlock`.
 					<Tooltip.Root>
 						<Tooltip.Trigger
 							render={

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

@@ -630,6 +630,7 @@ function ListViewBlock( {
 							isExpanded={ canEditBlock ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
+							visibilityLabel={ blockVisibilityDescription }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ [

package/src/components/media-placeholder/README.md

@@ -38,7 +38,6 @@ This property is similar to the `allowedTypes` property. The difference is the f
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### addToGallery
 
@@ -48,7 +47,6 @@ If false the gallery media modal opens in the edit mode where the user can edit
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ### allowedTypes
 
@@ -60,16 +58,6 @@ This property is similar to the `accept` property. The difference is the format
 
 -   Type: `Array`
 -   Required: No
--   Platform: Web | Mobile
-
-### autoOpenMediaUpload
-
-If true, the MediaUpload component auto-opens the picker of the respective platform.
-
-- Type: `Boolean`
-- Required: No
-- Default: `false`
-- Platform: Mobile
 
 ### className
 
@@ -77,7 +65,6 @@ Class name added to the placeholder.
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### disableDropZone
 
@@ -102,7 +89,6 @@ Icon to display left of the title. When passed as a `String`, the icon will be r
 
 -   Type: `String|Component`
 -   Required: No
--   Platform: Web | Mobile
 
 ### isAppender
 
@@ -112,7 +98,6 @@ If false the default placeholder style is used.
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web | Mobile
 
 ### disableMediaButtons
 
@@ -121,7 +106,6 @@ If true, only the Drop Zone will be rendered. No UI controls to upload the media
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web | Mobile
 
 ### labels
 
@@ -129,7 +113,6 @@ An object that can contain a `title` and `instructions` properties. These proper
 
 -   Type: `Object`
 -   Required: No
--   Platform: Web | Mobile
 
 ### multiple
 
@@ -138,7 +121,6 @@ Whether to allow multiple selection of files or not. This property will also acc
 -   Type: `Boolean|String`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ### mediaPreview
 
@@ -146,7 +128,6 @@ The component is rendered as a preview in the placeholder.
 
 -   Type: `Component`
 -   Required: No
--   Platform: Web
 
 ### onError
 
@@ -154,7 +135,6 @@ Callback called when an upload error happens.
 
 -   Type: `Function`
 -   Required: No
--   Platform: Web
 
 ### onFilesPreUpload
 
@@ -164,7 +144,6 @@ It receives an array with the files to upload before to the final process. It me
 -   Type: `Function`
 -   Required: No
 -   Default: `Function` noop
--   Platform: Web
 
 ### onSelect
 
@@ -173,12 +152,8 @@ The call back receives an array with the new files. Each element of the collecti
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
-
-The argument of the callback is an object containing the following properties:
 
--   Web: `{ url, alt, id, link, caption, sizes, media_details }`
--   Mobile: `{ id, url }`
+The argument of the callback is an object containing the following properties: `{ url, alt, id, link, caption, sizes, media_details }`.
 
 ### value
 
@@ -186,7 +161,6 @@ An object or an array of objects that contain media ID (`id` property) to be sel
 
 -   Type: `Object|Array`
 -   Required: No
--   Platform: Web
 
 ### onSelectURL
 
@@ -194,7 +168,6 @@ Callback called when urls can be configured. No media insertion from url will be
 
 -   Type: `Function`
 -   Required: No
--   Platform: Web
 
 ### handleUpload
 
@@ -203,7 +176,6 @@ When the value is set to `false` or returned as `false`, the handling of the upl
 -   Type: `Boolean|Function`
 -   Required: No
 -   Default: `true`
--   Platform: Web
 
 ## Extend
 

package/src/components/media-upload/README.md

@@ -62,7 +62,6 @@ If allowedTypes is unset all mime types should be allowed.
 
 -   Type: `Array`
 -   Required: No
--   Platform: Web | Mobile
 
 ### mode
 
@@ -71,7 +70,6 @@ Value of Frame content default mode like 'browse', 'upload' etc.
 -   Type: `String`
 -   Required: No
 -   Default: false
--   Platform: Web
 
 ### multiple
 
@@ -80,7 +78,6 @@ Whether to allow multiple selection of files or not. This property will also acc
 -   Type: `Boolean|String`
 -   Required: No
 -   Default: false
--   Platform: Web
 
 ### value
 
@@ -88,7 +85,6 @@ Media ID (or media IDs if multiple is true) to be selected by default when openi
 
 -   Type: `Number|Array`
 -   Required: No
--   Platform: Web
 
 ### onClose
 
@@ -109,7 +105,6 @@ The `image.sizes.full` resolution does always exist. Other defined sizes are onl
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
 
 ### title
 
@@ -118,7 +113,6 @@ Title displayed in the media modal.
 -   Type: `String`
 -   Required: No
 -   Default: `Select or Upload Media`
--   Platform: Web
 
 ### modalClass
 
@@ -126,7 +120,6 @@ CSS class added to the media modal frame.
 
 -   Type: `String`
 -   Required: No
--   Platform: Web
 
 ### addToGallery
 
@@ -137,16 +130,6 @@ Only applies if `gallery === true`.
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
-
-### autoOpen
-
-If true, the picker of the respective platform auto-opens.
-
-- Type: `Boolean`
-- Required: No
-- Default: `false`
-- Platform: Mobile
 
 ### gallery
 
@@ -155,7 +138,6 @@ If true, the component will initiate all the states required to represent a gall
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
--   Platform: Web
 
 ## render
 
@@ -163,7 +145,6 @@ A callback invoked to render the Button opening the media library.
 
 -   Type: `Function`
 -   Required: Yes
--   Platform: Web | Mobile
 
 The first argument of the callback is an object containing the following properties:
 

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/test/use-block-sync.js

@@ -277,6 +277,46 @@ describe( 'useBlockSync hook', () => {
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
 
+	it( 'passes undoIgnore when a non-persistent block change ignores history', async () => {
+		const onChange = jest.fn();
+		const onInput = jest.fn();
+		const value1 = [
+			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
+		];
+		let registry;
+		const setRegistry = ( reg ) => {
+			registry = reg;
+		};
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
+		onChange.mockClear();
+		onInput.mockClear();
+
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkNextChangeAsNotPersistent( {
+				history: 'ignore',
+			} );
+		registry
+			.dispatch( blockEditorStore )
+			.updateBlockAttributes( 'a', { foo: 2 } );
+
+		expect( onInput ).toHaveBeenCalledWith(
+			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
+			expect.objectContaining( {
+				selection: expect.any( Object ),
+				undoIgnore: true,
+			} )
+		);
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'calls onChange if a persistent change occurs', async () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();

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( [] );
 		}
 	};
@@ -342,6 +344,7 @@ export default function useBlockSync( {
 		const {
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
+			__unstableGetLastBlockChangeHistoryMode,
 			__unstableIsLastBlockChangeIgnored,
 			areInnerBlocksControlled,
 			getBlockParents,
@@ -349,6 +352,7 @@ export default function useBlockSync( {
 
 		let blocks = getBlocks( clientId );
 		let isPersistent = isLastBlockChangePersistent();
+		let blockHistoryMode = __unstableGetLastBlockChangeHistoryMode();
 		let previousAreBlocksDifferent = false;
 		let prevSelectionStart = getSelectionStart();
 		let prevSelectionEnd = getSelectionEnd();
@@ -367,6 +371,8 @@ export default function useBlockSync( {
 			}
 
 			const newIsPersistent = isLastBlockChangePersistent();
+			const newBlockHistoryMode =
+				__unstableGetLastBlockChangeHistoryMode();
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
@@ -377,6 +383,7 @@ export default function useBlockSync( {
 			) {
 				pendingChangesRef.current.incoming = null;
 				isPersistent = newIsPersistent;
+				blockHistoryMode = newBlockHistoryMode;
 				return;
 			}
 
@@ -409,6 +416,7 @@ export default function useBlockSync( {
 				registry.batch( () => {
 					if ( blocksChanged ) {
 						isPersistent = newIsPersistent;
+						blockHistoryMode = newBlockHistoryMode;
 
 						// For inner block controllers (clientId is set), restore external IDs
 						// before passing blocks to the parent.
@@ -438,9 +446,13 @@ export default function useBlockSync( {
 						const updateParent = isPersistent
 							? onChangeRef.current
 							: onInputRef.current;
-						updateParent( blocksForParent, {
+						const updateOptions = {
 							selection: selectionForParent,
-						} );
+						};
+						if ( blockHistoryMode === 'ignore' ) {
+							updateOptions.undoIgnore = true;
+						}
+						updateParent( blocksForParent, updateOptions );
 					}
 
 					if (

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 {