@wordpress/block-editor 12.14.0 → 12.15.0

package/src/components/rich-text/use-input-rules.js

@@ -3,7 +3,7 @@
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import { insert, isCollapsed, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -42,6 +42,34 @@ function findSelection( blocks ) {
 	return [];
 }
 
+/**
+ * An input rule that replaces two spaces with an en space, and an en space
+ * followed by a space with an em space.
+ *
+ * @param {Object} value Value to replace spaces in.
+ *
+ * @return {Object} Value with spaces replaced.
+ */
+function replacePrecedingSpaces( value ) {
+	if ( ! isCollapsed( value ) ) {
+		return value;
+	}
+
+	const { text, start } = value;
+	const lastTwoCharacters = text.slice( start - 2, start );
+
+	// Replace two spaces with an em space.
+	if ( lastTwoCharacters === '  ' ) {
+		return insert( value, '\u2002', start - 2, start );
+	}
+	// Replace an en space followed by a space with an em space.
+	else if ( lastTwoCharacters === '\u2002 ' ) {
+		return insert( value, '\u2003', start - 2, start );
+	}
+
+	return value;
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -122,7 +150,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				preventEventDiscovery( replacePrecedingSpaces( value ) )
 			);
 
 			if ( transformed !== value ) {

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/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/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/custom-fields.js

@@ -34,6 +34,65 @@ function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomFieldsControl( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	// If the block is a paragraph or image block, we need to know which
+	// attribute to use for the connection. Only the `content` attribute
+	// of the paragraph block and the `url` attribute of the image block are supported.
+	let attributeName;
+	if ( props.name === 'core/paragraph' ) attributeName = 'content';
+	if ( props.name === 'core/image' ) attributeName = 'url';
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Connections' ) } initialOpen={ true }>
+				<TextControl
+					__nextHasNoMarginBottom
+					autoComplete="off"
+					label={ __( 'Custom field meta_key' ) }
+					value={
+						props.attributes?.connections?.attributes?.[
+							attributeName
+						]?.value || ''
+					}
+					onChange={ ( nextValue ) => {
+						if ( nextValue === '' ) {
+							props.setAttributes( {
+								connections: undefined,
+								[ attributeName ]: undefined,
+								placeholder: undefined,
+							} );
+						} else {
+							props.setAttributes( {
+								connections: {
+									attributes: {
+										// The attributeName will be either `content` or `url`.
+										[ attributeName ]: {
+											// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+											// Could even be a custom source like a social media attribute.
+											source: 'meta_fields',
+											value: nextValue,
+										},
+									},
+								},
+								[ attributeName ]: undefined,
+								placeholder: sprintf(
+									'This content will be replaced on the frontend by the value of "%s" custom field.',
+									nextValue
+								),
+							} );
+						}
+					} }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning a connection to blocks that has support for connections.
@@ -46,7 +105,6 @@ function addAttribute( settings ) {
  */
 const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const blockEditingMode = useBlockEditingMode();
 		const hasCustomFieldsSupport = hasBlockSupport(
 			props.name,
 			'__experimentalConnections',
@@ -56,72 +114,17 @@ const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 		// Check if the current block is a paragraph or image block.
 		// Currently, only these two blocks are supported.
 		if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
-		// If the block is a paragraph or image block, we need to know which
-		// attribute to use for the connection. Only the `content` attribute
-		// of the paragraph block and the `url` attribute of the image block are supported.
-		let attributeName;
-		if ( props.name === 'core/paragraph' ) attributeName = 'content';
-		if ( props.name === 'core/image' ) attributeName = 'url';
-
-		if ( hasCustomFieldsSupport && props.isSelected ) {
-			return (
-				<>
-					<BlockEdit { ...props } />
-					{ blockEditingMode === 'default' && (
-						<InspectorControls>
-							<PanelBody
-								title={ __( 'Connections' ) }
-								initialOpen={ true }
-							>
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Custom field meta_key' ) }
-									value={
-										props.attributes?.connections
-											?.attributes?.[ attributeName ]
-											?.value || ''
-									}
-									onChange={ ( nextValue ) => {
-										if ( nextValue === '' ) {
-											props.setAttributes( {
-												connections: undefined,
-												[ attributeName ]: undefined,
-												placeholder: undefined,
-											} );
-										} else {
-											props.setAttributes( {
-												connections: {
-													attributes: {
-														// The attributeName will be either `content` or `url`.
-														[ attributeName ]: {
-															// Source will be variable, could be post_meta, user_meta, term_meta, etc.
-															// Could even be a custom source like a social media attribute.
-															source: 'meta_fields',
-															value: nextValue,
-														},
-													},
-												},
-												[ attributeName ]: undefined,
-												placeholder: sprintf(
-													'This content will be replaced on the frontend by the value of "%s" custom field.',
-													nextValue
-												),
-											} );
-										}
-									} }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
-				</>
-			);
-		}
-
-		return <BlockEdit { ...props } />;
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{ hasCustomFieldsSupport && props.isSelected && (
+					<CustomFieldsControl { ...props } />
+				) }
+			</>
+		);
 	};
 }, 'withCustomFieldsControls' );
 

package/src/hooks/index.js

@@ -22,7 +22,6 @@ import './metadata';
 import './custom-fields';
 import './block-hooks';
 import './block-renaming';
-import './block-rename-ui';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/layout.js

@@ -135,10 +135,9 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 
 function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const settings = useBlockSettings( blockName );
-	const {
-		layout: { allowEditing: allowEditingSetting },
-	} = settings;
-
+	// Block settings come from theme.json under settings.[blockName].
+	const { layout: layoutSettings } = settings;
+	// Layout comes from block attributes.
 	const { layout } = attributes;
 	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
@@ -153,17 +152,22 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 
+	// Layout block support comes from the block's block.json.
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
 		layoutBlockSupportKey,
 		{}
 	);
+	const blockSupportAndThemeSettings = {
+		...layoutSettings,
+		...layoutBlockSupport,
+	};
 	const {
 		allowSwitching,
-		allowEditing = allowEditingSetting ?? true,
+		allowEditing = true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
-	} = layoutBlockSupport;
+	} = blockSupportAndThemeSettings;
 
 	if ( ! allowEditing ) {
 		return null;
@@ -260,14 +264,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
 						/>
 					) }
 				</PanelBody>

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

@@ -19,25 +19,25 @@ exports[`Align options for group block sets Wide width option 1`] = `
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
 <figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
 <figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
 <figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
@@ -49,7 +49,7 @@ exports[`Align options for media block sets None option 1`] = `
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
 <figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;

package/src/layouts/constrained.js

@@ -36,7 +36,10 @@ export default {
 		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
-		const { allowJustification = true } = layoutBlockSupport;
+		const {
+			allowJustification = true,
+			allowCustomContentAndWideSize = true,
+		} = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -66,55 +69,59 @@ export default {
 		} );
 		return (
 			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
+				{ allowCustomContentAndWideSize && (
+					<>
+						<div className="block-editor-hooks__layout-controls">
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Content' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ contentSize || wideSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											contentSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ positionCenter } />
+							</div>
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Wide' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ wideSize || contentSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											wideSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ stretchWide } />
+							</div>
+						</div>
+						<p className="block-editor-hooks__layout-controls-helptext">
+							{ __(
+								'Customize the width for all elements that are assigned to the center or wide columns.'
+							) }
+						</p>
+					</>
+				) }
 				{ allowJustification && (
 					<ToggleGroupControl
 						__nextHasNoMarginBottom