diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index bdbfc78eb482e4..69b12c4507b8be 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/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_ diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index a96142a38bee71..90797c14753ea6 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -28,7 +28,6 @@ function selector( select ) { isMultiSelecting, hasMultiSelection, isTyping, - isCaretWithinFormattedText, getSettings, getLastMultiSelectedBlockClientId, } = select( blockEditorStore ); @@ -36,7 +35,6 @@ function selector( select ) { 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 && diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 71358a58596efa..d30fa8eae5e92d 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/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() ); diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index 8fc0829b1b17c1..2c24022c8e9749 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/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 } diff --git a/packages/block-editor/src/components/rich-text/use-caret-in-format.js b/packages/block-editor/src/components/rich-text/use-caret-in-format.js deleted file mode 100644 index f5ad69f39713b7..00000000000000 --- a/packages/block-editor/src/components/rich-text/use-caret-in-format.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEffect } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../../store'; - -export function useCaretInFormat( { value } ) { - const hasActiveFormats = - value.activeFormats && !! value.activeFormats.length; - const { isCaretWithinFormattedText } = useSelect( blockEditorStore ); - const { enterFormattedText, exitFormattedText } = useDispatch( - blockEditorStore - ); - useEffect( () => { - if ( hasActiveFormats ) { - if ( ! isCaretWithinFormattedText() ) { - enterFormattedText(); - } - } else if ( isCaretWithinFormattedText() ) { - exitFormattedText(); - } - }, [ hasActiveFormats ] ); -} diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 5468dbdd24d026..c9170d64801813 100644 --- a/packages/block-editor/src/store/actions.js +++ b/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', }; } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 8691d04cef79ba..658918b8f3a09c 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/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, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index ef9c97f613d16c..adc79a355258f5 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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; } /** diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 978939bfc3a143..8cd09d7a7e1d0a 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/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( { diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 7168483c53ead5..faca5d4f86117f 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/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, { diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index d81a639495197a..a152b7da564c52 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/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 = { diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index c483146d47a0d8..d7bc7defa544df 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/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 diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index 1a1fe9a2e01571..87869b33544096 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/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 () => {