@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/recursion-provider/README.md

@@ -0,0 +1,101 @@
+# RecursionProvider
+
+According to Gutenberg's block rendering architecture, any block type capable of recursion should be responsible for handling its own infinite loops. 
+
+To help with detecting infinite loops on the client, the `RecursionProvider` component and the `useHasRecursion()` hook are used to identify if a block has already been rendered. 
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
+	useBlockProps,
+	Warning,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyRecursiveBlockEdit( { attributes: { ref } } ) {
+	const hasAlreadyRendered = useHasRecursion( ref );
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+
+	if ( hasAlreadyRendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Block cannot be rendered inside itself.' ) }
+				</Warning>
+			</div>
+		);
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			Block editing code here....
+		</RecursionProvider>
+	);
+}
+
+/// ...
+
+<MyRecursiveBlockEdit />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### children
+
+Components to be rendered as content.
+
+- Type: `Element`
+- Required: Yes.
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+# `useHasRecursion()`
+
+Used in conjunction with `RecursionProvider`, this hook is used to identify if a block has already been rendered.
+
+## Usage
+
+For example usage, refer to the example above.
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+

package/src/components/resolution-tool/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+const DEFAULT_SIZE_OPTIONS = [
+	{
+		label: _x( 'Thumbnail', 'Image size option for resolution control' ),
+		value: 'thumbnail',
+	},
+	{
+		label: _x( 'Medium', 'Image size option for resolution control' ),
+		value: 'medium',
+	},
+	{
+		label: _x( 'Large', 'Image size option for resolution control' ),
+		value: 'large',
+	},
+	{
+		label: _x( 'Full Size', 'Image size option for resolution control' ),
+		value: 'full',
+	},
+];
+
+export default function ResolutionTool( {
+	panelId,
+	value,
+	onChange,
+	options = DEFAULT_SIZE_OPTIONS,
+	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	const displayValue = value ?? defaultValue;
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Resolution' ) }
+			onDeselect={ () => onChange( defaultValue ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Resolution' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				help={ __( 'Select the size of the source image.' ) }
+				size={ '__unstable-large' }
+			/>
+		</ToolsPanelItem>
+	);
+}

package/src/components/resolution-tool/stories/index.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResolutionTool from '..';
+
+export default {
+	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	component: ResolutionTool,
+	argTypes: {
+		panelId: { control: { type: null } },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ resolution, setResolution ] = useState( undefined );
+	const resetAll = () => {
+		setResolution( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+				<ResolutionTool
+					panelId={ panelId }
+					onChange={ ( newValue ) => {
+						setResolution( newValue );
+						onChangeProp( newValue );
+					} }
+					value={ resolution }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};

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/get-rich-text-values.js

@@ -0,0 +1,105 @@
+/**
+ * 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, ...args ) {
+	if ( null === element || undefined === element || false === element ) {
+		return;
+	}
+
+	if ( Array.isArray( element ) ) {
+		return addValuesForElements( element, ...args );
+	}
+
+	switch ( typeof element ) {
+		case 'string':
+		case 'number':
+			return;
+	}
+
+	const { type, props } = element;
+
+	switch ( type ) {
+		case StrictMode:
+		case Fragment:
+			return addValuesForElements( props.children, ...args );
+		case RawHTML:
+			return;
+		case InnerBlocks.Content:
+			return addValuesForBlocks( ...args );
+		case Content:
+			const [ values ] = args;
+			values.push( props.value );
+			return;
+	}
+
+	switch ( typeof type ) {
+		case 'string':
+			if ( typeof props.children !== 'undefined' ) {
+				return addValuesForElements( props.children, ...args );
+			}
+			return;
+		case 'function':
+			if (
+				type.prototype &&
+				typeof type.prototype.render === 'function'
+			) {
+				return addValuesForElement(
+					new type( props ).render(),
+					...args
+				);
+			}
+
+			return addValuesForElement( type( props ), ...args );
+	}
+}
+
+function addValuesForElements( children, ...args ) {
+	children = Array.isArray( children ) ? children : [ children ];
+
+	for ( let i = 0; i < children.length; i++ ) {
+		addValuesForElement( children[ i ], ...args );
+	}
+}
+
+function _getSaveElement( name, attributes, innerBlocks ) {
+	return getSaveElement(
+		name,
+		attributes,
+		innerBlocks.map( ( block ) =>
+			_getSaveElement( block.name, block.attributes, block.innerBlocks )
+		)
+	);
+}
+
+function addValuesForBlocks( values, blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const { name, attributes, innerBlocks } = blocks[ i ];
+		const saveElement = _getSaveElement( name, attributes, innerBlocks );
+		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/utils.js

@@ -102,7 +102,7 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
 	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) ) {
+	if ( 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/url-input/index.js

@@ -434,6 +434,7 @@ class URLInput extends Component {
 			placeholder = __( 'Paste URL or type to search' ),
 			__experimentalRenderControl: renderControl,
 			value = '',
+			hideLabelFromVision = false,
 		} = this.props;
 
 		const {
@@ -452,6 +453,7 @@ class URLInput extends Component {
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
+			hideLabelFromVision,
 		};
 
 		const inputProps = {

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,