@wordpress/block-library 8.4.0 → 8.6.0

package/src/spacer/test/__snapshots__/index.native.js.snap

@@ -1,31 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spacer block decrements height 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"99px\\"} -->
-<div style=\\"height:99px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"99px"} -->
+<div style="height:99px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block increments height 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"101px\\"} -->
-<div style=\\"height:101px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"101px"} -->
+<div style="height:101px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block inserts block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block with spacingSizes preset 1`] = `
+"<!-- wp:spacer {"height":"70px"} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block with spacingSizes preset without matching global styles values 1`] = `
+"<!-- wp:spacer {"height":"120px"} -->
+<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block updates height to 25vh 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"25vh\\"} -->
-<div style=\\"height:25vh\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"25vh"} -->
+<div style="height:25vh" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block updates height to 50px 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"50px\\"} -->
-<div style=\\"height:50px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"50px"} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;

package/src/spacer/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spacer block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Spacer block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->"
+`;

package/src/spacer/test/index.native.js

@@ -169,4 +169,85 @@ describe( 'Spacer block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'inserts block with spacingSizes preset', async () => {
+		// Mock spacingSizes presets
+		const RAW_STYLES = {
+			typography: {
+				fontSize: 16,
+			},
+		};
+		const RAW_FEATURES = {
+			spacing: {
+				spacingSizes: {
+					theme: [
+						{
+							size: '3.125rem',
+							slug: '100',
+							name: '100',
+						},
+						{
+							size: '3.75rem',
+							slug: '110',
+							name: '110',
+						},
+					],
+				},
+			},
+		};
+
+		const initialHtml = `<!-- wp:spacer {"height":"var:preset|spacing|110"} -->
+		<div style="height:var(--wp--preset--spacing--110)" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+			rawStyles: JSON.stringify( RAW_STYLES ),
+			rawFeatures: JSON.stringify( RAW_FEATURES ),
+		} );
+
+		// Select Spacer block
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		await waitFor(
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Update height attribute
+		fireEvent.press( screen.getByText( '60' ) );
+		const heightTextInput = screen.getByDisplayValue( '60' );
+		fireEvent.changeText( heightTextInput, '70' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'inserts block with spacingSizes preset without matching global styles values', async () => {
+		const initialHtml = `<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
+		<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		await waitFor(
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Update height attribute
+		fireEvent.press( screen.getByText( '100' ) );
+		const heightTextInput = screen.getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '120' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/spacer/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Spacer';
+const initialHtml = `
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/table/edit.js

@@ -478,6 +478,7 @@ function TableEdit( {
 					className="blocks-table-settings"
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Fixed width table cells' ) }
 						checked={ !! hasFixedLayout }
 						onChange={ onChangeFixedLayout }
@@ -485,11 +486,13 @@ function TableEdit( {
 					{ ! isEmpty && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Header section' ) }
 								checked={ !! ( head && head.length ) }
 								onChange={ onToggleHeaderSection }
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Footer section' ) }
 								checked={ !! ( foot && foot.length ) }
 								onChange={ onToggleFooterSection }

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, mapValues } from 'lodash';
+import { mapValues } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -55,13 +55,9 @@ export function getFirstRow( state ) {
  */
 export function getCellAttribute( state, cellLocation, attributeName ) {
 	const { sectionName, rowIndex, columnIndex } = cellLocation;
-	return get( state, [
-		sectionName,
-		rowIndex,
-		'cells',
-		columnIndex,
-		attributeName,
-	] );
+	return state[ sectionName ]?.[ rowIndex ]?.cells?.[ columnIndex ]?.[
+		attributeName
+	];
 }
 
 /**
@@ -158,9 +154,7 @@ export function isCellSelected( cellLocation, selection ) {
 export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 	const firstRow = getFirstRow( state );
 	const cellCount =
-		columnCount === undefined
-			? get( firstRow, [ 'cells', 'length' ] )
-			: columnCount;
+		columnCount === undefined ? firstRow?.cells?.length : columnCount;
 
 	// Bail early if the function cannot determine how many cells to add.
 	if ( ! cellCount ) {
@@ -173,11 +167,8 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 			{
 				cells: Array.from( { length: cellCount } ).map(
 					( _, index ) => {
-						const firstCellInColumn = get(
-							firstRow,
-							[ 'cells', index ],
-							{}
-						);
+						const firstCellInColumn =
+							firstRow?.cells?.[ index ] ?? {};
 
 						const inheritedAttributes = Object.fromEntries(
 							Object.entries( firstCellInColumn ).filter(
@@ -310,7 +301,7 @@ export function toggleSection( state, sectionName ) {
 	}
 
 	// Get the length of the first row of the body to use when creating the header.
-	const columnCount = get( state, [ 'body', 0, 'cells', 'length' ], 1 );
+	const columnCount = state.body?.[ 0 ]?.cells?.length ?? 1;
 
 	// Section doesn't exist, insert an empty row to create the section.
 	return insertRow( state, { sectionName, rowIndex: 0, columnCount } );

package/src/table-of-contents/edit.js

@@ -251,6 +251,7 @@ export default function TableOfContentsEdit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Only include current page' ) }
 					checked={ onlyIncludeCurrentPage }
 					onChange={ ( value ) =>

package/src/tag-cloud/edit.js

@@ -113,6 +113,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show post counts' ) }
 					checked={ showTagCounts }
 					onChange={ () =>

package/src/template-part/edit/import-controls.js

@@ -12,10 +12,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
-import {
-	switchToBlockType,
-	getPossibleBlockTransformations,
-} from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -25,16 +21,25 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useCreateTemplatePartFromBlocks } from './utils/hooks';
 import { transformWidgetToBlock } from './utils/transformers';
 
+const SIDEBARS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,description,status,widgets',
+};
+
 export function TemplatePartImportControls( { area, setAttributes } ) {
 	const [ selectedSidebar, setSelectedSidebar ] = useState( '' );
 	const [ isBusy, setIsBusy ] = useState( false );
 
 	const registry = useRegistry();
-	const sidebars = useSelect( ( select ) => {
-		return select( coreStore ).getSidebars( {
-			per_page: -1,
-			_fields: 'id,name,description,status,widgets',
-		} );
+	const { sidebars, hasResolved } = useSelect( ( select ) => {
+		const { getSidebars, hasFinishedResolution } = select( coreStore );
+
+		return {
+			sidebars: getSidebars( SIDEBARS_QUERY ),
+			hasResolved: hasFinishedResolution( 'getSidebars', [
+				SIDEBARS_QUERY,
+			] ),
+		};
 	}, [] );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -67,6 +72,16 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 		];
 	}, [ sidebars ] );
 
+	// Render an empty node while data is loading to avoid SlotFill re-positioning bug.
+	// See: https://github.com/WordPress/gutenberg/issues/15641.
+	if ( ! hasResolved ) {
+		return <Spacer marginBottom="0" />;
+	}
+
+	if ( hasResolved && ! options.length ) {
+		return null;
+	}
+
 	async function createFromWidgets( event ) {
 		event.preventDefault();
 
@@ -91,36 +106,13 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 		const blocks = widgets.flatMap( ( widget ) => {
 			const block = transformWidgetToBlock( widget );
 
-			if ( block.name !== 'core/legacy-widget' ) {
-				return block;
-			}
-
-			const transforms = getPossibleBlockTransformations( [
-				block,
-			] ).filter( ( item ) => {
-				// The block without any transformations can't be a wildcard.
-				if ( ! item.transforms ) {
-					return true;
-				}
-
-				const hasWildCardFrom = item.transforms?.from?.find(
-					( from ) => from.blocks && from.blocks.includes( '*' )
-				);
-				const hasWildCardTo = item.transforms?.to?.find(
-					( to ) => to.blocks && to.blocks.includes( '*' )
-				);
-
-				return ! hasWildCardFrom && ! hasWildCardTo;
-			} );
-
 			// Skip the block if we have no matching transformations.
-			if ( ! transforms.length ) {
+			if ( ! block ) {
 				skippedWidgets.add( widget.id_base );
 				return [];
 			}
 
-			// Try transforming the Legacy Widget into a first matching block.
-			return switchToBlockType( block, transforms[ 0 ].name );
+			return block;
 		} );
 
 		await createFromBlocks(

package/src/template-part/edit/utils/transformers.js

@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, parse } from '@wordpress/blocks';
+import {
+	parse,
+	cloneBlock,
+	createBlock,
+	getGroupingBlockName,
+	getPossibleBlockTransformations,
+	switchToBlockType,
+} from '@wordpress/blocks';
 
 /**
  * Converts a widget entity record into a block.
@@ -10,28 +17,98 @@ import { createBlock, parse } from '@wordpress/blocks';
  * @return {Object} a block (converted from the entity record).
  */
 export function transformWidgetToBlock( widget ) {
-	if ( widget.id_base === 'block' ) {
-		const parsedBlocks = parse( widget.instance.raw.content, {
-			__unstableSkipAutop: true,
-		} );
-		if ( ! parsedBlocks.length ) {
-			return createBlock( 'core/paragraph', {}, [] );
+	if ( widget.id_base !== 'block' ) {
+		let attributes;
+		if ( widget._embedded.about[ 0 ].is_multi ) {
+			attributes = {
+				idBase: widget.id_base,
+				instance: widget.instance,
+			};
+		} else {
+			attributes = {
+				id: widget.id,
+			};
 		}
 
-		return parsedBlocks[ 0 ];
+		return switchLegacyWidgetType(
+			createBlock( 'core/legacy-widget', attributes )
+		);
 	}
 
-	let attributes;
-	if ( widget._embedded.about[ 0 ].is_multi ) {
-		attributes = {
-			idBase: widget.id_base,
-			instance: widget.instance,
-		};
-	} else {
-		attributes = {
-			id: widget.id,
-		};
+	const parsedBlocks = parse( widget.instance.raw.content, {
+		__unstableSkipAutop: true,
+	} );
+
+	if ( ! parsedBlocks.length ) {
+		return undefined;
+	}
+
+	const block = parsedBlocks[ 0 ];
+
+	if ( block.name === 'core/widget-group' ) {
+		return createBlock(
+			getGroupingBlockName(),
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	if ( block.innerBlocks.length > 0 ) {
+		return cloneBlock(
+			block,
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	return block;
+}
+
+/**
+ * Switch Legacy Widget to the first matching transformation block.
+ *
+ * @param {Object} block Legacy Widget block object
+ * @return {Object|undefined} a block
+ */
+function switchLegacyWidgetType( block ) {
+	const transforms = getPossibleBlockTransformations( [ block ] ).filter(
+		( item ) => {
+			// The block without any transformations can't be a wildcard.
+			if ( ! item.transforms ) {
+				return true;
+			}
+
+			const hasWildCardFrom = item.transforms?.from?.find(
+				( from ) => from.blocks && from.blocks.includes( '*' )
+			);
+			const hasWildCardTo = item.transforms?.to?.find(
+				( to ) => to.blocks && to.blocks.includes( '*' )
+			);
+
+			// Skip wildcard transformations.
+			return ! hasWildCardFrom && ! hasWildCardTo;
+		}
+	);
+
+	if ( ! transforms.length ) {
+		return undefined;
 	}
 
-	return createBlock( 'core/legacy-widget', attributes, [] );
+	return switchToBlockType( block, transforms[ 0 ].name );
+}
+
+function transformInnerBlocks( innerBlocks = [] ) {
+	return innerBlocks
+		.flatMap( ( block ) => {
+			if ( block.name === 'core/legacy-widget' ) {
+				return switchLegacyWidgetType( block );
+			}
+
+			return createBlock(
+				block.name,
+				block.attributes,
+				transformInnerBlocks( block.innerBlocks )
+			);
+		} )
+		.filter( ( block ) => !! block );
 }

package/src/template-part/index.php

@@ -27,18 +27,19 @@ function render_block_core_template_part( $attributes ) {
 		$template_part_id    = $attributes['theme'] . '//' . $attributes['slug'];
 		$template_part_query = new WP_Query(
 			array(
-				'post_type'      => 'wp_template_part',
-				'post_status'    => 'publish',
-				'post_name__in'  => array( $attributes['slug'] ),
-				'tax_query'      => array(
+				'post_type'           => 'wp_template_part',
+				'post_status'         => 'publish',
+				'post_name__in'       => array( $attributes['slug'] ),
+				'tax_query'           => array(
 					array(
 						'taxonomy' => 'wp_theme',
 						'field'    => 'name',
 						'terms'    => $attributes['theme'],
 					),
 				),
-				'posts_per_page' => 1,
-				'no_found_rows'  => true,
+				'posts_per_page'      => 1,
+				'no_found_rows'       => true,
+				'lazy_load_term_meta' => false, // Do not lazy load term meta, as template parts only have one term.
 			)
 		);
 		$template_part_post  = $template_part_query->have_posts() ? $template_part_query->next_post() : null;

package/src/text-columns/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,7 +59,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 						>
 							<RichText
 								tagName="p"
-								value={ get( content, [ index, 'children' ] ) }
+								value={ content?.[ index ]?.children }
 								onChange={ ( nextContent ) => {
 									setAttributes( {
 										content: [

package/src/text-columns/save.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,7 +15,7 @@ export default function save( { attributes } ) {
 				<div className="wp-block-column" key={ `column-${ index }` }>
 					<RichText.Content
 						tagName="p"
-						value={ get( content, [ index, 'children' ] ) }
+						value={ content?.[ index ]?.children }
 					/>
 				</div>
 			) ) }

package/src/verse/test/__snapshots__/edit.native.js.snap

@@ -2,12 +2,12 @@
 
 exports[`Verse block inserts block 1`] = `
 "<!-- wp:verse -->
-<pre class=\\"wp-block-verse\\"></pre>
+<pre class="wp-block-verse"></pre>
 <!-- /wp:verse -->"
 `;
 
 exports[`Verse block renders block text set as initial content 1`] = `
 "<!-- wp:verse -->
-<pre class=\\"wp-block-verse\\">Sample text</pre>
+<pre class="wp-block-verse">Sample text</pre>
 <!-- /wp:verse -->"
 `;

package/src/verse/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verse block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:verse {"textAlign":"center"} -->
+<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
+<!-- /wp:verse --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Verse block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:verse {"textAlign":"center"} -->
+<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
+<!-- /wp:verse --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Verse block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Come<br />Home.</p>
+<!-- /wp:paragraph -->"
+`;