diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 3d638d927617b..bec860c68608a 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -344,7 +344,7 @@ Undocumented declaration. Undocumented declaration. -<a name="NavigationToolSelector" href="#NavigationToolSelector">#</a> **NavigationToolSelector** +<a name="ToolSelector" href="#ToolSelector">#</a> **ToolSelector** Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 18f5e33b551da..2ff44fed17fb4 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -30,7 +30,6 @@ export { default as __experimentalLinkControl } from './link-control'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; export { default as MediaUploadCheck } from './media-upload/check'; -export { default as NavigationToolSelector } from './navigation-mode-selector'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as PlainText } from './plain-text'; export { default as __experimentalResponsiveBlockControl } from './responsive-block-control'; @@ -40,6 +39,7 @@ export { RichTextToolbarButton, __unstableRichTextInputEvent, } from './rich-text'; +export { default as ToolSelector } from './tool-selector'; export { default as URLInput } from './url-input'; export { default as URLInputButton } from './url-input/button'; export { default as URLPopover } from './url-popover'; diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js similarity index 89% rename from packages/block-editor/src/components/navigation-mode-selector/index.js rename to packages/block-editor/src/components/tool-selector/index.js index d3322a7c8414c..5b5141e0ffe1a 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -16,7 +16,7 @@ import { ifViewportMatches } from '@wordpress/viewport'; const editIcon = <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" /></SVG>; const selectIcon = <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><Path d="M6.5 1v21.5l6-6.5H21L6.5 1zm5.1 13l-3.1 3.4V5.9l7.8 8.1h-4.7z" /></SVG>; -function NavigationToolSelector() { +function ToolSelector() { const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode() ); const { setNavigationMode } = useDispatch( 'core/block-editor' ); const onSwitchMode = ( mode ) => { @@ -30,14 +30,14 @@ function NavigationToolSelector() { icon={ isNavigationTool ? selectIcon : editIcon } aria-expanded={ isOpen } onClick={ onToggle } - label={ __( 'Navigation Tool' ) } + label={ __( 'Tools' ) } /> ) } renderContent={ () => ( <> <NavigableMenu role="menu" - aria-label={ __( 'Navigation Tool' ) } + aria-label={ __( 'Tools' ) } > <MenuItemsChoice value={ isNavigationTool ? 'select' : 'edit' } @@ -66,7 +66,7 @@ function NavigationToolSelector() { ] } /> </NavigableMenu> - <div className="block-editor-navigation-mode-selector__help"> + <div className="block-editor-tool-selector__help"> { __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) } </div> </> @@ -75,4 +75,4 @@ function NavigationToolSelector() { ); } -export default ifViewportMatches( 'medium' )( NavigationToolSelector ); +export default ifViewportMatches( 'medium' )( ToolSelector ); diff --git a/packages/block-editor/src/components/navigation-mode-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss similarity index 66% rename from packages/block-editor/src/components/navigation-mode-selector/style.scss rename to packages/block-editor/src/components/tool-selector/style.scss index 6ef22f08f7e87..1f61a871dce89 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/style.scss +++ b/packages/block-editor/src/components/tool-selector/style.scss @@ -1,4 +1,4 @@ -.block-editor-navigation-mode-selector__help { +.block-editor-tool-selector__help { padding: $grid-size-large; border-top: 1px solid $light-gray-500; color: $dark-gray-300; diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 2936f6bebfddf..92b877e7626cf 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -11,7 +11,7 @@ import { BlockToolbar, NavigableToolbar, BlockNavigationDropdown, - NavigationToolSelector, + ToolSelector, } from '@wordpress/block-editor'; import { TableOfContents, @@ -41,7 +41,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText <EditorHistoryRedo /> <TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } /> <BlockNavigationDropdown isDisabled={ isTextModeEnabled } /> - <NavigationToolSelector /> + <ToolSelector /> { hasFixedToolbar && isLargeViewport && ( <div className="edit-post-header-toolbar__block-toolbar"> <BlockToolbar />