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 } );
+ } }
+ />
+
) }
-
+
) }