From 714108de2ab33744050c4f16e13a49f19998abb3 Mon Sep 17 00:00:00 2001 From: Adam Borowski Date: Thu, 30 Apr 2020 13:39:03 +0200 Subject: [PATCH] feat: handle color palette as it appears in the editor Closes #173 --- .../class-newspack-newsletters-renderer.php | 41 ++++++++----------- includes/class-newspack-newsletters.php | 24 +++++++++++ src/editor/editor/index.js | 10 +++++ 3 files changed, 51 insertions(+), 24 deletions(-) diff --git a/includes/class-newspack-newsletters-renderer.php b/includes/class-newspack-newsletters-renderer.php index fe6745847..9fb55c8ff 100644 --- a/includes/class-newspack-newsletters-renderer.php +++ b/includes/class-newspack-newsletters-renderer.php @@ -13,6 +13,13 @@ * Newspack Newsletters Renderer Class. */ final class Newspack_Newsletters_Renderer { + /** + * The color palette to be used. + * + * @var Object + */ + protected static $color_palette = null; + /** * Convert a list to HTML attributes. * @@ -67,32 +74,17 @@ private static function get_font_size( $block_attrs ) { */ private static function get_colors( $block_attrs ) { $colors = array(); - // Gutenberg's default color palette. - // https://github.com/WordPress/gutenberg/blob/359858da0675943d8a759a0a7c03e7b3846536f5/packages/block-editor/src/store/defaults.js#L30-L85 . - $colors_palette = array( - 'pale-pink' => '#f78da7', - 'vivid-red' => '#cf2e2e', - 'luminous-vivid-orange' => '#ff6900', - 'luminous-vivid-amber' => '#fcb900', - 'light-green-cyan' => '#7bdcb5', - 'vivid-green-cyan' => '#00d084', - 'pale-cyan-blue' => '#8ed1fc', - 'vivid-cyan-blue' => '#0693e3', - 'very-light-gray' => '#eeeeee', - 'cyan-bluish-gray' => '#abb8c3', - 'very-dark-gray' => '#313131', - ); // For text. - if ( isset( $block_attrs['textColor'], $colors_palette[ $block_attrs['textColor'] ] ) ) { - $colors['color'] = $colors_palette[ $block_attrs['textColor'] ]; + if ( isset( $block_attrs['textColor'], self::$color_palette[ $block_attrs['textColor'] ] ) ) { + $colors['color'] = self::$color_palette[ $block_attrs['textColor'] ]; } // customTextColor is set inline, but it's passed here for consistency. if ( isset( $block_attrs['customTextColor'] ) ) { $colors['color'] = $block_attrs['customTextColor']; } - if ( isset( $block_attrs['backgroundColor'], $colors_palette[ $block_attrs['backgroundColor'] ] ) ) { - $colors['background-color'] = $colors_palette[ $block_attrs['backgroundColor'] ]; + if ( isset( $block_attrs['backgroundColor'], self::$color_palette[ $block_attrs['backgroundColor'] ] ) ) { + $colors['background-color'] = self::$color_palette[ $block_attrs['backgroundColor'] ]; } // customBackgroundColor is set inline, but not on mjml wrapper element. if ( isset( $block_attrs['customBackgroundColor'] ) ) { @@ -100,8 +92,8 @@ private static function get_colors( $block_attrs ) { } // For separators. - if ( isset( $block_attrs['color'], $colors_palette[ $block_attrs['color'] ] ) ) { - $colors['border-color'] = $colors_palette[ $block_attrs['color'] ]; + if ( isset( $block_attrs['color'], self::$color_palette[ $block_attrs['color'] ] ) ) { + $colors['border-color'] = self::$color_palette[ $block_attrs['color'] ]; } if ( isset( $block_attrs['customColor'] ) ) { $colors['border-color'] = $block_attrs['customColor']; @@ -503,9 +495,10 @@ private static function render_mjml_component( $block, $is_in_column = false, $i * @return string MJML markup. */ private static function render_mjml( $post ) { - $title = $post->post_title; - $blocks = parse_blocks( $post->post_content ); - $body = ''; + self::$color_palette = get_post_meta( $post->ID, 'color_palette', true ); + $title = $post->post_title; + $blocks = parse_blocks( $post->post_content ); + $body = ''; foreach ( $blocks as $block ) { $block_content = self::render_mjml_component( $block ); if ( ! empty( $block_content ) ) { diff --git a/includes/class-newspack-newsletters.php b/includes/class-newspack-newsletters.php index c6f5b71fb..d7c51ed29 100644 --- a/includes/class-newspack-newsletters.php +++ b/includes/class-newspack-newsletters.php @@ -105,6 +105,30 @@ public static function register_meta() { 'auth_callback' => '__return_true', ] ); + /** + * The default color palette lives in the editor frontend and is not + * retrievable on the backend. The workaround is to set it as post meta + * so that it's available to the email renderer. + */ + \register_meta( + 'post', + 'color_palette', + [ + 'object_subtype' => self::NEWSPACK_NEWSLETTERS_CPT, + 'show_in_rest' => array( + 'schema' => array( + 'type' => 'object', + 'properties' => array(), + 'additionalProperties' => array( + 'type' => 'string', + ), + ), + ), + 'type' => 'object', + 'single' => true, + 'auth_callback' => '__return_true', + ] + ); } /** diff --git a/src/editor/editor/index.js b/src/editor/editor/index.js index ee81a0b0e..554d9bfd3 100644 --- a/src/editor/editor/index.js +++ b/src/editor/editor/index.js @@ -25,13 +25,19 @@ const Editor = compose( [ isCleanNewPost, } = select( 'core/editor' ); const { getActiveGeneralSidebarName } = select( 'core/edit-post' ); + const { getSettings } = select( 'core/block-editor' ); const meta = getEditedPostAttribute( 'meta' ); + return { isCleanNewPost: isCleanNewPost(), postId: getCurrentPostId(), isReady: meta.campaignValidationErrors ? meta.campaignValidationErrors.length === 0 : false, activeSidebarName: getActiveGeneralSidebarName(), isPublishingOrSavingPost: isSavingPost() || isPublishingPost(), + colorPalette: getSettings().colors.reduce( + ( colors, { slug, color } ) => ( { ...colors, [ slug ]: color } ), + {} + ), }; } ), withDispatch( dispatch => { @@ -60,6 +66,10 @@ const Editor = compose( [ } }, [ props.isPublishingOrSavingPost ]); + useEffect(() => { + props.editPost( { meta: { color_palette: props.colorPalette } } ); + }, []); + // Lock or unlock post publishing. useEffect(() => { if ( props.isReady ) {