@wordpress/block-library 6.0.20 → 6.1.0

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;

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

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	TextControl,
+	SelectControl,
+	RangeControl,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import OrderControl from './order-control';
+import AuthorControl from './author-control';
+import TaxonomyControls from './taxonomy-controls';
+import { usePostTypes } from '../../utils';
+
+const stickyOptions = [
+	{ label: __( 'Include' ), value: '' },
+	{ label: __( 'Exclude' ), value: 'exclude' },
+	{ label: __( 'Only' ), value: 'only' },
+];
+
+export default function QueryInspectorControls( {
+	attributes: { query, displayLayout },
+	setQuery,
+	setDisplayLayout,
+} ) {
+	const {
+		order,
+		orderBy,
+		author: authorIds,
+		postType,
+		sticky,
+		inherit,
+		taxQuery,
+	} = query;
+	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
+	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	useEffect( () => {
+		setShowSticky( postType === 'post' );
+	}, [ postType ] );
+	const onPostTypeChange = ( newValue ) => {
+		const updateQuery = { postType: newValue };
+		// We need to dynamically update the `taxQuery` property,
+		// by removing any not supported taxonomy from the query.
+		const supportedTaxonomies = postTypesTaxonomiesMap[ newValue ];
+		const updatedTaxQuery = Object.entries( taxQuery || {} ).reduce(
+			( accumulator, [ taxonomySlug, terms ] ) => {
+				if ( supportedTaxonomies.includes( taxonomySlug ) ) {
+					accumulator[ taxonomySlug ] = terms;
+				}
+				return accumulator;
+			},
+			{}
+		);
+		updateQuery.taxQuery = !! Object.keys( updatedTaxQuery ).length
+			? updatedTaxQuery
+			: undefined;
+
+		if ( newValue !== 'post' ) {
+			updateQuery.sticky = '';
+		}
+		setQuery( updateQuery );
+	};
+	const [ querySearch, setQuerySearch ] = useState( query.search );
+	const onChangeDebounced = useCallback(
+		debounce( () => {
+			if ( query.search !== querySearch ) {
+				setQuery( { search: querySearch } );
+			}
+		}, 250 ),
+		[ querySearch, query.search ]
+	);
+	useEffect( () => {
+		onChangeDebounced();
+		return onChangeDebounced.cancel;
+	}, [ querySearch, onChangeDebounced ] );
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<ToggleControl
+					label={ __( 'Inherit query from template' ) }
+					help={ __(
+						'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
+					) }
+					checked={ !! inherit }
+					onChange={ ( value ) => setQuery( { inherit: !! value } ) }
+				/>
+				{ ! inherit && (
+					<SelectControl
+						options={ postTypesSelectOptions }
+						value={ postType }
+						label={ __( 'Post type' ) }
+						onChange={ onPostTypeChange }
+						help={ __(
+							'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+						) }
+					/>
+				) }
+				{ displayLayout?.type === 'flex' && (
+					<>
+						<RangeControl
+							label={ __( 'Columns' ) }
+							value={ displayLayout.columns }
+							onChange={ ( value ) =>
+								setDisplayLayout( { columns: value } )
+							}
+							min={ 2 }
+							max={ Math.max( 6, displayLayout.columns ) }
+						/>
+						{ displayLayout.columns > 6 && (
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'This column count exceeds the recommended amount and may cause visual breakage.'
+								) }
+							</Notice>
+						) }
+					</>
+				) }
+				{ ! inherit && (
+					<OrderControl
+						{ ...{ order, orderBy } }
+						onChange={ setQuery }
+					/>
+				) }
+				{ showSticky && (
+					<SelectControl
+						label={ __( 'Sticky posts' ) }
+						options={ stickyOptions }
+						value={ sticky }
+						onChange={ ( value ) => setQuery( { sticky: value } ) }
+						help={ __(
+							'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+						) }
+					/>
+				) }
+			</PanelBody>
+			{ ! inherit && (
+				<PanelBody title={ __( 'Filters' ) }>
+					<TaxonomyControls onChange={ setQuery } query={ query } />
+					<AuthorControl value={ authorIds } onChange={ setQuery } />
+					<TextControl
+						label={ __( 'Keyword' ) }
+						value={ querySearch }
+						onChange={ setQuerySearch }
+					/>
+				</PanelBody>
+			) }
+		</InspectorControls>
+	);
+}

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const orderOptions = [
+	{
+		label: __( 'Newest to oldest' ),
+		value: 'date/desc',
+	},
+	{
+		label: __( 'Oldest to newest' ),
+		value: 'date/asc',
+	},
+	{
+		/* translators: label for ordering posts by title in ascending order */
+		label: __( 'A → Z' ),
+		value: 'title/asc',
+	},
+	{
+		/* translators: label for ordering posts by title in descending order */
+		label: __( 'Z → A' ),
+		value: 'title/desc',
+	},
+];
+function OrderControl( { order, orderBy, onChange } ) {
+	return (
+		<SelectControl
+			label={ __( 'Order by' ) }
+			value={ `${ orderBy }/${ order }` }
+			options={ orderOptions }
+			onChange={ ( value ) => {
+				const [ newOrderBy, newOrder ] = value.split( '/' );
+				onChange( { order: newOrder, orderBy: newOrderBy } );
+			} }
+		/>
+	);
+}
+
+export default OrderControl;