From aca9273fd451cd9f264dd8116f9816e5b7ec3487 Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Tue, 10 Sep 2024 11:22:35 +0530
Subject: [PATCH] Add the embed figcaption inside the figure tag (#64970)

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/block-library/src/embed/edit.js      |  7 ------
 .../block-library/src/embed/embed-preview.js  | 24 +++++++++++++++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 6978e144794047..da3dac3e3d62b5 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -14,7 +14,6 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-import { Caption } from '../utils/caption';
 
 /**
  * External dependencies
@@ -277,14 +276,8 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
-				/>
-				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
-					insertBlocksAfter={ insertBlocksAfter }
-					label={ __( 'Embed caption text' ) }
-					showToolbarButton={ isSelected }
 				/>
 			</View>
 		</>
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index d53f1148cee13c..6ef10df08a8c24 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -21,6 +21,7 @@ import { getAuthority } from '@wordpress/url';
  * Internal dependencies
  */
 import WpEmbedPreview from './wp-embed-preview';
+import { Caption } from '../utils/caption';
 
 class EmbedPreview extends Component {
 	constructor() {
@@ -52,8 +53,19 @@ class EmbedPreview extends Component {
 	}
 
 	render() {
-		const { preview, previewable, url, type, className, icon, label } =
-			this.props;
+		const {
+			preview,
+			previewable,
+			url,
+			type,
+			className,
+			icon,
+			label,
+			insertBlocksAfter,
+			attributes,
+			setAttributes,
+			isSelected,
+		} = this.props;
 		const { scripts } = preview;
 		const { interactive } = this.state;
 
@@ -123,6 +135,14 @@ class EmbedPreview extends Component {
 						</p>
 					</Placeholder>
 				) }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
 			</figure>
 		);
 	}