From 036775e727f58a54b8dc1fb42d9a1e542905cfbf Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 8 Sep 2023 14:25:58 +0200 Subject: [PATCH 1/9] Move enhanced pagination control to its own file --- .../enhanced-pagination-control.js | 52 +++++++++++++++++++ .../query/edit/inspector-controls/index.js | 41 ++------------- 2 files changed, 57 insertions(+), 36 deletions(-) create mode 100644 packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js 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 new file mode 100644 index 00000000000000..74335f0785286a --- /dev/null +++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { ToggleControl, Notice } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useEffect, useRef } from '@wordpress/element'; +import { speak } from '@wordpress/a11y'; + +export default function EnhancedPaginationControl( { + enhancedPagination, + setAttributes, +} ) { + const enhancedPaginationNotice = __( + 'Enhanced Pagination might cause interactive blocks within the Post Template to stop working. Disable it if you experience any issues.' + ); + + const isFirstRender = useRef( true ); // Don't speak on first render. + useEffect( () => { + if ( ! isFirstRender.current && enhancedPagination ) { + speak( enhancedPaginationNotice ); + } + isFirstRender.current = false; + }, [ enhancedPagination, enhancedPaginationNotice ] ); + + return ( + <> + { + setAttributes( { + enhancedPagination: !! value, + } ); + } } + /> + { enhancedPagination && ( +
+ + { enhancedPaginationNotice } + +
+ ) } + + ); +} diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index b0f38cf70b9e25..4e479d43efaece 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -17,8 +17,7 @@ import { privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { debounce } from '@wordpress/compose'; -import { useEffect, useState, useCallback, useRef } from '@wordpress/element'; -import { speak } from '@wordpress/a11y'; +import { useEffect, useState, useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -28,6 +27,7 @@ import AuthorControl from './author-control'; import ParentControl from './parent-control'; import { TaxonomyControls } from './taxonomy-controls'; import StickyControl from './sticky-control'; +import EnhancedPaginationControl from './enhanced-pagination-control'; import CreateNewPostLink from './create-new-post-link'; import { unlock } from '../../../lock-unlock'; import { @@ -124,18 +124,6 @@ export default function QueryInspectorControls( props ) { isControlAllowed( allowedControls, 'parents' ) && isPostTypeHierarchical; - const enhancedPaginationNotice = __( - 'Enhanced Pagination might cause interactive blocks within the Post Template to stop working. Disable it if you experience any issues.' - ); - - const isFirstRender = useRef( true ); // Don't speak on first render. - useEffect( () => { - if ( ! isFirstRender.current && enhancedPagination ) { - speak( enhancedPaginationNotice ); - } - isFirstRender.current = false; - }, [ enhancedPagination, enhancedPaginationNotice ] ); - const showFiltersPanel = showTaxControl || showAuthorControl || @@ -215,29 +203,10 @@ export default function QueryInspectorControls( props ) { } /> ) } - - setAttributes( { - enhancedPagination: !! value, - } ) - } + - { enhancedPagination && ( -
- - { enhancedPaginationNotice } - -
- ) } ) } From b1d5922bad10f7476b6223d92ea5f15c08d1f463 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 11 Sep 2023 11:59:52 +0200 Subject: [PATCH 2/9] Add hook to detect third-party blocks --- packages/block-library/src/query/utils.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 4e787be1d029f5..8320ea4d00cccd 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -344,3 +344,25 @@ export const usePatterns = ( clientId, name ) => { [ name, clientId ] ); }; + +/** + * Hook that returns whether the Query Loop with the given `clientId` contains + * third-party blocks inside its Post Template block. + * + * @param {string} clientId The block's client ID. + * @return {boolean} True if it contains third-party blocks. + */ +export const useContainsThirdPartyBlocks = ( clientId ) => + useSelect( ( select ) => { + const { getClientIdsOfDescendants, getBlockName, getBlocks } = + select( blockEditorStore ); + + const postTemplate = getBlocks( clientId ).find( + ( innerBlock ) => innerBlock.name === 'core/post-template' + ); + + return getClientIdsOfDescendants( [ postTemplate.clientId ] ).some( + ( descendantClientId ) => + ! getBlockName( descendantClientId ).startsWith( 'core/' ) + ); + } ); From 79aa7970984f5a2c6eb4afab7d600c30d2f50904 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 11 Sep 2023 12:04:10 +0200 Subject: [PATCH 3/9] Disable toggle when third-party blocks are found --- .../enhanced-pagination-control.js | 21 +++++++++---------- .../query/edit/inspector-controls/index.js | 4 +++- .../src/query/edit/query-content.js | 1 + 3 files changed, 14 insertions(+), 12 deletions(-) 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 74335f0785286a..1e4b9a599269a1 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,24 +3,22 @@ */ import { ToggleControl, Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useEffect, useRef } from '@wordpress/element'; -import { speak } from '@wordpress/a11y'; + +/** + * Internal dependencies + */ +import { useContainsThirdPartyBlocks } from '../../utils'; export default function EnhancedPaginationControl( { enhancedPagination, setAttributes, + clientId, } ) { const enhancedPaginationNotice = __( - 'Enhanced Pagination might cause interactive blocks within the Post Template to stop working. Disable it if you experience any issues.' + 'This setting requires all descendants to be Core blocks. If you want to enable it, you have to remove all third-party blocks contained inside Post Template.' ); - const isFirstRender = useRef( true ); // Don't speak on first render. - useEffect( () => { - if ( ! isFirstRender.current && enhancedPagination ) { - speak( enhancedPaginationNotice ); - } - isFirstRender.current = false; - }, [ enhancedPagination, enhancedPaginationNotice ] ); + const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId ); return ( <> @@ -30,13 +28,14 @@ export default function EnhancedPaginationControl( { 'Browsing between pages won’t require a full page reload.' ) } checked={ !! enhancedPagination } + disabled={ containsThirdPartyBlocks } onChange={ ( value ) => { setAttributes( { enhancedPagination: !! value, } ); } } /> - { enhancedPagination && ( + { containsThirdPartyBlocks && (
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js index 89c6efa2809795..0fdcd9d2114beb 100644 --- a/packages/block-library/src/query/edit/query-content.js +++ b/packages/block-library/src/query/edit/query-content.js @@ -110,6 +110,7 @@ export default function QueryContent( { setQuery={ updateQuery } setDisplayLayout={ updateDisplayLayout } setAttributes={ setAttributes } + clientId={ clientId } /> Date: Mon, 11 Sep 2023 12:05:01 +0200 Subject: [PATCH 4/9] Add modal to disable enhance pagination --- .../query/edit/enhanced-pagination-modal.js | 66 +++++++++++++++++++ .../src/query/edit/query-content.js | 7 ++ packages/block-library/src/query/editor.scss | 6 ++ 3 files changed, 79 insertions(+) create mode 100644 packages/block-library/src/query/edit/enhanced-pagination-modal.js diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js new file mode 100644 index 00000000000000..cb77c7526c8575 --- /dev/null +++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js @@ -0,0 +1,66 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { + Button, + Modal, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { useContainsThirdPartyBlocks } from '../utils'; + +const disableEnhancedPaginationDescription = __( + 'Third-party blocks are not supported inside a Query Loop block with "Enhanced Pagination" enabled.' +); + +const modalDescriptionId = + 'wp-block-query-enhanced-pagination-modal__description'; + +export default function EnhancedPaginationModal( { + clientId, + attributes: { enhancedPagination }, + setAttributes, +} ) { + const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId ); + + // eslint-disable-next-line @wordpress/data-no-store-string-literals + const { undo } = useDispatch( 'core/editor' ); + + return ( + containsThirdPartyBlocks && + enhancedPagination && ( + +

+ { disableEnhancedPaginationDescription } +

+ + + + + + ) + ); +} diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js index 0fdcd9d2114beb..6fef2c43b4affc 100644 --- a/packages/block-library/src/query/edit/query-content.js +++ b/packages/block-library/src/query/edit/query-content.js @@ -20,6 +20,7 @@ import { store as coreStore } from '@wordpress/core-data'; */ import QueryToolbar from './query-toolbar'; import QueryInspectorControls from './inspector-controls'; +import EnhancedPaginationModal from './enhanced-pagination-modal'; const DEFAULTS_POSTS_PER_PAGE = 3; @@ -103,8 +104,14 @@ export default function QueryContent( { "The