@wordpress/block-library 8.17.1 → 8.18.0

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

@@ -17,7 +17,8 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -40,8 +41,8 @@ import {
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout } = props;
-	const { query, displayLayout } = attributes;
+	const { attributes, setQuery, setDisplayLayout, setAttributes } = props;
+	const { query, displayLayout, enhancedPagination } = attributes;
 	const {
 		order,
 		orderBy,
@@ -123,6 +124,18 @@ export default function QueryInspectorControls( props ) {
 		isControlAllowed( allowedControls, 'parents' ) &&
 		isPostTypeHierarchical;
 
+	const enhancedPaginationNotice = __(
+		'Enhanced Pagination might cause interactive blocks within the Post Template to stop working. Disable it if you experience any issues.'
+	);
+
+	const isFirstRender = useRef( true ); // Don't speak on first render.
+	useEffect( () => {
+		if ( ! isFirstRender.current && enhancedPagination ) {
+			speak( enhancedPaginationNotice );
+		}
+		isFirstRender.current = false;
+	}, [ enhancedPagination, enhancedPaginationNotice ] );
+
 	const showFiltersPanel =
 		showTaxControl ||
 		showAuthorControl ||
@@ -280,6 +293,36 @@ export default function QueryInspectorControls( props ) {
 					</ToolsPanel>
 				</InspectorControls>
 			) }
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'User Experience' ) }
+					initialOpen={ false }
+				>
+					<ToggleControl
+						label={ __( 'Enhanced pagination' ) }
+						help={ __(
+							"Don't refresh the page when paginating to another page."
+						) }
+						checked={ !! enhancedPagination }
+						onChange={ ( value ) =>
+							setAttributes( {
+								enhancedPagination: !! value,
+							} )
+						}
+					/>
+					{ enhancedPagination && (
+						<div>
+							<Notice
+								spokenMessage={ null }
+								status="warning"
+								isDismissible={ false }
+							>
+								{ enhancedPaginationNotice }
+							</Notice>
+						</div>
+					) }
+				</PanelBody>
+			</InspectorControls>
 		</>
 	);
 }

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

