@wordpress/block-library 7.9.0 → 7.12.0

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

@@ -13,6 +13,8 @@ import {
 	RangeControl,
 	ToggleControl,
 	Notice,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -26,7 +28,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
-import TaxonomyControls from './taxonomy-controls';
+import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import { usePostTypes } from '../../utils';
 
@@ -57,6 +59,7 @@ export default function QueryInspectorControls( {
 	} = query;
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const taxonomiesInfo = useTaxonomiesInfo( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
@@ -100,78 +103,139 @@ export default function QueryInspectorControls( {
 		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 }
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Inherit query from template' ) }
 						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.'
+							'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 } )
+						}
 					/>
-				) }
-				{ displayLayout?.type === 'flex' && (
-					<>
-						<RangeControl
-							label={ __( 'Columns' ) }
-							value={ displayLayout.columns }
-							onChange={ ( value ) =>
-								setDisplayLayout( { columns: value } )
-							}
-							min={ 2 }
-							max={ Math.max( 6, displayLayout.columns ) }
+					{ ! 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.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 && (
-					<StickyControl
-						value={ sticky }
-						onChange={ ( value ) => setQuery( { sticky: value } ) }
-					/>
-				) }
-			</PanelBody>
-			{ ! inherit && (
-				<PanelBody title={ __( 'Filters' ) }>
-					<TaxonomyControls onChange={ setQuery } query={ query } />
-					<AuthorControl value={ authorIds } onChange={ setQuery } />
-					<TextControl
-						label={ __( 'Keyword' ) }
-						value={ querySearch }
-						onChange={ setQuerySearch }
-					/>
-					{ isPostTypeHierarchical && (
-						<ParentControl
-							parents={ parents }
-							postType={ postType }
+					) }
+					{ 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 }
 						/>
 					) }
+					{ ! inherit && showSticky && (
+						<StickyControl
+							value={ sticky }
+							onChange={ ( value ) =>
+								setQuery( { sticky: value } )
+							}
+						/>
+					) }
 				</PanelBody>
+			</InspectorControls>
+			{ ! inherit && (
+				<InspectorControls>
+					<ToolsPanel
+						className="block-library-query-toolspanel__filters"
+						label={ __( 'Filters' ) }
+						resetAll={ () => {
+							setQuery( {
+								author: '',
+								parents: [],
+								search: '',
+								taxQuery: null,
+							} );
+							setQuerySearch( '' );
+						} }
+					>
+						{ !! taxonomiesInfo?.length && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						<ToolsPanelItem
+							hasValue={ () => !! authorIds }
+							label={ __( 'Authors' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								label={ __( 'Keyword' ) }
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+						{ isPostTypeHierarchical && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
 			) }
-		</InspectorControls>
+		</>
 	);
 }

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

@@ -33,8 +33,8 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	}
 };
 
-function TaxonomyControls( { onChange, query } ) {
-	const taxonomies = useTaxonomies( query.postType );
+export const useTaxonomiesInfo = ( postType ) => {
+	const taxonomies = useTaxonomies( postType );
 	const taxonomiesInfo = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -51,6 +51,11 @@ function TaxonomyControls( { onChange, query } ) {
 		},
 		[ taxonomies ]
 	);
+	return taxonomiesInfo;
+};
+
+export function TaxonomyControls( { onChange, query } ) {
+	const taxonomiesInfo = useTaxonomiesInfo( query.postType );
 	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
 		const taxonomyInfo = taxonomiesInfo.find(
 			( { slug } ) => slug === taxonomySlug
@@ -102,17 +107,19 @@ function TaxonomyControls( { onChange, query } ) {
 						return null;
 					}
 					return (
-						<FormTokenField
+						<div
 							key={ slug }
-							label={ name }
-							value={ getExistingTaxQueryValue( slug ) }
-							suggestions={ terms.names }
-							onChange={ onTermsChange( slug ) }
-						/>
+							className="block-library-query-inspector__taxonomy-control"
+						>
+							<FormTokenField
+								label={ name }
+								value={ getExistingTaxQueryValue( slug ) }
+								suggestions={ terms.names }
+								onChange={ onTermsChange( slug ) }
+							/>
+						</div>
 					);
 				} ) }
 		</>
 	);
 }
-
-export default TaxonomyControls;

package/src/query/editor.scss

@@ -20,8 +20,8 @@
 }
 
 .block-editor-query-pattern__selection-modal .components-modal__content {
-	overflow: hidden;
 	padding: 0;
+	margin-bottom: $header-height; // $header-height to accommodate bottom toolbar
 	&::before {
 		margin-bottom: 0;
 	}
@@ -43,3 +43,12 @@
 		max-height: none;
 	}
 }
+
+.block-library-query-toolspanel__filters {
+	.components-form-token-field__help {
+		margin-bottom: 0;
+	}
+	.block-library-query-inspector__taxonomy-control:not(:last-child) {
+		margin-bottom: $grid-unit-30;
+	}
+}

