From ea97eddb4dde911f668aaad0c63820f228e5321f Mon Sep 17 00:00:00 2001
From: Artemio Morales <ric.morales22@gmail.com>
Date: Fri, 4 Nov 2022 15:29:35 -0400
Subject: [PATCH] Add styles to <figure/> element in core/image block during
 rendering of a gallery

When a gallery image contains a border radius and captions, the caption
container covers up the rounded corners of an image.

This commit checks to see if the border radius is set on core/image,
and if so, applies styles to the <figure /> element that will allow
captions to render properly.
---
 packages/block-library/src/gallery/index.php | 23 ++++++++++++++++++++
 packages/block-library/src/image/index.php   |  5 +++++
 2 files changed, 28 insertions(+)

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index ff1fb8ef42d89..3d839620967d0 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -32,6 +32,29 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+
+function block_core_gallery_caption_styles( $parsed_block ) {
+
+	$styles = WP_Theme_JSON_Resolver::get_theme_data()->get_data();
+	$borderRadius = '';
+
+	if(isset( $styles['styles']['blocks']['core/image']['border']['radius']) ) {
+		$borderRadius = $styles['styles']['blocks']['core/image']['border']['radius'];
+
+		if ( 'core/gallery' === $parsed_block['blockName'] ) {
+			foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
+				if ( 'core/image' === $inner_block['blockName'] ) {
+					$parsed_block['innerBlocks'][ $key ]['attrs']['border-radius'] = $borderRadius;
+				}
+			}
+		}
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_gallery_caption_styles' );
+
 /**
  * Adds a style tag for the --wp--style--unstable-gallery-gap var.
  *
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 9a9f175556e81..3917a872fd011 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -24,6 +24,11 @@ function render_block_core_image( $attributes, $content ) {
 			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
 		}
 	}
+
+	if ( isset( $attributes['border-radius'] ) ) {
+		$content = str_replace( '<figure', "<figure style='border-radius:" . $attributes['border-radius'] .  ";overflow:hidden;'", $content);
+	}
+
 	return $content;
 }