@wordpress/block-library 8.18.0 → 8.19.0

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

@@ -17,8 +17,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
-import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
-import { speak } from '@wordpress/a11y';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,6 +27,7 @@ import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
+import EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
 import { unlock } from '../../../lock-unlock';
 import {
@@ -41,7 +41,8 @@ import {
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, setAttributes } = props;
+	const { attributes, setQuery, setDisplayLayout, setAttributes, clientId } =
+		props;
 	const { query, displayLayout, enhancedPagination } = attributes;
 	const {
 		order,
@@ -124,18 +125,6 @@ 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 ||
@@ -215,6 +204,11 @@ export default function QueryInspectorControls( props ) {
 								}
 							/>
 						) }
+						<EnhancedPaginationControl
+							enhancedPagination={ enhancedPagination }
+							setAttributes={ setAttributes }
+							clientId={ clientId }
+						/>
 					</PanelBody>
 				</InspectorControls>
 			) }
@@ -293,36 +287,6 @@ 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

@@ -20,6 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
+import EnhancedPaginationModal from './enhanced-pagination-modal';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -103,13 +104,20 @@ export default function QueryContent( {
 			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
 		),
 	};
+
 	return (
 		<>
+			<EnhancedPaginationModal
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				clientId={ clientId }
+			/>
 			<QueryInspectorControls
 				attributes={ attributes }
 				setQuery={ updateQuery }
 				setDisplayLayout={ updateDisplayLayout }
 				setAttributes={ setAttributes }
+				clientId={ clientId }
 			/>
 			<BlockControls>
 				<QueryToolbar

package/src/query/editor.scss

@@ -52,3 +52,13 @@
 		margin-bottom: $grid-unit-30;
 	}
 }
+
+.wp-block-query__enhanced-pagination-modal {
+	@include break-small() {
+		max-width: $break-mobile;
+	}
+}
+
+.wp-block-query__enhanced-pagination-notice {
+	margin: 0;
+}

package/src/query/index.php

@@ -8,7 +8,7 @@
 /**
  * Modifies the static `core/query` block on the server.
  *
- * @since X.X.X
+ * @since 6.4.0
  *
  * @param array  $attributes Block attributes.
  * @param string $content    Block default content.
@@ -23,9 +23,19 @@ function render_block_core_query( $attributes, $content, $block ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', true );
 			$p->set_attribute( 'data-wp-navigation-id', 'query-' . $attributes['queryId'] );
+			// Use context to send translated strings.
 			$p->set_attribute(
 				'data-wp-context',
-				wp_json_encode( array( 'core' => array( 'query' => (object) array() ) ) )
+				wp_json_encode(
+					array(
+						'core' => array(
+							'query' => array(
+								'loadingText' => __( 'Loading page, please wait.' ),
+								'loadedText'  => __( 'Page Loaded.' ),
+							),
+						),
+					)
+				)
 			);
 			$content = $p->get_updated_html();
 
@@ -49,20 +59,6 @@ function render_block_core_query( $attributes, $content, $block ) {
 				$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.' ),
-							),
-						),
-					),
-				)
-			);
 		}
 	}
 
@@ -95,6 +91,23 @@ function render_block_core_query( $attributes, $content, $block ) {
 	return $content;
 }
 
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_query_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-query-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-query-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-query-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_query_ensure_interactivity_dependency' );
+
 /**
  * Registers the `core/query` block on the server.
  */

package/src/query/style.scss

@@ -14,8 +14,8 @@
 		animation:
 			wp-block-query__enhanced-pagination-start-animation
 			30s
-			cubic-bezier(0, 1, 0, 1)
-			infinite;
+			cubic-bezier(0.03, 0.5, 0, 1)
+			forwards;
 	}
 
 	&.finish-animation {

package/src/query/utils.js

@@ -344,3 +344,25 @@ export const usePatterns = ( clientId, name ) => {
 		[ name, clientId ]
 	);
 };
