@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

package/src/components/use-block-commands/index.js

@@ -24,275 +24,286 @@ import {
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-export const useTransformCommands = () => {
-	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const {
-		blocks,
-		clientIds,
-		canRemove,
-		possibleBlockTransformations,
-		invalidSelection,
-	} = useSelect( ( select ) => {
+const getTransformCommands = () =>
+	function useTransformCommands() {
+		const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
 		const {
-			getBlockRootClientId,
-			getBlockTransformItems,
-			getSelectedBlockClientIds,
-			getBlocksByClientId,
-			canRemoveBlocks,
-		} = select( blockEditorStore );
+			blocks,
+			clientIds,
+			canRemove,
+			possibleBlockTransformations,
+			invalidSelection,
+		} = useSelect( ( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockTransformItems,
+				getSelectedBlockClientIds,
+				getBlocksByClientId,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
+
+			// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
+			// These nulls will cause fatal errors down the line.
+			// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
+			// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
+			if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+				return {
+					invalidSelection: true,
+				};
+			}
 
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const selectedBlocks = getBlocksByClientId( selectedBlockClientIds );
+			const rootClientId = getBlockRootClientId(
+				selectedBlockClientIds[ 0 ]
+			);
+			return {
+				blocks: selectedBlocks,
+				clientIds: selectedBlockClientIds,
+				possibleBlockTransformations: getBlockTransformItems(
+					selectedBlocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks( selectedBlockClientIds ),
+				invalidSelection: false,
+			};
+		}, [] );
 
-		// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
-		// These nulls will cause fatal errors down the line.
-		// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
-		// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
-		if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+		if ( invalidSelection ) {
 			return {
-				invalidSelection: true,
+				isLoading: false,
+				commands: [],
 			};
 		}
+		const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+		function selectForMultipleBlocks( insertedBlocks ) {
+			if ( insertedBlocks.length > 1 ) {
+				multiSelect(
+					insertedBlocks[ 0 ].clientId,
+					insertedBlocks[ insertedBlocks.length - 1 ].clientId
+				);
+			}
+		}
 
-		const rootClientId = getBlockRootClientId(
-			selectedBlockClientIds[ 0 ]
-		);
-		return {
-			blocks: selectedBlocks,
-			clientIds: selectedBlockClientIds,
-			possibleBlockTransformations: getBlockTransformItems(
-				selectedBlocks,
-				rootClientId
-			),
-			canRemove: canRemoveBlocks( selectedBlockClientIds ),
-			invalidSelection: false,
-		};
-	}, [] );
+		// Simple block tranformation based on the `Block Transforms` API.
+		function onBlockTransform( name ) {
+			const newBlocks = switchToBlockType( blocks, name );
+			replaceBlocks( clientIds, newBlocks );
+			selectForMultipleBlocks( newBlocks );
+		}
 
-	if ( invalidSelection ) {
-		return {
-			isLoading: false,
-			commands: [],
-		};
-	}
-	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
-
-	function selectForMultipleBlocks( insertedBlocks ) {
-		if ( insertedBlocks.length > 1 ) {
-			multiSelect(
-				insertedBlocks[ 0 ].clientId,
-				insertedBlocks[ insertedBlocks.length - 1 ].clientId
-			);
+		/**
+		 * The `isTemplate` check is a stopgap solution here.
+		 * Ideally, the Transforms API should handle this
+		 * by allowing to exclude blocks from wildcard transformations.
+		 */
+		const hasPossibleBlockTransformations =
+			!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+		if (
+			! clientIds ||
+			clientIds.length < 1 ||
+			! hasPossibleBlockTransformations
+		) {
+			return { isLoading: false, commands: [] };
 		}
-	}
-
-	// Simple block tranformation based on the `Block Transforms` API.
-	function onBlockTransform( name ) {
-		const newBlocks = switchToBlockType( blocks, name );
-		replaceBlocks( clientIds, newBlocks );
-		selectForMultipleBlocks( newBlocks );
-	}
-
-	/**
-	 * The `isTemplate` check is a stopgap solution here.
-	 * Ideally, the Transforms API should handle this
-	 * by allowing to exclude blocks from wildcard transformations.
-	 */
-	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
-
-	if (
-		! clientIds ||
-		clientIds.length < 1 ||
-		! hasPossibleBlockTransformations
-	) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const commands = possibleBlockTransformations.map( ( transformation ) => {
-		const { name, title, icon } = transformation;
-		return {
-			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
-			/* translators: %s: Block or block variation name. */
-			label: sprintf( __( 'Transform to %s' ), title ),
-			icon: <BlockIcon icon={ icon } />,
-			callback: ( { close } ) => {
-				onBlockTransform( name );
-				close();
+
+		const commands = possibleBlockTransformations.map(
+			( transformation ) => {
+				const { name, title, icon } = transformation;
+				return {
+					name:
+						'core/block-editor/transform-to-' +
+						name.replace( '/', '-' ),
+					/* translators: %s: Block or block variation name. */
+					label: sprintf( __( 'Transform to %s' ), title ),
+					icon: <BlockIcon icon={ icon } />,
+					callback: ( { close } ) => {
+						onBlockTransform( name );
+						close();
+					},
+				};
+			}
+		);
+
+		return { isLoading: false, commands };
+	};
+
+const getQuickActionsCommands = () =>
+	function useQuickActionsCommands() {
+		const { clientIds, isUngroupable, isGroupable } = useSelect(
+			( select ) => {
+				const {
+					getSelectedBlockClientIds,
+					isUngroupable: _isUngroupable,
+					isGroupable: _isGroupable,
+				} = select( blockEditorStore );
+				const selectedBlockClientIds = getSelectedBlockClientIds();
+
+				return {
+					clientIds: selectedBlockClientIds,
+					isUngroupable: _isUngroupable(),
+					isGroupable: _isGroupable(),
+				};
 			},
-		};
-	} );
+			[]
+		);
+		const {
+			canInsertBlockType,
+			getBlockRootClientId,
+			getBlocksByClientId,
+			canRemoveBlocks,
+		} = useSelect( blockEditorStore );
+		const { getDefaultBlockName, getGroupingBlockName } =
+			useSelect( blocksStore );
 
-	return { isLoading: false, commands };
-};
+		const blocks = getBlocksByClientId( clientIds );
 
-const useQuickActionsCommands = () => {
-	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
-			getSelectedBlockClientIds,
-			isUngroupable: _isUngroupable,
-			isGroupable: _isGroupable,
-		} = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
+			removeBlocks,
+			replaceBlocks,
+			duplicateBlocks,
+			insertAfterBlock,
+			insertBeforeBlock,
+		} = useDispatch( blockEditorStore );
+
+		const onGroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
 
-		return {
-			clientIds: selectedBlockClientIds,
-			isUngroupable: _isUngroupable(),
-			isGroupable: _isGroupable(),
+			const groupingBlockName = getGroupingBlockName();
+
+			// Activate the `transform` on `core/group` which does the conversion.
+			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+			if ( ! newBlocks ) {
+				return;
+			}
+			replaceBlocks( clientIds, newBlocks );
 		};
-	}, [] );
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
-	const { getDefaultBlockName, getGroupingBlockName } =
-		useSelect( blocksStore );
-
-	const blocks = getBlocksByClientId( clientIds );
-
-	const {
-		removeBlocks,
-		replaceBlocks,
-		duplicateBlocks,
-		insertAfterBlock,
-		insertBeforeBlock,
-	} = useDispatch( blockEditorStore );
-
-	const onGroup = () => {
-		if ( ! blocks.length ) {
-			return;
-		}
+		const onUngroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
 
-		const groupingBlockName = getGroupingBlockName();
+			const innerBlocks = blocks[ 0 ].innerBlocks;
 
-		// Activate the `transform` on `core/group` which does the conversion.
-		const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			if ( ! innerBlocks.length ) {
+				return;
+			}
 
-		if ( ! newBlocks ) {
-			return;
-		}
-		replaceBlocks( clientIds, newBlocks );
-	};
-	const onUngroup = () => {
-		if ( ! blocks.length ) {
-			return;
+			replaceBlocks( clientIds, innerBlocks );
+		};
+
+		if ( ! clientIds || clientIds.length < 1 ) {
+			return { isLoading: false, commands: [] };
 		}
 
-		const innerBlocks = blocks[ 0 ].innerBlocks;
+		const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+		const canInsertDefaultBlock = canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		);
+		const canDuplicate = blocks.every( ( block ) => {
+			return (
+				!! block &&
+				hasBlockSupport( block.name, 'multiple', true ) &&
+				canInsertBlockType( block.name, rootClientId )
+			);
+		} );
+		const canRemove = canRemoveBlocks( clientIds );
 
