Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Oct 25, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f7be85a
Update useContainsThirdPartyBlocks and texts
DAreRodz Oct 23, 2023
1a551f4
Improve texts a bit
DAreRodz Oct 23, 2023
4ca8667
Show the list of unsupported blocks
DAreRodz Oct 23, 2023
be244c3
Use the BlockTitle component instead
DAreRodz Oct 24, 2023
5725905
Simplify modal text
DAreRodz Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/block-library/src/query/edit/enhanced-pagination-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand All @@ -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 && (
Expand Down
27 changes: 18 additions & 9 deletions packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand All @@ -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>
) }
</>
Expand Down
21 changes: 14 additions & 7 deletions packages/block-library/src/query/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ]
Expand Down
Loading