Use classnames for cell alignment

WordPress · Jun 27, 2019 · 7fdde45 · 7fdde45
1 parent 806b46b
commit 7fdde45
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -410,16 +410,17 @@ 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
 									key={ columnIndex }
 									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
@@ -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
@@ -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
@@ -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 -->"
 `;