From e4cdc2f4e541c5ff57eefccf452255dd4f08dee1 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 27 Jun 2019 13:22:41 +0100
Subject: [PATCH] Use classnames for cell alignment

---
 packages/block-library/src/table/edit.js             |  7 ++++---
 packages/block-library/src/table/save.js             |  6 ++++--
 packages/block-library/src/table/style.scss          | 12 ++++++++++++
 .../specs/blocks/__snapshots__/table.test.js.snap    |  2 +-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index fbb2730594ed30..6941ee19de5499 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -410,8 +410,10 @@ export class TableEdit extends Component {
 								columnIndex,
 							};
 
-							const cellClasses = classnames( { 'is-selected': isSelected } );
-							const cellStyles = align ? { textAlign: align } : undefined;
+							const cellClasses = classnames( {
+								'is-selected': isSelected,
+								[ `has-text-align-${ align }` ]: align,
+							} );
 
 							return (
 								<CellTag
@@ -419,7 +421,6 @@ export class TableEdit extends Component {
 									className={ cellClasses }
 								>
 									<RichText
-										style={ cellStyles }
 										className="wp-block-table__cell-content"
 										value={ content }
 										onChange={ this.onChange }
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index 5c969d2e873c14..9a2e8ce467dade 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -41,11 +41,13 @@ export default function save( { attributes } ) {
 				{ rows.map( ( { cells }, rowIndex ) => (
 					<tr key={ rowIndex }>
 						{ cells.map( ( { content, tag, align }, cellIndex ) => {
-							const cellStyles = align ? { textAlign: align } : undefined;
+							const cellClasses = classnames( {
+								[ `has-text-align-${ align }` ]: align,
+							} );
 
 							return (
 								<RichText.Content
-									style={ cellStyles }
+									className={ cellClasses ? cellClasses : undefined }
 									tagName={ tag }
 									value={ content }
 									key={ cellIndex }
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index b79d044fac2b35..34483d391c43ad 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -76,6 +76,18 @@
 		th,
 		td {
 			border-color: transparent;
+
+			&.has-text-align-left {
+				text-align: left;
+			}
+
+			&.has-text-align-center {
+				text-align: center;
+			}
+
+			&.has-text-align-right {
+				text-align: right;
+			}
 		}
 
 		border-bottom: 1px solid $light-gray-200;
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
index 584f4e9fa7a6c0..1d503e4edebcec 100644
--- a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
+++ b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Table allows cells to be aligned 1`] = `
 "<!-- wp:table -->
-<table class=\\"wp-block-table\\"><tbody><tr><td>None</td><td style=\\"text-align:left\\" data-align=\\"left\\">To the left</td></tr><tr><td style=\\"text-align:center\\" data-align=\\"center\\">Centered</td><td style=\\"text-align:right\\" data-align=\\"right\\">To the right</td></tr></tbody></table>
+<table class=\\"wp-block-table\\"><tbody><tr><td>None</td><td class=\\"has-text-align-left\\" data-align=\\"left\\">To the left</td></tr><tr><td class=\\"has-text-align-center\\" data-align=\\"center\\">Centered</td><td class=\\"has-text-align-right\\" data-align=\\"right\\">To the right</td></tr></tbody></table>
 <!-- /wp:table -->"
 `;