@wordpress/block-editor 12.23.0 → 12.25.0

package/src/components/text-transform-control/index.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	reset,
@@ -15,24 +14,29 @@ import {
 	formatUppercase,
 } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_TRANSFORMS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Uppercase' ),
+		label: __( 'Uppercase' ),
 		value: 'uppercase',
 		icon: formatUppercase,
 	},
 	{
-		name: __( 'Lowercase' ),
+		label: __( 'Lowercase' ),
 		value: 'lowercase',
 		icon: formatLowercase,
 	},
 	{
-		name: __( 'Capitalize' ),
+		label: __( 'Capitalize' ),
 		value: 'capitalize',
 		icon: formatCapitalize,
 	},
@@ -50,34 +54,17 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<fieldset
+		<SegmentedTextControl
+			label={ __( 'Letter case' ) }
+			options={ TEXT_TRANSFORMS }
 			className={ classnames(
 				'block-editor-text-transform-control',
 				className
 			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							label={ textTransform.name }
-							isPressed={ textTransform.value === value }
-							onClick={ () => {
-								onChange(
-									textTransform.value === value
-										? undefined
-										: textTransform.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

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

@@ -27,37 +27,55 @@ import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
 	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const { blocks, clientIds, canRemove, possibleBlockTransformations } =
-		useSelect( ( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockTransformItems,
-				getSelectedBlockClientIds,
-				getBlocksByClientId,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
-
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlocks = getBlocksByClientId(
-				selectedBlockClientIds
-			);
-			const rootClientId = getBlockRootClientId(
-				selectedBlockClientIds[ 0 ]
-			);
+	const {
+		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 {
-				blocks: selectedBlocks,
-				clientIds: selectedBlockClientIds,
-				possibleBlockTransformations: getBlockTransformItems(
-					selectedBlocks,
-					rootClientId
-				),
-				canRemove: canRemoveBlocks(
-					selectedBlockClientIds,
-					rootClientId
-				),
+				invalidSelection: true,
 			};
-		}, [] );
+		}
 
+		const rootClientId = getBlockRootClientId(
+			selectedBlockClientIds[ 0 ]
+		);
+		return {
+			blocks: selectedBlocks,
+			clientIds: selectedBlockClientIds,
+			possibleBlockTransformations: getBlockTransformItems(
+				selectedBlocks,
+				rootClientId
+			),
+			canRemove: canRemoveBlocks( selectedBlockClientIds, rootClientId ),
+			invalidSelection: false,
+		};
+	}, [] );
+
+	if ( invalidSelection ) {
+		return {
+			isLoading: false,
+			commands: [],
+		};
+	}
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
 	function selectForMultipleBlocks( insertedBlocks ) {

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

@@ -68,14 +68,18 @@ function getPositionTypeLabel( attributes ) {
 export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
-			if ( ! clientId ) return null;
+			if ( ! clientId ) {
+				return null;
+			}
 			const { getBlockName, getBlockAttributes } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
-			if ( ! blockType ) return null;
+			if ( ! blockType ) {
+				return null;
+			}
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
@@ -95,7 +99,9 @@ export default function useBlockDisplayInformation( clientId ) {
 				positionType: attributes?.style?.position?.type,
 				name: attributes?.metadata?.name,
 			};
-			if ( ! match ) return blockTypeInfo;
+			if ( ! match ) {
+				return blockTypeInfo;
+			}
 
 			return {
 				isSynced,

package/src/components/use-on-block-drop/index.js

@@ -252,7 +252,9 @@ export default function useOnBlockDrop(
 			initialPosition = 0,
 			clientIdsToReplace = []
 		) => {
-			if ( ! Array.isArray( blocks ) ) blocks = [ blocks ];
+			if ( ! Array.isArray( blocks ) ) {
+				blocks = [ blocks ];
+			}
 
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];

package/src/components/use-paste-styles/index.js

@@ -15,6 +15,7 @@ import {
 	hasAlignSupport,
 	hasBorderSupport,
 	hasBackgroundColorSupport,
+	hasTextAlignSupport,
 	hasTextColorSupport,
 	hasGradientSupport,
 	hasCustomClassNameSupport,
@@ -59,6 +60,7 @@ const STYLE_ATTRIBUTES = {
 	align: hasAlignSupport,
 	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
 	backgroundColor: hasBackgroundColorSupport,
+	textAlign: hasTextAlignSupport,
 	textColor: hasTextColorSupport,
 	gradient: hasGradientSupport,
 	className: hasCustomClassNameSupport,

package/src/components/writing-flow/use-drag-selection.js

@@ -18,7 +18,9 @@ import { store as blockEditorStore } from '../../store';
 function setContentEditableWrapper( node, value ) {
 	node.contentEditable = value;
 	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+	if ( value ) {
+		node.focus();
+	}
 }
 
 /**

package/src/components/writing-flow/use-tab-nav.js

@@ -118,7 +118,9 @@ export default function useTabNav() {
 				// do it again here because after clearing block selection,
 				// focus land on the writing flow container and pressing Tab
 				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) setNavigationMode( true );
+				if ( event.target === node ) {
+					setNavigationMode( true );
+				}
 				return;
 			}
 

package/src/components/writing-mode-control/index.js

@@ -6,18 +6,22 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const WRITING_MODES = [
 	{
-		name: __( 'Horizontal' ),
+		label: __( 'Horizontal' ),
 		value: 'horizontal-tb',
 		icon: textHorizontal,
 	},
 	{
-		name: __( 'Vertical' ),
+		label: __( 'Vertical' ),
 		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
 		icon: textVertical,
 	},
@@ -35,34 +39,17 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<fieldset
+		<SegmentedTextControl
+			label={ __( 'Orientation' ) }
+			options={ WRITING_MODES }
 			className={ classnames(
 				'block-editor-writing-mode-control',
 				className
 			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Orientation' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-writing-mode-control__buttons">
-				{ WRITING_MODES.map( ( writingMode ) => {
-					return (
-						<Button
-							key={ writingMode.value }
-							icon={ writingMode.icon }
-							label={ writingMode.name }
-							isPressed={ writingMode.value === value }
-							onClick={ () => {
-								onChange(
-									writingMode.value === value
-										? undefined
-										: writingMode.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

package/src/hooks/background.js

@@ -20,7 +20,7 @@ import {
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
 // Initial control values where no block style is set.
-const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+const BACKGROUND_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
 };
 
@@ -173,7 +173,7 @@ export function BackgroundImagePanel( {
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
 			defaultControls={ defaultControls }
-			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }

package/src/hooks/block-renaming.js

@@ -3,13 +3,6 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { InspectorControls } from '../components';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -45,32 +38,6 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
-function BlockRenameControlPure( { metadata, setAttributes } ) {
-	return (
-		<InspectorControls group="advanced">
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'Block name' ) }
-				value={ metadata?.name || '' }
-				onChange={ ( newName ) => {
-					setAttributes( {
-						metadata: { ...metadata, name: newName },
-					} );
-				} }
-			/>
-		</InspectorControls>
-	);
-}
-
-export default {
-	edit: BlockRenameControlPure,
-	attributeKeys: [ 'metadata' ],
-	hasSupport( name ) {
-		return hasBlockSupport( name, 'renaming', true );
-	},
-};
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addLabelCallback',

package/src/hooks/content-lock-ui.js

@@ -24,16 +24,14 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
-				__unstableGetContentLockingParent,
+				getContentLockingParent,
 				getTemplateLock,
-				__unstableGetTemporarilyEditingAsBlocks,
-			} = select( blockEditorStore );
+				getTemporarilyEditingAsBlocks,
+			} = unlock( select( blockEditorStore ) );
 			return {
 				templateLock: getTemplateLock( clientId ),
-				isLockedByParent:
-					!! __unstableGetContentLockingParent( clientId ),
-				isEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+				isLockedByParent: !! getContentLockingParent( clientId ),
+				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
 			};
 		},
 		[ clientId ]

package/src/hooks/duotone.js

@@ -291,7 +291,9 @@ function useDuotoneStyles( {
 	const blockElement = useBlockElement( clientId );
 
 	useEffect( () => {
-		if ( ! isValidFilter ) return;
+		if ( ! isValidFilter ) {
+			return;
+		}
 
 		// Safari does not always update the duotone filter when the duotone colors
 		// are changed. When using Safari, force the block element to be repainted by

package/src/hooks/index.js

@@ -21,6 +21,7 @@ import dimensions from './dimensions';
 import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
+import textAlign from './text-align';
 import border from './border';
 import position from './position';
 import layout from './layout';
@@ -28,12 +29,13 @@ import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
-import blockRenaming from './block-renaming';
+import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
 		align,
+		textAlign,
 		anchor,
 		customClassName,
 		style,
@@ -42,12 +44,12 @@ createBlockEditFilter(
 		layout,
 		contentLockUI,
 		blockHooks,
-		blockRenaming,
 		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [
 	align,
+	textAlign,
 	background,
 	style,
 	color,
@@ -61,6 +63,7 @@ createBlockListBlockFilter( [
 ] );
 createBlockSaveFilter( [
 	align,
+	textAlign,
 	anchor,
 	ariaLabel,
 	customClassName,

package/src/hooks/layout.js

@@ -50,13 +50,7 @@ function hasLayoutBlockSupport( blockName ) {
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const { kebabCase } = unlock( componentsPrivateApis );
-	const rootPaddingAlignment = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalFeatures
-			?.useRootPaddingAwareAlignments;
-	}, [] );
 	const { layout } = blockAttributes;
-
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
@@ -78,12 +72,20 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
-	if (
-		( usedLayout?.inherit ||
-			usedLayout?.contentSize ||
-			usedLayout?.type === 'constrained' ) &&
-		rootPaddingAlignment
-	) {
+	const hasGlobalPadding = useSelect(
+		( select ) => {
+			return (
+				( usedLayout?.inherit ||
+					usedLayout?.contentSize ||
+					usedLayout?.type === 'constrained' ) &&
+				select( blockEditorStore ).getSettings().__experimentalFeatures
+					?.useRootPaddingAwareAlignments
+			);
+		},
+		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
+	);
+
+	if ( hasGlobalPadding ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -353,7 +355,12 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
+function BlockWithLayoutStyles( {
+	block: BlockListBlock,
+	props,
+	blockGapSupport,
+	layoutClasses,
+} ) {
 	const { name, attributes } = props;
 	const id = useInstanceId( BlockListBlock );
 	const { layout } = attributes;
@@ -363,13 +370,11 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
-	const layoutClasses = useLayoutClasses( attributes, name );
 
 	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
-	const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`;
-	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
+	const selector = `.${ selectorPrefix }${ id }`;
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	// Get CSS string for the current layout type.
@@ -410,26 +415,53 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const blockSupportsLayout = hasLayoutBlockSupport( props.name );
-		const shouldRenderLayoutStyles = useSelect(
+		const { clientId, name, attributes } = props;
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
+		const layoutClasses = useLayoutClasses( attributes, name );
+		const extraProps = useSelect(
 			( select ) => {
 				// The callback returns early to avoid block editor subscription.
 				if ( ! blockSupportsLayout ) {
-					return false;
+					return;
+				}
+
+				const { getSettings, getBlockSettings } = unlock(
+					select( blockEditorStore )
+				);
+				const { disableLayoutStyles } = getSettings();
+
+				if ( disableLayoutStyles ) {
+					return;
 				}
 
-				return ! select( blockEditorStore ).getSettings()
-					.disableLayoutStyles;
+				const [ blockGapSupport ] = getBlockSettings(
+					clientId,
+					'spacing.blockGap'
+				);
+
+				return { blockGapSupport };
 			},
-			[ blockSupportsLayout ]
+			[ blockSupportsLayout, clientId ]
 		);
 
-		if ( ! shouldRenderLayoutStyles ) {
-			return <BlockListBlock { ...props } />;
+		if ( ! extraProps ) {
+			return (
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={
+						blockSupportsLayout ? layoutClasses : undefined
+					}
+				/>
+			);
 		}
 
 		return (
-			<BlockWithLayoutStyles block={ BlockListBlock } props={ props } />
+			<BlockWithLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+				layoutClasses={ layoutClasses }
+				{ ...extraProps }
+			/>
 		);
 	},
 	'withLayoutStyles'

package/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * align e.g. settings found in `block.json`.
+ */
+const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
 /**
  * Key within block settings' supports array indicating support for text
  * columns e.g. settings found in `block.json`.
@@ -53,6 +58,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
@@ -212,6 +218,24 @@ export const hasBackgroundColorSupport = ( nameOrType ) => {
 	return colorSupport && colorSupport.background !== false;
 };
 
+/**
+ * Returns true if the block defines support for text-align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for text-align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getTextAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
 /**
  * Returns true if the block defines support for background color.
  *