@wordpress/block-library 6.0.25 → 6.1.0

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;

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

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { getEntitiesInfo, useTaxonomies } from '../../utils';
+import { MAX_FETCHED_TERMS } from '../../constants';
+
+// Helper function to get the term id based on user input in terms `FormTokenField`.
+const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
+	// First we check for exact match by `term.id` or case sensitive `term.name` match.
+	const termId = termValue?.id || termsMappedByName[ termValue ]?.id;
+	if ( termId ) return termId;
+	/**
+	 * Here we make an extra check for entered terms in a non case sensitive way,
+	 * to match user expectations, due to `FormTokenField` behaviour that shows
+	 * suggestions which are case insensitive.
+	 *
+	 * Although WP tries to discourage users to add terms with the same name (case insensitive),
+	 * it's still possible if you manually change the name, as long as the terms have different slugs.
+	 * In this edge case we always apply the first match from the terms list.
+	 */
+	const termValueLower = termValue.toLocaleLowerCase();
+	for ( const term in termsMappedByName ) {
+		if ( term.toLocaleLowerCase() === termValueLower ) {
+			return termsMappedByName[ term ].id;
+		}
+	}
+};
+
+function TaxonomyControls( { onChange, query } ) {
+	const taxonomies = useTaxonomies( query.postType );
+	const taxonomiesInfo = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const termsQuery = { per_page: MAX_FETCHED_TERMS };
+			const _taxonomiesInfo = taxonomies?.map( ( { slug, name } ) => {
+				const _terms = getEntityRecords( 'taxonomy', slug, termsQuery );
+				return {
+					slug,
+					name,
+					terms: getEntitiesInfo( _terms ),
+				};
+			} );
+			return _taxonomiesInfo;
+		},
+		[ taxonomies ]
+	);
+	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
+		const taxonomyInfo = taxonomiesInfo.find(
+			( { slug } ) => slug === taxonomySlug
+		);
+		if ( ! taxonomyInfo ) return;
+		const termIds = Array.from(
+			newTermValues.reduce( ( accumulator, termValue ) => {
+				const termId = getTermIdByTermValue(
+					taxonomyInfo.terms.mapByName,
+					termValue
+				);
+				if ( termId ) accumulator.add( termId );
+				return accumulator;
+			}, new Set() )
+		);
+		const newTaxQuery = {
+			...query.taxQuery,
+			[ taxonomySlug ]: termIds,
+		};
+		onChange( { taxQuery: newTaxQuery } );
+	};
+	// Returns only the existing term ids in proper format to be
+	// used in `FormTokenField`. This prevents the component from
+	// crashing in the editor, when non existing term ids were provided.
+	const getExistingTaxQueryValue = ( taxonomySlug ) => {
+		const taxonomyInfo = taxonomiesInfo.find(
+			( { slug } ) => slug === taxonomySlug
+		);
+		if ( ! taxonomyInfo ) return [];
+		return ( query.taxQuery?.[ taxonomySlug ] || [] ).reduce(
+			( accumulator, termId ) => {
+				const term = taxonomyInfo.terms.mapById[ termId ];
+				if ( term ) {
+					accumulator.push( {
+						id: termId,
+						value: term.name,
+					} );
+				}
+				return accumulator;
+			},
+			[]
+		);
+	};
+	return (
+		<>
+			{ !! taxonomiesInfo?.length &&
+				taxonomiesInfo.map( ( { slug, name, terms } ) => {
+					if ( ! terms?.names?.length ) {
+						return null;
+					}
+					return (
+						<FormTokenField
+							key={ slug }
+							label={ name }
+							value={ getExistingTaxQueryValue( slug ) }
+							suggestions={ terms.names }
+							onChange={ onTermsChange( slug ) }
+						/>
+					);
+				} ) }
+		</>
+	);
+}
+
+export default TaxonomyControls;

package/src/query/test/utils.js

