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