From c7049b7380c35e8c0845b80d3c5a4d2be4cc1324 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:18:03 +0100 Subject: [PATCH 01/12] Override onReplace() if editing is disabled --- .../src/components/rich-text/index.js | 19 +++++++++++++++---- .../src/components/rich-text/use-enter.js | 2 +- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 5f94206c78752f..72ecfde8e36ba2 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -12,7 +12,7 @@ import { forwardRef, createContext, } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { select, dispatch, useDispatch, useSelect } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { __unstableUseRichText as useRichText, @@ -194,7 +194,7 @@ export function RichTextWrapper( const { getSelectionStart, getSelectionEnd, getBlockRootClientId } = useSelect( blockEditorStore ); - const { selectionChange } = useDispatch( blockEditorStore ); + const { selectionChange, selectBlock } = useDispatch( blockEditorStore ); const adjustedAllowedFormats = getAllowedFormats( { allowedFormats, disableFormats, @@ -332,6 +332,17 @@ export function RichTextWrapper( anchorRef.current?.focus(); } + const onReplaceCallback = shouldDisableEditing + ? ( blocks ) => { + // Find block that does not have the clientId + const blockToFocus = blocks.find( + ( block ) => block.clientId !== clientId + ); + + // selectBlock( blockToFocus.clientId ); + } + : onReplace; + const TagName = tagName; return ( <> @@ -396,7 +407,7 @@ export function RichTextWrapper( value, formatTypes, tagName, - onReplace, + onReplaceCallback, onSplit, __unstableEmbedURLOnPaste, pastePlainText, @@ -409,7 +420,7 @@ export function RichTextWrapper( useEnter( { removeEditorOnlyFormats, value, - onReplace, + onReplaceCallback, onSplit, onChange, disableLineBreaks, diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index 4daf70e7fa3c74..bb6424e5e52a37 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -32,7 +32,7 @@ export function useEnter( props ) { const { removeEditorOnlyFormats, value, - onReplace, + onReplaceCallback: onReplace, onSplit, onChange, disableLineBreaks, From db9cf94bd913c73ca23c4a3248c6f147c3a7ddd7 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:18:04 +0100 Subject: [PATCH 02/12] Simplify onReplace call and remove extraneous code --- .../src/components/rich-text/index.js | 31 ++++++++++--------- .../src/components/rich-text/use-enter.js | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 72ecfde8e36ba2..abe9c3b39feaae 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -12,7 +12,7 @@ import { forwardRef, createContext, } from '@wordpress/element'; -import { select, dispatch, useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { __unstableUseRichText as useRichText, @@ -194,7 +194,7 @@ export function RichTextWrapper( const { getSelectionStart, getSelectionEnd, getBlockRootClientId } = useSelect( blockEditorStore ); - const { selectionChange, selectBlock } = useDispatch( blockEditorStore ); + const { selectionChange } = useDispatch( blockEditorStore ); const adjustedAllowedFormats = getAllowedFormats( { allowedFormats, disableFormats, @@ -332,17 +332,6 @@ export function RichTextWrapper( anchorRef.current?.focus(); } - const onReplaceCallback = shouldDisableEditing - ? ( blocks ) => { - // Find block that does not have the clientId - const blockToFocus = blocks.find( - ( block ) => block.clientId !== clientId - ); - - // selectBlock( blockToFocus.clientId ); - } - : onReplace; - const TagName = tagName; return ( <> @@ -407,7 +396,7 @@ export function RichTextWrapper( value, formatTypes, tagName, - onReplaceCallback, + onReplace, onSplit, __unstableEmbedURLOnPaste, pastePlainText, @@ -420,7 +409,19 @@ export function RichTextWrapper( useEnter( { removeEditorOnlyFormats, value, - onReplaceCallback, + onReplace: ( + blocks, + indexToSelect, + initialPosition + ) => { + if ( ! shouldDisableEditing ) { + onReplace( + blocks, + indexToSelect, + initialPosition + ); + } + }, onSplit, onChange, disableLineBreaks, diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index bb6424e5e52a37..4daf70e7fa3c74 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -32,7 +32,7 @@ export function useEnter( props ) { const { removeEditorOnlyFormats, value, - onReplaceCallback: onReplace, + onReplace, onSplit, onChange, disableLineBreaks, From 13469ca90d34e54fbd9fe3f6d248f63a88a708f8 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:18:04 +0100 Subject: [PATCH 03/12] Blur selection on Enter so focus can be set to new block --- .../use-block-props/use-selected-block-event-handlers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js index bf4fc55879448a..094a764a4587c9 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js @@ -57,6 +57,7 @@ export function useEventHandlers( { clientId, isSelected } ) { event.preventDefault(); if ( keyCode === ENTER ) { + target.blur(); insertDefaultBlock( {}, getBlockRootClientId( clientId ), From 5920feb267860f2b27bcf02d06f1dff32fd5dbb2 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:18:04 +0100 Subject: [PATCH 04/12] Fix error wherein Enter didn't work on locked blocks; simplify code --- .../src/components/rich-text/index.js | 15 ++------------- .../src/components/rich-text/use-enter.js | 5 +++++ 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index abe9c3b39feaae..4b752777a96924 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -409,24 +409,13 @@ export function RichTextWrapper( useEnter( { removeEditorOnlyFormats, value, - onReplace: ( - blocks, - indexToSelect, - initialPosition - ) => { - if ( ! shouldDisableEditing ) { - onReplace( - blocks, - indexToSelect, - initialPosition - ); - } - }, + onReplace, onSplit, onChange, disableLineBreaks, onSplitAtEnd, onSplitAtDoubleLineEnd, + shouldDisableEditing, } ), useFirefoxCompat(), anchorRef, diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index 4daf70e7fa3c74..2e98a70dfd9b68 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -38,8 +38,13 @@ export function useEnter( props ) { disableLineBreaks, onSplitAtEnd, onSplitAtDoubleLineEnd, + shouldDisableEditing, } = propsRef.current; + if ( shouldDisableEditing ) { + return; + } + event.preventDefault(); const _value = { ...value }; From 67be306f92e87896e6d6eda726698e8417e83e98 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 05/12] Refactor to only blur when lockAttributesEditing bindings are present --- .../use-selected-block-event-handlers.js | 8 ++- .../src/components/rich-text/index.js | 61 ++++--------------- .../rich-text/use-should-disable-editing.js | 42 +++++++++++++ 3 files changed, 60 insertions(+), 51 deletions(-) create mode 100644 packages/block-editor/src/components/rich-text/use-should-disable-editing.js diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js index 094a764a4587c9..a3a4178735524f 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js @@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose'; * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; +import { useShouldDisableEditing } from '../../rich-text/use-should-disable-editing'; /** * Adds block behaviour: @@ -23,6 +24,7 @@ export function useEventHandlers( { clientId, isSelected } ) { const { getBlockRootClientId, getBlockIndex } = useSelect( blockEditorStore ); const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore ); + const shouldDisableEditing = useShouldDisableEditing(); return useRefEffect( ( node ) => { @@ -57,7 +59,11 @@ export function useEventHandlers( { clientId, isSelected } ) { event.preventDefault(); if ( keyCode === ENTER ) { - target.blur(); + // If the block is a bound rich text block, we should + // blur the target so focus can be set to the new block. + if ( shouldDisableEditing ) { + target.blur(); + } insertDefaultBlock( {}, getBlockRootClientId( clientId ), diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 4b752777a96924..6b9045df02a024 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -19,7 +19,6 @@ import { removeFormat, } from '@wordpress/rich-text'; import { Popover } from '@wordpress/components'; -import { getBlockType, store as blocksStore } from '@wordpress/blocks'; /** * Internal dependencies @@ -45,8 +44,7 @@ import FormatEdit from './format-edit'; import { getAllowedFormats } from './utils'; import { Content } from './content'; import { withDeprecations } from './with-deprecations'; -import { unlock } from '../../lock-unlock'; -import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes'; +import { useShouldDisableEditing } from './use-should-disable-editing'; export const keyboardShortcutContext = createContext(); export const inputEventContext = createContext(); @@ -117,11 +115,7 @@ export function RichTextWrapper( props = removeNativeProps( props ); const anchorRef = useRef(); - const { - clientId, - isSelected: isBlockSelected, - name: blockName, - } = useBlockEditContext(); + const { clientId, isSelected: isBlockSelected } = useBlockEditContext(); const selector = ( select ) => { // Avoid subscribing to the block editor store if the block is not // selected. @@ -129,12 +123,10 @@ export function RichTextWrapper( return { isSelected: false }; } - const { getSelectionStart, getSelectionEnd, getBlockAttributes } = + const { getSelectionStart, getSelectionEnd } = select( blockEditorStore ); const selectionStart = getSelectionStart(); const selectionEnd = getSelectionEnd(); - const blockBindings = - getBlockAttributes( clientId )?.metadata?.bindings; let isSelected; @@ -147,53 +139,22 @@ export function RichTextWrapper( isSelected = selectionStart.clientId === clientId; } - // Disable Rich Text editing if block bindings specify that. - let disableBoundBlocks = false; - if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) { - const blockTypeAttributes = getBlockType( blockName ).attributes; - const { getBlockBindingsSource } = unlock( select( blocksStore ) ); - for ( const [ attribute, args ] of Object.entries( - blockBindings - ) ) { - if ( - blockTypeAttributes?.[ attribute ]?.source !== 'rich-text' - ) { - break; - } - - // If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it. - const blockBindingsSource = getBlockBindingsSource( - args.source - ); - if ( - ! blockBindingsSource || - blockBindingsSource.lockAttributesEditing - ) { - disableBoundBlocks = true; - break; - } - } - } - return { selectionStart: isSelected ? selectionStart.offset : undefined, selectionEnd: isSelected ? selectionEnd.offset : undefined, isSelected, - disableBoundBlocks, }; }; - const { selectionStart, selectionEnd, isSelected, disableBoundBlocks } = - useSelect( selector, [ - clientId, - identifier, - originalIsSelected, - isBlockSelected, - ] ); - - const shouldDisableEditing = disableEditing || disableBoundBlocks; - + const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [ + clientId, + identifier, + originalIsSelected, + isBlockSelected, + ] ); const { getSelectionStart, getSelectionEnd, getBlockRootClientId } = useSelect( blockEditorStore ); + // Disable Rich Text editing if block bindings specify that. + const shouldDisableEditing = useShouldDisableEditing(); const { selectionChange } = useDispatch( blockEditorStore ); const adjustedAllowedFormats = getAllowedFormats( { allowedFormats, diff --git a/packages/block-editor/src/components/rich-text/use-should-disable-editing.js b/packages/block-editor/src/components/rich-text/use-should-disable-editing.js new file mode 100644 index 00000000000000..8d92abbf85ba03 --- /dev/null +++ b/packages/block-editor/src/components/rich-text/use-should-disable-editing.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { getBlockType, store as blocksStore } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes'; +import { useBlockEditContext } from '../block-edit'; +import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +export function useShouldDisableEditing() { + const { clientId, name: blockName } = useBlockEditContext(); + + const { getBlockAttributes } = useSelect( blockEditorStore ); + const { getBlockBindingsSource } = unlock( useSelect( blocksStore ) ); + const blockBindings = getBlockAttributes( clientId )?.metadata?.bindings; + + if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) { + const blockTypeAttributes = getBlockType( blockName ).attributes; + + for ( const [ attribute, args ] of Object.entries( blockBindings ) ) { + if ( blockTypeAttributes?.[ attribute ]?.source !== 'rich-text' ) { + break; + } + + // If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it. + const blockBindingsSource = getBlockBindingsSource( args.source ); + if ( + ! blockBindingsSource || + blockBindingsSource.lockAttributesEditing + ) { + return true; + } + } + } + + return false; +} From 3778cc526f55cd9cac6cbbb438029ad1e74ef3e3 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 06/12] Remove unnecessary call to hook --- .../use-block-props/use-selected-block-event-handlers.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js index a3a4178735524f..bf4fc55879448a 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js @@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose'; * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; -import { useShouldDisableEditing } from '../../rich-text/use-should-disable-editing'; /** * Adds block behaviour: @@ -24,7 +23,6 @@ export function useEventHandlers( { clientId, isSelected } ) { const { getBlockRootClientId, getBlockIndex } = useSelect( blockEditorStore ); const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore ); - const shouldDisableEditing = useShouldDisableEditing(); return useRefEffect( ( node ) => { @@ -59,11 +57,6 @@ export function useEventHandlers( { clientId, isSelected } ) { event.preventDefault(); if ( keyCode === ENTER ) { - // If the block is a bound rich text block, we should - // blur the target so focus can be set to the new block. - if ( shouldDisableEditing ) { - target.blur(); - } insertDefaultBlock( {}, getBlockRootClientId( clientId ), From e8f52a6cb4627e67eae42afe6ba139508a6a90b6 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 07/12] Always set tabindex 0 when editing is disabled --- .../block-editor/src/components/rich-text/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 6b9045df02a024..1f559a819ed8d1 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -294,6 +294,12 @@ export function RichTextWrapper( } const TagName = tagName; + let tabIndex; + if ( shouldDisableEditing ) { + tabIndex = 0; + } else { + tabIndex = props.tabIndex === 0 ? null : props.tabIndex; + } return ( <> { isSelected && ( @@ -394,11 +400,7 @@ export function RichTextWrapper( // select blocks when Shift Clicking into an element with // tabIndex because Safari will focus the element. However, // Safari will correctly ignore nested contentEditable elements. - tabIndex={ - props.tabIndex === 0 && ! shouldDisableEditing - ? null - : props.tabIndex - } + tabIndex={ tabIndex } data-wp-block-attribute-key={ identifier } /> From 63dc74f74ae83f294fee3a6bcb030cb5d4e8b70b Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 08/12] Fix onSplit in button block --- .../src/components/rich-text/use-enter.js | 13 +++++++---- packages/block-library/src/button/edit.js | 23 ++++++++++++++----- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index 2e98a70dfd9b68..3809e07b396b43 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -41,10 +41,6 @@ export function useEnter( props ) { shouldDisableEditing, } = propsRef.current; - if ( shouldDisableEditing ) { - return; - } - event.preventDefault(); const _value = { ...value }; @@ -72,7 +68,14 @@ export function useEnter( props ) { const { text, start, end } = _value; - if ( event.shiftKey ) { + if ( shouldDisableEditing ) { + _value.text = ''; + splitValue( { + value: _value, + onReplace, + onSplit, + } ); + } else if ( event.shiftKey ) { if ( ! disableLineBreaks ) { onChange( insert( _value, '\n' ) ); } diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 1d124baf1a7e30..912b541e28d0c8 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -293,12 +293,23 @@ function ButtonEdit( props ) { ...spacingProps.style, ...shadowProps.style, } } - onSplit={ ( value ) => - createBlock( 'core/button', { - ...attributes, - text: value, - } ) - } + onSplit={ ( value, isOriginal ) => { + let newAttributes; + if ( isOriginal || value ) { + newAttributes = { + ...attributes, + text: value, + }; + } + const block = createBlock( + 'core/button', + newAttributes + ); + if ( isOriginal ) { + block.clientId = clientId; + } + return block; + } } onReplace={ onReplace } onMerge={ mergeBlocks } identifier="text" From a0517a957e200b990e4cef4a3decddcc060376a8 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 09/12] Simulate the cursor is at the end of the rich text --- packages/block-editor/src/components/rich-text/use-enter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index 3809e07b396b43..e67056bba39125 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -69,7 +69,9 @@ export function useEnter( props ) { const { text, start, end } = _value; if ( shouldDisableEditing ) { - _value.text = ''; + // Simulate the cursor is at the end of the rich text. + _value.start = _value.text?.length; + _value.end = _value.text?.length; splitValue( { value: _value, onReplace, From e6f3bb71a99cb1c9f36565ffea0b9071998f8e9a Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Feb 2024 13:21:15 +0100 Subject: [PATCH 10/12] Improve tabindex logic --- .../block-editor/src/components/rich-text/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 1f559a819ed8d1..c1c34362d1c22f 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -294,12 +294,7 @@ export function RichTextWrapper( } const TagName = tagName; - let tabIndex; - if ( shouldDisableEditing ) { - tabIndex = 0; - } else { - tabIndex = props.tabIndex === 0 ? null : props.tabIndex; - } + const tabIndex = props.tabIndex === 0 ? null : props.tabIndex; return ( <> { isSelected && ( @@ -394,13 +389,13 @@ export function RichTextWrapper( props.className, 'rich-text' ) } - // Setting tabIndex to 0 is unnecessary, the element is already + // Setting tabIndex to 0 is unnecessary, if the element is already // focusable because it's contentEditable. This also fixes a // Safari bug where it's not possible to Shift+Click multi // select blocks when Shift Clicking into an element with // tabIndex because Safari will focus the element. However, // Safari will correctly ignore nested contentEditable elements. - tabIndex={ tabIndex } + tabIndex={ shouldDisableEditing ? 0 : tabIndex } data-wp-block-attribute-key={ identifier } /> From df1730c0d4b28c9f47daea399e413be76189c7c5 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Feb 2024 13:28:40 +0100 Subject: [PATCH 11/12] Just simulate the cursor when disabled editing --- .../block-editor/src/components/rich-text/use-enter.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js index e67056bba39125..5f07462e7c9720 100644 --- a/packages/block-editor/src/components/rich-text/use-enter.js +++ b/packages/block-editor/src/components/rich-text/use-enter.js @@ -72,12 +72,9 @@ export function useEnter( props ) { // Simulate the cursor is at the end of the rich text. _value.start = _value.text?.length; _value.end = _value.text?.length; - splitValue( { - value: _value, - onReplace, - onSplit, - } ); - } else if ( event.shiftKey ) { + } + + if ( event.shiftKey && ! shouldDisableEditing ) { if ( ! disableLineBreaks ) { onChange( insert( _value, '\n' ) ); } From 5578d8c20fcdcd924001197a6b2facbf25b9f96f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20Zi=C3=B3=C5=82kowski?= Date: Fri, 23 Feb 2024 14:20:21 +0100 Subject: [PATCH 12/12] Refactor useShouldDisableEditing hook --- .../src/components/rich-text/index.js | 2 +- .../rich-text/use-should-disable-editing.js | 46 +++++++++---------- 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index c1c34362d1c22f..87a9dc503a9be7 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -154,7 +154,7 @@ export function RichTextWrapper( const { getSelectionStart, getSelectionEnd, getBlockRootClientId } = useSelect( blockEditorStore ); // Disable Rich Text editing if block bindings specify that. - const shouldDisableEditing = useShouldDisableEditing(); + const shouldDisableEditing = useShouldDisableEditing( identifier ); const { selectionChange } = useDispatch( blockEditorStore ); const adjustedAllowedFormats = getAllowedFormats( { allowedFormats, diff --git a/packages/block-editor/src/components/rich-text/use-should-disable-editing.js b/packages/block-editor/src/components/rich-text/use-should-disable-editing.js index 8d92abbf85ba03..4c8b7ed3e391a3 100644 --- a/packages/block-editor/src/components/rich-text/use-should-disable-editing.js +++ b/packages/block-editor/src/components/rich-text/use-should-disable-editing.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ +import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { getBlockType, store as blocksStore } from '@wordpress/blocks'; /** * Internal dependencies @@ -12,31 +12,29 @@ import { useBlockEditContext } from '../block-edit'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -export function useShouldDisableEditing() { +export function useShouldDisableEditing( attributeName ) { const { clientId, name: blockName } = useBlockEditContext(); - - const { getBlockAttributes } = useSelect( blockEditorStore ); - const { getBlockBindingsSource } = unlock( useSelect( blocksStore ) ); - const blockBindings = getBlockAttributes( clientId )?.metadata?.bindings; - - if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) { - const blockTypeAttributes = getBlockType( blockName ).attributes; - - for ( const [ attribute, args ] of Object.entries( blockBindings ) ) { - if ( blockTypeAttributes?.[ attribute ]?.source !== 'rich-text' ) { - break; - } - - // If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it. - const blockBindingsSource = getBlockBindingsSource( args.source ); + return useSelect( + ( select ) => { if ( - ! blockBindingsSource || - blockBindingsSource.lockAttributesEditing + ! attributeName || + ! BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ]?.includes( + attributeName + ) ) { - return true; + return false; } - } - } - - return false; + const blockBindings = + select( blockEditorStore ).getBlockAttributes( clientId ) + ?.metadata?.bindings; + if ( ! blockBindings?.[ attributeName ]?.source ) { + return false; + } + const blockBindingsSource = unlock( + select( blocksStore ) + ).getBlockBindingsSource( blockBindings[ attributeName ].source ); + return blockBindingsSource?.lockAttributesEditing !== false; + }, + [ clientId, blockName, attributeName ] + ); }