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

@@ -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>
  </>

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>
  );
  }