@@ -109,6 +109,7 @@ export default function QueryContent( {
 				attributes={ attributes }
 				setQuery={ updateQuery }
 				setDisplayLayout={ updateDisplayLayout }
+				setAttributes={ setAttributes }
 			/>
 			<BlockControls>
 				<QueryToolbar

package/src/query/index.php

@@ -5,12 +5,105 @@
  * @package WordPress
  */
 
+/**
+ * Modifies the static `core/query` block on the server.
+ *
+ * @since X.X.X
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ * @param string $block      Block instance.
+ *
+ * @return string Returns the modified output of the query block.
+ */
+function render_block_core_query( $attributes, $content, $block ) {
+	if ( $attributes['enhancedPagination'] ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag() ) {
+			// Add the necessary directives.
+			$p->set_attribute( 'data-wp-interactive', true );
+			$p->set_attribute( 'data-wp-navigation-id', 'query-' . $attributes['queryId'] );
+			$p->set_attribute(
+				'data-wp-context',
+				wp_json_encode( array( 'core' => array( 'query' => (object) array() ) ) )
+			);
+			$content = $p->get_updated_html();
+
+			// Mark the block as interactive.
+			$block->block_type->supports['interactivity'] = true;
+
+			// Add a div to announce messages using `aria-live`.
+			$last_div_position = strripos( $content, '</div>' );
+			$content           = substr_replace(
+				$content,
+				'<div
+					class="wp-block-query__enhanced-pagination-navigation-announce"
+					aria-live="polite"
+					data-wp-text="context.core.query.message"
+				></div>
+				<div
+					class="wp-block-query__enhanced-pagination-animation"
+					data-wp-class--start-animation="selectors.core.query.startAnimation"
+					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
+				></div>',
+				$last_div_position,
+				0
+			);
+
+			// Use state to send translated strings.
+			wp_store(
+				array(
+					'state' => array(
+						'core' => array(
+							'query' => array(
+								'loadingText' => __( 'Loading page, please wait.' ),
+								'loadedText'  => __( 'Page Loaded.' ),
+							),
+						),
+					),
+				)
+			);
+		}
+	}
+
+	$view_asset = 'wp-block-query-view';
+	if ( ! wp_script_is( $view_asset ) ) {
+		$script_handles = $block->block_type->view_script_handles;
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $attributes['enhancedPagination'] && in_array( $view_asset, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $attributes['enhancedPagination'] && ! in_array( $view_asset, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+		}
+	}
+
+	$style_asset = 'wp-block-query';
+	if ( ! wp_style_is( $style_asset ) ) {
+		$style_handles = $block->block_type->style_handles;
+		// If the styles are not needed, and they are still in the `style_handles`, remove them.
+		if ( ! $attributes['enhancedPagination'] && in_array( $style_asset, $style_handles, true ) ) {
+			$block->block_type->style_handles = array_diff( $style_handles, array( $style_asset ) );
+		}
+		// If the styles are needed, but they were previously removed, add them again.
+		if ( $attributes['enhancedPagination'] && ! in_array( $style_asset, $style_handles, true ) ) {
+			$block->block_type->style_handles = array_merge( $style_handles, array( $style_asset ) );
+		}
+	}
+
+	return $content;
+}
+
 /**
  * Registers the `core/query` block on the server.
  */
 function register_block_core_query() {
 	register_block_type_from_metadata(
-		__DIR__ . '/query'
+		__DIR__ . '/query',
+		array(
+			'render_callback' => 'render_block_core_query',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_query' );

package/src/query/style.scss

@@ -0,0 +1,63 @@
+.wp-block-query__enhanced-pagination-animation {
+	position: fixed;
+	top: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+	width: 100vw;
+	max-width: 100vw !important;
+	height: 4px;
+	background-color: var(--wp--preset--color--primary, #000);
+	opacity: 0;
+
+	&.start-animation {
+		animation:
+			wp-block-query__enhanced-pagination-start-animation
+			30s
+			cubic-bezier(0, 1, 0, 1)
+			infinite;
+	}
+
+	&.finish-animation {
+		animation:
+			wp-block-query__enhanced-pagination-finish-animation
+			300ms
+			ease-in;
+	}
+}
+
+@keyframes wp-block-query__enhanced-pagination-start-animation {
+	0% {
+		transform: scaleX(0);
+		transform-origin: 0% 0%;
+		opacity: 1;
+	}
+	100% {
+		transform: scaleX(1);
+		transform-origin: 0% 0%;
+		opacity: 1;
+	}
+}
+
+@keyframes wp-block-query__enhanced-pagination-finish-animation {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+.wp-block-query__enhanced-pagination-navigation-announce {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	border: 0;
+}

package/src/query/view.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, prefetch } from '@wordpress/interactivity';
+
+const isValidLink = ( ref ) =>
+	ref &&
+	ref instanceof window.HTMLAnchorElement &&
+	ref.href &&
+	( ! ref.target || ref.target === '_self' ) &&
+	ref.origin === window.location.origin;
+
+const isValidEvent = ( event ) =>
+	event.button === 0 && // left clicks only
+	! event.metaKey && // open in new tab (mac)
+	! event.ctrlKey && // open in new tab (windows)
+	! event.altKey && // download
+	! event.shiftKey &&
+	! event.defaultPrevented;
+
+store( {
+	selectors: {
+		core: {
+			query: {
+				startAnimation: ( { context } ) =>
+					context.core.query.animation === 'start',
+				finishAnimation: ( { context } ) =>
+					context.core.query.animation === 'finish',
+			},
+		},
+	},
+	actions: {
+		core: {
+			query: {
+				navigate: async ( { event, ref, context, state } ) => {
+					if ( isValidLink( ref ) && isValidEvent( event ) ) {
+						event.preventDefault();
+
+						const id = ref.closest( '[data-wp-navigation-id]' )
+							.dataset.wpNavigationId;
+
+						// Don't announce the navigation immediately, wait 300 ms.
+						const timeout = setTimeout( () => {
+							context.core.query.message =
+								state.core.query.loadingText;
+							context.core.query.animation = 'start';
+						}, 300 );
+
+						await navigate( ref.href );
+
+						// Dismiss loading message if it hasn't been added yet.
+						clearTimeout( timeout );
+
+						// Announce that the page has been loaded. If the message is the
+						// same, we use a no-break space similar to the @wordpress/a11y
+						// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+						context.core.query.message =
+							state.core.query.loadedText +
+							( context.core.query.message ===
+							state.core.query.loadedText
+								? '\u00A0'
+								: '' );
+
+						context.core.query.animation = 'finish';
+
+						// Focus the first anchor of the Query block.
+						document
+							.querySelector(
+								`[data-wp-navigation-id=${ id }] a[href]`
+							)
+							?.focus();
+					}
+				},
+				prefetch: async ( { ref } ) => {
+					if ( isValidLink( ref ) ) {
+						await prefetch( ref.href );
+					}
+				},
+			},
+		},
+	},
+} );

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

@@ -32,14 +32,10 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		$query      = new WP_Query( $query_args );
 	}
 
-	if ( $query->have_posts() ) {
+	if ( $query->post_count > 0 ) {
 		return '';
 	}
 
-	if ( ! $use_global_query ) {
-		wp_reset_postdata();
-	}
-
 	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	return sprintf(

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

@@ -12,7 +12,13 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
+	"usesContext": [
+		"queryId",
+		"query",
+		"paginationArrow",
+		"showLabel",
+		"enhancedPagination"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -15,9 +15,10 @@
  * @return string Returns the next posts link for the query pagination.
  */
 function render_block_core_query_pagination_next( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
@@ -61,6 +62,22 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		}
 		wp_reset_postdata(); // Restore original Post Data.
 	}
+
+	if ( $enhanced_pagination ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag(
+			array(
+				'tag_name'   => 'a',
+				'class_name' => 'wp-block-query-pagination-next',
+			)
+		) ) {
+			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
+			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
+			$content = $p->get_updated_html();
+		}
+	}
+
 	return $content;
 }
 

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

@@ -7,7 +7,13 @@
 	"parent": [ "core/query-pagination" ],
 	"description": "Displays a list of page numbers for pagination",
 	"textdomain": "default",
-	"usesContext": [ "queryId", "query" ],
+	"attributes": {
+		"midSize": {
+			"type": "number",
+			"default": 2
+		}
+	},
+	"usesContext": [ "queryId", "query", "enhancedPagination" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -1,25 +1,73 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, RangeControl } from '@wordpress/components';
 
 const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
-	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+	<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
+		{ content }
+	</Tag>
 );
 
-const previewPaginationNumbers = () => (
-	<>
-		{ createPaginationItem( 1 ) }
-		{ createPaginationItem( 2 ) }
-		{ createPaginationItem( 3, 'span', 'current' ) }
-		{ createPaginationItem( 4 ) }
-		{ createPaginationItem( 5 ) }
-		{ createPaginationItem( '...', 'span', 'dots' ) }
-		{ createPaginationItem( 8 ) }
-	</>
-);
+const previewPaginationNumbers = ( midSize ) => {
+	const paginationItems = [];
+
+	// First set of pagination items.
+	for ( let i = 1; i <= midSize; i++ ) {
+		paginationItems.push( createPaginationItem( i ) );
+	}
+
+	// Current pagination item.
+	paginationItems.push(
+		createPaginationItem( midSize + 1, 'span', 'current' )
+	);
+
+	// Second set of pagination items.
+	for ( let i = 1; i <= midSize; i++ ) {
+		paginationItems.push( createPaginationItem( midSize + 1 + i ) );
+	}
+
+	// Dots.
+	paginationItems.push( createPaginationItem( '...', 'span', 'dots' ) );
+
+	// Last pagination item.
+	paginationItems.push( createPaginationItem( midSize * 2 + 3 ) );
+
+	return <>{ paginationItems }</>;
+};
 
-export default function QueryPaginationNumbersEdit() {
-	const paginationNumbers = previewPaginationNumbers();
-	return <div { ...useBlockProps() }>{ paginationNumbers }</div>;
+export default function QueryPaginationNumbersEdit( {
+	attributes,
+	setAttributes,
+} ) {
+	const { midSize } = attributes;
+	const paginationNumbers = previewPaginationNumbers(
+		parseInt( midSize, 10 )
+	);
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<RangeControl
+						label={ __( 'Number of links' ) }
+						help={ __(
+							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
+						) }
+						value={ midSize }
+						onChange={ ( value ) => {
+							setAttributes( {
+								midSize: parseInt( value, 10 ),
+							} );
+						} }
+						min={ 0 }
+						max={ 5 }
+						withInputField={ false }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...useBlockProps() }>{ paginationNumbers }</div>
+		</>
+	);
 }

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

@@ -15,13 +15,15 @@
  * @return string Returns the pagination numbers for the Query.
  */
 function render_block_core_query_pagination_numbers( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$content            = '';
 	global $wp_query;
+	$mid_size = isset( $block->attributes['midSize'] ) ? (int) $block->attributes['midSize'] : null;
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
 		// Take into account if we have set a bigger `max page`
 		// than what the query has.
@@ -30,7 +32,10 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 			'prev_next' => false,
 			'total'     => $total,
 		);
-		$content       = paginate_links( $paginate_args );
+		if ( null !== $mid_size ) {
+			$paginate_args['mid_size'] = $mid_size;
+		}
+		$content = paginate_links( $paginate_args );
 	} else {
 		$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
 		// `paginate_links` works with the global $wp_query, so we have to
@@ -45,6 +50,9 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 			'total'     => $total,
 			'prev_next' => false,
 		);
+		if ( null !== $mid_size ) {
+			$paginate_args['mid_size'] = $mid_size;
+		}
 		if ( 1 !== $page ) {
 			/**
 			 * `paginate_links` doesn't use the provided `format` when the page is `1`.
@@ -77,9 +85,24 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 		wp_reset_postdata(); // Restore original Post Data.
 		$wp_query = $prev_wp_query;
 	}
+
 	if ( empty( $content ) ) {
 		return '';
 	}
+
+	if ( $enhanced_pagination ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		while ( $p->next_tag(
+			array(
+				'tag_name'   => 'a',
+				'class_name' => 'page-numbers',
+			)
+		) ) {
+			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
+		}
+		$content = $p->get_updated_html();
+	}
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,

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

@@ -12,7 +12,13 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
+	"usesContext": [
+		"queryId",
+		"query",
+		"paginationArrow",
+		"showLabel",
+		"enhancedPagination"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -15,8 +15,9 @@
  * @return string Returns the previous posts link for the query.
  */
 function render_block_core_query_pagination_previous( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
@@ -49,6 +50,22 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 			$label
 		);
 	}
+
+	if ( $enhanced_pagination ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag(
+			array(
+				'tag_name'   => 'a',
+				'class_name' => 'wp-block-query-pagination-previous',
+			)
+		) ) {
+			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
+			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
+			$content = $p->get_updated_html();
+		}
+	}
+
 	return $content;
 }
 

package/src/search/edit.js

@@ -52,7 +52,7 @@ import {
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
 	MIN_WIDTH,
-	MIN_WIDTH_UNIT,
+	isPercentageUnit,
 } from './utils.js';
 
 // Used to calculate border radius adjustment to avoid "fat" corners when
@@ -405,7 +405,13 @@ export default function SearchEdit( {
 					>
 						<UnitControl
 							id={ unitControlInputId }
-							min={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` }
+							min={
+								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
+							}
+							max={
+								isPercentageUnit( widthUnit ) ? 100 : undefined
+							}
+							step={ 1 }
 							onChange={ ( newWidth ) => {
 								const filteredWidth =
 									widthUnit === '%' &&