Query Loop: Disallow "enhanced pagination" with core blocks that may contain third-party blocks (#55539)

DAreRodz · SiobhyB · commit f2dd6de59ecd · 2023-10-27T14:17:41.000+01:00
* Update useContainsThirdPartyBlocks and texts

* Improve texts a bit

* Show the list of unsupported blocks

* Use the BlockTitle component instead

* Simplify modal text
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,10 +12,10 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContainsThirdPartyBlocks } from '../utils';
+import { useUnsupportedBlockList } from '../utils';
 
 const disableEnhancedPaginationDescription = __(
-	'Plugin blocks are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.'
+	'You have added unsupported blocks. For the enhanced pagination to work, remove them, then re-enable "Enhanced pagination" in the Query Block settings.'
 );
 
 const modalDescriptionId =
@@ -28,11 +28,11 @@ export default function EnhancedPaginationModal( {
 } ) {
 	const [ isOpen, setOpen ] = useState( false );
 
-	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+	const unsupported = useUnsupportedBlockList( clientId );
 
 	useEffect( () => {
-		setOpen( containsThirdPartyBlocks && enhancedPagination );
-	}, [ containsThirdPartyBlocks, enhancedPagination, setOpen ] );
+		setOpen( !! unsupported.length && enhancedPagination );
+	}, [ unsupported.length, enhancedPagination, setOpen ] );
 
 	return (
 		isOpen && (
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
@@ -3,22 +3,19 @@
  */
 import { ToggleControl, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { BlockTitle } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useContainsThirdPartyBlocks } from '../../utils';
+import { useUnsupportedBlockList } from '../../utils';
 
 export default function EnhancedPaginationControl( {
 	enhancedPagination,
 	setAttributes,
 	clientId,
 } ) {
-	const enhancedPaginationNotice = __(
-		"Enhanced pagination doesn't support plugin blocks yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop."
-	);
-
-	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+	const unsupported = useUnsupportedBlockList( clientId );
 
 	return (
 		<>
@@ -28,20 +25,32 @@ export default function EnhancedPaginationControl( {
 					'Browsing between pages won’t require a full page reload.'
 				) }
 				checked={ !! enhancedPagination }
-				disabled={ containsThirdPartyBlocks }
+				disabled={ unsupported.length }
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: !! value,
 					} );
 				} }
 			/>
-			{ containsThirdPartyBlocks && (
+			{ !! unsupported.length && (
 				<Notice
 					status="warning"
 					isDismissible={ false }
 					className="wp-block-query__enhanced-pagination-notice"
 				>
-					{ enhancedPaginationNotice }
+					{ __(
+						"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/utils.js b/packages/block-library/src/query/utils.js
@@ -346,21 +346,28 @@ export const usePatterns = ( clientId, name ) => {
 };
 
 /**
- * Hook that returns whether the Query Loop with the given `clientId` contains
- * any third-party block.
+ * Hook that returns a list of unsupported blocks inside the Query Loop with the
+ * given `clientId`.
  *
  * @param {string} clientId The block's client ID.
- * @return {boolean} True if it contains third-party blocks.
+ * @return {string[]} List of block titles.
  */
-export const useContainsThirdPartyBlocks = ( clientId ) => {
+export const useUnsupportedBlockList = ( clientId ) => {
 	return useSelect(
 		( select ) => {
 			const { getClientIdsOfDescendants, getBlockName } =
 				select( blockEditorStore );
 
-			return getClientIdsOfDescendants( clientId ).some(
-				( descendantClientId ) =>
-					! getBlockName( descendantClientId ).startsWith( 'core/' )
+			return getClientIdsOfDescendants( clientId ).filter(
+				( descendantClientId ) => {
+					const blockName = getBlockName( descendantClientId );
+					return (
+						! blockName.startsWith( 'core/' ) ||
+						blockName === 'core/post-content' ||
+						blockName === 'core/template-part' ||
+						blockName === 'core/block'
+					);
+				}
 			);
 		},
 		[ clientId ]
