Fix: Embed blocks: adding captions via toolbar (#64394)

* Add the Caption component to be used for consistency on the embed block similar to audio and image * Change the label for the embed caption text Co-authored-by: hbhalodia <[email protected]> Co-authored-by: Rishit30G <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: simison <[email protected]>
WordPress · Aug 13, 2024 · 943b72a · 943b72a
1 parent ad37f20
commit 943b72a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 37 deletions.
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
@@ -14,6 +14,7 @@ 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,6 +278,14 @@ const EmbedEdit = ( props ) => {
 					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
@@ -13,13 +13,8 @@ import clsx from 'clsx';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import {
-	RichText,
-	BlockIcon,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
+import { BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { getAuthority } from '@wordpress/url';
 
 /**
@@ -57,19 +52,8 @@ class EmbedPreview extends Component {
 	}
 
 	render() {
-		const {
-			preview,
-			previewable,
-			url,
-			type,
-			caption,
-			onCaptionChange,
-			isSelected,
-			className,
-			icon,
-			label,
-			insertBlocksAfter,
-		} = this.props;
+		const { preview, previewable, url, type, className, icon, label } =
+			this.props;
 		const { scripts } = preview;
 		const { interactive } = this.state;
 
@@ -139,24 +123,6 @@ class EmbedPreview extends Component {
 						</p>
 					</Placeholder>
 				) }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						identifier="caption"
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ onCaptionChange }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
 			</figure>
 		);
 	}