diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
index 21d23081837cd..3b739e2b20b4f 100644
--- a/packages/block-library/src/query-title/edit.js
+++ b/packages/block-library/src/query-title/edit.js
@@ -14,13 +14,18 @@ import {
Warning,
HeadingLevelDropdown,
} from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+ ToggleControl,
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useArchiveLabel } from './use-archive-label';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
const SUPPORTED_TYPES = [ 'archive', 'search' ];
@@ -36,6 +41,7 @@ export default function QueryTitleEdit( {
setAttributes,
} ) {
const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
+ const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const TagName = `h${ level }`;
const blockProps = useBlockProps( {
@@ -89,16 +95,35 @@ export default function QueryTitleEdit( {
titleElement = (
<>
-
-
+ setAttributes( {
+ showPrefix: true,
+ } )
+ }
+ dropdownMenuProps={ dropdownMenuProps }
+ >
+ ! showPrefix }
label={ __( 'Show archive type in title' ) }
- onChange={ () =>
- setAttributes( { showPrefix: ! showPrefix } )
+ onDeselect={ () =>
+ setAttributes( { showPrefix: true } )
}
- checked={ showPrefix }
- />
-
+ isShownByDefault
+ >
+
+ setAttributes( {
+ showPrefix: ! showPrefix,
+ } )
+ }
+ checked={ showPrefix }
+ />
+
+
{ title }
>
@@ -109,18 +134,34 @@ export default function QueryTitleEdit( {
titleElement = (
<>
-
-
+ setAttributes( {
+ showSearchTerm: true,
+ } )
+ }
+ >
+ ! showSearchTerm }
label={ __( 'Show search term in title' ) }
- onChange={ () =>
- setAttributes( {
- showSearchTerm: ! showSearchTerm,
- } )
+ onDeselect={ () =>
+ setAttributes( { showSearchTerm: true } )
}
- checked={ showSearchTerm }
- />
-
+ isShownByDefault
+ >
+
+ setAttributes( {
+ showSearchTerm: ! showSearchTerm,
+ } )
+ }
+ checked={ showSearchTerm }
+ />
+
+