@wordpress/block-editor 12.14.0 → 12.15.0

package/src/components/image-size-control/index.js

@@ -8,7 +8,6 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,11 +30,6 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
-	deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
-		since: '6.3',
-		alternative:
-			'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
-	} );
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 

package/src/components/inner-blocks/index.js

@@ -169,8 +169,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
-		options;
+	const {
+		__unstableDisableLayoutClassNames,
+		__unstableDisableDropZone,
+		dropZoneElement,
+	} = options;
 	const {
 		clientId,
 		layout = null,
@@ -211,6 +214,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
+		dropZoneElement,
 		rootClientId: clientId,
 	} );
 

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,54 +18,71 @@ import UnsupportedBlockDetails from '../unsupported-block-details';
 import { store as blockEditorStore } from '../../store';
 import { MAX_NESTING_DEPTH } from './constants';
 import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const EMPTY_ARRAY = [];
 
 const WarningMaxDepthExceeded = ( { clientId } ) => {
 	const [ showDetails, setShowDetails ] = useState( false );
 
-	const { isSelected, innerBlocks } = useSelect(
-		( select ) => {
-			const { getBlock, isBlockSelected } = select( blockEditorStore );
-			return {
-				innerBlocks: getBlock( clientId )?.innerBlocks || [],
-				isSelected: isBlockSelected( clientId ),
-			};
-		},
+	const isSelected = useSelect(
+		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
+	// determine whether to use the Ungroup action.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		clientId,
+	] );
+	const { isUngroupable } = convertToGroupButtonProps;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+	const onUngroup = convertToGroupButtons.ungroup.onSelect;
 
 	const {
 		isUnsupportedBlockEditorSupported,
 		canEnableUnsupportedBlockEditor,
 	} = useUnsupportedBlockEditor( clientId );
 
-	const onUngroup = () => {
-		if ( ! innerBlocks.length ) {
-			return;
-		}
-
-		replaceBlocks( clientId, innerBlocks );
-	};
-
-	let description;
-	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+	const descriptionFormat = __(
+		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
+	);
+	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
 	if (
 		! isUnsupportedBlockEditorSupported &&
 		! canEnableUnsupportedBlockEditor
 	) {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		// When UBE can't be used, the description mentions using the web browser to edit the block.
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using your web browser.'
+			);
 	}
 	// Otherwise, the description mentions using the web editor (i.e. UBE).
 	else {
-		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-		const descriptionFormat = __(
-			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
-		);
-		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using the web editor.'
+			);
+	}
+	// If the block can be flattened, we also suggest to ungroup the block.
+	if ( isUngroupable ) {
+		description +=
+			' ' +
+			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
+			__(
+				'Alternatively, you can flatten the content by ungrouping the block.'
+			);
 	}
 
 	return (
@@ -88,9 +105,16 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 					onCloseSheet={ () => setShowDetails( false ) }
 					title={ __( 'Deeply nested block' ) }
 					description={ description }
-					customActions={ [
-						{ label: __( 'Ungroup block' ), onPress: onUngroup },
-					] }
+					customActions={
+						isUngroupable
+							? [
+									{
+										label: __( 'Ungroup block' ),
+										onPress: onUngroup,
+									},
+							  ]
+							: EMPTY_ARRAY
+					}
 				/>
 			</View>
 		</TouchableWithoutFeedback>

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -18,6 +18,7 @@ import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import {
+	PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
 } from '../block-patterns-tab/utils';
@@ -70,7 +71,10 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
-			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+			if (
+				selectedCategory === myPatternsCategory.name &&
+				pattern.type === PATTERN_TYPES.user
+			) {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -22,7 +22,7 @@ import {
  * Internal dependencies
  */
 import usePatternsState from '../hooks/use-patterns-state';
-import BlockPatternList from '../../block-patterns-list';
+import BlockPatternsList from '../../block-patterns-list';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import { PatternsFilter } from './patterns-filter';
 import { usePatternCategories } from './use-pattern-categories';
@@ -30,6 +30,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 const noop = () => {};
@@ -69,7 +70,10 @@ export function PatternCategoryPreviews( {
 				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
-				if ( category.name === myPatternsCategory.name && pattern.id ) {
+				if (
+					category.name === myPatternsCategory.name &&
+					pattern.type === PATTERN_TYPES.user
+				) {
 					return true;
 				}
 				if ( category.name !== 'uncategorized' ) {
@@ -155,7 +159,7 @@ export function PatternCategoryPreviews( {
 			</VStack>
 
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternList
+				<BlockPatternsList
 					ref={ scrollContainerRef }
 					shownPatterns={ pagingProps.categoryPatternsAsyncList }
 					blockPatterns={ pagingProps.categoryPatterns }

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -14,6 +14,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	PATTERN_TYPES,
 } from './utils';
 
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
@@ -69,7 +70,11 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+		if (
+			filteredPatterns.some(
+				( pattern ) => pattern.type === PATTERN_TYPES.user
+			)
+		) {
 			categories.unshift( myPatternsCategory );
 		}
 		if ( filteredPatterns.length > 0 ) {

package/src/components/inserter/block-patterns-tab/utils.js

@@ -21,7 +21,7 @@ export const SYNC_TYPES = {
 
 export const allPatternsCategory = {
 	name: 'allPatterns',
-	label: __( 'All patterns' ),
+	label: __( 'All' ),
 };
 
 export const myPatternsCategory = {
@@ -53,9 +53,11 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 		return true;
 	}
 
-	// If user source selected, filter out theme patterns. Any pattern without
-	// an id wasn't created by a user.
-	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+	// If user source selected, filter out theme patterns.
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		pattern.type !== PATTERN_TYPES.user
+	) {
 		return true;
 	}
 

package/src/components/inserter/hooks/use-patterns-state.js

@@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -57,7 +58,8 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.id && pattern.syncStatus !== 'unsynced'
+				pattern.type === PATTERN_TYPES.user &&
+				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(

package/src/components/inserter-listbox/index.js

@@ -1,26 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
+
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
+	const store = useCompositeStore( {
+		focusShift: true,
+		focusWrap: 'horizontal',
 	} );
+
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite store={ store } render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 

package/src/components/inserter-listbox/item.js

@@ -3,32 +3,31 @@
  */
 import {
 	Button,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
 		<CompositeItem
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -45,7 +44,7 @@ function InserterListboxItem(
 				}
 				return <Button { ...propsWithTabIndex }>{ children }</Button>;
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 

package/src/components/inserter-listbox/row.js

@@ -1,24 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );

package/src/components/list-view/use-list-view-expand-selected-item.js

@@ -27,12 +27,6 @@ export default function useListViewExpandSelectedItem( {
 		[ firstSelectedBlockClientId ]
 	);
 
-	const parentClientIds =
-		Array.isArray( selectedBlockParentClientIds ) &&
-		selectedBlockParentClientIds.length
-			? selectedBlockParentClientIds
-			: null;
-
 	// Expand tree when a block is selected.
 	useEffect( () => {
 		// If the selectedTreeId is the same as the selected block,
@@ -42,7 +36,7 @@ export default function useListViewExpandSelectedItem( {
 		}
 
 		// If the selected block has parents, get the top-level parent.
-		if ( parentClientIds ) {
+		if ( selectedBlockParentClientIds?.length ) {
 			// If the selected block has parents,
 			// expand the tree branch.
 			setExpandedState( {
@@ -50,7 +44,12 @@ export default function useListViewExpandSelectedItem( {
 				clientIds: selectedBlockParentClientIds,
 			} );
 		}
-	}, [ firstSelectedBlockClientId ] );
+	}, [
+		firstSelectedBlockClientId,
+		selectedBlockParentClientIds,
+		selectedTreeId,
+		setExpandedState,
+	] );
 
 	return {
 		setSelectedTreeId,

package/src/components/plain-text/README.md

@@ -20,33 +20,6 @@ _Optional._ The component forwards the `ref` property to the `TextareaAutosize`
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			type: 'string',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.PlainText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			},
-		} );
-	},
-} );
-```
-
-{% ESNext %}
-
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import { PlainText } from '@wordpress/block-editor';
@@ -72,4 +45,3 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}

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

@@ -19,6 +19,7 @@ export default function PreviewOptions( {
 	deviceType,
 	setDeviceType,
 	label,
+	showIconLabels,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -35,6 +36,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		showTooltip: ! showIconLabels,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/rich-text/README.md

@@ -80,41 +80,6 @@ trimmed.
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'h2',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.RichText, {
-			tagName: 'h2',
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.blockEditor.RichText.Content, {
-			tagName: 'h2', value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
@@ -146,7 +111,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 ## RichTextToolbarButton
 
@@ -154,26 +118,6 @@ Slot to extend the format toolbar. Use it in the edit function of a `registerFor
 
 ### Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.richText.registerFormatType( /* ... */, {
-	/* ... */
-	edit: function( props ) {
-		return React.createElement(
-			wp.blockEditor.RichTextToolbarButton, {
-				icon: 'editor-code',
-				title: 'My formatting button',
-				onClick: function() { /* ... */ }
-				isActive: props.isActive,
-			} );
-	},
-	/* ... */
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerFormatType } from '@wordpress/rich-text';
@@ -194,5 +138,3 @@ registerFormatType( /* ... */, {
 	/* ... */
 } );
 ```
-
-{% end %}

package/src/components/rich-text/index.native.js

@@ -223,7 +223,7 @@ function RichTextWrapper(
 			// an intentional user interaction distinguishing between Backspace and
 			// Delete to remove the empty field, but also to avoid merge & remove
 			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
 				onRemove( ! isReverse );
 			}
 		},

package/src/components/rich-text/native/index.native.js

@@ -650,6 +650,40 @@ export class RichText extends Component {
 		return shouldDrop;
 	}
 
+	/**
+	 * Determines whether the text input should receive focus after an update.
+	 * For cases where a RichText with a value is merged with an empty one.
+	 *
+	 * @param {Object} prevProps - The previous props of the component.
+	 * @return {boolean} True if the text input should receive focus, false otherwise.
+	 */
+	shouldFocusTextInputAfterMerge( prevProps ) {
+		const {
+			__unstableIsSelected: isSelected,
+			blockIsSelected,
+			selectionStart,
+			selectionEnd,
+			__unstableMobileNoFocusOnMount,
+		} = this.props;
+
+		const {
+			__unstableIsSelected: prevIsSelected,
+			blockIsSelected: prevBlockIsSelected,
+		} = prevProps;
+
+		const noSelectionValues =
+			selectionStart === undefined && selectionEnd === undefined;
+		const textInputWasNotFocused = ! prevIsSelected && ! isSelected;
+
+		return (
+			! __unstableMobileNoFocusOnMount &&
+			noSelectionValues &&
+			textInputWasNotFocused &&
+			! prevBlockIsSelected &&
+			blockIsSelected
+		);
+	}
+
 	onSelectionChangeFromAztec( start, end, text, event ) {
 		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
 			return;
@@ -843,9 +877,8 @@ export class RichText extends Component {
 		if ( this.props.value !== this.value ) {
 			this.value = this.props.value;
 		}
-		const { __unstableIsSelected: isSelected } = this.props;
-
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
+		const { __unstableIsSelected: isSelected } = this.props;
 
 		if ( isSelected && ! prevIsSelected ) {
 			this._editor.focus();
@@ -855,6 +888,16 @@ export class RichText extends Component {
 				this.props.selectionStart || 0,
 				this.props.selectionEnd || 0
 			);
+		} else if ( this.shouldFocusTextInputAfterMerge( prevProps ) ) {
+			// Since this is happening when merging blocks, the selection should be at the last character position.
+			// As a fallback the internal selectionEnd value is used.
+			const lastCharacterPosition =
+				this.value?.length ?? this.selectionEnd;
+			this._editor.focus();
+			this.props.onSelectionChange(
+				lastCharacterPosition,
+				lastCharacterPosition
+			);
 		} else if ( ! isSelected && prevIsSelected ) {
 			this._editor.blur();
 		}