Cherry-picked commits for WordPress 6.4 RC3 v2 (#55736)

* Update label for lightbox editor UI (#55724) * Update label for lightbox editor UI * Change lightbox label in Global Styles * Require queryId for enhanced pagination. (#55720) * Change pattern category taxonomy public param to false (#55748) * Query block enhanced pagination: Detect inner plugin blocks during render (#55714) * Flag inner plugin blocks inside query loop * Improve PHP logic a little * Only disallow plugin blocks and post content * Get rid of global variables * Fix returned content from render callback * Handle composed query stacks * Disable navigation on the browser * Replace `count` with `empty` * Add PHPdocs and improve var naming * Lint PHP * Clarify docs a little * Move the disable check before preventDefault * Restore previous navigate logic * Set filter priorities back to 10 * Basic inspector warnings * Make render query filter static * Add stable modal logic * Switch back to ToggleControl * Auto remove filter when query stack is empty * Add first unit tests * Switch to inverse control * Add test case for nested queries * Prevent passing `null` to the Tag Processr * Get rid of explicit auto mode and notices * Test directives in the Pagination Previous block * Minor typos and improvements * Improve modal texts * Fix WPCS * Reorder teardowns * Reset the dirty flag after it's used * Prevent usage of post content block --------- Co-authored-by: David Arenas <[email protected]> * Reuse existing screen-reader-text CSS class. (#55309) --------- Co-authored-by: Artemio Morales <[email protected]> Co-authored-by: Peter Wilson <[email protected]> Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Luis Herranz <[email protected]> Co-authored-by: David Arenas <[email protected]> Co-authored-by: Andrea Fercia <[email protected]>
WordPress · Nov 1, 2023 · 60cfa82 · 60cfa82
1 parent 1150493
commit 60cfa82
Show file tree

Hide file tree

Showing 12 changed files with 459 additions and 94 deletions.
diff --git a/lib/compat/wordpress-6.4/block-patterns.php b/lib/compat/wordpress-6.4/block-patterns.php
@@ -16,7 +16,7 @@
  */
 function gutenberg_register_taxonomy_patterns() {
 	$args = array(
-		'public'             => true,
+		'public'             => false,
 		'publicly_queryable' => false,
 		'hierarchical'       => false,
 		'labels'             => array(

diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -54,13 +54,13 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on Click' ) }
+					label={ __( 'Expand on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault={ true }
 					panelId={ panelId }
 				>
 					<ToggleControl
-						label={ __( 'Expand on Click' ) }
+						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -548,14 +548,14 @@ export default function Image( {
 					{ showLightboxToggle && (
 						<ToolsPanelItem
 							hasValue={ () => !! lightbox }
-							label={ __( 'Expand on Click' ) }
+							label={ __( 'Expand on click' ) }
 							onDeselect={ () => {
 								setAttributes( { lightbox: undefined } );
 							} }
 							isShownByDefault={ true }
 						>
 							<ToggleControl
-								label={ __( 'Expand on Click' ) }
+								label={ __( 'Expand on click' ) }
 								checked={ lightboxChecked }
 								onChange={ ( newValue ) => {
 									setAttributes( {

diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php
@@ -63,7 +63,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		wp_reset_postdata(); // Restore original Post Data.
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php
@@ -51,7 +51,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		);
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -12,11 +12,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useUnsupportedBlockList } from '../utils';
-
-const disableEnhancedPaginationDescription = __(
-	'You have added unsupported blocks. For the enhanced pagination to work, remove them, then re-enable "Enhanced pagination" in the Query Block settings.'
-);
+import { useUnsupportedBlocks } from '../utils';
 
 const modalDescriptionId =
 	'wp-block-query-enhanced-pagination-modal__description';
@@ -27,35 +23,53 @@ export default function EnhancedPaginationModal( {
 	setAttributes,
 } ) {
 	const [ isOpen, setOpen ] = useState( false );
-
-	const unsupported = useUnsupportedBlockList( clientId );
+	const { hasBlocksFromPlugins, hasPostContentBlock, hasUnsupportedBlocks } =
+		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		setOpen( !! unsupported.length && enhancedPagination );
-	}, [ unsupported.length, enhancedPagination, setOpen ] );
+		if ( enhancedPagination && hasUnsupportedBlocks ) {
+			setAttributes( { enhancedPagination: false } );
+			setOpen( true );
+		}
+	}, [ enhancedPagination, hasUnsupportedBlocks, setAttributes ] );
+
+	const closeModal = () => {
+		setOpen( false );
+	};
+
+	let notice = __(
+		'If you still want to prevent full page reloads, remove that block, then disable "Force page reload" again in the Query Block settings.'
+	);
+	if ( hasBlocksFromPlugins ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when blocks from plugins are present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	} else if ( hasPostContentBlock ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when a Content block is present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	}
 
 	return (
 		isOpen && (
 			<Modal
-				title={ __( 'Enhanced pagination will be disabled' ) }
+				title={ __( 'Query block: Force page reload enabled' ) }
 				className="wp-block-query__enhanced-pagination-modal"
 				aria={ {
 					describedby: modalDescriptionId,
 				} }
 				isDismissible={ false }
-				shouldCloseOnEsc={ false }
-				shouldCloseOnClickOutside={ false }
+				onRequestClose={ closeModal }
 			>
 				<VStack alignment="right" spacing={ 5 }>
-					<span id={ modalDescriptionId }>
-						{ disableEnhancedPaginationDescription }
-					</span>
-					<Button
-						variant="primary"
-						onClick={ () => {
-							setAttributes( { enhancedPagination: false } );
-						} }
-					>
+					<span id={ modalDescriptionId }>{ notice }</span>
+					<Button variant="primary" onClick={ closeModal }>
 						{ __( 'OK' ) }
 					</Button>
 				</VStack>

diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -1,58 +1,45 @@
 /**
  * WordPress dependencies
  */
-import { ToggleControl, Notice } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { BlockTitle } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useUnsupportedBlockList } from '../../utils';
+import { useUnsupportedBlocks } from '../../utils';
 
 export default function EnhancedPaginationControl( {
 	enhancedPagination,
 	setAttributes,
 	clientId,
 } ) {
-	const unsupported = useUnsupportedBlockList( clientId );
+	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+
+	let help = __( 'Browsing between pages requires a full page reload.' );
+	if ( enhancedPagination ) {
+		help = __(
+			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
+		);
+	} else if ( hasUnsupportedBlocks ) {
+		help = __(
+			"Force page reload can't be disabled because there are non-compatible blocks inside the Query block."
+		);
+	}
 
 	return (
 		<>
 			<ToggleControl
-				label={ __( 'Enhanced pagination' ) }
-				help={ __(
-					'Browsing between pages won’t require a full page reload.'
-				) }
-				checked={ !! enhancedPagination }
-				disabled={ unsupported.length }
+				label={ __( 'Force page reload' ) }
+				help={ help }
+				checked={ ! enhancedPagination }
+				disabled={ hasUnsupportedBlocks }
 				onChange={ ( value ) => {
 					setAttributes( {
-						enhancedPagination: !! value,
+						enhancedPagination: ! value,
 					} );
 				} }
 			/>
-			{ !! unsupported.length && (
-				<Notice
-					status="warning"
-					isDismissible={ false }
-					className="wp-block-query__enhanced-pagination-notice"
-				>
-					{ __(
-						"Enhanced pagination doesn't support the following blocks:"
-					) }
-					<ul>
-						{ unsupported.map( ( id ) => (
-							<li key={ id }>
-								<BlockTitle clientId={ id } />
-							</li>
-						) ) }
-					</ul>
-					{ __(
-						'If you want to enable it, you have to remove all unsupported blocks first.'
-					) }
-				</Notice>
-			) }
 		</>
 	);
 }
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -10,14 +10,14 @@
  *
  * @since 6.4.0
  *
- * @param array  $attributes Block attributes.
- * @param string $content    Block default content.
- * @param string $block      Block instance.
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      The block instance.
  *
  * @return string Returns the modified output of the query block.
  */
 function render_block_core_query( $attributes, $content, $block ) {
-	if ( $attributes['enhancedPagination'] ) {
+	if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
 			// Add the necessary directives.
@@ -48,7 +48,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$content           = substr_replace(
 				$content,
 				'<div
-					class="wp-block-query__enhanced-pagination-navigation-announce"
+					class="wp-block-query__enhanced-pagination-navigation-announce screen-reader-text"
 					aria-live="polite"
 					data-wp-text="context.core.query.message"
 				></div>
@@ -67,11 +67,14 @@ class="wp-block-query__enhanced-pagination-animation"
 	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 ) ) {
+		if (
+			( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) )
+			&& 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 ) ) {
+		if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $view_asset, $script_handles, true ) ) {
 			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
 		}
 	}
@@ -80,11 +83,14 @@ class="wp-block-query__enhanced-pagination-animation"
 	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 ) ) {
+		if (
+			( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) )
+			&& 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 ) ) {
+		if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $style_asset, $style_handles, true ) ) {
 			$block->block_type->style_handles = array_merge( $style_handles, array( $style_asset ) );
 		}
 	}
@@ -123,3 +129,86 @@ function register_block_core_query() {
 	);
 }
 add_action( 'init', 'register_block_core_query' );
+
+/**
+ * Traverse the tree of blocks looking for any plugin block (i.e., a block from
+ * an installed plugin) inside a Query block with the enhanced pagination
+ * enabled. If at least one is found, the enhanced pagination is effectively
+ * disabled to prevent any potential incompatibilities.
+ *
+ * @since 6.4.0
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return string Returns the parsed block, unmodified.
+ */
+function block_core_query_disable_enhanced_pagination( $parsed_block ) {
+	static $enhanced_query_stack   = array();
+	static $dirty_enhanced_queries = array();
+	static $render_query_callback  = null;
+
+	$block_name = $parsed_block['blockName'];
+
+	if (
+		'core/query' === $block_name &&
+		isset( $parsed_block['attrs']['enhancedPagination'] ) &&
+		true === $parsed_block['attrs']['enhancedPagination'] &&
+		isset( $parsed_block['attrs']['queryId'] )
+	) {
+		$enhanced_query_stack[] = $parsed_block['attrs']['queryId'];
+
+		if ( ! isset( $render_query_callback ) ) {
+			/**
+			 * Filter that disables the enhanced pagination feature during block
+			 * rendering when a plugin block has been found inside. It does so
+			 * by adding an attribute called `data-wp-navigation-disabled` which
+			 * is later handled by the front-end logic.
+			 *
+			 * @param string   $content  The block content.
+			 * @param array    $block    The full block, including name and attributes.
+			 * @return string Returns the modified output of the query block.
+			 */
+			$render_query_callback = static function ( $content, $block ) use ( &$enhanced_query_stack, &$dirty_enhanced_queries, &$render_query_callback ) {
+				$has_enhanced_pagination =
+					isset( $block['attrs']['enhancedPagination'] ) &&
+					true === $block['attrs']['enhancedPagination'] &&
+					isset( $block['attrs']['queryId'] );
+
+				if ( ! $has_enhanced_pagination ) {
+					return $content;
+				}
+
+				if ( isset( $dirty_enhanced_queries[ $block['attrs']['queryId'] ] ) ) {
+					$p = new WP_HTML_Tag_Processor( $content );
+					if ( $p->next_tag() ) {
+						$p->set_attribute( 'data-wp-navigation-disabled', 'true' );
+					}
+					$content = $p->get_updated_html();
+					$dirty_enhanced_queries[ $block['attrs']['queryId'] ] = null;
+				}
+
+				array_pop( $enhanced_query_stack );
+
+				if ( empty( $enhanced_query_stack ) ) {
+					remove_filter( 'render_block_core/query', $render_query_callback );
+					$render_query_callback = null;
+				}
+
+				return $content;
+			};
+
+			add_filter( 'render_block_core/query', $render_query_callback, 10, 2 );
+		}
+	} elseif (
+		! empty( $enhanced_query_stack ) &&
+		isset( $block_name ) &&
+		( ! str_starts_with( $block_name, 'core/' ) || 'core/post-content' === $block_name )
+	) {
+		foreach ( $enhanced_query_stack as $query_id ) {
+			$dirty_enhanced_queries[ $query_id ] = true;
+		}
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_query_disable_enhanced_pagination', 10, 1 );
diff --git a/packages/block-library/src/query/style.scss b/packages/block-library/src/query/style.scss
@@ -50,14 +50,3 @@
 		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;
-}