feat: column middle alignment handling

Closes #231
Automattic · Jun 24, 2020 · 5f82db4 · 5f82db4
1 parent ccaebbc
commit 5f82db4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/includes/class-newspack-newsletters-renderer.php b/includes/class-newspack-newsletters-renderer.php
@@ -436,8 +436,13 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			 */
 			case 'core/column':
 				if ( isset( $attrs['verticalAlignment'] ) ) {
-					$column_attrs['vertical-align'] = $attrs['verticalAlignment'];
+					if ( 'center' === $attrs['verticalAlignment'] ) {
+						$column_attrs['vertical-align'] = 'middle';
+					} else {
+						$column_attrs['vertical-align'] = $attrs['verticalAlignment'];
+					}
 				}
+
 				if ( isset( $attrs['width'] ) ) {
 					$column_attrs['width']     = $attrs['width'] . '%';
 					$column_attrs['css-class'] = 'mj-column-has-width';

diff --git a/src/editor/blocks-validation/blocks-filters.js b/src/editor/blocks-validation/blocks-filters.js
@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import { every, some } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
 
 const handleSideAlignment = ( warnings, props ) => {
 	if ( props.attributes.align === 'left' || props.attributes.align === 'right' ) {
@@ -12,6 +18,8 @@ const handleSideAlignment = ( warnings, props ) => {
 	return warnings;
 };
 
+const isCenterAligned = block => block.attributes.verticalAlignment === 'center';
+
 const getWarnings = props => {
 	let warnings = [];
 	switch ( props.name ) {
@@ -21,13 +29,33 @@ const getWarnings = props => {
 			}
 			break;
 
+		// `vertical-align='middle'` will only work if all columns are middle-aligned.
+		// This is different in Gutenberg, because it uses flexbox layout (not available in email HTML).
+		//
+		// If a user chooses middle-alignment of a column, they will be prompted to
+		// middle-align all of the columns.
+		//
+		// Middle alignment option should be removed from the UI for a single column, when that's
+		// handled by the block editor filters.
+		case 'core/columns':
+			const { getBlock } = select( 'core/block-editor' );
+			const { innerBlocks } = getBlock( props.block.clientId );
+			const isAnyColumnCenterAligned = some( innerBlocks, isCenterAligned );
+			const areAllColumnsCenterAligned = every( innerBlocks, isCenterAligned );
+			if ( isAnyColumnCenterAligned && ! areAllColumnsCenterAligned ) {
+				warnings.push(
+					__(
+						'Unequal middle alignment. All or none of the columns should be middle-aligned.',
+						'newspack-newsletters'
+					)
+				);
+			}
+			break;
+
 		case 'core/column':
 			if ( props.attributes.__nestedColumnWarning ) {
 				warnings.push( __( 'Nested columns', 'newspack-newsletters' ) );
 			}
-			if ( props.attributes.verticalAlignment === 'center' ) {
-				warnings.push( __( 'Middle alignment', 'newspack-newsletters' ) );
-			}
 			break;
 
 		case 'core/image':