@wordpress/block-library 7.18.0 → 8.0.0

package/src/post-author/edit.js

@@ -13,11 +13,23 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import {
+	ComboboxControl,
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
+const minimumUsersForCombobox = 25;
+
+const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: 100,
+};
+
 function PostAuthorEdit( {
 	isSelected,
 	context: { postType, postId, queryId },
@@ -38,7 +50,7 @@ function PostAuthorEdit( {
 			return {
 				authorId: _authorId,
 				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getUsers( { who: 'authors' } ),
+				authors: getUsers( AUTHORS_QUERY ),
 			};
 		},
 		[ postType, postId ]
@@ -50,7 +62,7 @@ function PostAuthorEdit( {
 		attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
-	if ( authorDetails ) {
+	if ( authorDetails?.avatar_urls ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
 				value: size,
@@ -65,34 +77,47 @@ function PostAuthorEdit( {
 		} ),
 	} );
 
+	const authorOptions = authors?.length
+		? authors.map( ( { id, name } ) => {
+				return {
+					value: id,
+					label: name,
+				};
+		  } )
+		: [];
+
+	const handleSelect = ( nextAuthorId ) => {
+		editEntityRecord( 'postType', postType, postId, {
+			author: nextAuthorId,
+		} );
+	};
+
+	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					{ !! postId &&
 						! isDescendentOfQueryLoop &&
-						!! authors?.length && (
+						authorOptions.length &&
+						( ( showCombobox && (
+							<ComboboxControl
+								__nextHasNoMarginBottom
+								label={ __( 'Author' ) }
+								options={ authorOptions }
+								value={ authorId }
+								onChange={ handleSelect }
+								allowReset={ false }
+							/>
+						) ) || (
 							<SelectControl
 								label={ __( 'Author' ) }
 								value={ authorId }
-								options={ authors.map( ( { id, name } ) => {
-									return {
-										value: id,
-										label: name,
-									};
-								} ) }
-								onChange={ ( nextAuthorId ) => {
-									editEntityRecord(
-										'postType',
-										postType,
-										postId,
-										{
-											author: nextAuthorId,
-										}
-									);
-								} }
+								options={ authorOptions }
+								onChange={ handleSelect }
 							/>
-						) }
+						) ) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }
@@ -148,7 +173,7 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails && (
+				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ attributes.avatarSize }

package/src/post-content/block.json

@@ -11,6 +11,9 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalLayout": true,
+		"dimensions": {
+			"minHeight": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-content/index.php

@@ -25,8 +25,7 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 	if ( isset( $seen_ids[ $post_id ] ) ) {
 		// 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;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.

package/src/post-featured-image/index.php

@@ -19,14 +19,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	// Check is needed for backward compatibility with third-party plugins
+	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
+	if ( ! in_the_loop() && have_posts() ) {
+		the_post();
+	}
+
 	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		$attr['alt'] = $post_title;
+		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
 	}
 
 	if ( ! empty( $attributes['height'] ) ) {

package/src/post-featured-image/overlay.js

@@ -98,6 +98,7 @@ const Overlay = ( {
 					panelId={ clientId }
 				>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRatio ) =>

package/src/post-template/block.json

@@ -22,6 +22,14 @@
 		"__experimentalLayout": {
 			"allowEditing": false
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/preformatted/transforms.js

@@ -34,7 +34,10 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				createBlock( 'core/paragraph', attributes ),
+				createBlock( 'core/paragraph', {
+					...attributes,
+					content: attributes.content.replace( /\n/g, '<br>' ),
+				} ),
 		},
 		{
 			type: 'block',

package/src/query/block.json

@@ -50,14 +50,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
 		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-query-editor"

package/src/query/deprecated.js

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import cleanEmptyObject from '../utils/clean-empty-object';
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +31,271 @@ const migrateToTaxQuery = ( attributes ) => {
 	};
 };
 
-const deprecated = [
-	// Version with `categoryIds and tagIds`.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
-			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
-			},
-			tagName: {
-				type: 'string',
-				default: 'div',
+const migrateColors = ( attributes, innerBlocks ) => {
+	// Remove color style attributes from the Query block.
+	const { style, backgroundColor, gradient, textColor, ...newAttributes } =
+		attributes;
+
+	const hasColorStyles =
+		backgroundColor ||
+		gradient ||
+		textColor ||
+		style?.color ||
+		style?.elements?.link;
+
+	// If the query block doesn't currently have any color styles,
+	// nothing needs migrating.
+	if ( ! hasColorStyles ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	// Clean color values from style attribute object.
+	if ( style ) {
+		newAttributes.style = cleanEmptyObject( {
+			...style,
+			color: undefined,
+			elements: {
+				...style.elements,
+				link: undefined,
 			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		} );
+	}
+
+	// If the inner blocks are already wrapped in a single group
+	// block, add the color support styles to that group block.
+	if ( hasSingleInnerGroupBlock( innerBlocks ) ) {
+		const groupBlock = innerBlocks[ 0 ];
+
+		// Create new styles for the group block.
+		const hasStyles =
+			style?.color ||
+			style?.elements?.link ||
+			groupBlock.attributes.style;
+
+		const newStyles = hasStyles
+			? cleanEmptyObject( {
+					...groupBlock.attributes.style,
+					color: style?.color,
+					elements: style?.elements?.link
+						? { link: style?.elements?.link }
+						: undefined,
+			  } )
+			: undefined;
+
+		// Create a new Group block from the original.
+		const updatedGroupBlock = createBlock(
+			'core/group',
+			{
+				...groupBlock.attributes,
+				backgroundColor,
+				gradient,
+				textColor,
+				style: newStyles,
 			},
+			groupBlock.innerBlocks
+		);
+
+		return [ newAttributes, [ updatedGroupBlock ] ];
+	}
+
+	// When we don't have a single wrapping group block for the inner
+	// blocks, wrap the current inner blocks in a group applying the
+	// color styles to that.
+	const newGroupBlock = createBlock(
+		'core/group',
+		{
+			backgroundColor,
+			gradient,
+			textColor,
+			style: cleanEmptyObject( {
+				color: style?.color,
+				elements: style?.elements?.link
+					? { link: style?.elements?.link }
+					: undefined,
+			} ),
+		},
+		innerBlocks
+	);
+
+	return [ newAttributes, [ newGroupBlock ] ];
+};
+
+const hasSingleInnerGroupBlock = ( innerBlocks = [] ) =>
+	innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group';
+
+// Version with NO wrapper `div` element.
+const v1 = {
+	attributes: {
+		queryId: {
+			type: 'number',
 		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			__experimentalLayout: true,
 		},
-		isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
-			categoryIds || tagIds,
-		migrate: migrateToTaxQuery,
-		save( { attributes: { tagName: Tag = 'div' } } ) {
-			const blockProps = useBlockProps.save();
-			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-			return <Tag { ...innerBlocksProps } />;
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
 	},
-	// Version with NO wrapper `div` element.
-	{
-		attributes: {
-			queryId: {
-				type: 'number',
+	supports: {
+		html: false,
+	},
+	migrate( attributes ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		return {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+};
+
+// Version with `categoryIds and tagIds`.
+const v2 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				categoryIds: [],
+				tagIds: [],
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
 			},
-			query: {
-				type: 'object',
-				default: {
-					perPage: null,
-					pages: 0,
-					offset: 0,
-					postType: 'post',
-					categoryIds: [],
-					tagIds: [],
-					order: 'desc',
-					orderBy: 'date',
-					author: '',
-					search: '',
-					exclude: [],
-					sticky: '',
-					inherit: true,
-				},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
 			},
-			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		__experimentalLayout: true,
+	},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		return migrateColors( withTaxQuery, innerBlocks );
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+// Version with color support prior to moving it to the PostTemplate block.
+const v3 = {
+	attributes: {
+		queryId: {
+			type: 'number',
+		},
+		query: {
+			type: 'object',
+			default: {
+				perPage: null,
+				pages: 0,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				exclude: [],
+				sticky: '',
+				inherit: true,
+				taxQuery: null,
+				parents: [],
 			},
 		},
-		supports: {
-			html: false,
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		namespace: {
+			type: 'string',
 		},
-		save() {
-			return <InnerBlocks.Content />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		__experimentalLayout: true,
+	},
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link
+		);
 	},
-];
+	migrate: migrateColors,
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;

package/src/query/edit/inspector-controls/index.js

@@ -141,6 +141,7 @@ export default function QueryInspectorControls( {
 						{ showColumnsControl && (
 							<>
 								<RangeControl
+									__nextHasNoMarginBottom
 									label={ __( 'Columns' ) }
 									value={ displayLayout.columns }
 									onChange={ ( value ) =>

package/src/query/edit/query-placeholder.js

@@ -104,20 +104,8 @@ function QueryVariationPicker( {
 	icon,
 	label,
 } ) {
-	const { defaultVariation, scopeVariations } = useSelect(
-		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			return {
-				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				scopeVariations: getBlockVariations( name, 'block' ),
-			};
-		},
+	const variations = useSelect(
+		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
@@ -127,8 +115,8 @@ function QueryVariationPicker( {
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }
-				variations={ scopeVariations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
+				variations={ variations }
+				onSelect={ ( nextVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( {
 							...nextVariation.attributes,

package/src/query/editor.scss

@@ -3,7 +3,7 @@
 }
 
 .wp-block-query__create-new-link {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 }
 
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {

package/src/query-pagination/style.scss

@@ -18,7 +18,7 @@ $pagination-margin: 0.5em;
 	// which is important when it's the only block displayed
 	// and the block has a "space-between" justification.
 	&.is-content-justification-space-between {
-		> .wp-block-query-pagination-next:last-child {
+		> .wp-block-query-pagination-next:last-of-type {
 			margin-inline-start: auto;
 		}
 		> .wp-block-query-pagination-previous:first-child {

package/src/read-more/index.php

@@ -19,15 +19,22 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 	}
 
 	$post_ID            = $block->context['postId'];
+	$post_title         = get_the_title( $post_ID );
+	$screen_reader_text = sprintf(
+		/* translators: %s is either the post title or post ID to describe the link for screen readers. */
+		__( ': %s' ),
+		'' !== $post_title ? $post_title : __( 'untitled post ' ) . $post_ID
+	);
 	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
 	$more_text          = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
 	return sprintf(
-		'<a %1s href="%2s" target="%3s">%4s</a>',
+		'<a %1s href="%2s" target="%3s">%4s<span class="screen-reader-text">%5s</span></a>',
 		$wrapper_attributes,
 		get_the_permalink( $post_ID ),
 		esc_attr( $attributes['linkTarget'] ),
-		$more_text
+		$more_text,
+		$screen_reader_text
 	);
 }