@wordpress/block-editor 12.12.2-next.f8d8eceb.0 → 12.14.0

package/src/hooks/align.js

@@ -98,8 +98,8 @@ export function addAttribute( settings ) {
 			...settings.attributes,
 			align: {
 				type: 'string',
-				// Allow for '' since it is used by updateAlignment function
-				// in withToolbarControls for special cases with defined default values.
+				// Allow for '' since it is used by the `updateAlignment` function
+				// in toolbar controls for special cases with defined default values.
 				enum: [ ...ALL_ALIGNMENTS, '' ],
 			},
 		};
@@ -115,7 +115,7 @@ function BlockEditAlignmentToolbarControls( {
 } ) {
 	// Compute the block valid alignments by taking into account,
 	// if the theme supports wide alignments or not and the layout's
-	// availble alignments. We do that for conditionally rendering
+	// available alignments. We do that for conditionally rendering
 	// Slot.
 	const blockAllowedAlignments = getValidAlignments(
 		getBlockSupport( blockName, 'align' ),
@@ -160,7 +160,7 @@ function BlockEditAlignmentToolbarControls( {
  *
  * @return {Function} Wrapped component.
  */
-export const withToolbarControls = createHigherOrderComponent(
+export const withAlignmentControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const hasAlignmentSupport = hasBlockSupport(
 			props.name,
@@ -181,7 +181,7 @@ export const withToolbarControls = createHigherOrderComponent(
 			</>
 		);
 	},
-	'withToolbarControls'
+	'withAlignmentControls'
 );
 
 function BlockListBlockWithDataAlign( { block: BlockListBlock, props } ) {
@@ -257,7 +257,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 
 addFilter(
 	'blocks.registerBlockType',
-	'core/align/addAttribute',
+	'core/editor/align/addAttribute',
 	addAttribute
 );
 addFilter(
@@ -268,10 +268,10 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/editor/align/with-toolbar-controls',
-	withToolbarControls
+	withAlignmentControls
 );
 addFilter(
 	'blocks.getSaveContent.extraProps',
-	'core/align/addAssignedAlign',
+	'core/editor/align/addAssignedAlign',
 	addAssignedAlign
 );

package/src/hooks/align.native.js

@@ -36,8 +36,8 @@ addFilter(
 				...settings.attributes,
 				align: {
 					type: 'string',
-					// Allow for '' since it is used by updateAlignment function
-					// in withToolbarControls for special cases with defined default values.
+					// Allow for '' since it is used by the `updateAlignment` function
+					// in toolbar controls for special cases with defined default values.
 					enum: [ ...ALIGNMENTS, '' ],
 				},
 			};

package/src/hooks/anchor.js

@@ -59,6 +59,7 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 	const textControl = (
 		<TextControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			className="html-anchor-control"
 			label={ __( 'HTML anchor' ) }
 			help={
@@ -123,26 +124,23 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
  *
  * @return {Component} Wrapped component.
  */
-export const withInspectorControl = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			return (
-				<>
-					<BlockEdit { ...props } />
-					{ props.isSelected &&
-						hasBlockSupport( props.name, 'anchor' ) && (
-							<BlockEditAnchorControl
-								blockName={ props.name }
-								attributes={ props.attributes }
-								setAttributes={ props.setAttributes }
-							/>
-						) }
-				</>
-			);
-		};
-	},
-	'withInspectorControl'
-);
+export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ props.isSelected &&
+					hasBlockSupport( props.name, 'anchor' ) && (
+						<BlockEditAnchorControl
+							blockName={ props.name }
+							attributes={ props.attributes }
+							setAttributes={ props.setAttributes }
+						/>
+					) }
+			</>
+		);
+	};
+}, 'withAnchorControls' );
 
 /**
  * Override props assigned to save component to inject anchor ID, if block
@@ -166,11 +164,11 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
 addFilter(
 	'editor.BlockEdit',
-	'core/editor/anchor/with-inspector-control',
-	withInspectorControl
+	'core/editor/anchor/with-inspector-controls',
+	withAnchorControls
 );
 addFilter(
 	'blocks.getSaveContent.extraProps',
-	'core/anchor/save-props',
+	'core/editor/anchor/save-props',
 	addSaveProps
 );

package/src/hooks/background.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { isBlobURL } from '@wordpress/blob';
 import { getBlockSupport } from '@wordpress/blocks';
+import { focus } from '@wordpress/dom';
 import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	DropZone,
@@ -19,7 +20,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Platform, useCallback } from '@wordpress/element';
+import { Platform, useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
@@ -150,6 +151,8 @@ function BackgroundImagePanelItem( props ) {
 	const { id, title, url } =
 		attributes.style?.background?.backgroundImage || {};
 
+	const replaceContainerRef = useRef();
+
 	const { mediaUpload } = useSelect( ( select ) => {
 		return {
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
@@ -241,17 +244,22 @@ function BackgroundImagePanelItem( props ) {
 		};
 	}, [] );
 
+	const hasValue = hasBackgroundImageValue( props );
+
 	return (
 		<ToolsPanelItem
 			className="single-column"
-			hasValue={ () => hasBackgroundImageValue( props ) }
+			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ () => resetBackgroundImage( props ) }
 			isShownByDefault={ true }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
-			<div className="block-editor-hooks__background__inspector-media-replace-container">
+			<div
+				className="block-editor-hooks__background__inspector-media-replace-container"
+				ref={ replaceContainerRef }
+			>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }
@@ -267,9 +275,23 @@ function BackgroundImagePanelItem( props ) {
 					}
 					variant="secondary"
 				>
-					<MenuItem onClick={ () => resetBackgroundImage( props ) }>
-						{ __( 'Reset ' ) }
-					</MenuItem>
+					{ hasValue && (
+						<MenuItem
+							onClick={ () => {
+								const [ toggleButton ] = focus.tabbable.find(
+									replaceContainerRef.current
+								);
+								// Focus the toggle button and close the dropdown menu.
+								// This ensures similar behaviour as to selecting an image, where the dropdown is
+								// closed and focus is redirected to the dropdown toggle button.
+								toggleButton?.focus();
+								toggleButton?.click();
+								resetBackgroundImage( props );
+							} }
+						>
+							{ __( 'Reset ' ) }
+						</MenuItem>
+					) }
 				</MediaReplaceFlow>
 				<DropZone
 					onFilesDrop={ onFilesDrop }

package/src/hooks/block-hooks.js

@@ -235,23 +235,27 @@ function BlockHooksControl( props ) {
 	);
 }
 
-export const withBlockHooks = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		const blockEdit = <BlockEdit key="edit" { ...props } />;
-		return (
-			<>
-				{ blockEdit }
-				<BlockHooksControl
-					blockName={ props.name }
-					clientId={ props.clientId }
-				/>
-			</>
-		);
-	};
-}, 'withBlockHooks' );
+export const withBlockHooksControls = createHigherOrderComponent(
+	( BlockEdit ) => {
+		return ( props ) => {
+			return (
+				<>
+					<BlockEdit key="edit" { ...props } />
+					{ props.isSelected && (
+						<BlockHooksControl
+							blockName={ props.name }
+							clientId={ props.clientId }
+						/>
+					) }
+				</>
+			);
+		};
+	},
+	'withBlockHooksControls'
+);
 
 addFilter(
 	'editor.BlockEdit',
-	'core/block-hooks/with-inspector-control',
-	withBlockHooks
+	'core/editor/block-hooks/with-inspector-controls',
+	withBlockHooksControls
 );

package/src/hooks/block-rename-ui.js

@@ -92,6 +92,7 @@ function RenameModal( { blockName, originalBlockName, onClose, onSave } ) {
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
 						hideLabelFromVision={ true }
@@ -130,6 +131,7 @@ function BlockRenameControl( props ) {
 			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Block name' ) }
 					value={ customName || '' }
 					onChange={ onChange }
@@ -187,7 +189,7 @@ function BlockRenameControl( props ) {
 	);
 }
 
-export const withBlockRenameControl = createHigherOrderComponent(
+export const withBlockRenameControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { clientId, name, attributes, setAttributes, isSelected } = props;
 
@@ -216,11 +218,11 @@ export const withBlockRenameControl = createHigherOrderComponent(
 			</>
 		);
 	},
-	'withToolbarControls'
+	'withBlockRenameControls'
 );
 
 addFilter(
 	'editor.BlockEdit',
-	'core/block-rename-ui/with-block-rename-control',
-	withBlockRenameControl
+	'core/block-rename-ui/with-block-rename-controls',
+	withBlockRenameControls
 );

package/src/hooks/content-lock-ui.js

@@ -37,7 +37,7 @@ function StopEditingAsBlocksOnOutsideSelect( {
 	return null;
 }
 
-export const withBlockControls = createHigherOrderComponent(
+export const withContentLockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { getBlockListSettings, getSettings } =
 			useSelect( blockEditorStore );
@@ -155,11 +155,11 @@ export const withBlockControls = createHigherOrderComponent(
 			</>
 		);
 	},
-	'withToolbarControls'
+	'withContentLockControls'
 );
 
 addFilter(
 	'editor.BlockEdit',
 	'core/content-lock-ui/with-block-controls',
-	withBlockControls
+	withContentLockControls
 );

package/src/hooks/custom-class-name.js

@@ -49,6 +49,7 @@ function CustomClassNameControls( { attributes, setAttributes } ) {
 		<InspectorControls group="advanced">
 			<TextControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				autoComplete="off"
 				label={ __( 'Additional CSS class(es)' ) }
 				value={ attributes.className || '' }
@@ -72,7 +73,7 @@ function CustomClassNameControls( { attributes, setAttributes } ) {
  *
  * @return {Component} Wrapped component.
  */
-export const withInspectorControl = createHigherOrderComponent(
+export const withCustomClassNameControls = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
 			const hasCustomClassName = hasBlockSupport(
@@ -94,7 +95,7 @@ export const withInspectorControl = createHigherOrderComponent(
 			);
 		};
 	},
-	'withInspectorControl'
+	'withCustomClassNameControls'
 );
 
 /**
@@ -163,17 +164,17 @@ export function addTransforms( result, source, index, results ) {
 
 addFilter(
 	'blocks.registerBlockType',
-	'core/custom-class-name/attribute',
+	'core/editor/custom-class-name/attribute',
 	addAttribute
 );
 addFilter(
 	'editor.BlockEdit',
-	'core/editor/custom-class-name/with-inspector-control',
-	withInspectorControl
+	'core/editor/custom-class-name/with-inspector-controls',
+	withCustomClassNameControls
 );
 addFilter(
 	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
+	'core/editor/custom-class-name/save-props',
 	addSaveProps
 );
 

package/src/hooks/custom-fields.js

@@ -44,7 +44,7 @@ function addAttribute( settings ) {
  *
  * @return {Component} Wrapped component.
  */
-const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
+const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		const blockEditingMode = useBlockEditingMode();
 		const hasCustomFieldsSupport = hasBlockSupport(
@@ -123,17 +123,17 @@ const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
 
 		return <BlockEdit { ...props } />;
 	};
