diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index e051c2e67e7e5a..469ff14d0e967d 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -9,7 +9,10 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { PanelBody } from '@wordpress/components'; +import { + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { useEffect } from '@wordpress/element'; /** @@ -17,6 +20,7 @@ import { useEffect } from '@wordpress/element'; */ import { QueryPaginationArrowControls } from './query-pagination-arrow-controls'; import { QueryPaginationLabelControl } from './query-pagination-label-control'; +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; const TEMPLATE = [ [ 'core/query-pagination-previous' ], @@ -56,26 +60,54 @@ export default function QueryPaginationEdit( { setAttributes( { showLabel: true } ); } }, [ paginationArrow, setAttributes, showLabel ] ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return ( <> { hasNextPreviousBlocks && ( - - { - setAttributes( { paginationArrow: value } ); - } } - /> - { paginationArrow !== 'none' && ( - { + setAttributes( { + paginationArrow: 'none', + showLabel: true, + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + paginationArrow !== 'none' } + label={ __( 'Pagination arrow' ) } + onDeselect={ () => + setAttributes( { paginationArrow: 'none' } ) + } + isShownByDefault + > + { - setAttributes( { showLabel: value } ); + setAttributes( { paginationArrow: value } ); } } /> + + { paginationArrow !== 'none' && ( + ! showLabel } + label={ __( 'Show text' ) } + onDeselect={ () => + setAttributes( { showLabel: true } ) + } + isShownByDefault + > + { + setAttributes( { showLabel: value } ); + } } + /> + ) } - + ) }