From f7be85a535fb973590f1bebb854b124ebaf739c1 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 23 Oct 2023 10:09:08 +0200 Subject: [PATCH 1/5] Update useContainsThirdPartyBlocks and texts --- .../src/query/edit/enhanced-pagination-modal.js | 2 +- .../enhanced-pagination-control.js | 2 +- packages/block-library/src/query/utils.js | 13 ++++++++++--- 3 files changed, 12 insertions(+), 5 deletions(-) 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..f061df140310d 100644 --- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js +++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js @@ -15,7 +15,7 @@ import { useState, useEffect } from '@wordpress/element'; import { useContainsThirdPartyBlocks } 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.' + 'Plugin blocks and core blocks that may contain them are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.' ); const modalDescriptionId = 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..8a27c62bc4ebe 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 @@ -15,7 +15,7 @@ export default function EnhancedPaginationControl( { 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." + "Enhanced pagination doesn't support plugin blocks or blocks that may contain them yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop." ); const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId ); diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index dd68ee38af916..e19cdc7fc0e7e 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -347,7 +347,7 @@ export const usePatterns = ( clientId, name ) => { /** * Hook that returns whether the Query Loop with the given `clientId` contains - * any third-party block. + * any third-party block, or a block that could contain them. * * @param {string} clientId The block's client ID. * @return {boolean} True if it contains third-party blocks. @@ -359,8 +359,15 @@ export const useContainsThirdPartyBlocks = ( clientId ) => { select( blockEditorStore ); return getClientIdsOfDescendants( clientId ).some( - ( descendantClientId ) => - ! getBlockName( descendantClientId ).startsWith( 'core/' ) + ( descendantClientId ) => { + const blockName = getBlockName( descendantClientId ); + return ( + ! blockName.startsWith( 'core/' ) || + blockName === 'core/post-content' || + blockName === 'core/template-part' || + blockName === 'core/block' + ); + } ); }, [ clientId ] From 1a551f46fcdc4d5cf5b9c698131aea6fe7741322 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 23 Oct 2023 10:30:40 +0200 Subject: [PATCH 2/5] Improve texts a bit --- .../block-library/src/query/edit/enhanced-pagination-modal.js | 2 +- .../edit/inspector-controls/enhanced-pagination-control.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 f061df140310d..52a44d5f253e9 100644 --- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js +++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js @@ -15,7 +15,7 @@ import { useState, useEffect } from '@wordpress/element'; import { useContainsThirdPartyBlocks } from '../utils'; const disableEnhancedPaginationDescription = __( - 'Plugin blocks and core blocks that may contain them are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.' + 'Plugin blocks and core blocks that may contain them are not supported yet. For the enhanced pagination to work, remove the disallowed block, then re-enable "Enhanced pagination" in the Query Block settings.' ); const modalDescriptionId = 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 8a27c62bc4ebe..685ce7286dfbc 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 @@ -15,7 +15,7 @@ export default function EnhancedPaginationControl( { clientId, } ) { const enhancedPaginationNotice = __( - "Enhanced pagination doesn't support plugin blocks or blocks that may contain them yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop." + "Enhanced pagination doesn't support plugin blocks or blocks that may contain them yet. If you want to enable it, you have to remove all disallowed blocks from the Query Loop." ); const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId ); From 4ca8667da7f6d6a301f952ad189321fd81506a4a Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 23 Oct 2023 12:32:14 +0200 Subject: [PATCH 3/5] Show the list of unsupported blocks --- packages/block-editor/src/private-apis.js | 2 + .../query/edit/enhanced-pagination-modal.js | 10 ++-- .../enhanced-pagination-control.js | 15 ++++-- packages/block-library/src/query/utils.js | 53 +++++++++++++++---- 4 files changed, 59 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index fe16d791dc7c5..d3a8cd52d4e8f 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -25,6 +25,7 @@ import { import { usesContextKey } from './components/rich-text/format-edit'; import { ExperimentalBlockCanvas } from './components/block-canvas'; import { getDuotoneFilter } from './components/duotone/utils'; +import useBlockDisplayTitle from './components/block-title/use-block-display-title'; /** * Private @wordpress/block-editor APIs. @@ -53,4 +54,5 @@ lock( privateApis, { ReusableBlocksRenameHint, useReusableBlocksRenameHint, usesContextKey, + useBlockDisplayTitle, } ); 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 52a44d5f253e9..feee44df75eda 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 and core blocks that may contain them are not supported yet. For the enhanced pagination to work, remove the disallowed block, then re-enable "Enhanced pagination" in the Query Block settings.' + 'Plugin blocks and globally synced blocks are not supported yet. For the enhanced pagination to work, remove the unsupported blocks, 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 685ce7286dfbc..e378713d05787 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 @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useContainsThirdPartyBlocks } from '../../utils'; +import { useUnsupportedBlockList } from '../../utils'; export default function EnhancedPaginationControl( { enhancedPagination, @@ -15,10 +15,10 @@ export default function EnhancedPaginationControl( { clientId, } ) { const enhancedPaginationNotice = __( - "Enhanced pagination doesn't support plugin blocks or blocks that may contain them yet. If you want to enable it, you have to remove all disallowed blocks from the Query Loop." + "Enhanced pagination doesn't support plugin blocks or globally synced blocks yet. If you want to enable it, you have to remove all unsupported blocks from the Query Loop." ); - const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId ); + const unsupported = useUnsupportedBlockList( clientId ); return ( <> @@ -28,20 +28,25 @@ 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 } +
    + { unsupported.map( ( title ) => ( +
  • { title }
    • + ) ) } +
) } diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index e19cdc7fc0e7e..bab85827606ed 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -4,9 +4,23 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { + store as blockEditorStore, + privateApis as blockEditorPrivateApis, +} from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; -import { cloneBlock, store as blocksStore } from '@wordpress/blocks'; +import { + cloneBlock, + store as blocksStore, + getBlockType, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { unlock } from '../lock-unlock'; + +const { useBlockDisplayTitle } = unlock( blockEditorPrivateApis ); /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ @@ -346,20 +360,20 @@ export const usePatterns = ( clientId, name ) => { }; /** - * Hook that returns whether the Query Loop with the given `clientId` contains - * any third-party block, or a block that could contain them. + * 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 ) => { - return useSelect( +export const useUnsupportedBlockList = ( clientId ) => { + const unsupported = useSelect( ( select ) => { const { getClientIdsOfDescendants, getBlockName } = select( blockEditorStore ); - return getClientIdsOfDescendants( clientId ).some( - ( descendantClientId ) => { + return getClientIdsOfDescendants( clientId ) + .filter( ( descendantClientId ) => { const blockName = getBlockName( descendantClientId ); return ( ! blockName.startsWith( 'core/' ) || @@ -367,9 +381,26 @@ export const useContainsThirdPartyBlocks = ( clientId ) => { blockName === 'core/template-part' || blockName === 'core/block' ); - } - ); + } ) + .map( ( descendantClientId ) => ( { + title: getBlockType( getBlockName( descendantClientId ) ) + .title, + descendantClientId, + } ) ); }, [ clientId ] ); + + const titles = unsupported.map( ( { descendantClientId, title } ) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const displayTitle = useBlockDisplayTitle( { + clientId: descendantClientId, + } ); + + return title !== displayTitle + ? `${ displayTitle } (${ title })` + : title; + } ); + + return [ ...new Set( titles ).values() ]; }; From be244c3a919c49e862e014379c26d413c315bacb Mon Sep 17 00:00:00 2001 From: David Arenas Date: Tue, 24 Oct 2023 10:47:33 +0200 Subject: [PATCH 4/5] Use the BlockTitle component instead --- packages/block-editor/src/private-apis.js | 2 - .../enhanced-pagination-control.js | 18 +++++--- packages/block-library/src/query/utils.js | 45 +++---------------- 3 files changed, 18 insertions(+), 47 deletions(-) diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index d3a8cd52d4e8f..fe16d791dc7c5 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -25,7 +25,6 @@ import { import { usesContextKey } from './components/rich-text/format-edit'; import { ExperimentalBlockCanvas } from './components/block-canvas'; import { getDuotoneFilter } from './components/duotone/utils'; -import useBlockDisplayTitle from './components/block-title/use-block-display-title'; /** * Private @wordpress/block-editor APIs. @@ -54,5 +53,4 @@ lock( privateApis, { ReusableBlocksRenameHint, useReusableBlocksRenameHint, usesContextKey, - useBlockDisplayTitle, } ); 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 e378713d05787..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,6 +3,7 @@ */ import { ToggleControl, Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { BlockTitle } from '@wordpress/block-editor'; /** * Internal dependencies @@ -14,10 +15,6 @@ export default function EnhancedPaginationControl( { setAttributes, clientId, } ) { - const enhancedPaginationNotice = __( - "Enhanced pagination doesn't support plugin blocks or globally synced blocks yet. If you want to enable it, you have to remove all unsupported blocks from the Query Loop." - ); - const unsupported = useUnsupportedBlockList( clientId ); return ( @@ -41,12 +38,19 @@ export default function EnhancedPaginationControl( { isDismissible={ false } className="wp-block-query__enhanced-pagination-notice" > - { enhancedPaginationNotice } + { __( + "Enhanced pagination doesn't support the following blocks:" + ) }
    - { unsupported.map( ( title ) => ( -
  • { title }
    • + { unsupported.map( ( id ) => ( +
  • + +
    • ) ) }
+ { __( + '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 bab85827606ed..322c8f4c1453f 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -4,23 +4,9 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; -import { - store as blockEditorStore, - privateApis as blockEditorPrivateApis, -} from '@wordpress/block-editor'; +import { store as blockEditorStore } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; -import { - cloneBlock, - store as blocksStore, - getBlockType, -} from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import { unlock } from '../lock-unlock'; - -const { useBlockDisplayTitle } = unlock( blockEditorPrivateApis ); +import { cloneBlock, store as blocksStore } from '@wordpress/blocks'; /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ @@ -367,13 +353,13 @@ export const usePatterns = ( clientId, name ) => { * @return {string[]} List of block titles. */ export const useUnsupportedBlockList = ( clientId ) => { - const unsupported = useSelect( + return useSelect( ( select ) => { const { getClientIdsOfDescendants, getBlockName } = select( blockEditorStore ); - return getClientIdsOfDescendants( clientId ) - .filter( ( descendantClientId ) => { + return getClientIdsOfDescendants( clientId ).filter( + ( descendantClientId ) => { const blockName = getBlockName( descendantClientId ); return ( ! blockName.startsWith( 'core/' ) || @@ -381,26 +367,9 @@ export const useUnsupportedBlockList = ( clientId ) => { blockName === 'core/template-part' || blockName === 'core/block' ); - } ) - .map( ( descendantClientId ) => ( { - title: getBlockType( getBlockName( descendantClientId ) ) - .title, - descendantClientId, - } ) ); + } + ); }, [ clientId ] ); - - const titles = unsupported.map( ( { descendantClientId, title } ) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const displayTitle = useBlockDisplayTitle( { - clientId: descendantClientId, - } ); - - return title !== displayTitle - ? `${ displayTitle } (${ title })` - : title; - } ); - - return [ ...new Set( titles ).values() ]; }; From 5725905202cda8040b5278dd9ccbc314c5d33f45 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Tue, 24 Oct 2023 11:21:40 +0200 Subject: [PATCH 5/5] Simplify modal text --- .../block-library/src/query/edit/enhanced-pagination-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 feee44df75eda..94c4b13b09143 100644 --- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js +++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js @@ -15,7 +15,7 @@ import { useState, useEffect } from '@wordpress/element'; import { useUnsupportedBlockList } from '../utils'; const disableEnhancedPaginationDescription = __( - 'Plugin blocks and globally synced blocks are not supported yet. For the enhanced pagination to work, remove the unsupported blocks, 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 =