@wordpress/block-library 10.1.0 → 10.1.1-next.v.202607070741.0

package/src/latest-posts/edit.js

@@ -49,7 +49,6 @@ import { createInterpolateElement } from '@wordpress/element';
 import {
 	MIN_EXCERPT_LENGTH,
 	MAX_EXCERPT_LENGTH,
-	MAX_POSTS_COLUMNS,
 	DEFAULT_EXCERPT_LENGTH,
 } from './constants';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
@@ -105,7 +104,7 @@ function getCurrentAuthor( post ) {
 	return post._embedded?.author?.[ 0 ];
 }
 
-function Controls( { attributes, setAttributes, postCount } ) {
+function Controls( { attributes, setAttributes } ) {
 	const {
 		postsToShow,
 		order,
@@ -117,8 +116,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 		displayPostContent,
 		displayPostDate,
 		displayAuthor,
-		postLayout,
-		columns,
 		excerptLength,
 		featuredImageAlign,
 		featuredImageSizeSlug,
@@ -268,7 +265,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Max number of words' ) }
 								value={ excerptLength }
 								onChange={ ( value ) =>
@@ -414,7 +410,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 						>
 							<ToggleGroupControl
 								className="editor-latest-posts-image-alignment-control"
-								__next40pxDefaultSize
 								label={ __( 'Image alignment' ) }
 								value={ featuredImageAlign || 'none' }
 								onChange={ ( value ) =>
@@ -473,7 +468,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 						postsToShow: 5,
 						categories: undefined,
 						selectedAuthor: undefined,
-						columns: 3,
 					} )
 				}
 				dropdownMenuProps={ dropdownMenuProps }
@@ -523,41 +517,16 @@ function Controls( { attributes, setAttributes, postCount } ) {
 						selectedAuthorId={ selectedAuthor }
 					/>
 				</ToolsPanelItem>
-
-				{ postLayout === 'grid' && (
-					<ToolsPanelItem
-						hasValue={ () => columns !== 3 }
-						label={ __( 'Columns' ) }
-						onDeselect={ () =>
-							setAttributes( {
-								columns: 3,
-							} )
-						}
-						isShownByDefault
-					>
-						<RangeControl
-							__next40pxDefaultSize
-							label={ __( 'Columns' ) }
-							value={ columns }
-							onChange={ ( value ) =>
-								setAttributes( { columns: value } )
-							}
-							min={ 2 }
-							max={
-								! postCount
-									? MAX_POSTS_COLUMNS
-									: Math.min( MAX_POSTS_COLUMNS, postCount )
-							}
-							required
-						/>
-					</ToolsPanelItem>
-				) }
 			</ToolsPanel>
 		</>
 	);
 }
 
-export default function LatestPostsEdit( { attributes, setAttributes } ) {
+export default function LatestPostsEdit( {
+	attributes,
+	setAttributes,
+	__unstableLayoutClassNames,
+} ) {
 	const instanceId = useInstanceId( LatestPostsEdit );
 
 	const {
@@ -571,6 +540,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		displayPostContent,
 		displayPostDate,
 		displayAuthor,
+		layout,
 		postLayout,
 		columns,
 		excerptLength,
@@ -580,6 +550,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		featuredImageSizeHeight,
 		addLinkToFeaturedImage,
 	} = attributes;
+	const { type: savedLayoutType, minimumColumnWidth } = layout || {};
+	const layoutType =
+		savedLayoutType || ( postLayout === 'grid' ? 'grid' : 'default' );
+	const columnCount =
+		layout?.columnCount ?? ( ! savedLayoutType ? columns : undefined ) ?? 3;
 	const { latestPosts } = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -626,18 +601,20 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			<Controls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				postCount={ latestPosts?.length ?? 0 }
 			/>
 		</InspectorControls>
 	);
 
 	const blockProps = useBlockProps( {
-		className: clsx( {
+		className: clsx( __unstableLayoutClassNames, {
 			'wp-block-latest-posts__list': true,
-			'is-grid': postLayout === 'grid',
+			'is-grid': layoutType === 'grid',
 			'has-dates': displayPostDate,
 			'has-author': displayAuthor,
-			[ `columns-${ columns }` ]: postLayout === 'grid',
+			[ `columns-${ columnCount }` ]:
+				layoutType === 'grid' && columnCount,
+			'has-native-responsive-grid':
+				layoutType === 'grid' && columnCount && minimumColumnWidth,
 		} ),
 	} );
 
@@ -662,18 +639,29 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			? latestPosts.slice( 0, postsToShow )
 			: latestPosts;
 
+	const setDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( {
+			layout: { ...layout, ...newDisplayLayout },
+			postLayout: undefined,
+			columns: undefined,
+		} );
+
 	const layoutControls = [
 		{
 			icon: list,
 			title: _x( 'List view', 'Latest posts block display setting' ),
-			onClick: () => setAttributes( { postLayout: 'list' } ),
-			isActive: postLayout === 'list',
+			onClick: () => setDisplayLayout( { type: 'default' } ),
+			isActive: layoutType === 'default' || layoutType === 'constrained',
 		},
 		{
 			icon: grid,
 			title: _x( 'Grid view', 'Latest posts block display setting' ),
-			onClick: () => setAttributes( { postLayout: 'grid' } ),
-			isActive: postLayout === 'grid',
+			onClick: () =>
+				setDisplayLayout( {
+					type: 'grid',
+					columnCount,
+				} ),
+			isActive: layoutType === 'grid',
 		},
 	];
 

package/src/latest-posts/index.php

@@ -200,12 +200,23 @@ function render_block_core_latest_posts( $attributes ) {
 
 	remove_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
+	$layout             = $attributes['layout'] ?? array();
+	$legacy_layout_type = (
+		isset( $attributes['postLayout'] ) &&
+		'grid' === $attributes['postLayout']
+	) ? 'grid' : 'default';
+	$layout_type        = $layout['type'] ?? $legacy_layout_type;
+	$column_count       = $layout['columnCount'] ?? ( $attributes['columns'] ?? null );
+
 	$classes = array( 'wp-block-latest-posts__list' );
-	if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
+	if ( 'grid' === $layout_type ) {
 		$classes[] = 'is-grid';
 	}
-	if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
-		$classes[] = 'columns-' . $attributes['columns'];
+	if ( 'grid' === $layout_type && ! empty( $column_count ) ) {
+		$classes[] = sanitize_title( 'columns-' . $column_count );
+	}
+	if ( 'grid' === $layout_type && ! empty( $column_count ) && ! empty( $layout['minimumColumnWidth'] ) ) {
+		$classes[] = 'has-native-responsive-grid';
 	}
 	if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
 		$classes[] = 'has-dates';

package/src/latest-posts/style.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/breakpoints" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
 .wp-block-latest-posts {
@@ -21,7 +22,9 @@
 		}
 	}
 
-	&.is-grid {
+	// These rules no longer apply to blocks using layout support, but should
+	// be kept for backwards compatibility.
+	&.is-grid:not(.is-layout-grid) {
 		display: flex;
 		flex-wrap: wrap;
 
@@ -33,7 +36,7 @@
 
 	@include break-small {
 		@for $i from 2 through 6 {
-			&.columns-#{ $i } li {
+			&.columns-#{ $i }:not(.is-layout-grid) li {
 				width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i}));
 
 				&:nth-child(#{ $i }n) {
@@ -44,6 +47,13 @@
 	}
 }
 
+@media (max-width: $break-small) {
+	// Temporary specificity bump until "wp-container" layout specificity is revisited.
+	.wp-block-latest-posts-is-layout-grid[class*="columns-"]:not(.has-native-responsive-grid) {
+		grid-template-columns: 1fr;
+	}
+}
+
 :root {
 	:where(.wp-block-latest-posts.is-grid) {
 		padding: 0;

package/src/latest-posts/test/deprecated.js

@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+// Load block support registration filters.
+import '@wordpress/block-editor';
+import {
+	getBlockType,
+	parse,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import deprecated from '../deprecated';
+import metadata from '../block.json';
+
+describe( 'Latest Posts deprecations', () => {
+	beforeAll( () => {
+		if ( getBlockType( metadata.name ) ) {
+			unregisterBlockType( metadata.name );
+		}
+		registerBlockType( metadata, {
+			deprecated,
+			save: () => null,
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( metadata.name );
+	} );
+
+	it( 'migrates legacy grid layout attributes to layout support attributes', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			postLayout: 'grid',
+			columns: 4,
+			postsToShow: 3,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			layout: {
+				type: 'grid',
+				columnCount: 4,
+			},
+			postsToShow: 3,
+		} );
+	} );
+
+	it( 'migrates legacy grid layout attributes using the legacy columns default', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			postLayout: 'grid',
+			columns: deprecated[ 0 ].attributes.columns.default,
+			postsToShow: 3,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			layout: {
+				type: 'grid',
+				columnCount: 3,
+			},
+			postsToShow: 3,
+		} );
+	} );
+
+	it( 'parses legacy grid layout attributes to layout support attributes when columns are omitted', () => {
+		const [ parsedBlock ] = parse(
+			'<!-- wp:latest-posts {"postLayout":"grid","postsToShow":3} /-->'
+		);
+
+		expect( parsedBlock.attributes ).toEqual(
+			expect.objectContaining( {
+				layout: {
+					type: 'grid',
+					columnCount: 3,
+				},
+				postsToShow: 3,
+			} )
+		);
+		expect( parsedBlock.attributes.postLayout ).toBeUndefined();
+		expect( parsedBlock.attributes.columns ).toBeUndefined();
+	} );
+
+	it( 'preserves block support attributes while migrating legacy grid layout attributes', () => {
+		const legacyAttributes = {
+			postLayout: 'grid',
+			postsToShow: 3,
+			textColor: 'contrast',
+			backgroundColor: 'base',
+			fontSize: 'large',
+			fontFamily: 'system-sans',
+			style: {
+				elements: {
+					link: {
+						color: {
+							text: 'var:preset|color|primary',
+						},
+					},
+				},
+				typography: {
+					lineHeight: '1.6',
+				},
+			},
+		};
+		const [ parsedBlock ] = parse(
+			`<!-- wp:latest-posts ${ JSON.stringify( legacyAttributes ) } /-->`
+		);
+
+		expect( parsedBlock.attributes ).toEqual(
+			expect.objectContaining( {
+				layout: {
+					type: 'grid',
+					columnCount: 3,
+				},
+				postsToShow: 3,
+				textColor: 'contrast',
+				backgroundColor: 'base',
+				fontSize: 'large',
+				fontFamily: 'system-sans',
+				style: {
+					elements: {
+						link: {
+							color: {
+								text: 'var:preset|color|primary',
+							},
+						},
+					},
+					typography: {
+						lineHeight: '1.6',
+					},
+				},
+			} )
+		);
+		expect( parsedBlock.attributes.postLayout ).toBeUndefined();
+		expect( parsedBlock.attributes.columns ).toBeUndefined();
+	} );
+
+	it( 'preserves the legacy categories migration while migrating layout', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			categories: '7',
+			postLayout: 'grid',
+			columns: 2,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			categories: [ { id: 7 } ],
+			layout: {
+				type: 'grid',
+				columnCount: 2,
+			},
+		} );
+	} );
+} );