-		if ( ! innerBlocks.length ) {
-			return;
+		const commands = [];
+
+		if ( canDuplicate ) {
+			commands.push( {
+				name: 'duplicate',
+				label: __( 'Duplicate' ),
+				callback: () => duplicateBlocks( clientIds, true ),
+				icon: copy,
+			} );
 		}
 
-		replaceBlocks( clientIds, innerBlocks );
-	};
+		if ( canInsertDefaultBlock ) {
+			commands.push(
+				{
+					name: 'add-before',
+					label: __( 'Add before' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ 0 ]
+							: clientId;
+						insertBeforeBlock( clientId );
+					},
+					icon: add,
+				},
+				{
+					name: 'add-after',
+					label: __( 'Add after' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ clientIds.length - 1 ]
+							: clientId;
+						insertAfterBlock( clientId );
+					},
+					icon: add,
+				}
+			);
+		}
 
-	if ( ! clientIds || clientIds.length < 1 ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
-	);
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
-	const canRemove = canRemoveBlocks( clientIds );
+		if ( isGroupable ) {
+			commands.push( {
+				name: 'Group',
+				label: __( 'Group' ),
+				callback: onGroup,
+				icon: group,
+			} );
+		}
 
-	const commands = [];
+		if ( isUngroupable ) {
+			commands.push( {
+				name: 'ungroup',
+				label: __( 'Ungroup' ),
+				callback: onUngroup,
+				icon: ungroup,
+			} );
+		}
 
