@wordpress/block-library 6.0.25 → 6.1.0

package/src/post-template/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-template",
 	"title": "Post Template",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query" ],
 	"description": "Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more.",
 	"textdomain": "default",

package/src/post-template/edit.js

@@ -69,9 +69,7 @@ export default function PostTemplateEdit( {
 		query: {
 			perPage,
 			offset,
-			categoryIds = [],
 			postType,
-			tagIds = [],
 			order,
 			orderBy,
 			author,
@@ -79,6 +77,7 @@ export default function PostTemplateEdit( {
 			exclude,
 			sticky,
 			inherit,
+			taxQuery,
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
@@ -90,15 +89,37 @@ export default function PostTemplateEdit( {
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
-			const { getEntityRecords } = select( coreStore );
+			const { getEntityRecords, getTaxonomies } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
+			const taxonomies = getTaxonomies( {
+				type: postType,
+				per_page: -1,
+				context: 'view',
+			} );
 			const query = {
 				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
-				categories: categoryIds,
-				tags: tagIds,
 				order,
 				orderby: orderBy,
 			};
+			if ( taxQuery ) {
+				// We have to build the tax query for the REST API and use as
+				// keys the taxonomies `rest_base` with the `term ids` as values.
+				const builtTaxQuery = Object.entries( taxQuery ).reduce(
+					( accumulator, [ taxonomySlug, terms ] ) => {
+						const taxonomy = taxonomies?.find(
+							( { slug } ) => slug === taxonomySlug
+						);
+						if ( taxonomy?.rest_base ) {
+							accumulator[ taxonomy?.rest_base ] = terms;
+						}
+						return accumulator;
+					},
+					{}
+				);
+				if ( !! Object.keys( builtTaxQuery ).length ) {
+					Object.assign( query, builtTaxQuery );
+				}
+			}
 			if ( perPage ) {
 				query.per_page = perPage;
 			}
@@ -134,8 +155,6 @@ export default function PostTemplateEdit( {
 			perPage,
 			page,
 			offset,
-			categoryIds,
-			tagIds,
 			order,
 			orderBy,
 			clientId,
@@ -146,6 +165,7 @@ export default function PostTemplateEdit( {
 			sticky,
 			inherit,
 			templateSlug,
+			taxQuery,
 		]
 	);
 	const blockContexts = useMemo(

package/src/post-template/index.php

@@ -61,8 +61,8 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = esc_attr( implode( ' ', get_post_class( 'wp-block-post' ) ) );
-		$content      .= '<li class="' . $post_classes . '">' . $block_content . '</li>';
+		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();

package/src/post-template/style.scss

@@ -11,6 +11,11 @@
 	list-style: none;
 	padding: 0;
 
+	// Unset background colors that can be inherited from Global Styles with extra specificity.
+	&.wp-block-post-template {
+		background: none;
+	}
+
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;

package/src/post-terms/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-terms",
 	"title": "Post Terms",

package/src/post-terms/index.php

@@ -40,7 +40,7 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$block->context['postId'],
 		$attributes['term'],
 		"<div $wrapper_attributes>",
-		'<span class="wp-block-post-terms__separator">' . $separator . '</span>',
+		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		'</div>'
 	);
 }

package/src/post-title/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-title",
 	"title": "Post Title",

package/src/post-title/index.php

@@ -34,7 +34,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), esc_attr( $attributes['rel'] ), esc_html( $title ) );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/post-title/style.scss

@@ -1,3 +1,7 @@
-.wp-block-post-title a {
-	display: inline-block;
+.wp-block-post-title {
+	word-break: break-word;
+
+	a {
+		display: inline-block;
+	}
 }

package/src/preformatted/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/preformatted",
 	"title": "Preformatted",

package/src/preformatted/edit.native.js

@@ -12,7 +12,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import WebPreformattedEdit from './edit.js';
 import styles from './styles.scss';
 
-export function PreformattedEdit( props ) {
+export default function PreformattedEdit( props ) {
 	const { style } = props;
 
 	const textBaseStyle = usePreferredColorSchemeStyle(
@@ -28,10 +28,12 @@ export function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
+	const hasBaseColors =
+		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		style?.baseColors &&
+		hasBaseColors &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];
@@ -46,5 +48,3 @@ export function PreformattedEdit( props ) {
 		</View>
 	);
 }
-
-export default PreformattedEdit;

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -10,11 +10,33 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
     ]
   }
 >
-  <PreformattedEdit
-    getStylesFromColorScheme={[Function]}
-    setAttributes={[MockFunction]}
-    style={Object {}}
-  />
+  <View>
+    <TextInput
+      accessibilityLabel="Text input. Empty"
+      activeFormats={Array []}
+      blockType={
+        Object {
+          "tag": "pre",
+        }
+      }
+      disableEditingMenu={false}
+      fontFamily="serif"
+      fontSize={16}
+      isMultiline={false}
+      maxImagesWidth={200}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onPaste={[Function]}
+      onSelectionChange={[Function]}
+      placeholder="Write preformatted text…"
+      placeholderTextColor="gray"
+      triggerKeyCodes={Array []}
+      value=""
+    />
+  </View>
 </View>
 `;
 
@@ -28,15 +50,32 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
     ]
   }
 >
-  <PreformattedEdit
-    attributes={
-      Object {
-        "content": "Hello World!",
+  <View>
+    <TextInput
+      accessibilityLabel="Text input. <pre>Hello World!</pre>"
+      activeFormats={Array []}
+      blockType={
+        Object {
+          "tag": "pre",
+        }
       }
-    }
-    getStylesFromColorScheme={[Function]}
-    setAttributes={[MockFunction]}
-    style={Object {}}
-  />
+      disableEditingMenu={false}
+      fontFamily="serif"
+      fontSize={16}
+      isMultiline={false}
+      maxImagesWidth={200}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onPaste={[Function]}
+      onSelectionChange={[Function]}
+      placeholder="Write preformatted text…"
+      placeholderTextColor="gray"
+      triggerKeyCodes={Array []}
+      value="<pre>Hello World!</pre>"
+    />
+  </View>
 </View>
 `;

package/src/preformatted/test/edit.native.js

@@ -1,44 +1,45 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
-const shallowRenderer = new ShallowRenderer();
+import { render } from 'test/helpers';
 
 /**
  * Internal dependencies
  */
-import { PreformattedEdit } from '../edit';
+import PreformattedEdit from '../edit';
 
 describe( 'core/more/edit/native', () => {
 	it( 'renders without crashing', () => {
-		shallowRenderer.render(
+		const screen = render(
 			<PreformattedEdit
+				attributes={ {} }
 				setAttributes={ jest.fn() }
 				getStylesFromColorScheme={ jest.fn() }
 			/>
 		);
-		const element = shallowRenderer.getRenderOutput();
-		expect( element.type ).toBeDefined();
+
+		expect( screen.container ).toBeDefined();
 	} );
 
 	it( 'should match snapshot when content is empty', () => {
-		shallowRenderer.render(
+		const screen = render(
 			<PreformattedEdit
+				attributes={ {} }
 				setAttributes={ jest.fn() }
 				getStylesFromColorScheme={ ( styles1 ) => styles1 }
 			/>
 		);
-		expect( shallowRenderer.getRenderOutput() ).toMatchSnapshot();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
 	it( 'should match snapshot when content is not empty', () => {
-		shallowRenderer.render(
+		const screen = render(
 			<PreformattedEdit
 				attributes={ { content: 'Hello World!' } }
 				setAttributes={ jest.fn() }
 				getStylesFromColorScheme={ ( styles1 ) => styles1 }
 			/>
 		);
-		expect( shallowRenderer.getRenderOutput() ).toMatchSnapshot();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 } );

package/src/pullquote/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/pullquote",
 	"title": "Pullquote",
@@ -48,7 +49,13 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-pullquote-editor",

package/src/pullquote/style.scss

@@ -3,6 +3,7 @@
 	padding: 3em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
+	box-sizing: border-box;
 
 	p,
 	blockquote,

package/src/query/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query",
 	"title": "Query Loop",
@@ -16,15 +17,14 @@
 				"pages": 0,
 				"offset": 0,
 				"postType": "post",
-				"categoryIds": [],
-				"tagIds": [],
 				"order": "desc",
 				"orderBy": "date",
 				"author": "",
 				"search": "",
 				"exclude": [],
 				"sticky": "",
-				"inherit": true
+				"inherit": true,
+				"taxQuery": null
 			}
 		},
 		"tagName": {

package/src/query/deprecated.js

@@ -6,9 +6,85 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	useInnerBlocksProps,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+const migrateToTaxQuery = ( attributes ) => {
+	const { query } = attributes;
+	const newQuery = {
+		...omit( query, [ 'categoryIds', 'tagIds' ] ),
+	};
+	if ( query.categoryIds?.length || query.tagIds?.length ) {
+		newQuery.taxQuery = {
+			category: !! query.categoryIds?.length
+				? query.categoryIds
+				: undefined,
+			post_tag: !! query.tagIds?.length ? query.tagIds : undefined,
+		};
+	}
+	return {
+		...attributes,
+		query: newQuery,
+	};
+};
 
 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',
+			},
+			displayLayout: {
+				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: migrateToTaxQuery,
+		save( { attributes: { tagName: Tag = 'div' } } ) {
+			const blockProps = useBlockProps.save();
+			const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+			return <Tag { ...innerBlocksProps } />;
+		},
+	},
 	// Version with NO wrapper `div` element.
 	{
 		attributes: {
@@ -44,9 +120,10 @@ const deprecated = [
 			html: false,
 		},
 		migrate( attributes ) {
+			const withTaxQuery = migrateToTaxQuery( attributes );
 			return {
-				...omit( attributes, [ 'layout' ] ),
-				displayLayout: attributes.layout,
+				...omit( withTaxQuery, [ 'layout' ] ),
+				displayLayout: withTaxQuery.layout,
 			};
 		},
 		save() {

package/src/query/edit/index.js

@@ -21,7 +21,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import QueryToolbar from './query-toolbar';
-import QueryInspectorControls from './query-inspector-controls';
+import QueryInspectorControls from './inspector-controls';
 import QueryPlaceholder from './query-placeholder';
 import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 import { getFirstQueryClientIdFromBlocks } from '../utils';
@@ -65,7 +65,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
-	// would cause to overide previous wanted changes.
+	// would cause to override previous wanted changes.
 	useEffect( () => {
 		const newQuery = {};
 		if ( ! query.perPage && postsPerPage ) {
@@ -79,7 +79,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
-		if ( ! queryId ) {
+		if ( ! Number.isFinite( queryId ) ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { queryId: instanceId } );
 		}

package/src/query/edit/inspector-controls/author-control.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { getEntitiesInfo } from '../../utils';
+
+const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: -1,
+	_fields: 'id,name',
+	context: 'view',
+};
+
+function AuthorControl( { value, onChange } ) {
+	const authorsList = useSelect( ( select ) => {
+		const { getUsers } = select( coreStore );
+		return getUsers( AUTHORS_QUERY );
+	}, [] );
+
+	if ( ! authorsList ) {
+		return null;
+	}
+	const authorsInfo = getEntitiesInfo( authorsList );
+	/**
+	 * We need to normalize the value because the block operates on a
+	 * comma(`,`) separated string value and `FormTokenFiels` needs an
+	 * array.
+	 */
+	const normalizedValue = ! value ? [] : value.toString().split( ',' );
+	// Returns only the existing authors ids. This prevents the component
+	// from crashing in the editor, when non existing ids are provided.
+	const sanitizedValue = normalizedValue.reduce(
+		( accumulator, authorId ) => {
+			const author = authorsInfo.mapById[ authorId ];
+			if ( author ) {
+				accumulator.push( {
+					id: authorId,
+					value: author.name,
+				} );
+			}
+			return accumulator;
+		},
+		[]
+	);
+
+	const getIdByValue = ( entitiesMappedByName, authorValue ) => {
+		const id = authorValue?.id || entitiesMappedByName[ authorValue ]?.id;
+		if ( id ) return id;
+	};
+	const onAuthorChange = ( newValue ) => {
+		const ids = Array.from(
+			newValue.reduce( ( accumulator, author ) => {
+				// Verify that new values point to existing entities.
+				const id = getIdByValue( authorsInfo.mapByName, author );
+				if ( id ) accumulator.add( id );
+				return accumulator;
+			}, new Set() )
+		);
+		onChange( { author: ids.join( ',' ) } );
+	};
+	return (
+		<FormTokenField
+			label={ __( 'Authors' ) }
+			value={ sanitizedValue }
+			suggestions={ authorsInfo.names }
+			onChange={ onAuthorChange }
+		/>
+	);
+}
+
+export default AuthorControl;