diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js index 04423116ac92e..94c4b13b09143 100644 --- 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 index 042c9f1e75930..64b4f5d96eb38 100644 --- 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 && ( - { enhancedPaginationNotice } + { __( + "Enhanced pagination doesn't support the following blocks:" + ) } + + { __( + 'If you want to enable it, you have to remove all unsupported blocks first.' + ) } ) } diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index dd68ee38af916..322c8f4c1453f 100644 --- 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 ]