Remove logic preventing the toolbar from hiding when typing within formats

docs/reference-guides/data/data-core-block-editor.md

@@ -993,11 +993,9 @@ _Returns_
 
 ### isCaretWithinFormattedText
 
-Returns true if the caret is within formatted text, or false otherwise.
-
-_Parameters_
+> **Deprecated**
 
-- _state_ `Object`: Global application state.
+Returns true if the caret is within formatted text, or false otherwise.
 
 _Returns_
 
@@ -1149,6 +1147,8 @@ _Parameters_
 
 ### enterFormattedText
 
+> **Deprecated**
+
 Returns an action object used in signalling that the caret has entered formatted text.
 
 _Returns_
@@ -1157,6 +1157,8 @@ _Returns_
 
 ### exitFormattedText
 
+> **Deprecated**
+
 Returns an action object used in signalling that the user caret has exited formatted text.
 
 _Returns_

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -28,15 +28,13 @@ function selector( select ) {
  isMultiSelecting,
  hasMultiSelection,
  isTyping,
- isCaretWithinFormattedText,
  getSettings,
  getLastMultiSelectedBlockClientId,
  } = select( blockEditorStore );
  return {
  isNavigationMode: isNavigationMode(),
  isMultiSelecting: isMultiSelecting(),
  isTyping: isTyping(),
- isCaretWithinFormattedText: isCaretWithinFormattedText(),
  hasFixedToolbar: getSettings().hasFixedToolbar,
  lastClientId: hasMultiSelection()
  ? getLastMultiSelectedBlockClientId()
@@ -56,7 +54,6 @@ function SelectedBlockPopover( {
  isNavigationMode,
  isMultiSelecting,
  isTyping,
- isCaretWithinFormattedText,
  hasFixedToolbar,
  lastClientId,
  } = useSelect( selector, [] );
@@ -92,7 +89,7 @@ function SelectedBlockPopover( {
  isLargeViewport &&
  ! isMultiSelecting &&
  ! showEmptyBlockSideInserter &&
- ( ! isTyping || isCaretWithinFormattedText );
+ ! isTyping;
  const canFocusHiddenToolbar =
  ! isNavigationMode &&
  ! shouldShowContextualToolbar &&

packages/block-editor/src/components/rich-text/index.js

@@ -36,7 +36,6 @@ import { useBlockEditContext } from '../block-edit';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
-import { useCaretInFormat } from './use-caret-in-format';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useInputRules } from './use-input-rules';
@@ -268,7 +267,6 @@ function RichTextWrapper(
  onChange,
  } );
 
- useCaretInFormat( { value } );
  useMarkPersistent( { html: adjustedValue, value } );
 
  const keyboardShortcuts = useRef( new Set() );

packages/block-editor/src/components/rich-text/index.native.js

@@ -125,7 +125,6 @@ function RichTextWrapper(
  const embedHandlerPickerRef = useRef();
  const selector = ( select ) => {
  const {
- isCaretWithinFormattedText,
  getSelectionStart,
  getSelectionEnd,
  getSettings,
@@ -163,7 +162,6 @@ function RichTextWrapper(
  }
 
  return {
- isCaretWithinFormattedText: isCaretWithinFormattedText(),
  selectionStart: isSelected ? selectionStart.offset : undefined,
  selectionEnd: isSelected ? selectionEnd.offset : undefined,
  isSelected,
@@ -177,7 +175,6 @@ function RichTextWrapper(
  // retrieved from the store on merge.
  // To do: fix this somehow.
  const {
- isCaretWithinFormattedText,
  selectionStart,
  selectionEnd,
  isSelected,
@@ -600,7 +597,6 @@ function RichTextWrapper(
  __unstableIsSelected={ isSelected }
  __unstableInputRule={ inputRule }
  __unstableMultilineTag={ multilineTag }
- __unstableIsCaretWithinFormattedText={ isCaretWithinFormattedText }
  __unstableOnEnterFormattedText={ enterFormattedText }
  __unstableOnExitFormattedText={ exitFormattedText }
  __unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }

packages/block-editor/src/store/actions.js

@@ -1261,22 +1261,34 @@ export function stopDraggingBlocks() {
 /**
  * Returns an action object used in signalling that the caret has entered formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function enterFormattedText() {
+ deprecated( 'wp.data.dispatch( "core/block-editor" ).enterFormattedText', {
+ since: '6.1',
+ version: '6.3',
+ } );
  return {
- type: 'ENTER_FORMATTED_TEXT',
+ type: 'DO_NOTHING',
  };
 }
 
 /**
  * Returns an action object used in signalling that the user caret has exited formatted text.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function exitFormattedText() {
+ deprecated( 'wp.data.dispatch( "core/block-editor" ).exitFormattedText', {
+ since: '6.1',
+ version: '6.3',
+ } );
  return {
- type: 'EXIT_FORMATTED_TEXT',
+ type: 'DO_NOTHING',
  };
 }
 

packages/block-editor/src/store/reducer.js

@@ -1181,26 +1181,6 @@ export function draggedBlocks( state = [], action ) {
  return state;
 }
 
-/**
- * Reducer returning whether the caret is within formatted text.
- *
- * @param {boolean} state Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function isCaretWithinFormattedText( state = false, action ) {
- switch ( action.type ) {
- case 'ENTER_FORMATTED_TEXT':
- return true;
-
- case 'EXIT_FORMATTED_TEXT':
- return false;
- }
-
- return state;
-}
-
 /**
  * Internal helper reducer for selectionStart and selectionEnd. Can hold a block
  * selection, represented by an object with property clientId.
@@ -1765,7 +1745,6 @@ export default combineReducers( {
  blocks,
  isTyping,
  draggedBlocks,
- isCaretWithinFormattedText,
  selection,
  isMultiSelecting,
  isSelectionEnabled,

packages/block-editor/src/store/selectors.js

@@ -34,6 +34,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -1344,12 +1345,20 @@ export function isAncestorBeingDragged( state, clientId ) {
 /**
  * Returns true if the caret is within formatted text, or false otherwise.
  *
- * @param {Object} state Global application state.
+ * @deprecated
  *
  * @return {boolean} Whether the caret is within formatted text.
  */
-export function isCaretWithinFormattedText( state ) {
- return state.isCaretWithinFormattedText;
+export function isCaretWithinFormattedText() {
+ deprecated(
+ 'wp.data.select( "core/block-editor" ).isCaretWithinFormattedText',
+ {
+ since: '6.1',
+ version: '6.3',
+ }
+ );
+
+ return false;
 }
 
 /**

packages/block-editor/src/store/test/actions.js

@@ -26,8 +26,6 @@ import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
 const {
  clearSelectedBlock,
- enterFormattedText,
- exitFormattedText,
  hideInsertionPoint,
  insertBlock,
  insertBlocks,
@@ -819,22 +817,6 @@ describe( 'actions', () => {
  } );
  } );
 
- describe( 'enterFormattedText', () => {
- it( 'should return the ENTER_FORMATTED_TEXT action', () => {
- expect( enterFormattedText() ).toEqual( {
- type: 'ENTER_FORMATTED_TEXT',
- } );
- } );
- } );
-
- describe( 'exitFormattedText', () => {
- it( 'should return the EXIT_FORMATTED_TEXT action', () => {
- expect( exitFormattedText() ).toEqual( {
- type: 'EXIT_FORMATTED_TEXT',
- } );
- } );
- } );
-
  describe( 'toggleSelection', () => {
  it( 'should return the TOGGLE_SELECTION action with default value for isSelectionEnabled = true', () => {
  expect( toggleSelection() ).toEqual( {

packages/block-editor/src/store/test/reducer.js

@@ -22,7 +22,6 @@ import {
  blocks,
  isTyping,
  draggedBlocks,
- isCaretWithinFormattedText,
  selection,
  initialPosition,
  isMultiSelecting,
@@ -2160,24 +2159,6 @@ describe( 'state', () => {
  } );
  } );
 
- describe( 'isCaretWithinFormattedText()', () => {
- it( 'should set the flag to true', () => {
- const state = isCaretWithinFormattedText( false, {
- type: 'ENTER_FORMATTED_TEXT',
- } );
-
- expect( state ).toBe( true );
- } );
-
- it( 'should set the flag to false', () => {
- const state = isCaretWithinFormattedText( true, {
- type: 'EXIT_FORMATTED_TEXT',
- } );
-
- expect( state ).toBe( false );
- } );
- } );
-
  describe( 'initialPosition()', () => {
  it( 'should return with block clientId as selected', () => {
  const state = initialPosition( undefined, {

packages/block-editor/src/store/test/selectors.js

@@ -54,7 +54,6 @@ const {
  getDraggedBlockClientIds,
  isBlockBeingDragged,
  isAncestorBeingDragged,
- isCaretWithinFormattedText,
  getBlockInsertionPoint,
  isBlockInsertionPointVisible,
  isSelectionEnabled,
@@ -2056,24 +2055,6 @@ describe( 'selectors', () => {
  } );
  } );
 
- describe( 'isCaretWithinFormattedText', () => {
- it( 'returns true if the isCaretWithinFormattedText state is also true', () => {
- const state = {
- isCaretWithinFormattedText: true,
- };
-
- expect( isCaretWithinFormattedText( state ) ).toBe( true );
- } );
-
- it( 'returns false if the isCaretWithinFormattedText state is also false', () => {
- const state = {
- isCaretWithinFormattedText: false,
- };
-
- expect( isCaretWithinFormattedText( state ) ).toBe( false );
- } );
- } );
-
  describe( 'isSelectionEnabled', () => {
  it( 'should return true if selection is enable', () => {
  const state = {

packages/e2e-tests/specs/editor/various/rich-text.test.js

@@ -485,28 +485,6 @@ describe( 'RichText', () => {
  expect( await getEditedPostContent() ).toMatchSnapshot();
  } );
 
- it( 'should show/hide toolbar when entering/exiting format', async () => {
- const blockToolbarSelector = '.block-editor-block-toolbar';
- await clickBlockAppender();
- await page.keyboard.type( '1' );
- expect( await page.$( blockToolbarSelector ) ).toBe( null );
- await pressKeyWithModifier( 'primary', 'b' );
- expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
- await page.keyboard.type( '2' );
- expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
- await pressKeyWithModifier( 'primary', 'b' );
- expect( await page.$( blockToolbarSelector ) ).toBe( null );
- await page.keyboard.type( '3' );
- await page.keyboard.press( 'ArrowLeft' );
- expect( await page.$( blockToolbarSelector ) ).toBe( null );
- await page.keyboard.press( 'ArrowLeft' );
- expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
- await page.keyboard.press( 'ArrowLeft' );
- expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
- await page.keyboard.press( 'ArrowLeft' );
- expect( await page.$( blockToolbarSelector ) ).toBe( null );
- } );
-
  it( 'should run input rules after composition end', async () => {
  await clickBlockAppender();
  // Puppeteer doesn't support composition, so emulate it by inserting

packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -4,7 +4,6 @@
 import {
  createNewPost,
  pressKeyWithModifier,
- clickBlockToolbarButton,
  insertBlock,
 } from '@wordpress/e2e-test-utils';
 
@@ -126,10 +125,11 @@ describe( 'Toolbar roving tabindex', () => {
  await insertBlock( 'Paragraph' );
  await page.keyboard.type( 'Paragraph' );
  await focusBlockToolbar();
- await clickBlockToolbarButton( 'Bold' );
- await page.keyboard.type( 'a' );
+ await page.keyboard.press( 'ArrowRight' );
+ await expectLabelToHaveFocus( 'Move up' );
+ await page.keyboard.press( 'Tab' );
  await pressKeyWithModifier( 'shift', 'Tab' );
- await expectLabelToHaveFocus( 'Bold' );
+ await expectLabelToHaveFocus( 'Move up' );
  } );
 
  it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {