Image block: Save <figcaption> if caption attr is bound

backport-changelog/6.9/9702.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9702
+
+* https://github.com/WordPress/gutenberg/pull/71483

lib/compat/wordpress-6.9/block-bindings.php

@@ -10,15 +10,18 @@
 
 // The following filter can be removed once the minimum required WordPress version is 6.9 or newer.
 add_filter(
-	'block_bindings_supported_attributes_core/post-date',
-	function ( $attributes ) {
-		if ( ! in_array( 'datetime', $attributes, true ) ) {
+	'block_bindings_supported_attributes',
+	function ( $attributes, $block_type ) {
+		if ( 'core/image' === $block_type && ! in_array( 'caption', $attributes, true ) ) {
+			$attributes[] = 'caption';
+		}
+		if ( 'core/post-date' === $block_type && ! in_array( 'datetime', $attributes, true ) ) {
 			$attributes[] = 'datetime';
 		}
 		return $attributes;
 	},
 	10,
-	3
+	2
 );
 
 /**

packages/block-editor/src/utils/block-bindings.js

@@ -14,7 +14,7 @@ const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
 const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
-	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/image': [ 'id', 'url', 'title', 'alt', 'caption' ],
 	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
 	'core/post-date': [ 'datetime' ],
 };

packages/block-library/src/image/image.js

@@ -625,7 +625,7 @@ export default function Image( {
 		lockAltControlsMessage,
 		lockTitleControls = false,
 		lockTitleControlsMessage,
-		lockCaption = false,
+		hideCaptionControls = false,
 	} = useSelect(
 		( select ) => {
 			if ( ! isSingleSelected ) {
@@ -635,6 +635,7 @@ export default function Image( {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
+				caption: captionBinding,
 			} = metadata?.bindings || {};
 			const hasParentPattern = !! context[ 'pattern/overrides' ];
 			const urlBindingSource = getBlockBindingsSource(
@@ -658,10 +659,7 @@ export default function Image( {
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
 					hasParentPattern || arePatternOverridesEnabled,
-				lockCaption:
-					// Disable editing the caption if the image is inside a pattern instance.
-					// This is a temporary solution until we support overriding the caption on the frontend.
-					hasParentPattern,
+				hideCaptionControls: !! captionBinding,
 				lockAltControls:
 					!! altBinding &&
 					! altBindingSource?.canUserEditValue?.( {
@@ -1147,10 +1145,9 @@ export default function Image( {
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={
 					isSingleSelected &&
-					hasNonContentControls &&
-					! arePatternOverridesEnabled
+					( hasNonContentControls || isContentOnlyMode ) &&
+					! hideCaptionControls
 				}
-				readOnly={ lockCaption }
 			/>
 		</>
 	);

packages/block-library/src/image/save.js

@@ -31,6 +31,7 @@ export default function save( { attributes } ) {
 		linkTarget,
 		sizeSlug,
 		title,
+		metadata: { bindings = {} } = {},
 	} = attributes;
 
 	const newRel = ! rel ? undefined : rel;
@@ -70,6 +71,11 @@ export default function save( { attributes } ) {
 		/>
 	);
 
+	const displayCaption =
+		! RichText.isEmpty( caption ) ||
+		bindings.caption ||
+		bindings?.__default?.source === 'core/pattern-overrides';
+
 	const figure = (
 		<>
 			{ href ? (
@@ -84,7 +90,7 @@ export default function save( { attributes } ) {
 			) : (
 				image
 			) }
-			{ ! RichText.isEmpty( caption ) && (
+			{ displayCaption && (
 				<RichText.Content
 					className={ __experimentalGetElementClassName( 'caption' ) }
 					tagName="figcaption"

test/integration/fixtures/blocks/core__image__caption-block-bindings.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"metadata":{"bindings":{"caption":{"source":"core/post-data","args":{"key":"date"}}}}} -->
+<figure class="wp-block-image"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" /><figcaption class="wp-element-caption"></figcaption></figure>
+<!-- /wp:image -->

test/integration/fixtures/blocks/core__image__caption-block-bindings.json

@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"metadata": {
+				"bindings": {
+					"caption": {
+						"source": "core/post-data",
+						"args": {
+							"key": "date"
+						}
+					}
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__image__caption-block-bindings.parsed.json

@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"metadata": {
+				"bindings": {
+					"caption": {
+						"source": "core/post-data",
+						"args": {
+							"key": "date"
+						}
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /><figcaption class=\"wp-element-caption\"></figcaption></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /><figcaption class=\"wp-element-caption\"></figcaption></figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__image__caption-block-bindings.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"metadata":{"bindings":{"caption":{"source":"core/post-data","args":{"key":"date"}}}}} -->
+<figure class="wp-block-image"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt=""/><figcaption class="wp-element-caption"></figcaption></figure>
+<!-- /wp:image -->