From a5c6aed30ec7913876f8f7ed239665f110cb8d50 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Feb 2024 18:13:14 +0100 Subject: [PATCH] Editor: Remove inline toolbar preference (#58945) Co-authored-by: youknowriad Co-authored-by: draganescu --- .../src/components/observe-typing/index.js | 17 ++--- .../rich-text/format-toolbar-container.js | 49 +------------ .../src/components/rich-text/index.js | 1 - packages/edit-post/src/editor.js | 71 +++++++++---------- .../provider/use-block-editor-settings.js | 1 - 5 files changed, 41 insertions(+), 98 deletions(-) diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js index 08764f5939a13f..75afc4bbdf0f96 100644 --- a/packages/block-editor/src/components/observe-typing/index.js +++ b/packages/block-editor/src/components/observe-typing/index.js @@ -115,11 +115,10 @@ export function useMouseMoveTypingReset() { * field, presses ESC or TAB, or moves the mouse in the document. */ export function useTypingObserver() { - const { isTyping, hasInlineToolbar } = useSelect( ( select ) => { - const { isTyping: _isTyping, getSettings } = select( blockEditorStore ); + const { isTyping } = useSelect( ( select ) => { + const { isTyping: _isTyping } = select( blockEditorStore ); return { isTyping: _isTyping(), - hasInlineToolbar: getSettings().hasInlineToolbar, }; }, [] ); const { startTyping, stopTyping } = useDispatch( blockEditorStore ); @@ -183,12 +182,10 @@ export function useTypingObserver() { node.addEventListener( 'focus', stopTypingOnNonTextField ); node.addEventListener( 'keydown', stopTypingOnEscapeKey ); - if ( ! hasInlineToolbar ) { - ownerDocument.addEventListener( - 'selectionchange', - stopTypingOnSelectionUncollapse - ); - } + ownerDocument.addEventListener( + 'selectionchange', + stopTypingOnSelectionUncollapse + ); return () => { defaultView.clearTimeout( timerId ); @@ -245,7 +242,7 @@ export function useTypingObserver() { node.removeEventListener( 'keydown', startTypingInTextField ); }; }, - [ isTyping, hasInlineToolbar, startTyping, stopTyping ] + [ isTyping, startTyping, stopTyping ] ); return useMergeRefs( [ ref1, ref2 ] ); diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js index ffefcd1e302a84..ae98cacaf82cce 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js @@ -3,13 +3,6 @@ */ import { __ } from '@wordpress/i18n'; import { Popover, ToolbarGroup } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { - isCollapsed, - getActiveFormats, - useAnchor, - store as richTextStore, -} from '@wordpress/rich-text'; /** * Internal dependencies @@ -17,22 +10,6 @@ import { import BlockControls from '../block-controls'; import FormatToolbar from './format-toolbar'; import NavigableToolbar from '../navigable-toolbar'; -import { store as blockEditorStore } from '../../store'; - -function InlineSelectionToolbar( { editableContentElement, activeFormats } ) { - const lastFormat = activeFormats[ activeFormats.length - 1 ]; - const lastFormatType = lastFormat?.type; - const settings = useSelect( - ( select ) => select( richTextStore ).getFormatType( lastFormatType ), - [ lastFormatType ] - ); - const popoverAnchor = useAnchor( { - editableContentElement, - settings, - } ); - - return ; -} function InlineToolbar( { popoverAnchor } ) { return ( @@ -56,35 +33,11 @@ function InlineToolbar( { popoverAnchor } ) { ); } -const FormatToolbarContainer = ( { - inline, - editableContentElement, - value, -} ) => { - const hasInlineToolbar = useSelect( - ( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar, - [] - ); - +const FormatToolbarContainer = ( { inline, editableContentElement } ) => { if ( inline ) { return ; } - if ( hasInlineToolbar ) { - const activeFormats = getActiveFormats( value ); - - if ( isCollapsed( value ) && ! activeFormats.length ) { - return null; - } - - return ( - - ); - } - // Render regular toolbar. return ( diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index f45cc618d4547e..43a9fb1a31f1bf 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -348,7 +348,6 @@ export function RichTextWrapper( ) } { - const { isFeatureActive, getEditedPostTemplate } = - select( editPostStore ); - const { getEntityRecord, getPostType, canUser } = - select( coreStore ); - const { getEditorSettings } = select( editorStore ); + const { post, preferredStyleVariations, template } = useSelect( + ( select ) => { + const { getEditedPostTemplate } = select( editPostStore ); + const { getEntityRecord, getPostType, canUser } = + select( coreStore ); + const { getEditorSettings } = select( editorStore ); - const postObject = getEntityRecord( - 'postType', - currentPost.postType, - currentPost.postId - ); + const postObject = getEntityRecord( + 'postType', + currentPost.postType, + currentPost.postId + ); - const supportsTemplateMode = - getEditorSettings().supportsTemplateMode; - const isViewable = - getPostType( currentPost.postType )?.viewable ?? false; - const canEditTemplate = canUser( 'create', 'templates' ); - return { - hasInlineToolbar: isFeatureActive( 'inlineToolbar' ), - preferredStyleVariations: select( preferencesStore ).get( - 'core/edit-post', - 'preferredStyleVariations' - ), - template: - supportsTemplateMode && - isViewable && - canEditTemplate && - currentPost.postType !== 'wp_template' - ? getEditedPostTemplate() - : null, - post: postObject, - }; - }, - [ currentPost.postType, currentPost.postId ] - ); + const supportsTemplateMode = + getEditorSettings().supportsTemplateMode; + const isViewable = + getPostType( currentPost.postType )?.viewable ?? false; + const canEditTemplate = canUser( 'create', 'templates' ); + return { + preferredStyleVariations: select( preferencesStore ).get( + 'core/edit-post', + 'preferredStyleVariations' + ), + template: + supportsTemplateMode && + isViewable && + canEditTemplate && + currentPost.postType !== 'wp_template' + ? getEditedPostTemplate() + : null, + post: postObject, + }; + }, + [ currentPost.postType, currentPost.postId ] + ); const { updatePreferredStyleVariations } = useDispatch( editPostStore ); @@ -100,11 +97,9 @@ function Editor( { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, }, - hasInlineToolbar, } ), [ settings, - hasInlineToolbar, preferredStyleVariations, updatePreferredStyleVariations, onNavigateToEntityRecord, diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 164f925743522c..5ae329f7897f82 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -52,7 +52,6 @@ const BLOCK_EDITOR_SETTINGS = [ 'gradients', 'generateAnchors', 'onNavigateToEntityRecord', - 'hasInlineToolbar', 'imageDefaultSize', 'imageDimensions', 'imageEditing',