From da1a333fe28e37d6c5216ae89eb10921551a5efc Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 18 Dec 2023 13:18:18 +0900
Subject: [PATCH 1/2] Use Caption component

---
 packages/block-library/src/table/edit.js   | 35 +++++++---------------
 test/e2e/specs/editor/blocks/table.spec.js |  9 +++---
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index b8f239a01095d..4aef0b4d72051 100644
--- a/packages/block-library/src/table/edit.js
+++ b/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>
 	);
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 1e6dfdcd76e18..b14ff8e7fe1f7 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/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 = page.locator(
+			'role=textbox[name="Table caption text"i]'
+		);
+		await expect( caption ).toBeFocused();
 		await page.keyboard.type( 'Caption!' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );

From 71d09f7c9e70a29ec5aecf7f76c310a9e2b5853c Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 18 Dec 2023 13:39:41 +0900
Subject: [PATCH 2/2] Fix e2e test

---
 test/e2e/specs/editor/blocks/table.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index b14ff8e7fe1f7..92e209e88aeb1 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -276,7 +276,7 @@ test.describe( 'Table', () => {
 			.click();
 
 		await editor.clickBlockToolbarButton( 'Add caption' );
-		const caption = page.locator(
+		const caption = editor.canvas.locator(
 			'role=textbox[name="Table caption text"i]'
 		);
 		await expect( caption ).toBeFocused();