-}, 'withInspectorControl' );
+}, 'withCustomFieldsControls' );
 
 if ( window.__experimentalConnections ) {
 	addFilter(
 		'blocks.registerBlockType',
-		'core/connections/attribute',
+		'core/editor/connections/attribute',
 		addAttribute
 	);
 	addFilter(
 		'editor.BlockEdit',
-		'core/connections/with-inspector-control',
-		withInspectorControl
+		'core/editor/connections/with-inspector-controls',
+		withCustomFieldsControls
 	);
 }

package/src/hooks/duotone.js

@@ -16,7 +16,6 @@ import {
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -34,12 +33,10 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings } from './utils';
+import { useBlockSettings, useStyleOverride } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-import { store as blockEditorStore } from '../store';
-import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
@@ -102,6 +99,7 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
+	const blockEditingMode = useBlockEditingMode();
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -124,6 +122,10 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 		return null;
 	}
 
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
 		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
 		: duotoneStyle;
@@ -219,17 +221,13 @@ const withDuotoneControls = createHigherOrderComponent(
 			'filter.duotone'
 		);
 
-		const blockEditingMode = useBlockEditingMode();
-
 		// CAUTION: code added before this line will be executed
 		// for all blocks, not just those that support duotone. Code added
 		// above this line should be carefully evaluated for its impact on
 		// performance.
 		return (
 			<>
-				{ hasDuotoneSupport && blockEditingMode === 'default' && (
-					<DuotonePanel { ...props } />
-				) }
+				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
 				<BlockEdit { ...props } />
 			</>
 		);
@@ -290,8 +288,27 @@ function DuotoneStyles( {
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	const { setStyleOverride, deleteStyleOverride } = unlock(
-		useDispatch( blockEditorStore )
+	useStyleOverride(
+		isValidFilter
+			? {
+					css:
+						colors !== 'unset'
+							? getDuotoneStylesheet( selector, filterId )
+							: getDuotoneUnsetStylesheet( selector ),
+					__unstableType: 'presets',
+			  }
+			: undefined
+	);
+	useStyleOverride(
+		isValidFilter
+			? {
+					assets:
+						colors !== 'unset'
+							? getDuotoneFilter( filterId, colors )
+							: '',
+					__unstableType: 'svgs',
+			  }
+			: undefined
 	);
 
 	const blockElement = useBlockElement( clientId );
@@ -299,19 +316,6 @@ function DuotoneStyles( {
 	useEffect( () => {
 		if ( ! isValidFilter ) return;
 
-		setStyleOverride( filterId, {
-			css:
-				colors !== 'unset'
-					? getDuotoneStylesheet( selector, filterId )
-					: getDuotoneUnsetStylesheet( selector ),
-			__unstableType: 'presets',
-		} );
-		setStyleOverride( `duotone-${ filterId }`, {
-			assets:
-				colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
-			__unstableType: 'svgs',
-		} );
-
 		// Safari does not always update the duotone filter when the duotone colors
 		// are changed. When using Safari, force the block element to be repainted by
 		// the browser to ensure any changes are reflected visually. This logic matches
@@ -328,20 +332,7 @@ function DuotoneStyles( {
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-
-		return () => {
-			deleteStyleOverride( filterId );
-			deleteStyleOverride( `duotone-${ filterId }` );
-		};
-	}, [
-		isValidFilter,
-		blockElement,
-		colors,
-		selector,
-		filterId,
-		setStyleOverride,
-		deleteStyleOverride,
-	] );
+	}, [ isValidFilter, blockElement ] );
 
 	return null;
 }