package/src/list/ordered-list-settings.js

@@ -66,7 +66,6 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 					}
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'List style' ) }
 						options={ LIST_STYLE_OPTIONS }
 						value={ type || 'decimal' }

package/src/media-text/edit.js

@@ -366,7 +366,6 @@ function MediaTextEdit( {
 				onDeselect={ () => setAttributes( { mediaWidth: 50 } ) }
 			>
 				<RangeControl
-					__next40pxDefaultSize
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
 					onChange={ commitWidthChange }

package/src/missing/edit.js

@@ -39,9 +39,7 @@ export default function MissingEdit( { attributes, clientId } ) {
 	function convertToHTML() {
 		replaceBlock(
 			clientId,
-			createBlock( 'core/html', {
-				content: originalUndelimitedContent,
-			} )
+			createBlock( 'core/html', {}, [], [ originalUndelimitedContent ] )
 		);
 	}
 

package/src/navigation/edit/index.js

@@ -820,7 +820,6 @@ function Navigation( {
 									isShownByDefault
 								>
 									<ToggleGroupControl
-										__next40pxDefaultSize
 										label={ __( 'Submenu Visibility' ) }
 										value={ submenuVisibility }
 										onChange={ ( value ) => {

package/src/navigation/edit/overlay-menu-preview-controls.js

@@ -40,7 +40,6 @@ export default function OverlayMenuPreviewControls( {
 				checked={ hasIcon }
 			/>
 			<ToggleGroupControl
-				__next40pxDefaultSize
 				className="wp-block-navigation__overlay-menu-icon-toggle-group"
 				label={ __( 'Icon' ) }
 				value={ icon }

package/src/navigation/edit/overlay-menu-preview.js

@@ -42,7 +42,6 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
 			>
 				<ToggleGroupControl
-					__next40pxDefaultSize
 					className="wp-block-navigation__overlay-menu-icon-toggle-group"
 					label={ __( 'Icon' ) }
 					value={ icon }

package/src/navigation/edit/overlay-template-part-selector.js

@@ -309,7 +309,6 @@ export default function OverlayTemplatePartSelector( {
 					>
 						<FlexBlock>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Overlay template' ) }
 								hideLabelFromVision
 								aria-labelledby={ headingId }

package/src/navigation/edit/overlay-visibility-control.js

@@ -21,7 +21,6 @@ export default function OverlayVisibilityControl( {
 } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Overlay Visibility' ) }
 			aria-label={ __( 'Configure overlay visibility' ) }
 			value={ overlayMenu }

package/src/navigation-link/shared/test/controls.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/navigation-link/shared/test/use-entity-binding.js

@@ -1,11 +1,16 @@
 /**
- * @jest-environment jsdom
+ * External dependencies
  */
+import { renderHook, act } from '@testing-library/react';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { renderHook, act } from '@testing-library/react';
+import {
+	useBlockBindingsUtils,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,15 +32,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
-/**
- * WordPress dependencies
- */
-import {
-	useBlockBindingsUtils,
-	useBlockEditingMode,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
 describe( 'useEntityBinding', () => {
 	const mockUpdateBlockBindings = jest.fn();
 

package/src/navigation-link/shared/test/use-handle-link-change.test.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/navigation-link/shared/test/use-link-preview.test.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -500,6 +496,23 @@ describe( 'useLinkPreview', () => {
 			expect( result.current.title ).toBe( 'Test Category' );
 		} );
 
+		it( 'should show "(no title)" for an untitled entity, not the title object', () => {
+			const { result } = renderHook( () =>
+				useLinkPreview( {
+					url: 'https://example.com/page',
+					// Untitled page: an empty `title.rendered` object.
+					entityRecord: { title: { raw: '', rendered: '' } },
+					type: 'page',
+					hasBinding: false,
+					isEntityAvailable: true,
+				} )
+			);
+
+			expect( result.current.title ).toBe( '(no title)' );
+			// Truthy title, so no rich URL fetch.
+			expect( mockUseRemoteUrlData ).toHaveBeenCalledWith( null );
+		} );
+
 		it( 'should use entityRecord.name for taxonomy terms', () => {
 			const { result } = renderHook( () =>
 				useLinkPreview( {

package/src/navigation-link/shared/use-link-preview.js

@@ -194,6 +194,29 @@ export function computeBadges( {
 	return badges;
 }
 
+/**
+ * Returns an entity record's display title: the rendered title, "(no title)"
+ * for an untitled entity, or the record's name.
+ *
+ * @param {Object} entityRecord The entity record.
+ * @return {string|undefined} The display title.
+ */
+function getEntityTitle( entityRecord ) {
+	const title = entityRecord?.title;
+
+	// Some entity types use a plain string for the title.
+	if ( typeof title === 'string' ) {
+		return title;
+	}
+
+	// Posts and pages expose `title` as a { raw, rendered } object.
+	if ( title && 'rendered' in title ) {
+		return title.rendered || __( '(no title)' );
+	}
+
+	return entityRecord?.name;
+}
+
 /**
  * Hook to compute link preview data for display.
  *
@@ -223,10 +246,7 @@ export function useLinkPreview( {
 		)?.home;
 	}, [] );
 
-	const title =
-		entityRecord?.title?.rendered ||
-		entityRecord?.title ||
-		entityRecord?.name;
+	const title = getEntityTitle( entityRecord );
 
 	// Fetch rich URL data if we don't have a title. Internal links should have passed a title.
 	const { richData } = useRemoteUrlData( title ? null : url );

package/src/navigation-overlay-close/edit.js

@@ -60,7 +60,6 @@ export default function NavigationOverlayCloseEdit( {
 								setAttributes( { displayMode: value } )
 							}
 							isBlock
-							__next40pxDefaultSize
 						>
 							<ToggleGroupControlOption
 								value="icon"

package/src/page-list/edit.js

@@ -332,7 +332,6 @@ export default function PageListEdit( {
 								isShownByDefault
 							>
 								<ComboboxControl
-									__next40pxDefaultSize
 									className="editor-page-attributes__parent"
 									label={ __( 'Parent' ) }
 									value={ parentPageID }

package/src/page-list/index.php

@@ -309,7 +309,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 		$colors['css_classes']
 	);
 
-	$style_attribute = ( $colors['inline_styles'] );
+	$style_attribute = $colors['inline_styles'];
 	$css_classes     = trim( implode( ' ', $classes ) );
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );

package/src/playlist/README.md

@@ -22,7 +22,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `currentTrack` | `string` | — | — |
 | `type` | `string` | `"audio"` | — |
 | `order` | `string` | `"asc"` | — |
 | `showTracklist` | `boolean` | `true` | — |
@@ -53,7 +52,6 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Provides context:**
 
 - `showArtists` → attribute `showArtists`
-- `currentTrack` → attribute `currentTrack`
 
 ## Block Styles
 

package/src/playlist/block.json

@@ -10,9 +10,6 @@
 	"textdomain": "default",
 	"allowedBlocks": [ "core/playlist-track" ],
 	"attributes": {
-		"currentTrack": {
-			"type": "string"
-		},
 		"type": {
 			"type": "string",
 			"default": "audio"
@@ -46,8 +43,7 @@
 		}
 	},
 	"providesContext": {
-		"showArtists": "showArtists",
-		"currentTrack": "currentTrack"
+		"showArtists": "showArtists"
 	},
 	"supports": {
 		"anchor": true,
@@ -62,12 +58,10 @@
 		},
 		"__experimentalBorder": {
 			"color": true,
-			"radius": true,
 			"style": true,
 			"width": true,
 			"__experimentalDefaultControls": {
 				"color": true,
-				"radius": true,
 				"style": true,
 				"width": true
 			}

package/src/playlist/context.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const PlaylistContext = createContext( {
+	currentTrackClientId: null,
+	setCurrentTrackClientId: () => {},
+} );