From 7d945afdfc767d95e7c35ae7274bff4ef60e4322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <wp@iseulde.com>
Date: Wed, 23 Oct 2019 22:37:19 +0200
Subject: [PATCH] Table: remove wrapper around cells (#17711)

---
 packages/block-library/src/table/edit.js      | 30 +++++--------------
 packages/block-library/src/table/editor.scss  |  4 ---
 .../specs/editor/blocks/table.test.js         | 16 +++++-----
 3 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index b86c0e282d7f9..1599bb7e53f64 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -40,7 +40,6 @@ import {
 	deleteColumn,
 	toggleSection,
 	isEmptyTableSection,
-	isCellSelected,
 } from './state';
 import icon from './icon';
 
@@ -435,7 +434,6 @@ export class TableEdit extends Component {
 		}
 
 		const Tag = `t${ name }`;
-		const { selectedCell } = this.state;
 
 		return (
 			<Tag>
@@ -447,35 +445,21 @@ export class TableEdit extends Component {
 								rowIndex,
 								columnIndex,
 							};
-							const isSelected = isCellSelected( cellLocation, selectedCell );
 
 							const cellClasses = classnames(	{
-								'is-selected': isSelected,
 								[ `has-text-align-${ align }` ]: align,
-							} );
-							const richTextClassName = 'wp-block-table__cell-content';
+							}, 'wp-block-table__cell-content' );
 
 							return (
-								<CellTag
+								<RichText
+									tagName={ CellTag }
 									key={ columnIndex }
 									className={ cellClasses }
 									scope={ CellTag === 'th' ? scope : undefined }
-									onClick={ ( event ) => {
-										// When a cell is selected, forward focus to the child RichText. This solves an issue where the
-										// user may click inside a cell, but outside of the RichText, resulting in nothing happening.
-										const richTextElement = event && event.target && event.target.querySelector( `.${ richTextClassName }` );
-										if ( richTextElement ) {
-											richTextElement.focus();
-										}
-									} }
-								>
-									<RichText
-										className={ richTextClassName }
-										value={ content }
-										onChange={ this.onChange }
-										unstableOnFocus={ this.createOnFocus( cellLocation ) }
-									/>
-								</CellTag>
+									value={ content }
+									onChange={ this.onChange }
+									unstableOnFocus={ this.createOnFocus( cellLocation ) }
+								/>
 							);
 						} ) }
 					</tr>
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index f5dbb5f2643c0..16002aa4dbaae 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -36,7 +36,6 @@
 
 	td,
 	th {
-		padding: 0;
 		border: $border-width solid;
 	}
 
@@ -47,9 +46,6 @@
 		border-style: double;
 	}
 
-	&__cell-content {
-		padding: 0.5em;
-	}
 	// Extra specificity to override default Placeholder styles.
 	&__placeholder-form.wp-block-table__placeholder-form {
 		text-align: left;
diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js
index 15267da90cb18..790ba0cd1ad7d 100644
--- a/packages/e2e-tests/specs/editor/blocks/table.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/table.test.js
@@ -70,7 +70,7 @@ describe( 'Table', () => {
 		await clickButton( createButtonLabel );
 
 		// Click the first cell and add some text.
-		await page.click( '.wp-block-table__cell-content' );
+		await page.click( 'td' );
 		await page.keyboard.type( 'This' );
 
 		// Tab to the next cell and add some text.
@@ -114,13 +114,13 @@ describe( 'Table', () => {
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 
-		await page.click( 'thead .wp-block-table__cell-content' );
+		await page.click( 'thead th' );
 		await page.keyboard.type( 'header' );
 
-		await page.click( 'tbody .wp-block-table__cell-content' );
+		await page.click( 'tbody td' );
 		await page.keyboard.type( 'body' );
 
-		await page.click( 'tfoot .wp-block-table__cell-content' );
+		await page.click( 'tfoot td' );
 		await page.keyboard.type( 'footer' );
 
 		// Expect the table to have a header, body and footer with written content.
@@ -146,7 +146,7 @@ describe( 'Table', () => {
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 
-		await page.click( '.wp-block-table__cell-content' );
+		await page.click( 'td' );
 
 		// Add a column.
 		await clickBlockToolbarButton( 'Edit table' );
@@ -155,7 +155,7 @@ describe( 'Table', () => {
 		// Expect the table to have 3 columns across the header, body and footer.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		await page.click( '.wp-block-table__cell-content' );
+		await page.click( 'td' );
 
 		// Delete a column.
 		await clickBlockToolbarButton( 'Edit table' );
@@ -177,7 +177,7 @@ describe( 'Table', () => {
 		await clickButton( createButtonLabel );
 
 		// Click the first cell and add some text. Don't align.
-		const cells = await page.$$( '.wp-block-table__cell-content' );
+		const cells = await page.$$( 'td,th' );
 		await cells[ 0 ].click();
 		await page.keyboard.type( 'None' );
 
@@ -212,7 +212,7 @@ describe( 'Table', () => {
 		await fixedWidthSwitch.click();
 
 		// Add multiple new lines to the first cell to make it taller.
-		await page.click( '.wp-block-table__cell-content' );
+		await page.click( 'td' );
 		await page.keyboard.type( '\n\n\n\n' );
 
 		// Get the bounding client rect for the second cell.