@wordpress/block-editor 12.9.0 → 12.10.0

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

@@ -0,0 +1,230 @@
+/**
+ * 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,
+			} }
+		>
+			<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 );