Fix custom styles for emails in preview and in sent messages (#7595)

Author: merkushin

assets/blocks/email-editor.js

@@ -20,8 +20,9 @@ export default function handleEmailBlocksEditor() {
 	 * Update the blocks to remove extra settings when used in email editor.
 	 *
 	 * @param {Object} settings Block settings.
+	 * @param {string} name     Block name.
 	 */
-	function removeIrrelevantSettings( settings ) {
+	function removeIrrelevantSettings( settings, name ) {
 		const supports = { ...( settings.supports ? settings.supports : {} ) };
 
 		// Remove font family setting.
@@ -48,6 +49,20 @@ export default function handleEmailBlocksEditor() {
 			} );
 		}
 
+		// Alignment is not supported for buttons block in emails.
+		if ( name === 'core/buttons' ) {
+			if ( has( supports, 'layout' ) ) {
+				supports.layout = false;
+			}
+		}
+
+		// Alingment is not supported for image block in emails.
+		if ( name === 'core/image' ) {
+			if ( has( supports, 'align' ) ) {
+				supports.align = false;
+			}
+		}
+
 		return {
 			...settings,
 			supports,

assets/css/email-notifications/email-editor-style.scss

@@ -5,7 +5,6 @@
 	.wp-block-post-content *,
 	.block-editor-block-list__layout * {
 		font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-		color: #101517;
 	}
 	.wp-element-button,
 	.editor-styles-wrapper .wp-block-button__link {

assets/css/email-notifications/email-style.scss

@@ -35,6 +35,11 @@ $MOBILE_HEADER_SIZE: 32px;
 	float: right;
 }
 
+.wp-block-image img {
+	height: auto;
+	box-sizing: border-box;
+}
+
 .has-global-padding{
 	padding: 0px;
 }
@@ -44,7 +49,19 @@ $MOBILE_HEADER_SIZE: 32px;
 }
 
 .has-border-color, .has-border {
- 	border-style: solid;
+	border-style: solid;
+}
+
+.has-text-align-center{
+	text-align:center;
+}
+
+.has-text-align-left{
+	text-align:left;
+}
+
+.has-text-align-right{
+	text-align:right;
 }
 
 .wp-element-button, .editor-styles-wrapper .wp-block-button__link {
@@ -80,21 +97,21 @@ figure {
 /* MOBILE VERSION */
 @media (max-width: 800px) {
 
-    .email-notification__header {
-        min-height: $MOBILE_HEADER_SIZE !important; // It is important when there is no logo available.
-    }
+	.email-notification__header {
+		min-height: $MOBILE_HEADER_SIZE !important; // It is important when there is no logo available.
+	}
 
-    .email-notification__header .wp-block-site-title {
-        line-height: $MOBILE_HEADER_SIZE !important;
-    }
+	.email-notification__header .wp-block-site-title {
+		line-height: $MOBILE_HEADER_SIZE !important;
+	}
 
 	.wp-block-site-title {
 		font-size: 15px !important;
 	}
 
 	.wp-block-site-logo img{
-    	max-height: $MOBILE_HEADER_SIZE !important;
-    }
+		max-height: $MOBILE_HEADER_SIZE !important;
+	}
 
 	.wp-block-buttons {
 		margin-bottom: 0 !important;

changelog/fix-email-styles

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix custom styles for emails in preview and in sent messages

includes/internal/emails/class-email-post-type.php

@@ -56,13 +56,40 @@ private function __construct() {}
 	 * @internal
 	 */
 	public function init(): void {
+		add_filter( 'block_editor_settings_all', array( $this, 'disable_unsupported_features' ), 10, 2 );
 		add_action( 'init', [ $this, 'register_post_type' ] );
 		add_action( 'load-edit.php', [ $this, 'maybe_redirect_to_listing' ] );
 		add_action( 'map_meta_cap', [ $this, 'remove_cap_of_deleting_email' ], 10, 4 );
 
 		add_filter( 'is_post_type_viewable', [ $this, 'enable_email_template_editor' ], 10, 2 );
 	}
 
+	/**
+	 * Disable the default color palette and gradients in the block editor for the Email post type.
+	 *
+	 * @internal
+	 *
+	 * @since $$next-version$$
+	 *
+	 * @param array  $editor_settings The editor settings.
+	 * @param object $editor_context  The editor context.
+	 * @return array
+	 */
+	public function disable_unsupported_features( $editor_settings, $editor_context ) {
+		if ( empty( $editor_context->post ) || self::POST_TYPE !== $editor_context->post->post_type ) {
+			return $editor_settings;
+		}
+
+		// Remove the default styles that might affect the email appearance.
+		$editor_settings['styles'] = array();
+
+		// Disable the default color palette and gradients.
+		$editor_settings['__experimentalFeatures']['color']['defaultPalette']   = false;
+		$editor_settings['__experimentalFeatures']['color']['defaultGradients'] = false;
+
+		return $editor_settings;
+	}
+
 	/**
 	 * Set sensei_email as viewable only on the admin interface.
 	 *
@@ -171,4 +198,3 @@ public function maybe_redirect_to_listing(): void {
 		exit;
 	}
 }
-

includes/internal/emails/class-email-sender.php

@@ -229,17 +229,17 @@ public function get_email_body( WP_Post $email_post, array $placeholders = [] ):
 	 *
 	 * @internal
 	 *
-	 * @param string $string The string.
+	 * @param string $content Content to replace the placeholders in.
 	 * @param array  $placeholders The placeholders.
 	 *
 	 * @return string
 	 */
-	private function replace_placeholders( string $string, array $placeholders ): string {
+	private function replace_placeholders( string $content, array $placeholders ): string {
 		foreach ( $placeholders as $placeholder => $value ) {
-			$string = str_replace( '[' . $placeholder . ']', $value, $string );
+			$content = str_replace( '[' . $placeholder . ']', $value, $content );
 		}
 
-		return $string;
+		return $content;
 	}
 
 	/**
@@ -250,14 +250,15 @@ private function replace_placeholders( string $string, array $placeholders ): st
 	 * @return string
 	 */
 	private function load_email_styles(): string {
-		$css_dist_path = Sensei()->assets->dist_path( 'css/email-notifications/email-style.css' );
+		$styles = wp_get_global_stylesheet();
 
+		$css_dist_path = Sensei()->assets->dist_path( 'css/email-notifications/email-style.css' );
 		if ( file_exists( $css_dist_path ) ) {
 			// phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Local file usage.
-			return file_get_contents( $css_dist_path );
+			$styles .= file_get_contents( $css_dist_path );
 		}
 
-		return '';
+		return $styles;
 	}
 
 	/**
@@ -322,7 +323,7 @@ private function add_base_url_for_images( $content ) {
 	 *
 	 * @return array Headers.
 	 */
-	private function get_email_headers():array {
+	private function get_email_headers(): array {
 		$settings = $this->settings->get_settings();
 		$headers  = [
 			'Content-Type: text/html; charset=UTF-8',