@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.1

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

@@ -0,0 +1,231 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockSupport } from '@wordpress/blocks';
+import {
+	MenuItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	useBlockDisplayInformation,
+	InspectorControls,
+} from '../components';
+
+const emptyString = ( testString ) => testString?.trim()?.length === 0;
+
+function RenameModal( { blockName, originalBlockName, onClose, onSave } ) {
+	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+
+	const nameHasChanged = editedBlockName !== blockName;
+	const nameIsOriginal = editedBlockName === originalBlockName;
+	const nameIsEmpty = emptyString( editedBlockName );
+
+	const isNameValid = nameHasChanged || nameIsOriginal;
+
+	const autoSelectInputText = ( event ) => event.target.select();
+
+	const dialogDescription = useInstanceId(
+		RenameModal,
+		`block-editor-rename-modal__description`
+	);
+
+	const handleSubmit = () => {
+		// Must be assertive to immediately announce change.
+		speak(
+			sprintf(
+				/* translators: %1$s: type of update (either reset of changed). %2$s: new name/label for the block */
+				__( 'Block name %1$s to: "%2$s".' ),
+				nameIsOriginal || nameIsEmpty ? __( 'reset' ) : __( 'changed' ),
+				editedBlockName
+			),
+			'assertive'
+		);
+
+		onSave( editedBlockName );
+
+		// Immediate close avoids ability to hit save multiple times.
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			overlayClassName="block-editor-block-rename-modal"
+			aria={ {
+				describedby: dialogDescription,
+			} }
+			focusOnMount="firstContentElement"
+		>
+			<p id={ dialogDescription }>
+				{ __( 'Enter a custom name for this block.' ) }
+			</p>
+			<form
+				onSubmit={ ( e ) => {
+					e.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						value={ editedBlockName }
+						label={ __( 'Block name' ) }
+						hideLabelFromVision={ true }
+						placeholder={ originalBlockName }
+						onChange={ setEditedBlockName }
+						onFocus={ autoSelectInputText }
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+function BlockRenameControl( props ) {
+	const [ renamingBlock, setRenamingBlock ] = useState( false );
+
+	const { clientId, customName, onChange } = props;
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	return (
+		<>
+			<InspectorControls group="advanced">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Block name' ) }
+					value={ customName || '' }
+					onChange={ onChange }
+				/>
+			</InspectorControls>
+			<BlockSettingsMenuControls>
+				{ ( { selectedClientIds } ) => {
+					// Only enabled for single selections.
+					const canRename =
+						selectedClientIds.length === 1 &&
+						clientId === selectedClientIds[ 0 ];
+
+					// This check ensures the `BlockSettingsMenuControls` fill
+					// doesn't render multiple times and also that it renders for
+					// the block from which the menu was triggered.
+					if ( ! canRename ) {
+						return null;
+					}
+
+					return (
+						<MenuItem
+							onClick={ () => {
+								setRenamingBlock( true );
+							} }
+							aria-expanded={ renamingBlock }
+							aria-haspopup="dialog"
+						>
+							{ __( 'Rename' ) }
+						</MenuItem>
+					);
+				} }
+			</BlockSettingsMenuControls>
+
+			{ renamingBlock && (
+				<RenameModal
+					blockName={ customName || '' }
+					originalBlockName={ blockInformation?.title }
+					onClose={ () => setRenamingBlock( false ) }
+					onSave={ ( newName ) => {
+						// If the new value is the block's original name (e.g. `Group`)
+						// or it is an empty string then assume the intent is to reset
+						// the value. Therefore reset the metadata.
+						if (
+							newName === blockInformation?.title ||
+							emptyString( newName )
+						) {
+							newName = undefined;
+						}
+
+						onChange( newName );
+					} }
+				/>
+			) }
+		</>
+	);
+}
+
+export const withBlockRenameControl = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { clientId, name, attributes, setAttributes } = props;
+
+		const metaDataSupport = getBlockSupport(
+			name,
+			'__experimentalMetadata',
+			false
+		);
+
+		const supportsBlockNaming = !! (
+			true === metaDataSupport || metaDataSupport?.name
+		);
+
+		return (
+			<>
+				{ supportsBlockNaming && (
+					<>
+						<BlockRenameControl
+							clientId={ clientId }
+							customName={ attributes?.metadata?.name }
+							onChange={ ( newName ) => {
+								setAttributes( {
+									metadata: {
+										...( attributes?.metadata &&
+											attributes?.metadata ),
+										name: newName,
+									},
+								} );
+							} }
+						/>
+					</>
+				) }
+
+				<BlockEdit key="edit" { ...props } />
+			</>
+		);
+	},
+	'withToolbarControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/block-rename-ui/with-block-rename-control',
+	withBlockRenameControl
+);

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

@@ -0,0 +1,3 @@
+.block-editor-block-rename-modal {
+	z-index: z-index(".block-editor-block-rename-modal");
+}

package/src/hooks/duotone.js

@@ -15,7 +15,8 @@ import {
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -26,45 +27,23 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
-import BlockList from '../components/block-list';
 import {
-	__unstableDuotoneFilter as DuotoneFilter,
-	__unstableDuotoneStylesheet as DuotoneStylesheet,
-	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
-} from '../components/duotone';
+	getDuotoneFilter,
+	getDuotoneStylesheet,
+	getDuotoneUnsetStylesheet,
+} 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 { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 const EMPTY_ARRAY = [];
 
 extend( [ namesPlugin ] );
 
-/**
- * SVG and stylesheet needed for rendering the duotone filter.
- *
- * @param {Object}           props          Duotone props.
- * @param {string}           props.selector Selector to apply the filter to.
- * @param {string}           props.id       Unique id for this duotone filter.
- * @param {string[]|"unset"} props.colors   Array of RGB color strings ordered from dark to light.
- *
- * @return {WPElement} Duotone element.
- */
-function InlineDuotone( { selector, id, colors } ) {
-	if ( colors === 'unset' ) {
-		return <DuotoneUnsetStylesheet selector={ selector } />;
-	}
-
-	return (
-		<>
-			<DuotoneFilter id={ id } colors={ colors } />
-			<DuotoneStylesheet id={ id } selector={ selector } />
-		</>
-	);
-}
-
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	const disableDefault = ! useSetting( defaultSetting );
 	const userPresets =
@@ -248,8 +227,6 @@ function DuotoneStyles( {
 	selector: duotoneSelector,
 	attribute: duotoneAttr,
 } ) {
-	const element = useContext( BlockList.__unstableElementContext );
-
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
 		defaultSetting: 'color.defaultDuotone',
@@ -290,25 +267,47 @@ function DuotoneStyles( {
 		// Assuming the selector part is a subclass selector (not a tag name)
 		// so we can prepend the filter id class. If we want to support elements
 		// such as `img` or namespaces, we'll need to add a case for that here.
-		return `.editor-styles-wrapper .${ filterId }${ selectorPart.trim() }`;
+		return `.${ filterId }${ selectorPart.trim() }`;
 	} );
 
 	const selector = selectorsScoped.join( ', ' );
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	return (
-		element &&
-		isValidFilter &&
-		createPortal(
-			<InlineDuotone
-				selector={ selector }
-				id={ filterId }
-				colors={ colors }
-			/>,
-			element
-		)
+	const { setStyleOverride, deleteStyleOverride } = unlock(
+		useDispatch( blockEditorStore )
 	);
+
+	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',
+		} );
+
+		return () => {
+			deleteStyleOverride( filterId );
+			deleteStyleOverride( `duotone-${ filterId }` );
+		};
+	}, [
+		isValidFilter,
+		colors,
+		selector,
+		filterId,
+		setStyleOverride,
+		deleteStyleOverride,
+	] );
+
+	return null;
 }
 
 /**

package/src/hooks/index.js

@@ -20,9 +20,9 @@ import './layout';
 import './content-lock-ui';
 import './metadata';
 import './metadata-name';
-import './behaviors';
 import './custom-fields';
-import './auto-inserting-blocks';
+import './block-hooks';
+import './block-rename-ui';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/layout.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	ButtonGroup,
@@ -17,7 +17,7 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useContext, createPortal } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,13 +25,12 @@ import { useContext, createPortal } from '@wordpress/element';
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
 import useSetting from '../components/use-setting';
-import { LayoutStyle } from '../components/block-list/layout';
-import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { kebabCase } from '../utils/object';
 import { useBlockSettings } from './utils';
+import { unlock } from '../lock-unlock';
 
 const layoutBlockSupportKey = 'layout';
 
@@ -364,7 +363,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const shouldRenderLayoutStyles =
 			blockSupportsLayout && ! disableLayoutStyles;
 		const id = useInstanceId( BlockListBlock );
-		const element = useContext( BlockList.__unstableElementContext );
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
 			getBlockSupport( name, layoutBlockSupportKey ) || {};
@@ -404,26 +402,23 @@ export const withLayoutStyles = createHigherOrderComponent(
 			layoutClasses
 		);
 
+		const { setStyleOverride, deleteStyleOverride } = unlock(
+			useDispatch( blockEditorStore )
+		);
+
+		useEffect( () => {
+			if ( ! css ) return;
+			setStyleOverride( id, { css } );
+			return () => {
+				deleteStyleOverride( id );
+			};
+		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+
 		return (
-			<>
-				{ shouldRenderLayoutStyles &&
-					element &&
-					!! css &&
-					createPortal(
-						<LayoutStyle
-							blockName={ name }
-							selector={ selector }
-							css={ css }
-							layout={ usedLayout }
-							style={ attributes?.style }
-						/>,
-						element
-					) }
-				<BlockListBlock
-					{ ...props }
-					__unstableLayoutClassNames={ layoutClassNames }
-				/>
-			</>
+			<BlockListBlock
+				{ ...props }
+				__unstableLayoutClassNames={ layoutClassNames }
+			/>
 		);
 	},
 	'withLayoutStyles'
@@ -449,7 +444,6 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 		const shouldRenderChildLayoutStyles =
 			hasChildLayout && ! disableLayoutStyles;
 
-		const element = useContext( BlockList.__unstableElementContext );
 		const id = useInstanceId( BlockListBlock );
 		const selector = `.wp-container-content-${ id }`;
 
@@ -472,15 +466,19 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 		} );
 
-		return (
-			<>
-				{ shouldRenderChildLayoutStyles &&
-					element &&
-					!! css &&
-					createPortal( <style>{ css }</style>, element ) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
+		const { setStyleOverride, deleteStyleOverride } = unlock(
+			useDispatch( blockEditorStore )
 		);
+
+		useEffect( () => {
+			if ( ! css ) return;
+			setStyleOverride( id, { css } );
+			return () => {
+				deleteStyleOverride( id );
+			};
+		}, [ id, css, setStyleOverride, deleteStyleOverride ] );
+
+		return <BlockListBlock { ...props } className={ className } />;
 	},
 	'withChildLayoutStyles'
 );

package/src/hooks/position.js

@@ -334,8 +334,8 @@ export const withInspectorControls = createHigherOrderComponent(
 			blockName,
 			POSITION_SUPPORT_KEY
 		);
-		const showPositionControls =
-			positionSupport && ! useIsPositionDisabled( props );
+		const isPositionDisabled = useIsPositionDisabled( props );
+		const showPositionControls = positionSupport && ! isPositionDisabled;
 
 		return [
 			showPositionControls && (
@@ -361,8 +361,9 @@ export const withPositionStyles = createHigherOrderComponent(
 			name,
 			POSITION_SUPPORT_KEY
 		);
+		const isPositionDisabled = useIsPositionDisabled( props );
 		const allowPositionStyles =
-			hasPositionBlockSupport && ! useIsPositionDisabled( props );
+			hasPositionBlockSupport && ! isPositionDisabled;
 
 		const id = useInstanceId( BlockListBlock );
 		const element = useContext( BlockList.__unstableElementContext );

package/src/hooks/style.js

@@ -20,6 +20,7 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
  * Internal dependencies
  */
 import BlockList from '../components/block-list';
