@wordpress/block-library 10.1.0 → 10.2.0

package/src/latest-comments/edit.js

@@ -114,7 +114,6 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Display content' ) }
 							value={ displayContent }
 							options={ [
@@ -139,7 +138,6 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of comments' ) }
 							value={ commentsToShow }
 							onChange={ ( value ) =>

package/src/latest-posts/README.md

@@ -23,8 +23,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `excerptLength` | `number` | `55` | — |
 | `displayAuthor` | `boolean` | `false` | — |
 | `displayPostDate` | `boolean` | `false` | — |
-| `postLayout` | `string` | `"list"` | — |
-| `columns` | `number` | `3` | — |
 | `order` | `string` | `"desc"` | — |
 | `orderBy` | `string` | `"date"` | — |
 | `displayFeaturedImage` | `boolean` | `false` | — |
@@ -41,12 +39,14 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+  - `blockGap`: `{"__experimentalDefault":"1.25em"}`
 - [`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`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/latest-posts/block.json

@@ -41,14 +41,6 @@
 			"type": "boolean",
 			"default": false
 		},
-		"postLayout": {
-			"type": "string",
-			"default": "list"
-		},
-		"columns": {
-			"type": "number",
-			"default": 3
-		},
 		"order": {
 			"type": "string",
 			"default": "desc"
@@ -86,6 +78,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"layout": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -97,7 +90,13 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/latest-posts/constants.js

@@ -1,4 +1,3 @@
 export const MIN_EXCERPT_LENGTH = 10;
 export const MAX_EXCERPT_LENGTH = 100;
-export const MAX_POSTS_COLUMNS = 6;
 export const DEFAULT_EXCERPT_LENGTH = 55;

package/src/latest-posts/deprecated.js

@@ -3,12 +3,121 @@
  */
 import metadata from './block.json';
 
-const { attributes } = metadata;
+const currentSupports = {
+	anchor: true,
+	align: true,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+			link: true,
+		},
+	},
+	html: false,
+	layout: true,
+	spacing: {
+		margin: true,
+		padding: true,
+		blockGap: {
+			__experimentalDefault: '1.25em',
+		},
+		__experimentalDefaultControls: {
+			blockGap: true,
+		},
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	__experimentalBorder: {
+		radius: true,
+		color: true,
+		width: true,
+		style: true,
+		__experimentalDefaultControls: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+const legacyLayoutAttributes = {
+	postLayout: {
+		type: 'string',
+		default: 'list',
+	},
+	columns: {
+		type: 'number',
+		default: 3,
+	},
+};
+
+const migrateCategories = ( oldAttributes ) => {
+	if (
+		! oldAttributes.categories ||
+		'string' !== typeof oldAttributes.categories
+	) {
+		return oldAttributes;
+	}
+
+	// This needs the full category object, not just the ID.
+	return {
+		...oldAttributes,
+		categories: [ { id: Number( oldAttributes.categories ) } ],
+	};
+};
+
+const migratePostLayout = ( oldAttributes ) => {
+	const { postLayout, columns, ...attributesWithoutLegacyLayout } =
+		oldAttributes;
+
+	if ( ! postLayout ) {
+		return oldAttributes;
+	}
+
+	return {
+		...attributesWithoutLegacyLayout,
+		layout: {
+			type: postLayout === 'grid' ? 'grid' : 'default',
+			...( postLayout === 'grid' && columns && { columnCount: columns } ),
+		},
+	};
+};
 
 export default [
 	{
 		attributes: {
-			...attributes,
+			...metadata.attributes,
+			...legacyLayoutAttributes,
+			categories: {
+				type: [ 'array', 'string' ],
+			},
+		},
+		supports: currentSupports,
+		migrate: ( oldAttributes ) =>
+			migratePostLayout( migrateCategories( oldAttributes ) ),
+		isEligible: ( { postLayout } ) => postLayout,
+		save: () => null,
+	},
+	{
+		attributes: {
+			...metadata.attributes,
 			categories: {
 				type: 'string',
 			},
@@ -17,13 +126,7 @@ export default [
 			align: true,
 			html: false,
 		},
-		migrate: ( oldAttributes ) => {
-			// This needs the full category object, not just the ID.
-			return {
-				...oldAttributes,
-				categories: [ { id: Number( oldAttributes.categories ) } ],
-			};
-		},
+		migrate: migrateCategories,
 		isEligible: ( { categories } ) =>
 			categories && 'string' === typeof categories,
 		save: () => null,

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,
@@ -165,13 +162,10 @@ function Controls( { attributes, setAttributes, postCount } ) {
 			label: name,
 		} ) );
 	const categorySuggestions =
-		categoriesList?.reduce(
-			( accumulator, category ) => ( {
-				...accumulator,
-				[ category.name ]: category,
-			} ),
-			{}
-		) ?? {};
+		categoriesList?.reduce( ( accumulator, category ) => {
+			accumulator[ category.name ] = category;
+			return accumulator;
+		}, {} ) ?? {};
 	const selectCategories = ( tokens ) => {
 		const hasNoSuggestion = tokens.some(
 			( token ) =>
@@ -268,7 +262,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Max number of words' ) }
 								value={ excerptLength }
 								onChange={ ( value ) =>
@@ -414,7 +407,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 +465,6 @@ function Controls( { attributes, setAttributes, postCount } ) {
 						postsToShow: 5,
 						categories: undefined,
 						selectedAuthor: undefined,
-						columns: 3,
 					} )
 				}
 				dropdownMenuProps={ dropdownMenuProps }
@@ -523,41 +514,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 +537,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		displayPostContent,
 		displayPostDate,
 		displayAuthor,
+		layout,
 		postLayout,
 		columns,
 		excerptLength,
@@ -580,6 +547,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 +598,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 +636,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',
 		},
 	];
 
@@ -819,7 +804,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 									<div
 										className="wp-block-latest-posts__post-full-content"
 										dangerouslySetInnerHTML={ {
-											__html: post.content.raw.trim(),
+											__html: post.content.rendered.trim(),
 										} }
 									/>
 								) }

package/src/latest-posts/index.php

@@ -44,6 +44,7 @@ function block_core_latest_posts_get_excerpt_length() {
  */
 function render_block_core_latest_posts( $attributes ) {
 	global $post, $block_core_latest_posts_excerpt_length;
+	static $rendering_stack = array();
 
 	$args = array(
 		'posts_per_page'      => $attributes['postsToShow'],
@@ -64,18 +65,23 @@ function render_block_core_latest_posts( $attributes ) {
 		$args['author'] = $attributes['selectedAuthor'];
 	}
 
-	$query        = new WP_Query();
-	$recent_posts = $query->query( $args );
+	$query = new WP_Query( $args );
 
 	if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {
 		update_post_thumbnail_cache( $query );
 	}
 
 	$list_items_markup = '';
+	// Snapshot the current global post so it can be restored after the loop.
+	// We use have_posts()/the_post() rather than foreach so that setup_postdata()
+	// is called for each post, establishing the correct global context for
+	// do_blocks() and other filters that run during full-content rendering.
+	$previous_post = $post ?? null;
 
-	foreach ( $recent_posts as $post ) {
-		$post_link = esc_url( get_permalink( $post ) );
-		$title     = get_the_title( $post );
+	while ( $query->have_posts() ) {
+		$query->the_post();
+		$post_link = esc_url( get_permalink() );
+		$title     = get_the_title();
 
 		if ( ! $title ) {
 			$title = __( '(no title)' );
@@ -83,7 +89,7 @@ function render_block_core_latest_posts( $attributes ) {
 
 		$list_items_markup .= '<li>';
 
-		if ( $attributes['displayFeaturedImage'] && has_post_thumbnail( $post ) ) {
+		if ( $attributes['displayFeaturedImage'] && has_post_thumbnail() ) {
 			$image_style = '';
 			if ( isset( $attributes['featuredImageSizeWidth'] ) ) {
 				$image_style .= sprintf( 'max-width:%spx;', $attributes['featuredImageSizeWidth'] );
@@ -98,7 +104,7 @@ function render_block_core_latest_posts( $attributes ) {
 			}
 
 			$featured_image = get_the_post_thumbnail(
-				$post,
+				null,
 				$attributes['featuredImageSizeSlug'],
 				array(
 					'style' => esc_attr( $image_style ),
@@ -126,7 +132,7 @@ function render_block_core_latest_posts( $attributes ) {
 		);
 
 		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
-			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
+			$author_display_name = get_the_author_meta( 'display_name' );
 
 			/* translators: byline. %s: author. */
 			$byline = sprintf( __( 'by %s' ), $author_display_name );
@@ -142,15 +148,15 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
 			$list_items_markup .= sprintf(
 				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
-				esc_attr( get_the_date( 'c', $post ) ),
-				get_the_date( '', $post )
+				esc_attr( get_the_date( 'c' ) ),
+				get_the_date( '' )
 			);
 		}
 
 		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
 			&& isset( $attributes['displayPostContentRadio'] ) && 'excerpt' === $attributes['displayPostContentRadio'] ) {
 
-			$trimmed_excerpt = get_the_excerpt( $post );
+			$trimmed_excerpt = get_the_excerpt();
 
 			/*
 			 * Adds a "Read more" link with screen reader text.
@@ -170,7 +176,7 @@ function render_block_core_latest_posts( $attributes ) {
 				}
 			}
 
-			if ( post_password_required( $post ) ) {
+			if ( post_password_required() ) {
 				$trimmed_excerpt = __( 'This content is password protected.' );
 			}
 
@@ -183,29 +189,64 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
 			&& isset( $attributes['displayPostContentRadio'] ) && 'full_post' === $attributes['displayPostContentRadio'] ) {
 
-			$post_content = html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) );
-
-			if ( post_password_required( $post ) ) {
+			if ( post_password_required() ) {
 				$post_content = __( 'This content is password protected.' );
+			} else {
+				$post_id      = get_the_ID();
+				$post_content = get_post_field( 'post_content', $post_id, 'raw' );
+				// Check if we're already rendering this post to prevent infinite recursion.
+				if ( in_array( $post_id, $rendering_stack, true ) ) {
+					$post_content = '';
+				} else {
+					$rendering_stack[] = $post_id;
+
+					try {
+						// Run through the actions that are typically taken on the_content.
+						$post_content = _wp_apply_block_content_filters( $post_content, 'latest-posts' );
+					} finally {
+						array_pop( $rendering_stack );
+					}
+				}
 			}
 
+			$post_content       = str_replace( ']]>', ']]&gt;', $post_content );
 			$list_items_markup .= sprintf(
 				'<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
-				wp_kses_post( $post_content )
+				$post_content
 			);
 		}
 
 		$list_items_markup .= "</li>\n";
 	}
 
+	// Restore the post context that was active before this secondary query.
+	// wp_reset_postdata() is intentionally not used here: when this block is
+	// rendered inside another post's content (e.g. via do_blocks()), it would
+	// restore to the main query post rather than the outer rendering post.
+	$post = $previous_post;
+	if ( $previous_post instanceof WP_Post ) {
+		setup_postdata( $previous_post );
+	}
+
 	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;