diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index fdfb8e7c2c6cd..3df706095e5ae 100644 --- a/packages/block-library/src/post-title/edit.js +++ b/packages/block-library/src/post-title/edit.js @@ -15,12 +15,22 @@ import { HeadingLevelDropdown, useBlockEditingMode, } from '@wordpress/block-editor'; -import { ToggleControl, TextControl, PanelBody } from '@wordpress/components'; +import { + ToggleControl, + TextControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + export default function PostTitleEdit( { attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget }, setAttributes, @@ -66,6 +76,7 @@ export default function PostTitleEdit( { } ), } ); const blockEditingMode = useBlockEditingMode(); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); let titleElement = { __( 'Title' ) }; @@ -138,41 +149,82 @@ export default function PostTitleEdit( { /> - - { + setAttributes( { + isLink: false, + linkTarget: '_self', + rel: '', + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > + isLink } label={ __( 'Make title a link' ) } - onChange={ () => - setAttributes( { isLink: ! isLink } ) + onDeselect={ () => + setAttributes( { isLink: false } ) } - checked={ isLink } - /> + isShownByDefault + > + + setAttributes( { isLink: ! isLink } ) + } + checked={ isLink } + /> + { isLink && ( <> - + linkTarget !== '_self' + } label={ __( 'Open in new tab' ) } - onChange={ ( value ) => + onDeselect={ () => setAttributes( { - linkTarget: value - ? '_blank' - : '_self', + linkTarget: '_self', } ) } - checked={ linkTarget === '_blank' } - /> - + + setAttributes( { + linkTarget: value + ? '_blank' + : '_self', + } ) + } + checked={ linkTarget === '_blank' } + /> + + !! rel } label={ __( 'Link rel' ) } - value={ rel } - onChange={ ( newRel ) => - setAttributes( { rel: newRel } ) + onDeselect={ () => + setAttributes( { rel: '' } ) } - /> + isShownByDefault + > + + setAttributes( { rel: newRel } ) + } + /> + ) } - + ) }