@wordpress/block-library 7.19.0 → 8.0.0

package/src/site-logo/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -87,7 +86,11 @@ const SiteLogo = ( {
 		);
 		return {
 			title: siteEntities?.name,
-			...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
+			...Object.fromEntries(
+				Object.entries( getSettings() ).filter( ( [ key ] ) =>
+					[ 'imageEditing', 'maxWidth' ].includes( key )
+				)
+			),
 		};
 	}, [] );
 
@@ -120,9 +123,10 @@ const SiteLogo = ( {
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {
-				setNaturalSize(
-					pick( event.target, [ 'naturalWidth', 'naturalHeight' ] )
-				);
+				setNaturalSize( {
+					naturalWidth: event.target.naturalWidth,
+					naturalHeight: event.target.naturalHeight,
+				} );
 			} }
 		/>
 	);
@@ -291,6 +295,7 @@ const SiteLogo = ( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Image width' ) }
 						onChange={ ( newWidth ) =>
 							setAttributes( { width: newWidth } )
@@ -512,6 +517,9 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration={ true }
+				style={ {
+					width,
+				} }
 			>
 				{ content }
 			</Placeholder>

package/src/site-logo/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 };

package/src/site-title/index.js

@@ -17,6 +17,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 	deprecated,

package/src/social-link/social-list.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -22,7 +17,7 @@ import { ChainIcon } from './icons';
  * @return {WPComponent} Icon component for social service.
  */
 export const getIconBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.icon : ChainIcon;
 };
 
@@ -34,6 +29,6 @@ export const getIconBySite = ( name ) => {
  * @return {string} Display name for social service
  */
 export const getNameBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.title : __( 'Social Icon' );
 };

package/src/social-link/test/index.native.js

@@ -42,16 +42,13 @@ describe( '<SocialLinkEdit/>', () => {
 			'social icons'
 		);
 		fireEvent.press(
-			await waitFor( () =>
-				subject.getByLabelText( 'Social Icons block' )
-			)
+			await subject.findByLabelText( 'Social Icons block' )
+		);
+		const [ socialIconsBlock ] = subject.getAllByLabelText(
+			/Social Icons Block. Row 1/
 		);
 		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByLabelText( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
+			within( socialIconsBlock ).getByTestId( 'block-list-wrapper' ),
 			'layout',
 			{ nativeEvent: { layout: { width: 100 } } }
 		);
@@ -99,16 +96,13 @@ describe( '<SocialLinkEdit/>', () => {
 			'social icons'
 		);
 		fireEvent.press(
-			await waitFor( () =>
-				subject.getByLabelText( 'Social Icons block' )
-			)
+			await subject.findByLabelText( 'Social Icons block' )
+		);
+		const [ socialIconsBlock ] = subject.getAllByLabelText(
+			/Social Icons Block. Row 1/
 		);
 		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByLabelText( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
+			within( socialIconsBlock ).getByTestId( 'block-list-wrapper' ),
 			'layout',
 			{ nativeEvent: { layout: { width: 100 } } }
 		);

package/src/social-links/test/edit.native.js

@@ -104,7 +104,6 @@ describe( 'Social links block', () => {
 
 	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
 		const screen = await initializeEditor();
-		const { getByTestId, getByText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -131,7 +130,7 @@ describe( 'Social links block', () => {
 		fireEvent.press( appenderButton );
 
 		// Find a social link in the inserter
-		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, {
@@ -143,11 +142,13 @@ describe( 'Social links block', () => {
 		} );
 
 		// Add the Amazon link
-		const amazonBlock = await waitFor( () => getByText( 'Amazon' ) );
+		const amazonBlock = await screen.findByText( 'Amazon' );
 		expect( amazonBlock ).toBeVisible();
 
 		fireEvent.press( amazonBlock );
 
+		await screen.findByTestId( 'navigation-screen-LinkSettingsScreen' );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 

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/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;

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/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' ) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -150,8 +150,12 @@ export function useTemplatePartArea( area ) {
 				).__experimentalGetDefaultTemplatePartAreas();
 			/* eslint-enable @wordpress/data-no-store-string-literals */
 
-			const selectedArea = find( definedAreas, { area } );
-			const defaultArea = find( definedAreas, { area: 'uncategorized' } );
+			const selectedArea = definedAreas.find(
+				( definedArea ) => definedArea.area === area
+			);
+			const defaultArea = definedAreas.find(
+				( definedArea ) => definedArea.area === 'uncategorized'
+			);
 
 			return {
 				icon: selectedArea?.icon || defaultArea?.icon,

package/src/template-part/editor.scss

@@ -5,8 +5,8 @@
 	// and height are used instead of max-(width/height).
 	.components-modal__frame {
 		@include break-small() {
-			width: calc(100% - #{ $grid-unit-20 * 2 });
-			height: calc(100% - #{ $header-height * 2 });
+			width: calc(100% - #{$grid-unit-20 * 2});
+			height: calc(100% - #{$header-height * 2});
 		}
 		@include break-medium() {
 			width: $break-medium - $grid-unit-20 * 2;
@@ -24,3 +24,21 @@
 	padding: $grid-unit-20 0;
 	z-index: z-index(".block-library-template-part__selection-search");
 }
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted,
+	&.is-selected {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
+	}
+}

package/src/template-part/index.php

@@ -105,8 +105,7 @@ function render_block_core_template_part( $attributes ) {
 
 	// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 	// is set in `wp_debug_mode()`.
-	$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-		defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+	$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 	if ( is_null( $content ) && $is_debug ) {
 		if ( ! isset( $attributes['slug'] ) ) {

package/src/text-columns/edit.js

@@ -39,6 +39,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>