@wordpress/block-library 7.19.0 → 8.1.0

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

@@ -28,12 +28,11 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByLabelText( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,9 +42,11 @@ describe( 'Spacer block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+		fireEvent.press( screen.getByText( 'Spacer' ) );
 
-		expect( getByLabelText( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		expect( spacerBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -53,24 +54,24 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100' ) );
+		const heightTextInput = screen.getByDisplayValue( '100' );
 		fireEvent.changeText( heightTextInput, '50' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -80,28 +81,28 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Set vh unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+		fireEvent.press( screen.getByText( 'px' ) );
+		fireEvent.press( screen.getByText( 'Viewport height (vh)' ) );
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100' ) );
+		const heightTextInput = screen.getByDisplayValue( '100' );
 		fireEvent.changeText( heightTextInput, '25' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -111,23 +112,24 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'increment' },
@@ -141,23 +143,24 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'decrement' },

package/src/table/block.json

@@ -47,6 +47,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -82,6 +87,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -117,6 +127,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}

package/src/table/edit.js

@@ -404,7 +404,7 @@ function TableEdit( {
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align },
+							{ content, tag: CellTag, scope, align, colspan },
 							columnIndex
 						) => (
 							<RichText
@@ -417,6 +417,7 @@ function TableEdit( {
 									'wp-block-table__cell-content'
 								) }
 								scope={ CellTag === 'th' ? scope : undefined }
+								colSpan={ colspan }
 								value={ content }
 								onChange={ onChange }
 								unstableOnFocus={ () => {

package/src/table/editor.scss

@@ -41,10 +41,6 @@
 		border-style: double;
 	}
 
-	figcaption {
-		@include caption-style-theme();
-	}
-
 	// This is only required in the editor to overcome the fact the editor
 	// rewrites border width styles into shorthand.
 	table.has-individual-borders {

package/src/table/index.js

@@ -91,6 +91,7 @@ export const settings = {
 				},
 			],
 		},
+		viewportWidth: 450,
 	},
 	transforms,
 	edit,

package/src/table/save.js

@@ -43,7 +43,10 @@ export default function save( { attributes } ) {
 				{ rows.map( ( { cells }, rowIndex ) => (
 					<tr key={ rowIndex }>
 						{ cells.map(
-							( { content, tag, scope, align }, cellIndex ) => {
+							(
+								{ content, tag, scope, align, colspan },
+								cellIndex
+							) => {
 								const cellClasses = classnames( {
 									[ `has-text-align-${ align }` ]: align,
 								} );
@@ -62,6 +65,7 @@ export default function save( { attributes } ) {
 										scope={
 											tag === 'th' ? scope : undefined
 										}
+										colSpan={ colspan }
 									/>
 								);
 							}

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, mapValues, pick } from 'lodash';
+import { get, mapValues } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -78,7 +78,11 @@ export function updateSelectedCell( state, selection, updateCell ) {
 		return state;
 	}
 
-	const tableSections = pick( state, [ 'head', 'body', 'foot' ] );
+	const tableSections = Object.fromEntries(
+		Object.entries( state ).filter( ( [ key ] ) =>
+			[ 'head', 'body', 'foot' ].includes( key )
+		)
+	);
 	const { sectionName: selectionSectionName, rowIndex: selectionRowIndex } =
 		selection;
 
@@ -174,9 +178,12 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 							[ 'cells', index ],
 							{}
 						);
-						const inheritedAttributes = pick(
-							firstCellInColumn,
-							INHERITED_COLUMN_ATTRIBUTES
+
+						const inheritedAttributes = Object.fromEntries(
+							Object.entries( firstCellInColumn ).filter(
+								( [ key ] ) =>
+									INHERITED_COLUMN_ATTRIBUTES.includes( key )
+							)
 						);
 
 						return {
@@ -220,7 +227,11 @@ export function deleteRow( state, { sectionName, rowIndex } ) {
  * @return {Object} New table state.
  */
 export function insertColumn( state, { columnIndex } ) {
-	const tableSections = pick( state, [ 'head', 'body', 'foot' ] );
+	const tableSections = Object.fromEntries(
+		Object.entries( state ).filter( ( [ key ] ) =>
+			[ 'head', 'body', 'foot' ].includes( key )
+		)
+	);
 
 	return mapValues( tableSections, ( section, sectionName ) => {
 		// Bail early if the table section is empty.
@@ -259,7 +270,11 @@ export function insertColumn( state, { columnIndex } ) {
  * @return {Object} New table state.
  */
 export function deleteColumn( state, { columnIndex } ) {
-	const tableSections = pick( state, [ 'head', 'body', 'foot' ] );
+	const tableSections = Object.fromEntries(
+		Object.entries( state ).filter( ( [ key ] ) =>
+			[ 'head', 'body', 'foot' ].includes( key )
+		)
+	);
 
 	return mapValues( tableSections, ( section ) => {
 		// Bail early if the table section is empty.

package/src/table/style.scss

@@ -11,6 +11,14 @@
 		width: 100%;
 	}
 
+	thead {
+		border-bottom: 3px solid;
+	}
+
+	tfoot {
+		border-top: 3px solid;
+	}
+
 	// Match default border style to default style in editor
 	td,
 	th {

package/src/table/theme.scss

@@ -1,14 +1,6 @@
 .wp-block-table {
 	margin: 0 0 1em 0;
 
-	thead {
-		border-bottom: 3px solid;
-	}
-
-	tfoot {
-		border-top: 3px solid;
-	}
-
 	td,
 	th {
 		word-break: normal;

package/src/table/transforms.js

@@ -5,11 +5,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope' ],
+				attributes: [ 'scope', 'colspan' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
+				attributes: [ 'colspan' ],
 			},
 		},
 	},

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -204,7 +204,7 @@ export default function TableOfContentsEdit( {
 				}
 			}
 
-			if ( isEqual( headings, _latestHeadings ) ) {
+			if ( fastDeepEqual( headings, _latestHeadings ) ) {
 				return null;
 			}
 			return _latestHeadings;
@@ -279,7 +279,7 @@ export default function TableOfContentsEdit( {
 				<div { ...blockProps }>
 					<Placeholder
 						icon={ <BlockIcon icon={ icon } /> }
-						label="Table of Contents"
+						label={ __( 'Table of Contents' ) }
 						instructions={ __(
 							'Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.'
 						) }

package/src/tag-cloud/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, filter } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			disabled: true,
 		};
 		const taxonomyOptions = map(
-			filter( taxonomies, 'show_cloud' ),
+			taxonomies?.filter( ( tax ) => !! tax.show_cloud ),
 			( item ) => {
 				return {
 					value: item.slug,
@@ -124,6 +124,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 					}
 				/>
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Number of tags' ) }
 					value={ numberOfTags }
 					onChange={ ( value ) =>

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

@@ -7,12 +7,18 @@ import { sprintf, __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { TemplatePartImportControls } from './import-controls';
+
 export function TemplatePartAdvancedControls( {
 	tagName,
 	setAttributes,
 	isEntityAvailable,
 	templatePartId,
 	defaultWrapper,
+	hasInnerBlocks,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -87,6 +93,12 @@ export function TemplatePartAdvancedControls( {
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
 			/>
+			{ ! hasInnerBlocks && (
+				<TemplatePartImportControls
+					area={ area }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</InspectorControls>
 	);
 }

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

@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import {
+	Button,
+	FlexBlock,
+	FlexItem,
+	SelectControl,
+	__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';
+
+/**
+ * Internal dependencies
+ */
+import { useCreateTemplatePartFromBlocks } from './utils/hooks';
+import { transformWidgetToBlock } from './utils/transformers';
+
+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 { createErrorNotice } = useDispatch( noticesStore );
+
+	const createFromBlocks = useCreateTemplatePartFromBlocks(
+		area,
+		setAttributes
+	);
+
+	const options = useMemo( () => {
+		const sidebarOptions = ( sidebars ?? [] )
+			.filter(
+				( widgetArea ) =>
+					widgetArea.id !== 'wp_inactive_widgets' &&
+					widgetArea.widgets.length > 0
+			)
+			.map( ( widgetArea ) => {
+				return {
+					value: widgetArea.id,
+					label: widgetArea.name,
+				};
+			} );
+
+		if ( ! sidebarOptions.length ) {
+			return [];
+		}
+
+		return [
+			{ value: '', label: __( 'Select widget area' ) },
+			...sidebarOptions,
+		];
+	}, [ sidebars ] );
+
+	async function createFromWidgets( event ) {
+		event.preventDefault();
+
+		if ( isBusy || ! selectedSidebar ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const sidebar = options.find(
+			( { value } ) => value === selectedSidebar
+		);
+		const { getWidgets } = registry.resolveSelect( coreStore );
+
+		// The widgets API always returns a successful response.
+		const widgets = await getWidgets( {
+			sidebar: sidebar.value,
+			_embed: 'about',
+		} );
+
+		const skippedWidgets = new Set();
+		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 ) {
+				skippedWidgets.add( widget.id_base );
+				return [];
+			}
+
+			// Try transforming the Legacy Widget into a first matching block.
+			return switchToBlockType( block, transforms[ 0 ].name );
+		} );
+
+		await createFromBlocks(
+			blocks,
+			/* translators: %s: name of the widget area */
+			sprintf( __( 'Widget area: %s' ), sidebar.label )
+		);
+
+		if ( skippedWidgets.size ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: the list of widgets */
+					__( 'Unable to import the following widgets: %s.' ),
+					Array.from( skippedWidgets ).join( ', ' )
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+
+		setIsBusy( false );
+	}
+
+	return (
+		<Spacer marginBottom="4">
+			<HStack as="form" onSubmit={ createFromWidgets }>
+				<FlexBlock>
+					<SelectControl
+						label={ __( 'Import widget area' ) }
+						value={ selectedSidebar }
+						options={ options }
+						onChange={ ( value ) => setSelectedSidebar( value ) }
+						disabled={ ! options.length }
+						__next36pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+				<FlexItem
+					style={ {
+						marginBottom: '8px',
+						marginTop: 'auto',
+					} }
+				>
+					<Button
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy || ! selectedSidebar }
+					>
+						{ __( 'Import' ) }
+					</Button>
+				</FlexItem>
+			</HStack>
+		</Spacer>
+	);
+}

package/src/template-part/edit/index.js

@@ -141,6 +141,7 @@ export default function TemplatePartEdit( {
 					isEntityAvailable={ isEntityAvailable }
 					templatePartId={ templatePartId }
 					defaultWrapper={ areaObject.tagName }
+					hasInnerBlocks={ innerBlocks.length > 0 }
 				/>
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>

package/src/template-part/edit/selection-modal.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
@@ -57,7 +57,7 @@ export default function TemplatePartSelectionModal( {
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const onTemplatePartSelect = useCallback( ( templatePart ) => {
+	const onTemplatePartSelect = ( templatePart ) => {
 		setAttributes( {
 			slug: templatePart.slug,
 			theme: templatePart.theme,
@@ -74,7 +74,7 @@ export default function TemplatePartSelectionModal( {
 			}
 		);
 		onClose();
-	}, [] );
+	};
 
 	const createFromBlocks = useCreateTemplatePartFromBlocks(
 		area,
@@ -88,6 +88,7 @@ export default function TemplatePartSelectionModal( {
 		<div className="block-library-template-part__selection-content">
 			<div className="block-library-template-part__selection-search">
 				<SearchControl
+					__nextHasNoMarginBottom
 					onChange={ setSearchValue }
 					value={ searchValue }
 					label={ __( 'Search for replacements' ) }