Display warnings in editor for unsupported features

includes/class-newspack-newsletters-renderer.php

@@ -192,9 +192,6 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			case 'core/list':
 			case 'core/heading':
 			case 'core/quote':
-				// TODO disable/handle/warn for:
-				// - without inline image
-				// - drop cap?
 				$text_attrs = array_merge(
 					array(
 						'padding'     => '0',
@@ -217,9 +214,6 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			 * Image block.
 			 */
 			case 'core/image':
-				// TODO disable/handle/warn for:
-				// - align right, align left.
-
 				// Parse block content.
 				$dom = new DomDocument();
 				@$dom->loadHTML( $inner_html ); // phpcs:ignore WordPress.PHP.NoSilencedErrors.Discouraged
@@ -271,9 +265,6 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			 * Buttons block.
 			 */
 			case 'core/buttons':
-				// TODO disable/handle/warn for:
-				// - layouts.
-
 				foreach ( $inner_blocks as $button_block ) {
 					// Parse block content.
 					$dom = new DomDocument();
@@ -295,6 +286,8 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 					);
 					if ( $is_outlined ) {
 						$default_button_attrs['background-color'] = 'transparent';
+					} else {
+						$default_button_attrs['background-color'] = '#32373c';
 					}
 					$button_attrs = array_merge(
 						$default_button_attrs,
@@ -315,7 +308,7 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			 * Separator block.
 			 */
 			case 'core/separator':
-				$is_style_default   = true;
+				$is_style_default   = 'is-style-default' == $attrs['className'];
 				$divider_attrs      = array_merge(
 					array(
 						'padding'      => '0',
@@ -396,16 +389,8 @@ private static function render_mjml_component( $block, $is_in_column = false, $i
 			 * Single Column block.
 			 */
 			case 'core/column':
-				// TODO disable/handle/warn for:
-				// - alignments. Middle/center will not work in mjml, top and bottom are looking slightly different in G editor and MJML.
-				// - nested colums. Not allowed in MJML.
-
 				if ( isset( $attrs['verticalAlignment'] ) ) {
-					if ( 'center' == $attrs['verticalAlignment'] ) {
-						$column_attrs['vertical-align'] = 'middle';
-					} else {
-						$column_attrs['vertical-align'] = $attrs['verticalAlignment'];
-					}
+					$column_attrs['vertical-align'] = $attrs['verticalAlignment'];
 				}
 				if ( isset( $attrs['width'] ) ) {
 					$column_attrs['width'] = $attrs['width'] . '%';

package.json

@@ -100,6 +100,7 @@
     "@wordpress/hooks": "^2.7.0",
     "@wordpress/i18n": "^3.10.0",
     "@wordpress/plugins": "^2.13.0",
+    "lodash": "^4.17.15",
     "webpack": "^4.42.1"
   },
   "devDependencies": {

src/editor/blocks-validation/blocks-filters.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+const handleSideAlignment = ( warnings, props ) => {
+	if ( props.attributes.align === 'left' || props.attributes.align === 'right' ) {
+		warnings.push( __( 'Side alignment', 'newspack-newsletters' ) );
+	}
+	return warnings;
+};
+
+const getWarnings = props => {
+	let warnings = [];
+	switch ( props.name ) {
+		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':
+			warnings = handleSideAlignment( warnings, props );
+			if ( props.attributes.align === 'full' ) {
+				warnings.push( __( 'Full width', 'newspack-newsletters' ) );
+			}
+			break;
+
+		case 'core/paragraph':
+			if ( props.attributes.content.indexOf( '<img' ) >= 0 ) {
+				warnings.push( __( 'Inline image', 'newspack-newsletters' ) );
+			}
+			if ( props.attributes.dropCap ) {
+				warnings.push( __( 'Drop cap', 'newspack-newsletters' ) );
+			}
+			break;
+	}
+	return warnings;
+};
+
+const withUnsupportedFeaturesNotices = createHigherOrderComponent( BlockListBlock => {
+	return props => {
+		const warnings = getWarnings( props );
+		return warnings.length ? (
+			<div className="newspack-newsletters__editor-block">
+				<div className="newspack-newsletters__editor-block__warning components-notice is-error">
+					{ __(
+						'These features will not be displayed correctly in an email, please remove them:',
+						'newspack-newsletters'
+					) }
+					<ul>
+						{ warnings.map( ( warning, i ) => (
+							<li key={ i }>{ warning }</li>
+						) ) }
+					</ul>
+				</div>
+				<BlockListBlock { ...props } />
+			</div>
+		) : (
+			<BlockListBlock { ...props } />
+		);
+	};
+}, 'withInspectorControl' );
+
+export const addBlocksValidationFilter = () => {
+	addFilter(
+		'editor.BlockListBlock',
+		'newspack-newsletters/unsupported-features-notices',
+		withUnsupportedFeaturesNotices
+	);
+};

src/editor/blocks-validation/nested-columns-detection.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { some, concat, without } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { useState, useEffect } from '@wordpress/element';
+
+const NestedColumnsDetectionBase = ( { blocks, updateBlock } ) => {
+	const [ warnedAboutNestedColumnsBlocksIds, setWarnedAboutNestedColumnsBlocksIds ] = useState(
+		[]
+	);
+
+	const handleInnerBlocksContent = innerBlocks => {
+		innerBlocks.forEach( innerBlock => {
+			if ( innerBlock.name === 'core/column' ) {
+				const hasCols = some( innerBlock.innerBlocks, ( { name } ) => name === 'core/columns' );
+				const hasWarning = warnedAboutNestedColumnsBlocksIds.indexOf( innerBlock.clientId ) >= 0;
+				if ( hasCols && ! hasWarning ) {
+					setWarnedAboutNestedColumnsBlocksIds(
+						concat( warnedAboutNestedColumnsBlocksIds, innerBlock.clientId )
+					);
+					updateBlock( innerBlock.clientId, {
+						...innerBlock,
+						attributes: { __nestedColumnWarning: true },
+					} );
+				} else if ( ! hasCols && hasWarning ) {
+					setWarnedAboutNestedColumnsBlocksIds(
+						without( warnedAboutNestedColumnsBlocksIds, innerBlock.clientId )
+					);
+					updateBlock( innerBlock.clientId, {
+						...innerBlock,
+						attributes: { __nestedColumnWarning: false },
+					} );
+				}
+			}
+		} );
+	};
+
+	useEffect(() => {
+		blocks.forEach( block => handleInnerBlocksContent( block.innerBlocks ) );
+	}, [ blocks ]);
+
+	return null;
+};
+
+export const NestedColumnsDetection = compose( [
+	withSelect( select => {
+		const { getBlocks } = select( 'core/block-editor' );
+		const { getNotices } = select( 'core/notices' );
+		return {
+			blocks: getBlocks(),
+			notices: getNotices(),
+		};
+	} ),
+	withDispatch( dispatch => {
+		return {
+			updateBlock: ( id, block ) => {
+				dispatch( 'core/block-editor' ).replaceBlock( id, block );
+			},
+		};
+	} ),
+] )( NestedColumnsDetectionBase );

src/editor/index.js

@@ -4,6 +4,7 @@
 import domReady from '@wordpress/dom-ready';
 import { unregisterBlockStyle } from '@wordpress/blocks';
 import { PluginDocumentSettingPanel, PluginPrePublishPanel } from '@wordpress/edit-post';
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
@@ -15,6 +16,11 @@ import Sidebar from './sidebar/';
 import Editor from './editor/';
 import PrePublishSlot from './pre-publish-slot';
 
+import { addBlocksValidationFilter } from './blocks-validation/blocks-filters';
+import { NestedColumnsDetection } from './blocks-validation/nested-columns-detection';
+
+addBlocksValidationFilter();
+
 /* Unregister core block styles that are unsupported in emails */
 domReady( () => {
 	unregisterBlockStyle( 'core/separator', 'dots' );
@@ -37,12 +43,15 @@ addFilter( 'blocks.registerBlockType', 'newspack-newsletters/core-blocks', ( set
 
 registerPlugin( 'newspack-newsletters-sidebar', {
 	render: () => (
-		<PluginDocumentSettingPanel
-			name="newsletters-settings-panel"
-			title={ __( ' Newsletter Settings', 'newspack-newsletters' ) }
-		>
-			<Sidebar />
-		</PluginDocumentSettingPanel>
+		<Fragment>
+			<NestedColumnsDetection />
+			<PluginDocumentSettingPanel
+				name="newsletters-settings-panel"
+				title={ __( ' Newsletter Settings', 'newspack-newsletters' ) }
+			>
+				<Sidebar />
+			</PluginDocumentSettingPanel>
+		</Fragment>
 	),
 	icon: null,
 } );

src/editor/sidebar/style.scss

@@ -8,10 +8,29 @@
 }
 
 .block-editor-block-list__layout {
-	font-family: Ubuntu, Helvetica, Arial, sans-serif;
+	*:not( code ) {
+		font-family: Ubuntu, Helvetica, Arial, sans-serif !important;
+	}
 
 	code {
 		background: none;
 		color: inherit;
 	}
 }
+
+.wp-block-buttons .block-editor-block-list__layout {
+	display: flex;
+	justify-content: space-between;
+}
+
+.newspack-newsletters {
+	&__editor-block {
+		&__warning {
+			display: block;
+			color: #191e23;
+			ul {
+				margin: 0 !important;
+			}
+		}
+	}
+}