From eb2c2629a96ae2ddc3e3b4815fc18aace6efafb6 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 29 Aug 2024 14:30:38 +0200 Subject: [PATCH 1/8] Change placeholder when attribute is bound --- .../src/components/rich-text/index.js | 74 +++++++++---------- 1 file changed, 34 insertions(+), 40 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index e8fbec1e0b745..6a463ed95f3f7 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -20,7 +20,7 @@ import { removeFormat, } from '@wordpress/rich-text'; import { Popover } from '@wordpress/components'; -import { getBlockType, store as blocksStore } from '@wordpress/blocks'; +import { store as blocksStore } from '@wordpress/blocks'; import deprecated from '@wordpress/deprecated'; /** @@ -163,49 +163,41 @@ export function RichTextWrapper( isBlockSelected, ] ); - const disableBoundBlocks = useSelect( + const { disableBoundBlock, bindingsPlaceholder } = useSelect( ( select ) => { - // Disable Rich Text editing if block bindings specify that. - let _disableBoundBlocks = false; - if ( blockBindings && canBindBlock( blockName ) ) { - const blockTypeAttributes = - getBlockType( blockName ).attributes; - const { getBlockBindingsSource } = unlock( - select( blocksStore ) - ); - for ( const [ attribute, binding ] of Object.entries( - blockBindings - ) ) { - if ( - blockTypeAttributes?.[ attribute ]?.source !== - 'rich-text' - ) { - break; - } - - // If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it. - const blockBindingsSource = getBlockBindingsSource( - binding.source - ); - if ( - ! blockBindingsSource?.canUserEditValue?.( { - select, - context: blockContext, - args: binding.args, - } ) - ) { - _disableBoundBlocks = true; - break; - } - } + if ( + ! blockBindings?.[ identifier ] || + ! canBindBlock( blockName ) + ) { + return {}; } - return _disableBoundBlocks; + const relevantBinding = blockBindings[ identifier ]; + const { getBlockBindingsSource } = unlock( select( blocksStore ) ); + const blockBindingsSource = getBlockBindingsSource( + relevantBinding.source + ); + + const _disableBoundBlock = + ! blockBindingsSource?.canUserEditValue?.( { + select, + context: blockContext, + args: relevantBinding.args, + } ); + + const _bindingsPlaceholder = + ( relevantBinding?.args?.key || blockBindingsSource?.label ) + + ' value is empty'; + + return { + disableBoundBlock: _disableBoundBlock, + bindingsPlaceholder: _bindingsPlaceholder, + }; }, - [ blockBindings, blockName ] + [ blockBindings, identifier, blockName, blockContext ] ); - const shouldDisableEditing = readOnly || disableBoundBlocks; + const shouldDisableEditing = readOnly || disableBoundBlock; const { getSelectionStart, getSelectionEnd, getBlockRootClientId } = useSelect( blockEditorStore ); @@ -335,7 +327,7 @@ export function RichTextWrapper( selectionStart, selectionEnd, onSelectionChange, - placeholder, + placeholder: bindingsPlaceholder || placeholder, __unstableIsSelected: isSelected, __unstableDisableFormats: disableFormats, preserveWhiteSpace, @@ -404,9 +396,11 @@ export function RichTextWrapper( // Overridable props. role="textbox" aria-multiline={ ! disableLineBreaks } - aria-label={ placeholder } aria-readonly={ shouldDisableEditing } { ...props } + aria-label={ + bindingsPlaceholder || props[ 'aria-label' ] || placeholder + } { ...autocompleteProps } ref={ useMergeRefs( [ // Rich text ref must be first because its focus listener From 96580c603965ec568d9ec60751fa891a59713471 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 29 Aug 2024 15:44:21 +0200 Subject: [PATCH 2/8] Only change placeholder when value is empty --- packages/block-editor/src/components/rich-text/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 6a463ed95f3f7..847ef4ab73b1d 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -191,7 +191,9 @@ export function RichTextWrapper( return { disableBoundBlock: _disableBoundBlock, - bindingsPlaceholder: _bindingsPlaceholder, + bindingsPlaceholder: + ( ! adjustedValue || adjustedValue.length === 0 ) && + _bindingsPlaceholder, }; }, [ blockBindings, identifier, blockName, blockContext ] From e637c1c5091c82e9aa13d3c8a0ccb5a960c7358b Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Fri, 30 Aug 2024 13:07:03 +0200 Subject: [PATCH 3/8] Translate empty text Co-authored-by: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> --- packages/block-editor/src/components/rich-text/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 847ef4ab73b1d..3255710544eb5 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -186,8 +186,8 @@ export function RichTextWrapper( } ); const _bindingsPlaceholder = - ( relevantBinding?.args?.key || blockBindingsSource?.label ) + - ' value is empty'; + // Translators: %s is the bindings source or bindings key placeholder. + sprintf( '%s value is empty', ( relevantBinding?.args?.key || blockBindingsSource?.label ) ); return { disableBoundBlock: _disableBoundBlock, From 6cde7b0417f81fd1a5fc477d6449fa5580b2033e Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 30 Aug 2024 13:12:09 +0200 Subject: [PATCH 4/8] Adapt latest commit --- packages/block-editor/src/components/rich-text/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 3255710544eb5..20d781e74956a 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -22,6 +22,7 @@ import { import { Popover } from '@wordpress/components'; import { store as blocksStore } from '@wordpress/blocks'; import deprecated from '@wordpress/deprecated'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -185,9 +186,11 @@ export function RichTextWrapper( args: relevantBinding.args, } ); - const _bindingsPlaceholder = - // Translators: %s is the bindings source or bindings key placeholder. - sprintf( '%s value is empty', ( relevantBinding?.args?.key || blockBindingsSource?.label ) ); + const _bindingsPlaceholder = sprintf( + /* translators: %s: source label or key */ + __( '%s value is empty' ), + relevantBinding?.args?.key || blockBindingsSource?.label + ); return { disableBoundBlock: _disableBoundBlock, From 14fc2f22bcafd7b996aa71a83083805be45f06b7 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 30 Aug 2024 13:13:35 +0200 Subject: [PATCH 5/8] Add `adjustedValue` in `useSelect` --- packages/block-editor/src/components/rich-text/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 20d781e74956a..edad8fb0339af 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -199,7 +199,7 @@ export function RichTextWrapper( _bindingsPlaceholder, }; }, - [ blockBindings, identifier, blockName, blockContext ] + [ blockBindings, identifier, blockName, blockContext, adjustedValue ] ); const shouldDisableEditing = readOnly || disableBoundBlock; From 5806c0a62846ea8106285fd5eb8d00f1142bb890 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 30 Aug 2024 15:06:51 +0200 Subject: [PATCH 6/8] Different message depending on capabilities --- .../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 edad8fb0339af..11f1b1bc5a877 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -186,11 +186,13 @@ export function RichTextWrapper( args: relevantBinding.args, } ); - const _bindingsPlaceholder = sprintf( - /* translators: %s: source label or key */ - __( '%s value is empty' ), - relevantBinding?.args?.key || blockBindingsSource?.label - ); + const _bindingsPlaceholder = _disableBoundBlock + ? relevantBinding?.args?.key || blockBindingsSource?.label + : sprintf( + /* translators: %s: source label or key */ + __( 'Add %s value' ), + relevantBinding?.args?.key || blockBindingsSource?.label + ); return { disableBoundBlock: _disableBoundBlock, From daba2d67a4b96df290c9dfe77158671de9697fe9 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Mon, 2 Sep 2024 12:16:50 +0200 Subject: [PATCH 7/8] Remove "empty" from placeholder --- packages/block-editor/src/components/rich-text/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 11f1b1bc5a877..0900a4c128eec 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -190,7 +190,7 @@ export function RichTextWrapper( ? relevantBinding?.args?.key || blockBindingsSource?.label : sprintf( /* translators: %s: source label or key */ - __( 'Add %s value' ), + __( 'Add %s' ), relevantBinding?.args?.key || blockBindingsSource?.label ); From eedbb736ff6d3d8faf30c59aa77a4a1dbb936e1e Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Mon, 2 Sep 2024 12:18:59 +0200 Subject: [PATCH 8/8] Change `relatedBinding` variable name --- .../block-editor/src/components/rich-text/index.js | 10 +++++----- 1 file changed, 5 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 0900a4c128eec..732b8dbf2c089 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -173,25 +173,25 @@ export function RichTextWrapper( return {}; } - const relevantBinding = blockBindings[ identifier ]; + const relatedBinding = blockBindings[ identifier ]; const { getBlockBindingsSource } = unlock( select( blocksStore ) ); const blockBindingsSource = getBlockBindingsSource( - relevantBinding.source + relatedBinding.source ); const _disableBoundBlock = ! blockBindingsSource?.canUserEditValue?.( { select, context: blockContext, - args: relevantBinding.args, + args: relatedBinding.args, } ); const _bindingsPlaceholder = _disableBoundBlock - ? relevantBinding?.args?.key || blockBindingsSource?.label + ? relatedBinding?.args?.key || blockBindingsSource?.label : sprintf( /* translators: %s: source label or key */ __( 'Add %s' ), - relevantBinding?.args?.key || blockBindingsSource?.label + relatedBinding?.args?.key || blockBindingsSource?.label ); return {