+
+/**
+ * Hook that returns whether the Query Loop with the given `clientId` contains
+ * any third-party block.
+ *
+ * @param {string} clientId The block's client ID.
+ * @return {boolean} True if it contains third-party blocks.
+ */
+export const useContainsThirdPartyBlocks = ( clientId ) => {
+	return useSelect(
+		( select ) => {
+			const { getClientIdsOfDescendants, getBlockName } =
+				select( blockEditorStore );
+
+			return getClientIdsOfDescendants( clientId ).some(
+				( descendantClientId ) =>
+					! getBlockName( descendantClientId ).startsWith( 'core/' )
+			);
+		},
+		[ clientId ]
+	);
+};

package/src/query/view.js

@@ -32,7 +32,7 @@ store( {
 	actions: {
 		core: {
 			query: {
-				navigate: async ( { event, ref, context, state } ) => {
+				navigate: async ( { event, ref, context } ) => {
 					if ( isValidLink( ref ) && isValidEvent( event ) ) {
 						event.preventDefault();
 
@@ -42,9 +42,9 @@ store( {
 						// Don't announce the navigation immediately, wait 300 ms.
 						const timeout = setTimeout( () => {
 							context.core.query.message =
-								state.core.query.loadingText;
+								context.core.query.loadingText;
 							context.core.query.animation = 'start';
-						}, 300 );
+						}, 400 );
 
 						await navigate( ref.href );
 
@@ -55,9 +55,9 @@ store( {
 						// 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.loadedText +
 							( context.core.query.message ===
-							state.core.query.loadedText
+							context.core.query.loadedText
 								? '\u00A0'
 								: '' );
 

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

@@ -37,7 +37,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function () use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 		add_filter( 'next_posts_link_attributes', $filter_link_attributes );

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

@@ -35,7 +35,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function () use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 

package/src/reset.scss

@@ -7,7 +7,7 @@
 
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
-html :where(.editor-styles-wrapper) {
+:where(.editor-styles-wrapper) {
 	/**
 	* The following styles revert to the browser defaults overriding the WPAdmin styles.
 	* This is only needed while the block editor is not being loaded in an iframe.

package/src/search/block.json

@@ -62,6 +62,7 @@
 				"text": true
 			}
 		},
+		"interactivity": true,
 		"typography": {
 			"__experimentalSkipSerialization": true,
 			"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",

package/src/search/index.php

@@ -46,6 +46,9 @@ function render_block_core_search( $attributes, $content, $block ) {
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
+	// This variable is a constant and its value is always false at this moment.
+	// It is defined this way because some values depend on it, in case it changes in the future.
+	$open_by_default = 'false';
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
@@ -77,6 +80,9 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
+			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
+			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 			$input->set_attribute( 'aria-hidden', 'true' );
 			$input->set_attribute( 'tabindex', '-1' );
 		}
@@ -139,11 +145,16 @@ function render_block_core_search( $attributes, $content, $block ) {
 		if ( $button->next_tag() ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
+				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
+				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
+				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
+				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
+				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
-				$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
-				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
+				$button->set_attribute( 'type', 'button' );
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
@@ -160,11 +171,24 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
+	$form_directives      = '';
+	if ( $is_expandable_searchfield ) {
+		$aria_label_expanded  = __( 'Submit Search' );
+		$aria_label_collapsed = __( 'Expand search field' );
+		$form_directives      = '
+			data-wp-interactive
+			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" } } }\'
+			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
+			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
+			data-wp-on--focusout="actions.core.search.handleSearchFocusout"
+		';
+	}
 
 	return sprintf(
-		'<form role="search" method="get" action="%s" %s>%s</form>',
+		'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
+		$form_directives,
 		$label . $field_markup
 	);
 }
@@ -182,6 +206,23 @@ function register_block_core_search() {
 }
 add_action( 'init', 'register_block_core_search' );
 
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_search_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-search-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-search-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-search-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_search_ensure_interactivity_dependency' );
+
 /**
  * Builds the correct top level classnames for the 'core/search' block.
  *
@@ -242,7 +283,7 @@ function classnames_for_block_core_search( $attributes ) {
  * @return void
  */
 function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
-	$is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false );
+	$is_button_inside = isset( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition'];
 
 	$path = array( 'style', 'border', $property );