-	if ( canDuplicate ) {
-		commands.push( {
-			name: 'duplicate',
-			label: __( 'Duplicate' ),
-			callback: () => duplicateBlocks( clientIds, true ),
-			icon: copy,
-		} );
-	}
-
-	if ( canInsertDefaultBlock ) {
-		commands.push(
-			{
-				name: 'add-before',
-				label: __( 'Add before' ),
-				callback: () => {
-					const clientId = Array.isArray( clientIds )
-						? clientIds[ 0 ]
-						: clientId;
-					insertBeforeBlock( clientId );
-				},
-				icon: add,
-			},
-			{
-				name: 'add-after',
-				label: __( 'Add after' ),
-				callback: () => {
-					const clientId = Array.isArray( clientIds )
-						? clientIds[ clientIds.length - 1 ]
-						: clientId;
-					insertAfterBlock( clientId );
+		if ( canRemove ) {
+			commands.push( {
+				name: 'remove',
+				label: __( 'Delete' ),
+				callback: () => removeBlocks( clientIds, true ),
+				icon: remove,
+			} );
+		}
+
+		return {
+			isLoading: false,
+			commands: commands.map( ( command ) => ( {
+				...command,
+				name: 'core/block-editor/action-' + command.name,
+				callback: ( { close } ) => {
+					command.callback();
+					close();
 				},
-				icon: add,
-			}
-		);
-	}
-
-	if ( isGroupable ) {
-		commands.push( {
-			name: 'Group',
-			label: __( 'Group' ),
-			callback: onGroup,
-			icon: group,
-		} );
-	}
-
-	if ( isUngroupable ) {
-		commands.push( {
-			name: 'ungroup',
-			label: __( 'Ungroup' ),
-			callback: onUngroup,
-			icon: ungroup,
-		} );
-	}
-
-	if ( canRemove ) {
-		commands.push( {
-			name: 'remove',
-			label: __( 'Delete' ),
-			callback: () => removeBlocks( clientIds, true ),
-			icon: remove,
-		} );
-	}
-
-	return {
-		isLoading: false,
-		commands: commands.map( ( command ) => ( {
-			...command,
-			name: 'core/block-editor/action-' + command.name,
-			callback: ( { close } ) => {
-				command.callback();
-				close();
-			},
-		} ) ),
+			} ) ),
+		};
 	};
-};
 
 export const useBlockCommands = () => {
 	useCommandLoader( {
 		name: 'core/block-editor/blockTransforms',
-		hook: useTransformCommands,
+		hook: getTransformCommands(),
 	} );
 	useCommandLoader( {
 		name: 'core/block-editor/blockQuickActions',
-		hook: useQuickActionsCommands,
+		hook: getQuickActionsCommands(),
 		context: 'block-selection-edit',
 	} );
 };

