@wordpress/block-library 10.4.0 → 10.5.0

package/src/columns/transforms.js

@@ -1,9 +1,42 @@
 import {
+	cloneSanitizedBlock,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	getBlockType,
 } from '@wordpress/blocks';
 
 const MAXIMUM_SELECTED_BLOCKS = 6;
+const COLUMN_VERTICAL_ALIGNMENTS = [ 'top', 'center', 'bottom' ];
+const ROW_VERTICAL_ALIGNMENTS = [ ...COLUMN_VERTICAL_ALIGNMENTS, 'stretch' ];
+const FLEX_SIZE_LAYOUT_VALUES = [ 'fixed', 'fixedNoShrink' ];
+const DEFAULT_COLUMN_LAYOUT = { type: 'default' };
+
+const getObjectValue = ( value ) =>
+	value && typeof value === 'object' && ! Array.isArray( value ) ? value : {};
+
+const getGroupAttributes = ( attributes ) => {
+	const groupAttributeDefinitions = getBlockType( 'core/group' )?.attributes;
+	if ( ! groupAttributeDefinitions ) {
+		return {};
+	}
+	const normalizedAttributes = getObjectValue( attributes );
+
+	return Object.fromEntries(
+		Object.entries( normalizedAttributes ).filter( ( [ name ] ) =>
+			Object.hasOwn( groupAttributeDefinitions, name )
+		)
+	);
+};
+
+const getColumnWidth = ( width ) => {
+	if ( Number.isFinite( width ) ) {
+		return `${ width }%`;
+	}
+	if ( typeof width === 'string' && /\d/.test( width ) ) {
+		return width;
+	}
+	return undefined;
+};
 
 const getColumnBlocksFromGrid = ( innerBlocks, columnCount ) => {
 	const columnWidth = +( 100 / columnCount ).toFixed( 2 );
@@ -22,14 +55,66 @@ const getColumnBlocksFromGrid = ( innerBlocks, columnCount ) => {
 	return createBlocksFromInnerBlocksTemplate( innerBlocksTemplate );
 };
 
+const getColumnBlocksFromRow = ( innerBlocks ) =>
+	innerBlocks.map( ( innerBlock ) => {
+		const style = getObjectValue( innerBlock?.attributes?.style );
+		const { selfStretch, flexSize, ...remainingLayout } = getObjectValue(
+			style.layout
+		);
+		const columnWidth = FLEX_SIZE_LAYOUT_VALUES.includes( selfStretch )
+			? getColumnWidth( flexSize )
+			: undefined;
+
+		const updatedStyle = { ...style };
+		if ( Object.keys( remainingLayout ).length ) {
+			updatedStyle.layout = remainingLayout;
+		} else {
+			delete updatedStyle.layout;
+		}
+		const columnInnerBlock = cloneSanitizedBlock( innerBlock, {
+			style: Object.keys( updatedStyle ).length
+				? updatedStyle
+				: undefined,
+		} );
+
+		return createBlock(
+			'core/column',
+			columnWidth ? { width: columnWidth } : {},
+			[ columnInnerBlock ]
+		);
+	} );
+
 const getGridInnerBlocks = ( innerBlocks ) =>
 	innerBlocks.flatMap( ( column ) => {
 		const columnInnerBlocks = column.innerBlocks || [];
-		if ( columnInnerBlocks.length > 1 ) {
+		const {
+			layout: layoutAttribute,
+			style: styleAttribute,
+			...groupAttributes
+		} = getGroupAttributes( column?.attributes );
+		const columnStyle = getObjectValue( styleAttribute );
+		const columnLayout = getObjectValue( layoutAttribute );
+		const hasGroupAttributes = Object.keys( groupAttributes ).length > 0;
+		const hasColumnStyle = Object.keys( columnStyle ).length > 0;
+		const hasColumnLayout = Object.keys( columnLayout ).length > 0;
+		if (
+			columnInnerBlocks.length > 1 ||
+			hasGroupAttributes ||
+			hasColumnStyle ||
+			hasColumnLayout
+		) {
 			return [
 				createBlock(
 					'core/group',
-					{ layout: { type: 'constrained' } },
+					{
+						...groupAttributes,
+						layout: hasColumnLayout
+							? columnLayout
+							: DEFAULT_COLUMN_LAYOUT,
+						...( hasColumnStyle && {
+							style: columnStyle,
+						} ),
+					},
 					columnInnerBlocks
 				),
 			];
@@ -37,6 +122,78 @@ const getGridInnerBlocks = ( innerBlocks ) =>
 		return columnInnerBlocks;
 	} );
 
+const getRowInnerBlocks = ( innerBlocks ) => {
+	const columnWidths = innerBlocks.map( ( column ) => {
+		return getColumnWidth( column?.attributes?.width );
+	} );
+	const allColumnWidthsUnavailable = columnWidths.every(
+		( columnWidth ) => ! columnWidth
+	);
+	const equalColumnWidth = innerBlocks.length
+		? `${ +( 100 / innerBlocks.length ).toFixed( 2 ) }%`
+		: undefined;
+
+	return innerBlocks.map( ( column, index ) => {
+		const columnInnerBlocks = Array.isArray( column?.innerBlocks )
+			? column.innerBlocks
+			: [];
+		const columnWidth =
+			columnWidths[ index ] ||
+			( allColumnWidthsUnavailable ? equalColumnWidth : undefined );
+		const childLayout = columnWidth
+			? { selfStretch: 'fixed', flexSize: columnWidth }
+			: { selfStretch: 'fill' };
+		const {
+			layout: layoutAttribute,
+			style: styleAttribute,
+			...groupAttributes
+		} = getGroupAttributes( column?.attributes );
+		const columnStyle = getObjectValue( styleAttribute );
+		const columnLayout = getObjectValue( layoutAttribute );
+		const hasGroupAttributes = Object.keys( groupAttributes ).length > 0;
+		const hasColumnStyle = Object.keys( columnStyle ).length > 0;
+		const hasColumnLayout = Object.keys( columnLayout ).length > 0;
+
+		if (
+			columnInnerBlocks.length === 1 &&
+			! hasGroupAttributes &&
+			! hasColumnStyle &&
+			! hasColumnLayout
+		) {
+			const innerBlock = columnInnerBlocks[ 0 ];
+			const style = getObjectValue( innerBlock.attributes?.style );
+			const layout = getObjectValue( style.layout );
+			const updatedLayout = { ...layout, ...childLayout };
+			if ( ! columnWidth ) {
+				delete updatedLayout.flexSize;
+			}
+
+			return cloneSanitizedBlock( innerBlock, {
+				style: {
+					...style,
+					layout: updatedLayout,
+				},
+			} );
+		}
+
+		return createBlock(
+			'core/group',
+			{
+				...groupAttributes,
+				layout: hasColumnLayout ? columnLayout : DEFAULT_COLUMN_LAYOUT,
+				style: {
+					...columnStyle,
+					layout: {
+						...getObjectValue( columnStyle.layout ),
+						...childLayout,
+					},
+				},
+			},
+			columnInnerBlocks
+		);
+	} );
+};
+
 const transforms = {
 	from: [
 		{
@@ -58,6 +215,27 @@ const transforms = {
 				Number.isInteger( layout?.columnCount ) &&
 				layout.columnCount > 0,
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			priority: 1,
+			transform: ( attributes, innerBlocks ) => {
+				const { layout, ...rest } = attributes;
+				const verticalAlignment = COLUMN_VERTICAL_ALIGNMENTS.includes(
+					layout?.verticalAlignment
+				)
+					? layout.verticalAlignment
+					: undefined;
+
+				return createBlock(
+					'core/columns',
+					{ ...rest, verticalAlignment },
+					getColumnBlocksFromRow( innerBlocks )
+				);
+			},
+			isMatch: ( { layout } ) =>
+				layout?.type === 'flex' && layout?.orientation !== 'vertical',
+		},
 		{
 			type: 'block',
 			isMultiBlock: true,
@@ -161,6 +339,33 @@ const transforms = {
 		},
 	],
 	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			variationName: 'group-row',
+			transform: ( attributes, innerBlocks ) => {
+				const { verticalAlignment } = attributes;
+				const rowVerticalAlignment = ROW_VERTICAL_ALIGNMENTS.includes(
+					verticalAlignment
+				)
+					? verticalAlignment
+					: 'stretch';
+				return createBlock(
+					'core/group',
+					{
+						...attributes,
+						isStackedOnMobile: undefined,
+						verticalAlignment: undefined,
+						layout: {
+							type: 'flex',
+							flexWrap: 'nowrap',
+							verticalAlignment: rowVerticalAlignment,
+						},
+					},
+					getRowInnerBlocks( innerBlocks )
+				);
+			},
+		},
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],

package/src/comments/style.scss

@@ -84,16 +84,6 @@
 		font-size: 0.875em;
 	}
 
-	.comment-form-comment,
-	.comment-form-author,
-	.comment-form-email,
-	.comment-form-url {
-		label {
-			display: block;
-			margin-bottom: 0.25em;
-		}
-	}
-
 	.comment-form {
 
 		textarea,
@@ -140,6 +130,13 @@
 	}
 }
 
+:where(.wp-block-post-comments .comment-form-comment label),
+:where(.wp-block-post-comments .comment-form-author label),
+:where(.wp-block-post-comments .comment-form-email label),
+:where(.wp-block-post-comments .comment-form-url label) {
+	display: block;
+	margin-bottom: 0.25em;
+}
 
 // Using :where to give this a low specificity so that element styles take precedence.
 // Needed for backwards compatibility.

package/src/cover/edit/block-controls.js

@@ -113,7 +113,7 @@ export default function CoverBlockControls( {
 						<ToolbarButton
 							ref={ editMediaButtonRef }
 							icon={ crop }
-							label={ __( 'Crop background image' ) }
+							label={ __( 'Edit image' ) }
 							onClick={ onEditMedia }
 							aria-haspopup="dialog"
 							// Disable rather than hide while the edited image

package/src/cover/edit/index.js

@@ -760,7 +760,7 @@ function CoverEdit( {
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }
 								clearable={ false }
-								asButtons
+								presentation="toggle-buttons"
 								aria-label={ __( 'Overlay color' ) }
 							/>
 						</div>

package/src/cover/edit/inspector-controls.js

@@ -2,7 +2,7 @@ import { useMemo } from '@wordpress/element';
 import {
 	FocalPointPicker,
 	RangeControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	ToggleControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanel as ToolsPanel,
@@ -377,7 +377,7 @@ export default function CoverInspectorControls( {
 									setAttributes( { alt: '' } )
 								}
 							>
-								<TextareaControl
+								<WCTextareaControl
 									label={ __( 'Alternative text' ) }
 									value={ alt }
 									onChange={ ( newAlt ) =>

package/src/embed/embed-placeholder.js

@@ -2,7 +2,7 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	Button,
 	Placeholder,
-	__experimentalInputControl as InputControl,
+	__experimentalInputControl as WCInputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import { Link, Stack } from '@wordpress/ui';
@@ -27,7 +27,7 @@ export default function EmbedPlaceholder( {
 			) }
 		>
 			<form onSubmit={ onSubmit }>
-				<InputControl
+				<WCInputControl
 					type="url"
 					value={ value || '' }
 					className="wp-block-embed__placeholder-input"

package/src/form-input/style.scss

@@ -1,4 +1,4 @@
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -30,7 +30,7 @@
 	}
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
 	width: fit-content;
 }
 

package/src/gallery/test/edit.js

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/react';
+import { createBlock } from '@wordpress/blocks';
+import {
+	initializeEditor,
+	selectBlock,
+} from '@wordpress/integration-tests/helpers/integration-test-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const IMAGE_ATTRIBUTES = {
+	id: 1,
+	url: 'https://example.com/image.jpg',
+	alt: 'Example image',
+};
+
+/**
+ * Registers the core blocks up front so inner blocks can be created before the
+ * editor is initialized, then renders the given block.
+ *
+ * @param {Object} block Block to render, created with `createBlock`.
+ */
+async function setup( block ) {
+	return initializeEditor( block, false );
+}
+
+describe( 'Gallery block', () => {
+	beforeEach( () => {
+		registerCoreBlocks();
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'does not offer alignment for an image inside a gallery', async () => {
+			await setup(
+				createBlock( 'core/gallery', {}, [
+					createBlock( 'core/image', IMAGE_ATTRIBUTES ),
+				] )
+			);
+
+			await selectBlock( 'Block: Image' );
+
+			// The gallery lays its images out with the flex layout, which
+			// permits no alignments, so the child image must not offer them.
+			expect(
+				screen.queryByRole( 'button', { name: 'Align block' } )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'offers alignment for an image outside a gallery', async () => {
+			await setup( createBlock( 'core/image', IMAGE_ATTRIBUTES ) );
+
+			await selectBlock( 'Block: Image' );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Align block' } )
+			).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/gallery/test/transforms.js

@@ -1,6 +1,7 @@
 import {
 	createBlock,
 	getBlockTypes,
+	getPossibleBlockTransformations,
 	registerBlockType,
 	switchToBlockType,
 	unregisterBlockType,
@@ -13,6 +14,7 @@ import {
 	metadata as groupMetadata,
 	settings as groupSettings,
 } from '../../group';
+import { ATTACHED_MEDIA } from '../dynamic-source';
 
 describe( 'transforms', () => {
 	beforeAll( () => {
@@ -145,4 +147,59 @@ describe( 'transforms', () => {
 			},
 		} );
 	} );
+	it( 'transforms an empty static Gallery to the Grid variation of Group', () => {
+		const block = createBlock( 'core/gallery', {}, [] );
+
+		const transformedBlocks = switchToBlockType(
+			block,
+			'core/group',
+			'group-grid'
+		);
+
+		expect( transformedBlocks[ 0 ] ).toMatchObject( {
+			name: 'core/group',
+			attributes: { layout: { type: 'grid' } },
+		} );
+	} );
+
+	describe( 'dynamic mode', () => {
+		const createDynamicGallery = () =>
+			createBlock(
+				'core/gallery',
+				{ dynamicContent: { source: ATTACHED_MEDIA } },
+				[]
+			);
+
+		it( 'does not transform a dynamic Gallery to the Grid variation of Group', () => {
+			expect(
+				switchToBlockType(
+					createDynamicGallery(),
+					'core/group',
+					'group-grid'
+				)
+			).toBeNull();
+		} );
+
+		it( 'does not transform a dynamic Gallery to Image', () => {
+			expect(
+				switchToBlockType( createDynamicGallery(), 'core/image' )
+			).toBeNull();
+		} );
+
+		it( 'does not offer the Image or Grid transforms for a dynamic Gallery', () => {
+			const transformations = getPossibleBlockTransformations( [
+				createDynamicGallery(),
+			] );
+
+			expect(
+				transformations.find( ( { name } ) => name === 'core/image' )
+			).toBeUndefined();
+			expect(
+				transformations.find(
+					( { name, variationName } ) =>
+						name === 'core/group' && variationName === 'group-grid'
+				)
+			).toBeUndefined();
+		} );
+	} );
 } );

package/src/gallery/transforms.js

@@ -223,6 +223,10 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
+			// A dynamic gallery has no inner blocks — its images are resolved
+			// from a source at render time — so this transform would produce a
+			// single empty image and drop the source.
+			isMatch: ( { dynamicContent } ) => ! dynamicContent,
 			transform: ( { align }, innerBlocks ) => {
 				if ( innerBlocks.length > 0 ) {
 					return innerBlocks.map(
@@ -268,12 +272,16 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/group' ],
 			variationName: 'group-grid',
+			// As above: with no inner blocks to clone, a dynamic gallery would
+			// transform into an empty grid.
+			isMatch: ( { dynamicContent } ) => ! dynamicContent,
 			transform: ( attributes, innerBlocks ) => {
 				const {
 					allowResize,
 					aspectRatio,
 					caption,
 					columns,
+					dynamicContent,
 					fixedHeight,
 					ids,
 					imageCrop,

package/src/group/README.md

@@ -39,7 +39,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `["top","bottom"]`
   - `padding`: `true`
-  - `blockGap`: `true`
+  - `blockGap`: `["horizontal","vertical"]`
 - [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
   - `minHeight`: `true`
   - `minWidth`: `true`

package/src/group/block.json

@@ -47,7 +47,7 @@
 		"spacing": {
 			"margin": [ "top", "bottom" ],
 			"padding": true,
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalDefaultControls": {
 				"padding": true,
 				"blockGap": true

package/src/heading/transforms.js

@@ -1,4 +1,5 @@
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { __, sprintf } from '@wordpress/i18n';
 import { getLevelFromHeadingNodeName } from './shared';
 import { getTransformedAttributes } from '../utils/get-transformed-attributes';
 
@@ -8,6 +9,23 @@ const transforms = {
 			type: 'block',
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
+			// The level shortcuts are declared here as well as on the
+			// variations, so that they reach a paragraph and not only a
+			// heading. Both declarations describe the same shortcut, and only
+			// one of them can apply to any given selection.
+			shortcuts: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => ( {
+				name: `core/block-editor/transform-to-heading-${ level }`,
+				description: sprintf(
+					/* translators: %d: heading level e.g: "1", "2", "3" */
+					__( 'Transform the selected block into a heading %d.' ),
+					level
+				),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+				variationName: `h${ level }`,
+			} ) ),
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
 					const { content, anchor, style } = _attributes;
@@ -96,6 +114,24 @@ const transforms = {
 			type: 'block',
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
+			shortcuts: [
+				{
+					name: 'core/block-editor/transform-heading-to-paragraph',
+					description: __(
+						'Transform the selected heading into a paragraph.'
+					),
+					keyCombination: {
+						modifier: 'access',
+						character: '0',
+					},
+					aliases: [
+						{
+							modifier: 'access',
+							character: '7',
+						},
+					],
+				},
+			],
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
 					const { content, style } = _attributes;

package/src/heading/variations.js

@@ -33,6 +33,18 @@ const variations = [
 		scope: [ 'block', 'transform' ],
 		keywords: [ `h${ level }` ],
 		isActive: ( blockAttributes ) => blockAttributes.level === level,
+		shortcut: {
+			name: `core/block-editor/transform-to-heading-${ level }`,
+			description: sprintf(
+				/* translators: %d: heading level e.g: "1", "2", "3" */
+				__( 'Transform the selected block into a heading %d.' ),
+				level
+			),
+			keyCombination: {
+				modifier: 'access',
+				character: `${ level }`,
+			},
+		},
 	} ) ),
 ];
 

package/src/home-link/edit.js

@@ -9,7 +9,7 @@ import {
 	Button,
 	CheckboxControl,
 	TextControl,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -165,7 +165,7 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 						}
 						isShownByDefault
 					>
-						<TextareaControl
+						<WCTextareaControl
 							label={ __( 'Description' ) }
 							value={ description || '' }
 							onChange={ ( descriptionValue ) => {

package/src/icon/edit.js

@@ -59,7 +59,15 @@ export function Edit( { attributes, setAttributes } ) {
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
 	const colorProps = useColorProps( attributes );
-	const spacingProps = useSpacingProps( attributes );
+	// Only padding is applied to the inner SVG element, matching the front
+	// end. The margin support is serialized to the block wrapper instead.
+	const spacingProps = useSpacingProps( {
+		style: {
+			spacing: {
+				padding: attributes.style?.spacing?.padding,
+			},
+		},
+	} );
 	const borderProps = useBorderProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 

package/src/image/image.js

@@ -4,7 +4,7 @@ import {
 	FocalPointPicker,
 	ResizableBox,
 	Spinner,
-	TextareaControl,
+	TextareaControl as WCTextareaControl,
 	TextControl,
 	CheckboxControl,
 	ToolbarButton,
@@ -185,7 +185,7 @@ function ContentOnlyControls( {
 					variant="toolbar"
 				>
 					<div className="wp-block-image__toolbar_content_textarea__container">
-						<TextareaControl
+						<WCTextareaControl
 							className="wp-block-image__toolbar_content_textarea"
 							label={ __( 'Alternative text' ) }
 							value={ attributes.alt || '' }
@@ -918,7 +918,7 @@ export default function Image( {
 							onClick={ openImageMediaEditorModal }
 							aria-haspopup="dialog"
 							icon={ crop }
-							label={ __( 'Crop' ) }
+							label={ __( 'Edit image' ) }
 							// Disable rather than hide while the edited image
 							// loads, so the button keeps focus when the modal
 							// closes instead of dropping it to the canvas.
@@ -1006,7 +1006,7 @@ export default function Image( {
 									setAttributes( { alt: undefined } )
 								}
 							>
-								<TextareaControl
+								<WCTextareaControl
 									label={ __( 'Alternative text' ) }
 									value={ alt || '' }
 									onChange={ updateAlt }

package/src/list/README.md

@@ -32,6 +32,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`