diff --git a/assets/blocks/email-editor.js b/assets/blocks/email-editor.js index 90ae003be9..f3cbf168b3 100644 --- a/assets/blocks/email-editor.js +++ b/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, diff --git a/assets/css/email-notifications/email-editor-style.scss b/assets/css/email-notifications/email-editor-style.scss index baf9558c6f..e52f0bfe0d 100644 --- a/assets/css/email-notifications/email-editor-style.scss +++ b/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 { diff --git a/assets/css/email-notifications/email-style.scss b/assets/css/email-notifications/email-style.scss index 81014ab3b3..935cf49b6e 100644 --- a/assets/css/email-notifications/email-style.scss +++ b/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; diff --git a/changelog/fix-email-styles b/changelog/fix-email-styles new file mode 100644 index 0000000000..a6212c597d --- /dev/null +++ b/changelog/fix-email-styles @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix custom styles for emails in preview and in sent messages diff --git a/includes/internal/emails/class-email-post-type.php b/includes/internal/emails/class-email-post-type.php index fef5eaeb57..6cca6e925c 100644 --- a/includes/internal/emails/class-email-post-type.php +++ b/includes/internal/emails/class-email-post-type.php @@ -56,6 +56,7 @@ 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 ); @@ -63,6 +64,32 @@ public function init(): void { 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; } } - diff --git a/includes/internal/emails/class-email-sender.php b/includes/internal/emails/class-email-sender.php index bba525e4b0..e4232404a3 100644 --- a/includes/internal/emails/class-email-sender.php +++ b/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',