@wordpress/block-editor 12.13.0 → 12.15.0

package/src/components/rich-text/use-paste-handler.js

@@ -35,7 +35,6 @@ export function usePasteHandler( props ) {
 				onReplace,
 				onSplit,
 				__unstableEmbedURLOnPaste,
-				preserveWhiteSpace,
 				pastePlainText,
 			} = propsRef.current;
 
@@ -63,10 +62,7 @@ export function usePasteHandler( props ) {
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( {
-					html,
-					preserveWhiteSpace,
-				} );
+				const pastedValue = create( { html } );
 				addActiveFormats( pastedValue, value.activeFormats );
 				onChange( insert( value, pastedValue ) );
 				return;
@@ -136,7 +132,6 @@ export function usePasteHandler( props ) {
 				plainText,
 				mode,
 				tagName,
-				preserveWhiteSpace,
 			} );
 
 			if ( typeof content === 'string' ) {

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -139,7 +139,7 @@ export default function SpacingInputControl( {
 		useMemo(
 			() => parseQuantityAndUnitFromRawValue( currentValue ),
 			[ currentValue ]
-		)[ 1 ] || units[ 0 ].value;
+		)[ 1 ] || units[ 0 ]?.value;
 
 	const setInitialValue = () => {
 		if ( value === undefined ) {

package/src/components/url-input/README.md

@@ -36,41 +36,6 @@ This prop is passed directly to the `URLInput` component.
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.URLInputButton, {
-			className: props.className,
-			url: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -103,7 +68,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 # `URLInput`
 
@@ -139,7 +103,7 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
-### `onKeydown`: `( event: KeyboardEvent ) => void`
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
 
 A callback invoked on the keydown event.
 
@@ -172,41 +136,6 @@ Start opting into the new margin-free styles that will become the default in a f
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.URLInput, {
-			className: props.className,
-			value: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -240,5 +169,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}

package/src/components/url-popover/image-url-input-ui.js

@@ -249,6 +249,7 @@ const ImageURLInputUI = ( {
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
+				isActive={ !! url }
 			/>
 			{ isOpen && (
 				<URLPopover

package/src/components/use-block-drop-zone/index.js

@@ -127,7 +127,8 @@ export function getDropTargetPosition(
 
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
- * @property {string} rootClientId The root client id for the block list.
+ * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
+ * @property {string}       rootClientId    The root client id for the block list.
  */
 
 /**
@@ -136,6 +137,7 @@ export function getDropTargetPosition(
  * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
  */
 export default function useBlockDropZone( {
+	dropZoneElement,
 	// An undefined value represents a top-level block. Default to an empty
 	// string for this so that `targetRootClientId` can be easily compared to
 	// values returned by the `getRootBlockClientId` selector, which also uses
@@ -235,6 +237,7 @@ export default function useBlockDropZone( {
 	);
 
 	return useDropZone( {
+		dropZoneElement,
 		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {

package/src/components/use-moving-animation/index.js

@@ -129,7 +129,7 @@ function useMovingAnimation( {
 		const finishedMoving = x === 0 && y === 0;
 		ref.current.style.transformOrigin = 'center center';
 		ref.current.style.transform = finishedMoving
-			? undefined
+			? null // Set to `null` to explicitly remove the transform.
 			: `translate3d(${ x }px,${ y }px,0)`;
 		ref.current.style.zIndex = isSelected ? '1' : '';
 

package/src/components/use-settings/index.js

@@ -254,7 +254,7 @@ export function useSettings( ...paths ) {
  *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
- * @deprecated 6.4.0 Use useSettings instead.
+ * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
@@ -262,7 +262,7 @@ export function useSettings( ...paths ) {
  */
 export function useSetting( path ) {
 	deprecated( 'wp.blockEditor.useSetting', {
-		since: '6.4',
+		since: '6.5',
 		alternative: 'wp.blockEditor.useSettings',
 		note: 'The new useSettings function can retrieve multiple settings at once, with better performance.',
 	} );

package/src/components/use-settings/test/index.js

@@ -135,7 +135,7 @@ describe( 'useSettings', () => {
 		const result = runHook( () => useSetting( 'layout.contentSize' ) );
 		expect( result ).toBe( '840px' );
 		expect( console ).toHaveWarnedWith(
-			'wp.blockEditor.useSetting is deprecated since version 6.4. Please use wp.blockEditor.useSettings instead.'
+			'wp.blockEditor.useSetting is deprecated since version 6.5. Please use wp.blockEditor.useSettings instead.'
 		);
 	} );
 } );

package/src/components/writing-flow/use-tab-nav.js

@@ -17,15 +17,20 @@ export default function useTabNav() {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
-	const lastFocus = useRef();
+
 	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
 		useSelect( blockEditorStore );
-	const { setNavigationMode } = useDispatch( blockEditorStore );
+	const { setNavigationMode, setLastFocus } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),
 		[]
 	);
 
+	const lastFocus = useSelect(
+		( select ) => select( blockEditorStore ).getLastFocus(),
+		[]
+	);
+
 	// Don't allow tabbing to this element in Navigation mode.
 	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
 
@@ -158,7 +163,7 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			lastFocus.current = event.target;
+			setLastFocus( { ...lastFocus, current: event.target } );
 
 			const { ownerDocument } = node;
 

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-renaming.js

@@ -3,6 +3,15 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { useBlockRename } from '../components/block-rename';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -38,6 +47,44 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
+export const withBlockRenameControl = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name, attributes, setAttributes, isSelected } = props;
+
+		const { canRename } = useBlockRename( name );
+
+		return (
+			<>
+				{ isSelected && canRename && (
+					<InspectorControls group="advanced">
+						<TextControl
+							__nextHasNoMarginBottom
+							label={ __( 'Block name' ) }
+							value={ attributes?.metadata?.name || '' }
+							onChange={ ( newName ) => {
+								setAttributes( {
+									metadata: {
+										...attributes?.metadata,
+										name: newName,
+									},
+								} );
+							} }
+						/>
+					</InspectorControls>
+				) }
+				<BlockEdit key="edit" { ...props } />
+			</>
+		);
+	},
+	'withToolbarControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/block-rename-ui/with-block-rename-control',
+	withBlockRenameControl
+);
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addLabelCallback',

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
 );