+import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
@@ -42,6 +43,7 @@ const styleSupportKeys = [
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	DIMENSIONS_SUPPORT_KEY,
+	BACKGROUND_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 ];
 
@@ -127,7 +129,11 @@ const skipSerializationPathsEdit = {
  */
 const skipSerializationPathsSave = {
 	...skipSerializationPathsEdit,
-	[ `${ SPACING_SUPPORT_KEY }` ]: [ 'spacing.blockGap' ],
+	[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.
+};
+
+const skipSerializationPathsSaveChecks = {
+	[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,
 };
 
 /**
@@ -285,7 +291,9 @@ export function addSaveProps(
 
 	let { style } = attributes;
 	Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
-		const skipSerialization = getBlockSupport( blockType, indicator );
+		const skipSerialization =
+			skipSerializationPathsSaveChecks[ indicator ] ||
+			getBlockSupport( blockType, indicator );
 
 		if ( skipSerialization === true ) {
 			style = omitStyle( style, path );
@@ -360,6 +368,7 @@ export const withBlockControls = createHigherOrderComponent(
 				{ shouldDisplayControls && blockEditingMode === 'default' && (
 					<>
 						<ColorEdit { ...props } />
+						<BackgroundImagePanel { ...props } />
 						<TypographyPanel { ...props } />
 						<BorderPanel { ...props } />
 						<DimensionsPanel { ...props } />

package/src/hooks/test/align.native.js

@@ -108,9 +108,10 @@ describe( 'Align options', () => {
 				expect( groupBlock ).toBeVisible();
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await within(
-					groupBlock
-				).findByTestId( 'block-list-wrapper' );
+				const innerBlockListWrapper =
+					await within( groupBlock ).findByTestId(
+						'block-list-wrapper'
+					);
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {

package/src/private-apis.js

@@ -23,6 +23,7 @@ import {
 	useReusableBlocksRenameHint,
 } from './components/inserter/reusable-block-rename-hint';
 import { usesContextKey } from './components/rich-text/format-edit';
+import { ExperimentalBlockCanvas } from './components/block-canvas';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -30,6 +31,7 @@ import { usesContextKey } from './components/rich-text/format-edit';
 export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
+	ExperimentalBlockCanvas,
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
 	kebabCase,

package/src/store/actions.js

@@ -375,7 +375,7 @@ function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
  */
 export const replaceBlocks =
 	( clientIds, blocks, indexToSelect, initialPosition = 0, meta ) =>
-	( { select, dispatch } ) => {
+	( { select, dispatch, registry } ) => {
 		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
 		blocks = getBlocksWithDefaultStylesApplied(
@@ -394,16 +394,22 @@ export const replaceBlocks =
 				return;
 			}
 		}
-		dispatch( {
-			type: 'REPLACE_BLOCKS',
-			clientIds,
-			blocks,
-			time: Date.now(),
-			indexToSelect,
-			initialPosition,
-			meta,
+		// We're batching these two actions because an extra `undo/redo` step can
+		// be created, based on whether we insert a default block or not.
+		registry.batch( () => {
+			dispatch( {
+				type: 'REPLACE_BLOCKS',
+				clientIds,
+				blocks,
+				time: Date.now(),
+				indexToSelect,
+				initialPosition,
+				meta,
+			} );
+			// To avoid a focus loss when removing the last block, assure there is
+			// always a default block if the last of the blocks have been removed.
+			dispatch.ensureDefaultBlock();
 		} );
-		dispatch.ensureDefaultBlock();
 	};
 
 /**
@@ -1034,6 +1040,7 @@ export const mergeBlocks =
 				dispatch.selectBlock( blockA.clientId );
 				return;
 			}
+
 			registry.batch( () => {
 				dispatch.insertBlocks(
 					blockWithSameType.innerBlocks,
@@ -1044,6 +1051,41 @@ export const mergeBlocks =
 				dispatch.selectBlock(
 					blockWithSameType.innerBlocks[ 0 ].clientId
 				);
+
+				// Attempt to merge the next block if it's the same type and
+				// same attributes. This is useful when merging a paragraph into
+				// a list, and the next block is also a list. If we don't merge,
+				// it looks like one list, but it's actually two lists. The same
+				// applies to other blocks such as a group with the same
+				// attributes.
+				const nextBlockClientId =
+					select.getNextBlockClientId( clientIdA );
+
+				if (
+					nextBlockClientId &&
+					select.getBlockName( clientIdA ) ===
+						select.getBlockName( nextBlockClientId )
+				) {
+					const rootAttributes =
+						select.getBlockAttributes( clientIdA );
+					const previousRootAttributes =
+						select.getBlockAttributes( nextBlockClientId );
+
+					if (
+						Object.keys( rootAttributes ).every(
+							( key ) =>
+								rootAttributes[ key ] ===
+								previousRootAttributes[ key ]
+						)
+					) {
+						dispatch.moveBlocksToPosition(
+							select.getBlockOrder( nextBlockClientId ),
+							nextBlockClientId,
+							clientIdA
+						);
+						dispatch.removeBlock( nextBlockClientId, false );
+					}
+				}
 			} );
 			return;
 		}