package/src/hooks/border.js

@@ -31,7 +31,7 @@ import {
 import { store as blockEditorStore } from '../store';
 import { __ } from '@wordpress/i18n';
 
-export const BORDER_SUPPORT_KEY = '__experimentalBorder';
+export const BORDER_SUPPORT_KEY = 'border';
 export const SHADOW_SUPPORT_KEY = 'shadow';
 
 const getColorByProperty = ( colors, property, value ) => {
@@ -161,14 +161,8 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	}
 
 	const defaultControls = {
-		...getBlockSupport( name, [
-			BORDER_SUPPORT_KEY,
-			'__experimentalDefaultControls',
-		] ),
-		...getBlockSupport( name, [
-			SHADOW_SUPPORT_KEY,
-			'__experimentalDefaultControls',
-		] ),
+		...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ),
+		...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ),
 	};
 
 	return (

package/src/hooks/color.js

@@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
 	const enableContrastChecking =

package/src/hooks/dimensions.js

@@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 	const defaultControls = {
 		...defaultDimensionsControls,

package/src/hooks/font-family.js

@@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
-export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
 const { kebabCase } = unlock( componentsPrivateApis );
 
 /**

package/src/hooks/style.js

@@ -98,22 +98,16 @@ function addAttribute( settings ) {
  * @type {Record<string, string[]>}
  */
 const skipSerializationPathsEdit = {
-	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
-	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		COLOR_SUPPORT_KEY,
-	],
-	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ],
+	[ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ],
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
-	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [
 		DIMENSIONS_SUPPORT_KEY,
 	],
-	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		SPACING_SUPPORT_KEY,
-	],
-	[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		SHADOW_SUPPORT_KEY,
-	],
+	[ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ],
+	[ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ],
 };
 
 /**

package/src/hooks/supports.js

@@ -6,20 +6,20 @@ import { Platform } from '@wordpress/element';
 
 const ALIGN_SUPPORT_KEY = 'align';
 const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
-const BORDER_SUPPORT_KEY = '__experimentalBorder';
+const BORDER_SUPPORT_KEY = 'border';
 const COLOR_SUPPORT_KEY = 'color';
 const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
-const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
 const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
 /**
  * Key within block settings' supports array indicating support for text
  * align e.g. settings found in `block.json`.
@@ -34,7 +34,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
 /**
  * Key within block settings' supports array indicating support for writing mode
  * e.g. settings found in `block.json`.
@@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
 
 /**
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
  */
-const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
 const LAYOUT_SUPPORT_KEY = 'layout';
 const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,

package/src/hooks/test/style.js

@@ -133,8 +133,7 @@ describe( 'addSaveProps', () => {
 	const applySkipSerialization = ( features ) => {
 		const updatedSettings = { ...blockSettings };
 		Object.keys( features ).forEach( ( key ) => {
-			updatedSettings.supports[ key ].__experimentalSkipSerialization =
-				features[ key ];
+			updatedSettings.supports[ key ].skipSerialization = features[ key ];
 		} );
 		return updatedSettings;
 	};