@@ -2,15 +2,17 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getTermsInfo } from '../utils';
+import { getEntitiesInfo } from '../utils';
 
 describe( 'Query block utils', () => {
-	describe( 'getTermsInfo', () => {
+	describe( 'getEntitiesInfo', () => {
 		it( 'should return an empty object when no terms provided', () => {
-			expect( getTermsInfo() ).toEqual( { terms: undefined } );
+			expect( getEntitiesInfo() ).toEqual( {
+				terms: undefined,
+			} );
 		} );
 		it( 'should return proper terms info object', () => {
-			expect( getTermsInfo( terms ) ).toEqual(
+			expect( getEntitiesInfo( terms ) ).toEqual(
 				expect.objectContaining( {
 					mapById: expect.objectContaining( {
 						4: expect.objectContaining( { name: 'nba' } ),

package/src/query/utils.js

@@ -6,53 +6,43 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
- * WordPress term object from REST API.
- * Categories ref: https://developer.wordpress.org/rest-api/reference/categories/
- * Tags ref: https://developer.wordpress.org/rest-api/reference/tags/
- *
- * @typedef {Object} WPTerm
- * @property {number} id          Unique identifier for the term.
- * @property {number} count       Number of published posts for the term.
- * @property {string} description HTML description of the term.
- * @property {string} link        URL of the term.
- * @property {string} name        HTML title for the term.
- * @property {string} slug        An alphanumeric identifier for the term unique to its type.
- * @property {string} taxonomy    Type attribution for the term.
- * @property {Object} meta        Meta fields
- * @property {number} [parent]    The parent term ID.
+ * @typedef IHasNameAndId
+ * @property {string|number} id   The entity's id.
+ * @property {string}        name The entity's name.
  */
 
 /**
  * The object used in Query block that contains info and helper mappings
- * from an array of WPTerm.
+ * from an array of IHasNameAndId objects.
  *
- * @typedef {Object} QueryTermsInfo
- * @property {WPTerm[]}               terms     The array of terms.
- * @property {Object<string, WPTerm>} mapById   Object mapping with the term id as key and the term as value.
- * @property {Object<string, WPTerm>} mapByName Object mapping with the term name as key and the term as value.
- * @property {string[]}               names     Array with the terms' names.
+ * @typedef {Object} QueryEntitiesInfo
+ * @property {IHasNameAndId[]}               entities  The array of entities.
+ * @property {Object<string, IHasNameAndId>} mapById   Object mapping with the id as key and the entity as value.
+ * @property {Object<string, IHasNameAndId>} mapByName Object mapping with the name as key and the entity as value.
+ * @property {string[]}                      names     Array with the entities' names.
  */
 
 /**
- * Returns a helper object with mapping from WPTerms.
+ * Returns a helper object with mapping from Objects that implement
+ * the `IHasNameAndId` interface. The returned object is used for
+ * integration with `FormTokenField` component.
  *
- * @param {WPTerm[]} terms The terms to extract of helper object.
- * @return {QueryTermsInfo} The object with the terms information.
+ * @param {IHasNameAndId[]} entities The entities to extract of helper object.
+ * @return {QueryEntitiesInfo} The object with the entities information.
  */
-export const getTermsInfo = ( terms ) => {
-	const mapping = terms?.reduce(
-		( accumulator, term ) => {
+export const getEntitiesInfo = ( entities ) => {
+	const mapping = entities?.reduce(
+		( accumulator, entity ) => {
 			const { mapById, mapByName, names } = accumulator;
-			mapById[ term.id ] = term;
-			mapByName[ term.name ] = term;
-			names.push( term.name );
+			mapById[ entity.id ] = entity;
+			mapByName[ entity.name ] = entity;
+			names.push( entity.name );
 			return accumulator;
 		},
 		{ mapById: {}, mapByName: {}, names: [] }
 	);
-
 	return {
-		terms,
+		entities,
 		...mapping,
 	};
 };
@@ -65,16 +55,14 @@ export const getTermsInfo = ( terms ) => {
  * @return {Object} The helper object related to post types.
  */
 export const usePostTypes = () => {
-	const { postTypes } = useSelect( ( select ) => {
+	const postTypes = useSelect( ( select ) => {
 		const { getPostTypes } = select( coreStore );
 		const excludedPostTypes = [ 'attachment' ];
 		const filteredPostTypes = getPostTypes( { per_page: -1 } )?.filter(
 			( { viewable, slug } ) =>
 				viewable && ! excludedPostTypes.includes( slug )
 		);
-		return {
-			postTypes: filteredPostTypes,
-		};
+		return filteredPostTypes;
 	}, [] );
 	const postTypesTaxonomiesMap = useMemo( () => {
 		if ( ! postTypes?.length ) return;
@@ -94,6 +82,28 @@ export const usePostTypes = () => {
 	return { postTypesTaxonomiesMap, postTypesSelectOptions };
 };
 
+/**
+ * Hook that returns the taxonomies associated with a specific post type.
+ *
+ * @param {string} postType The post type from which to retrieve the associated taxonomies.
+ * @return {Object[]} An array of the associated taxonomies.
+ */
+export const useTaxonomies = ( postType ) => {
+	const taxonomies = useSelect(
+		( select ) => {
+			const { getTaxonomies } = select( coreStore );
+			const filteredTaxonomies = getTaxonomies( {
+				type: postType,
+				per_page: -1,
+				context: 'view',
+			} );
+			return filteredTaxonomies;
+		},
+		[ postType ]
+	);
+	return taxonomies;
+};
+
 /**
  * Recurses over a list of blocks and returns the first found
  * Query Loop block's clientId.

package/src/query/variations.js

@@ -20,8 +20,6 @@ const QUERY_DEFAULT_ATTRIBUTES = {
 		pages: 0,
 		offset: 0,
 		postType: 'post',
-		categoryIds: [],
-		tagIds: [],
 		order: 'desc',
 		orderBy: 'date',
 		author: '',
@@ -46,8 +44,6 @@ const variations = [
 				pages: 1,
 				offset: 0,
 				postType: 'post',
-				categoryIds: [],
-				tagIds: [],
 				order: 'desc',
 				orderBy: 'date',
 				author: '',

package/src/query-pagination/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination",
 	"title": "Pagination",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query" ],
 	"description": "Displays a paginated navigation to next/previous set of posts, when applicable.",
 	"textdomain": "default",

package/src/query-pagination/editor.scss

@@ -14,10 +14,6 @@ $pagination-margin: 0.5em;
 	}
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-	min-width: 230px;
-}
-
 .wp-block-query-pagination {
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,

package/src/query-pagination-next/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays the next posts page link.",
 	"textdomain": "default",

package/src/query-pagination-next/index.php

@@ -23,6 +23,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$default_label      = __( 'Next Page' );
 	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
+
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
@@ -50,7 +51,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 				'<a href="%1$s" %2$s>%3$s</a>',
 				esc_url( add_query_arg( $page_key, $page + 1 ) ),
 				$wrapper_attributes,
-				$label
+				esc_html( $label )
 			);
 		}
 		wp_reset_postdata(); // Restore original Post Data.

package/src/query-pagination-numbers/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays a list of page numbers for pagination",
 	"textdomain": "default",

package/src/query-pagination-previous/block.json

@@ -1,8 +1,9 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays the previous posts page link.",
 	"textdomain": "default",

package/src/query-pagination-previous/index.php

@@ -32,6 +32,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		$filter_link_attributes = function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
+
 		add_filter( 'previous_posts_link_attributes', $filter_link_attributes );
 		$content = get_previous_posts_link( $label );
 		remove_filter( 'previous_posts_link_attributes', $filter_link_attributes );
@@ -40,7 +41,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 			'<a href="%1$s" %2$s>%3$s</a>',
 			esc_url( add_query_arg( $page_key, $page - 1 ) ),
 			$wrapper_attributes,
-			$label
+			esc_html( $label )
 		);
 	}
 	return $content;

package/src/query-title/block.json

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

package/src/quote/block.json

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

package/src/rss/block.json

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

package/src/search/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/search",
 	"title": "Search",
@@ -48,7 +49,13 @@
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
-			"__experimentalSkipSerialization": true
+			"width": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true
+			}
 		},
 		"html": false
 	},

package/src/search/edit.js

@@ -103,6 +103,7 @@ export default function SearchEdit( {
 	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
 	const borderColor = style?.border?.color;
+	const borderWidth = style?.border?.width;
 	const borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
@@ -128,7 +129,6 @@ export default function SearchEdit( {
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
-			! isButtonPositionInside ? borderProps.className : undefined,
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
 				: undefined,
@@ -389,6 +389,7 @@ export default function SearchEdit( {
 	const getWrapperStyles = () => {
 		const styles = {
 			borderColor,
+			borderWidth: isButtonPositionInside ? borderWidth : undefined,
 		};
 
 		const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;

package/src/search/edit.native.js

@@ -78,7 +78,7 @@ export default function SearchEdit( {
 	 * properly creating accessibilityLabel text.
 	 */
 	useEffect( () => {
-		AccessibilityInfo.addEventListener(
+		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			handleScreenReaderToggled
 		);
@@ -90,10 +90,7 @@ export default function SearchEdit( {
 		);
 
 		return () => {
-			AccessibilityInfo.removeEventListener(
-				'screenReaderChanged',
-				handleScreenReaderToggled
-			);
+			a11yInfoChangeSubscription.remove();
 		};
 	}, [] );