|
1 | 1 | /**
|
2 | 2 | * WordPress dependencies
|
3 | 3 | */
|
4 |
| -import { ToggleControl } from '@wordpress/components'; |
5 |
| -import { __ } from '@wordpress/i18n'; |
| 4 | +import { useSelect } from '@wordpress/data'; |
| 5 | +import { store as blockEditorStore } from '@wordpress/block-editor'; |
| 6 | +import { useEffect } from '@wordpress/element'; |
6 | 7 |
|
7 |
| -export const PaginationToggle = ( { attributes, setAttributes } ) => { |
8 |
| - const { query: { disable_pagination: disablePagination } = {} } = |
9 |
| - attributes; |
| 8 | +/** |
| 9 | + * Check for the core/query-pagination block. |
| 10 | + * |
| 11 | + * @param {Array} blocks The array of innerBlocks |
| 12 | + * @return {string|boolean} Return either the clientId or false if not found. |
| 13 | + */ |
| 14 | +const getPaginationBlockClientId = ( blocks ) => { |
| 15 | + return blocks.find( ( block ) => block.name === 'core/query-pagination' ) |
| 16 | + ?.clientId; |
| 17 | +}; |
10 | 18 |
|
11 |
| - return ( |
12 |
| - <ToggleControl |
13 |
| - label={ __( 'Disable pagination', 'advanced-query-loop' ) } |
14 |
| - help={ __( |
15 |
| - 'Disabling pagination will not show any pagination controls on the front end. It can also provide a performance improvement for complicated queries.', |
16 |
| - 'advanced-query-loop' |
17 |
| - ) } |
18 |
| - checked={ !! disablePagination } |
19 |
| - onChange={ () => { |
20 |
| - setAttributes( { |
21 |
| - query: { |
22 |
| - ...attributes.query, |
23 |
| - disable_pagination: ! disablePagination, |
24 |
| - }, |
25 |
| - } ); |
26 |
| - } } |
27 |
| - __nextHasNoMarginBottom |
28 |
| - /> |
| 19 | +export const PaginationToggle = ( { attributes, setAttributes, clientId } ) => { |
| 20 | + const innerBlocks = useSelect( |
| 21 | + ( select ) => |
| 22 | + select( blockEditorStore ).getBlocksByClientId( clientId )[ 0 ] |
| 23 | + ?.innerBlocks |
29 | 24 | );
|
| 25 | + |
| 26 | + useEffect( () => { |
| 27 | + setAttributes( { |
| 28 | + query: { |
| 29 | + ...attributes.query, |
| 30 | + disable_pagination: ! getPaginationBlockClientId( innerBlocks ) |
| 31 | + ? true |
| 32 | + : false, |
| 33 | + }, |
| 34 | + } ); |
| 35 | + }, [ innerBlocks, setAttributes ] ); |
| 36 | + |
| 37 | + // There is no UI for component. |
| 38 | + return null; |
30 | 39 | };
|
0 commit comments