Change default "Connected to a custom field" message in bindings (#59434

) * Change default message to read the label or use dynamic data * Translate "dynamic data" string * Update message logic to handle translations
WordPress · Feb 29, 2024 · 10f8a6e · 10f8a6e
1 parent 5b06cdc
commit 10f8a6e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -20,7 +20,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -336,7 +336,7 @@ export function ImageEdit( {
 	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
-	const { lockUrlControls = false } = useSelect(
+	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
 				return {};
@@ -351,6 +351,13 @@ export function ImageEdit( {
 					!! metadata?.bindings?.url &&
 					( ! blockBindingsSource ||
 						blockBindingsSource?.lockAttributesEditing ),
+				lockUrlControlsMessage: blockBindingsSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							blockBindingsSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ isSingleSelected ]
@@ -387,7 +394,7 @@ export function ImageEdit( {
 					<span
 						className={ 'block-bindings-media-placeholder-message' }
 					>
-						{ __( 'Connected to a custom field' ) }
+						{ lockUrlControlsMessage }
 					</span>
 				) : (
 					content

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -410,7 +410,9 @@ export default function Image( {
 		lockUrlControls = false,
 		lockHrefControls = false,
 		lockAltControls = false,
+		lockAltControlsMessage,
 		lockTitleControls = false,
+		lockTitleControlsMessage,
 		lockCaption = false,
 	} = useSelect(
 		( select ) => {
@@ -454,10 +456,24 @@ export default function Image( {
 					!! altBinding &&
 					( ! altBindingSource ||
 						altBindingSource?.lockAttributesEditing ),
+				lockAltControlsMessage: altBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							altBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
 					( ! titleBindingSource ||
 						titleBindingSource?.lockAttributesEditing ),
+				lockTitleControlsMessage: titleBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							titleBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
 			};
 		},
 		[ clientId, isSingleSelected, metadata?.bindings ]
@@ -557,11 +573,7 @@ export default function Image( {
 								disabled={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -607,11 +619,7 @@ export default function Image( {
 								disabled={ lockTitleControls }
 								help={
 									lockTitleControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockTitleControlsMessage }</>
 									) : (
 										<>
 											{ __(
@@ -652,11 +660,7 @@ export default function Image( {
 								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
-										<>
-											{ __(
-												'Connected to a custom field'
-											) }
-										</>
+										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
@@ -694,7 +698,7 @@ export default function Image( {
 					readOnly={ lockTitleControls }
 					help={
 						lockTitleControls ? (
-							<>{ __( 'Connected to a custom field' ) }</>
+							<>{ lockTitleControlsMessage }</>
 						) : (
 							<>
 								{ __(