Table: remove wrapper around cells (#17711)

WordPress · Nov 4, 2019 · 7d945af · 7d945af
1 parent 04e1276
commit 7d945af
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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.