package/src/query/index.js

@@ -25,6 +25,6 @@ export const settings = {
 	deprecated,
 };
 
-// Importing this file includes side effects and is whitelisted
+// Importing this file includes side effects and is added
 // in block-library/package.json under `sideEffects`.
 addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );

package/src/query-no-results/edit.js

@@ -20,9 +20,6 @@ export default function QueryNoResultsEdit() {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
-	return (
-		<>
-			<div { ...innerBlocksProps } />
-		</>
-	);
+
+	return <div { ...innerBlocksProps } />;
 }

package/src/query-no-results/index.php

@@ -19,24 +19,26 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$query_args = build_query_vars_from_query_block( $block, $page );
+	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+
 	// Override the custom query with the global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
 	if ( $use_global_query ) {
 		global $wp_query;
-		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
-			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
-		}
+		$query = $wp_query;
+	} else {
+		$query_args = build_query_vars_from_query_block( $block, $page );
+		$query      = new WP_Query( $query_args );
 	}
-	$query = new WP_Query( $query_args );
 
 	if ( $query->have_posts() ) {
 		return '';
 	}
 
-	wp_reset_postdata();
+	if ( ! $use_global_query ) {
+		wp_reset_postdata();
+	}
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',

package/src/query-pagination/style.scss

@@ -13,6 +13,20 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+
+	// This moves the next link to the right side of the container,
+	// 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 {
+			margin-inline-start: auto;
+		}
+		> .wp-block-query-pagination-previous:first-child {
+			margin-inline-end: auto;
+		}
+	}
+
+
 	.wp-block-query-pagination-previous-arrow {
 		margin-right: 1ch;
 		display: inline-block; // Needed so that the transform works.

package/src/query-pagination-next/edit.js

@@ -35,6 +35,7 @@ export default function QueryPaginationNextEdit( {
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+					aria-hidden={ true }
 				>
 					{ displayArrow }
 				</span>

package/src/query-pagination-previous/edit.js

@@ -25,6 +25,7 @@ export default function QueryPaginationPreviousEdit( {
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` }
+					aria-hidden={ true }
 				>
 					{ displayArrow }
 				</span>

package/src/query-title/block.json

@@ -16,6 +16,10 @@
 		"level": {
 			"type": "number",
 			"default": 1
+		},
+		"showSearchTerm": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/query-title/edit.js

@@ -9,9 +9,11 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
+	InspectorControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,21 +21,19 @@ import { __ } from '@wordpress/i18n';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
-const SUPPORTED_TYPES = [ 'archive' ];
+const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign },
+	attributes: { type, level, textAlign, showSearchTerm },
 	setAttributes,
 } ) {
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-query-title__placeholder': type === 'archive',
 		} ),
 	} );
-	// The plan is to augment this block with more
-	// block variations like `Search Title`.
+
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
 		return (
 			<div { ...blockProps }>
@@ -48,6 +48,33 @@ export default function QueryTitleEdit( {
 			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
 		);
 	}
+
+	if ( type === 'search' ) {
+		titleElement = (
+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<ToggleControl
+							label={ __( 'Show search term in title' ) }
+							onChange={ () =>
+								setAttributes( {
+									showSearchTerm: ! showSearchTerm,
+								} )
+							}
+							checked={ showSearchTerm }
+						/>
+					</PanelBody>
+				</InspectorControls>
+
+				<TagName { ...blockProps }>
+					{ showSearchTerm
+						? __( 'Search results for: "search term"' )
+						: __( 'Search results' ) }
+				</TagName>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<BlockControls group="block">

package/src/query-title/index.php

@@ -17,13 +17,29 @@
 function render_block_core_query_title( $attributes ) {
 	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
 	$is_archive = is_archive();
-	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
+	$is_search  = is_search();
+	if ( ! $type ||
+		( 'archive' === $type && ! $is_archive ) ||
+		( 'search' === $type && ! $is_search )
+		) {
 		return '';
 	}
 	$title = '';
 	if ( $is_archive ) {
 		$title = get_the_archive_title();
 	}
+	if ( $is_search ) {
+		$title = __( 'Search results' );
+
+		if ( isset( $attributes['showSearchTerm'] ) && $attributes['showSearchTerm'] ) {
+			$title = sprintf(
+				/* translators: %s is the search term. */
+				__( 'Search results for: "%s"' ),
+				get_search_query()
+			);
+		}
+	}
+
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

package/src/query-title/variations.js

@@ -17,6 +17,19 @@ const variations = [
 		},
 		scope: [ 'inserter' ],
 	},
+	{
+		isDefault: false,
+		name: 'search-title',
+		title: __( 'Search Results Title' ),
+		description: __(
+			'Display the search results title based on the queried object.'
+		),
+		icon: title,
+		attributes: {
+			type: 'search',
+		},
+		scope: [ 'inserter' ],
+	},
 ];
 
 /**