@wordpress/block-editor 12.5.0 → 12.7.0

package/src/components/preview-options/README.md

@@ -28,23 +28,24 @@ const MyPreviewOptions = () => (
 		className="edit-post-post-preview-dropdown"
 		deviceType={ deviceType }
 		setDeviceType={ setPreviewDeviceType }
-	>
-		<MenuGroup>
-			<div className="edit-post-header-preview__grouping-external">
-				<PostPreviewButton
-					className={ 'edit-post-header-preview__button-external' }
-					role="menuitem"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-					textContent={
-						<>
-							{ __( 'Preview in new tab' ) }
-							<Icon icon={ external } />
-						</>
-					}
-				/>
-			</div>
-		</MenuGroup>
+	> { ( { onClose } ) => (
+			<MenuGroup>
+				<div className="edit-post-header-preview__grouping-external">
+					<PostPreviewButton
+						className="edit-post-header-preview__button-external"
+						role="menuitem"
+						forceIsAutosaveable={ hasActiveMetaboxes }
+						textContent={
+							<>
+								{ __( 'Preview in new tab' ) }
+								<Icon icon={ external } />
+							</>
+						}
+						onPreview={ onClose }
+					/>
+				</div>
+			</MenuGroup>
+		) }
 	</PreviewOptions>
 );
 ```

package/src/components/preview-options/index.js

@@ -54,7 +54,7 @@ export default function PreviewOptions( {
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 			label={ label || __( 'Preview' ) }
 		>
-			{ () => (
+			{ ( renderProps ) => (
 				<>
 					<MenuGroup>
 						<MenuItem
@@ -79,7 +79,7 @@ export default function PreviewOptions( {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
-					{ children }
+					{ children( renderProps ) }
 				</>
 			) }
 		</DropdownMenu>

package/src/components/rich-text/content.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { RawHTML } from '@wordpress/element';
-import {
-	children as childrenSource,
-	getSaveElement,
-	__unstableGetBlockProps as getBlockProps,
-} from '@wordpress/blocks';
+import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -42,44 +38,3 @@ export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 
 	return content;
 };
-
-Content.__unstableIsRichTextContent = {};
-
-function findContent( blocks, richTextValues = [] ) {
-	if ( ! Array.isArray( blocks ) ) {
-		blocks = [ blocks ];
-	}
-
-	for ( const block of blocks ) {
-		if (
-			block?.type?.__unstableIsRichTextContent ===
-			Content.__unstableIsRichTextContent
-		) {
-			richTextValues.push( block.props.value );
-			continue;
-		}
-
-		if ( block?.props?.children ) {
-			findContent( block.props.children, richTextValues );
-		}
-	}
-
-	return richTextValues;
-}
-
-function _getSaveElement( { name, attributes, innerBlocks } ) {
-	return getSaveElement(
-		name,
-		attributes,
-		innerBlocks.map( _getSaveElement )
-	);
-}
-
-export function getRichTextValues( blocks = [] ) {
-	getBlockProps.skipFilters = true;
-	const values = findContent(
-		( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
-	);
-	getBlockProps.skipFilters = false;
-	return values;
-}

package/src/components/rich-text/format-edit.js

@@ -2,43 +2,67 @@
  * WordPress dependencies
  */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
-
-		if ( ! Edit ) {
-			return null;
-		}
-
-		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
-
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
+
+export const usesContextKey = Symbol( 'usesContext' );
+
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
+
+	const blockContext = useContext( BlockContext );
+
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
+
+	if ( ! EditFunction ) {
+		return null;
+	}
+
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
+
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
+			}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
+
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }

package/src/components/rich-text/get-rich-text-values.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML, StrictMode, Fragment } from '@wordpress/element';
+import {
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from '../inner-blocks';
+import { Content } from './content';
+
+/*
+ * This function is similar to `@wordpress/element`'s `renderToString` function,
+ * except that it does not render the elements to a string, but instead collects
+ * the values of all rich text `Content` elements.
+ */
+function addValuesForElement( element, values, innerBlocks ) {
+	if ( null === element || undefined === element || false === element ) {
+		return;
+	}
+
+	if ( Array.isArray( element ) ) {
+		return addValuesForElements( element, values, innerBlocks );
+	}
+
+	switch ( typeof element ) {
+		case 'string':
+		case 'number':
+			return;
+	}
+
+	const { type, props } = element;
+
+	switch ( type ) {
+		case StrictMode:
+		case Fragment:
+			return addValuesForElements( props.children, values, innerBlocks );
+		case RawHTML:
+			return;
+		case InnerBlocks.Content:
+			return addValuesForBlocks( values, innerBlocks );
+		case Content:
+			values.push( props.value );
+			return;
+	}
+
+	switch ( typeof type ) {
+		case 'string':
+			if ( typeof props.children !== 'undefined' ) {
+				return addValuesForElements(
+					props.children,
+					values,
+					innerBlocks
+				);
+			}
+			return;
+		case 'function':
+			const el =
+				type.prototype && typeof type.prototype.render === 'function'
+					? new type( props ).render()
+					: type( props );
+			return addValuesForElement( el, values, innerBlocks );
+	}
+}
+
+function addValuesForElements( children, ...args ) {
+	children = Array.isArray( children ) ? children : [ children ];
+
+	for ( let i = 0; i < children.length; i++ ) {
+		addValuesForElement( children[ i ], ...args );
+	}
+}
+
+function addValuesForBlocks( values, blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const { name, attributes, innerBlocks } = blocks[ i ];
+		const saveElement = getSaveElement(
+			name,
+			attributes,
+			// Instead of letting save elements use `useInnerBlocksProps.save`,
+			// force them to use InnerBlocks.Content instead so we can intercept
+			// a single component.
+			<InnerBlocks.Content />
+		);
+		addValuesForElement( saveElement, values, innerBlocks );
+	}
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = [];
+	addValuesForBlocks( values, blocks );
+	getBlockProps.skipFilters = false;
+	return values;
+}

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -10,7 +10,7 @@ import useSetting from '../../use-setting';
 
 export default function useSpacingSizes() {
 	const spacingSizes = [
-		{ name: 0, slug: '0', side: 0 },
+		{ name: 0, slug: '0', size: 0 },
 		...( useSetting( 'spacing.spacingSizes' ) || [] ),
 	];
 

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

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS, ICONS, hasAxisSupport } from '../utils';
+import {
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+	hasAxisSupport,
+} from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
@@ -20,7 +25,17 @@ export default function AxialInputControls( {
 		if ( ! onChange ) {
 			return;
 		}
-		const nextValues = { ...values };
+
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
 
 		if ( side === 'vertical' ) {
 			nextValues.top = next;

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

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS, ICONS } from '../utils';
+import {
+	ALL_SIDES,
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+} from '../utils';
 
 export default function SeparatedInputControls( {
 	minimumCustomValue,
@@ -20,7 +25,17 @@ export default function SeparatedInputControls( {
 		: ALL_SIDES;
 
 	const createHandleOnChange = ( side ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ side ] = next;
 
 		onChange( nextValues );

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

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from '../utils';
+import { LABELS, getPresetValueFromCustomValue } from '../utils';
 
 export default function SingleInputControl( {
 	minimumCustomValue,
@@ -16,7 +16,17 @@ export default function SingleInputControl( {
 	values,
 } ) {
 	const createHandleOnChange = ( currentSide ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ currentSide ] = next;
 
 		onChange( nextValues );

package/src/components/spacing-sizes-control/test/utils.js

@@ -49,7 +49,15 @@ describe( 'getCustomValueFromPreset', () => {
 } );
 
 describe( 'getPresetValueFromCustomValue', () => {
-	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	const spacingSizes = [
+		{ name: 'Default', slug: 'default', size: undefined },
+		{ name: 'Small', slug: 20, size: '8px' },
+	];
+	it( 'should return undefined even if an undefined value exist in spacing sizes as occurs if spacingSizes has > 7 entries', () => {
+		expect( getPresetValueFromCustomValue( undefined, spacingSizes ) ).toBe(
+			undefined
+		);
+	} );
 	it( 'should return original value if a string in spacing presets var format', () => {
 		expect(
 			getPresetValueFromCustomValue(

package/src/components/spacing-sizes-control/utils.js

@@ -101,8 +101,8 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  * @return {string} The preset value if it can be found.
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
-	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 

package/src/components/text-transform-control/README.md

@@ -0,0 +1,44 @@
+# TextTransformControl
+
+The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`.
+ 
+![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+
+## Development guidelines
+
+### Usage
+
+Renders the Text Transform Component with `none`, `uppercase`, `lowercase`, `capitalize` options.
+
+```jsx
+import { TextTransformControl } from '@wordpress/block-editor';
+
+const MyTextTransformControlComponent = () => (
+	<TextTransformControl
+		value={ textTransform }
+		onChange={ ( value ) => {
+			setAttributes( { textTransform: value } );
+		} }
+	/>
+);
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `none`
+-   **Options:** `none`, `uppercase`, `lowercase`, `capitalize`
+
+The current value of the Text Transform setting. You may only choose from the `Options` listed above.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.

package/src/components/use-block-display-information/index.js

@@ -67,8 +67,11 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetReusableBlockTitle,
+			} = select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -76,12 +79,16 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isSynced =
-				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const isReusable = isReusableBlock( blockType );
+			const resusableTitle = isReusable
+				? __experimentalGetReusableBlockTitle( attributes.ref )
+				: undefined;
+			const title = resusableTitle || blockType.title;
+			const isSynced = isReusable || isTemplatePart( blockType );
 			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
-				title: blockType.title,
+				title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,

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

@@ -1,14 +1,17 @@
 /**
  * External dependencies
  */
-import { useSharedValue } from 'react-native-reanimated';
+import {
+	runOnJS,
+	useDerivedValue,
+	useSharedValue,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { useThrottle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,6 +21,8 @@ import { useBlockListContext } from '../block-list/block-list-context';
 import { getDistanceToNearestEdge } from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 
+const UPDATE_TARGET_BLOCK_INDEX_THRESHOLD = 20; // In pixels
+
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 
 /**
@@ -111,6 +116,14 @@ export default function useBlockDropZone( {
 	rootClientId: targetRootClientId = '',
 } = {} ) {
 	const targetBlockIndex = useSharedValue( null );
+	const dragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
+	const prevDragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
@@ -118,43 +131,67 @@ export default function useBlockDropZone( {
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+		// We use the value of `blocksLayouts` as the dependency.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;
 
 	const onBlockDrop = useOnBlockDrop();
 
-	const throttled = useThrottle(
-		useCallback(
-			( event ) => {
-				const sortedBlockLayouts = getSortedBlocksLayouts();
-
-				const targetIndex = getNearestBlockIndex(
-					sortedBlockLayouts,
-					{ x: event.x, y: event.y },
-					getBlockListSettings( targetRootClientId )?.orientation,
-					isRTL
-				);
-				if ( targetIndex !== null ) {
-					targetBlockIndex.value = targetIndex ?? 0;
-				}
-			},
-			[
-				getSortedBlocksLayouts,
-				getNearestBlockIndex,
-				getBlockListSettings,
-				targetBlockIndex,
-			]
-		),
-		200
+	const updateTargetBlockIndex = useCallback(
+		( event ) => {
+			const sortedBlockLayouts = getSortedBlocksLayouts();
+
+			const targetIndex = getNearestBlockIndex(
+				sortedBlockLayouts,
+				{ x: event.x, y: event.y },
+				getBlockListSettings( targetRootClientId )?.orientation,
+				isRTL
+			);
+			if ( targetIndex !== null ) {
+				targetBlockIndex.value = targetIndex ?? 0;
+			}
+		},
+		[
+			getSortedBlocksLayouts,
+			getBlockListSettings,
+			targetRootClientId,
+			isRTL,
+			targetBlockIndex,
+		]
 	);
 
+	useDerivedValue( () => {
+		const x = dragPosition.x.value;
+		const y = dragPosition.y.value;
+		const prevX = prevDragPosition.x.value;
+		const prevY = prevDragPosition.y.value;
+		// `updateTargetBlockIndex` performs expensive calculations, so we throttle
+		// the call using a offset threshold based on the dragging position.
+		if (
+			Math.abs( x - prevX ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD ||
+			Math.abs( y - prevY ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD
+		) {
+			runOnJS( updateTargetBlockIndex )( { x, y } );
+			prevDragPosition.x.value = x;
+			prevDragPosition.y.value = y;
+			return true;
+		}
+		return false;
+	} );
+
 	return {
-		onBlockDragOver( event ) {
-			throttled( event );
+		onBlockDragOver( { x, y } ) {
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
+		},
+		onBlockDragOverWorklet( { x, y } ) {
+			'worklet';
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
 		},
 		onBlockDragEnd() {
-			throttled.cancel();
 			targetBlockIndex.value = null;
 		},
 		onBlockDrop: ( event ) => {