Table Block: Add toolbar button to add a caption (WordPress#47984)

* Use Caption component

* Fix e2e test

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: BenjaminZekavica <benjamin_zekavica@git.wordpress.org>

packages/block-library/src/table/edit.js

@@ -16,7 +16,6 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,7 +40,6 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -57,6 +55,7 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { Caption } from '../utils/caption';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -98,7 +97,7 @@ function TableEdit( {
 	insertBlocksAfter,
 	isSelected,
 } ) {
-	const { hasFixedLayout, caption, head, foot } = attributes;
+	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
 	const [ initialColumnCount, setInitialColumnCount ] = useState( 2 );
 	const [ selectedCell, setSelectedCell ] = useState();
@@ -523,27 +522,7 @@ function TableEdit( {
 					{ renderedSections }
 				</table>
 			) }
-			{ ! isEmpty && (
-				<RichText
-					identifier="caption"
-					tagName="figcaption"
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					aria-label={ __( 'Table caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					// Deselect the selected table cell when the caption is focused.
-					onFocus={ () => setSelectedCell() }
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
-			{ isEmpty && (
+			{ isEmpty ? (
 				<Placeholder
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
@@ -582,6 +561,14 @@ function TableEdit( {
 						</Button>
 					</form>
 				</Placeholder>
+			) : (
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Table caption text' ) }
+				/>
 			) }
 		</figure>
 	);

test/e2e/specs/editor/blocks/table.spec.js

@@ -275,10 +275,11 @@ test.describe( 'Table', () => {
 			.locator( 'role=button[name="Create Table"i]' )
 			.click();
 
-		// Click the first cell and add some text.
-		await editor.canvas
-			.locator( 'role=document[name="Block: Table"i] >> figcaption' )
-			.click();
+		await editor.clickBlockToolbarButton( 'Add caption' );
+		const caption = editor.canvas.locator(
+			'role=textbox[name="Table caption text"i]'
+		);
+		await expect( caption ).toBeFocused();
 		await page.keyboard.type( 'Caption!' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );