Remove logic preventing the toolbar from hiding when typing within fo…

…rmats (#40476)

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 () => {