Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add background color setting #223

Merged
merged 4 commits into from
Jun 15, 2020
Merged

Add background color setting #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b98984
feat: support background color setting
adekbadek Jun 12, 2020
8fb1840
fix: copy
adekbadek Jun 15, 2020
0fd4468
feat: remove white background from layouts' groups
adekbadek Jun 15, 2020
0c0dc32
Merge master into add/background-color-setting
adekbadek Jun 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion includes/class-newspack-newsletters-renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,7 +544,11 @@ private static function render_mjml( $post ) {
if ( ! in_array( self::$font_body, Newspack_Newsletters::$supported_fonts ) ) {
self::$font_body = 'Georgia';
}
$title = $post->post_title;
$title = $post->post_title;
$background_color = get_post_meta( $post->ID, 'background_color', true );
if ( ! $background_color ) {
$background_color = '#ffffff';
}
$blocks = parse_blocks( $post->post_content );
$body = '';
foreach ( $blocks as $block ) {
Expand Down
36 changes: 24 additions & 12 deletions includes/class-newspack-newsletters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,17 @@ public static function register_meta() {
'auth_callback' => '__return_true',
]
);
\register_meta(
'post',
'background_color',
[
'object_subtype' => self::NEWSPACK_NEWSLETTERS_CPT,
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'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
Expand Down Expand Up @@ -332,22 +343,22 @@ public static function rest_api_init() {
);
\register_rest_route(
'newspack-newsletters/v1/',
'typography/(?P<id>[\a-z]+)',
'styling/(?P<id>[\a-z]+)',
[
'methods' => \WP_REST_Server::EDITABLE,
'callback' => [ __CLASS__, 'api_set_typography' ],
'callback' => [ __CLASS__, 'api_set_styling' ],
'permission_callback' => [ __CLASS__, 'api_administration_permissions_check' ],
'args' => [
'id' => [
'validate_callback' => [ __CLASS__, 'validate_newsletter_id' ],
'sanitize_callback' => 'absint',
],
'key' => [
'validate_callback' => [ __CLASS__, 'validate_newsletter_typography_key' ],
'validate_callback' => [ __CLASS__, 'validate_newsletter_styling_key' ],
'sanitize_callback' => 'sanitize_text_field',
],
'value' => [
'validate_callback' => [ __CLASS__, 'validate_newsletter_typography_value' ],
'validate_callback' => [ __CLASS__, 'validate_newsletter_styling_value' ],
'sanitize_callback' => 'sanitize_text_field',
],
],
Expand All @@ -356,15 +367,15 @@ public static function rest_api_init() {
}

/**
* Set typography meta.
* Set styling meta.
* The save_post action fires before post meta is updated.
* This causes newsletters to be synced to the ESP before recent changes to custom fields have been recorded,
* which leads to incorrect rendering. This is addressed through custom endpoints to update the typography fields
* which leads to incorrect rendering. This is addressed through custom endpoints to update the styling fields
* as soon as they are changed in the editor, so that the changes are available the next time sync to ESP occurs.
*
* @param WP_REST_Request $request API request object.
*/
public static function api_set_typography( $request ) {
public static function api_set_styling( $request ) {
$id = $request['id'];
$key = $request['key'];
$value = $request['value'];
Expand All @@ -381,30 +392,31 @@ public static function validate_newsletter_id( $id ) {
}

/**
* Validate typography key.
* Validate styling key.
*
* @param String $key Meta key.
*/
public static function validate_newsletter_typography_key( $key ) {
public static function validate_newsletter_styling_key( $key ) {
return in_array(
$key,
[
'font_header',
'font_body',
'background_color',
]
);
}

/**
* Validate typography value (font name).
* Validate styling value (font name or hex color).
*
* @param String $key Meta value.
*/
public static function validate_newsletter_typography_value( $key ) {
public static function validate_newsletter_styling_value( $key ) {
return in_array(
$key,
self::$supported_fonts
);
) || preg_match( '/^#[a-f0-9]{6}$/', $key );
}

/**
Expand Down
2 changes: 1 addition & 1 deletion includes/email-template.mjml.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
}
</mj-style>
</mj-head>
<mj-body>
<mj-body background-color="<?php echo $background_color; ?>">
<?php echo $body; ?>
</mj-body>
</mjml>
2 changes: 1 addition & 1 deletion includes/layouts/breaking-news.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"__file": "wp_block",
"title": "Breaking News",
"content": "__LOGO_OR_SITENAME__\n\n<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"very-light-gray\"} -->\n\n<div class=\"wp-block-group alignfull has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":1,\"excerptLength\":35,\"innerBlocksToInsert\":[],\"featuredImageAlignment\":\"top\"} \/--><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} -->\n\n<h3>Support our newsroom<\/h3>\n\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p>\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons -->\n\n<div class=\"wp-block-buttons\"><!-- wp:button -->\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Support us<\/a><\/div>\n\n<!-- \/wp:button --><\/div>\n\n<!-- \/wp:buttons --><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} -->\n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul>\n\n<!-- \/wp:social-links -->"
"content": "__LOGO_OR_SITENAME__\n\n<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"very-light-gray\"} -->\n\n<div class=\"wp-block-group alignfull has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":1,\"excerptLength\":35,\"innerBlocksToInsert\":[],\"featuredImageAlignment\":\"top\"} \/--><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:group {\"align\":\"full\"} -->\n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} -->\n\n<h3>Support our newsroom<\/h3>\n\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p>\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:buttons -->\n\n<div class=\"wp-block-buttons\"><!-- wp:button -->\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Support us<\/a><\/div>\n\n<!-- \/wp:button --><\/div>\n\n<!-- \/wp:buttons --><\/div><\/div>\n\n<!-- \/wp:group -->\n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} -->\n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/-->\n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul>\n\n<!-- \/wp:social-links -->"
}
2 changes: 1 addition & 1 deletion includes/layouts/daily-weekly-no-image.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"__file": "wp_block",
"title": "Daily/Weekly (no image)",
"content": "__LOGO_OR_SITENAME__ \n\n<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} --> \n\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph --> \n\n<p>Start your newsletter with an intro, sometimes known as a \u201Ctopper.\u201D This is where the lead writer or editor for the newsletter introduces the main storylines for the day. You might want to consider adding some bullet points to highlight the biggest stories of the day so that a reader can easily scan through this section. Those bullets could include:<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:list --> \n\n<ul><li>Facts or figures about your community<\/li><li>Any notable news in your area \u2014 openings\/closings of key businesses, for instance<\/li><li>And anything else you want to make sure readers definitely see<\/li><\/ul> \n\n<!-- \/wp:list --> \n\n<!-- wp:paragraph --> \n\n<p>You may also want to ask a key question here at the top if you\u2019re soliciting story ideas or tips from readers.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:paragraph --> \n\n<p>You should also consider having this section bylined \u2014 it can help establish a relationship between a reader and your staff, and readers may be more likely to reply to a person than a generic voice.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:paragraph --> \n\n<p>\u2014Byline<\/p> \n\n<!-- \/wp:paragraph --><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"very-light-gray\"} --> \n\n<div class=\"wp-block-group alignfull has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":4,\"excerptLength\":35,\"displayFeaturedImage\":false,\"innerBlocksToInsert\":[]} \/--><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} --> \n\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} --> \n\n<h3>Around the web<\/h3> \n\n<!-- \/wp:heading --> \n\n<!-- wp:list --> \n\n<ul><li>You may want to curate some links from other news outlets to provide additional value [<a href=\"#\" target=\"_blank\">News outlet #1<\/a>]<\/li><li>Again, try to focus on curation here \u2014 this shouldn't be a pure link dump [<a href=\"#\" target=\"_blank\">News outlet #2<\/a>]<\/li><li>Another way to approach this section: Offer resources from your site instead [<a href=\"#\" target=\"_blank\">News outlet #3<\/a>]<\/li><li>These could be links to maps or charts in your newsletter, or key stories about how to help others in your community. If you do that, you probably just want to <a href=\"#\" target=\"_blank\">link the specific text<\/a> instead of adding the link at the end<\/li><li>You could also move this section <a href=\"#\" target=\"_blank\">elsewhere in the newsletter<\/a>, if you\u2019d like \u2014 it doesn't have to come at the bottom<\/li><\/ul> \n\n<!-- \/wp:list --> \n\n<!-- wp:heading {\"level\":3} --> \n\n<h3>Support our newsroom<\/h3> \n\n<!-- \/wp:heading --> \n\n<!-- wp:paragraph --> \n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:buttons {\"align\":\"center\",\"className\":\"aligncenter\"} --> \n\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button --> \n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"#\">Support us<\/a><\/div> \n\n<!-- \/wp:button --><\/div> \n\n<!-- \/wp:buttons --><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} --> \n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul> \n\n<!-- \/wp:social-links -->"
"content": "__LOGO_OR_SITENAME__ \n\n<!-- wp:group {\"align\":\"full\"} --> \n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph --> \n\n<p>Start your newsletter with an intro, sometimes known as a \u201Ctopper.\u201D This is where the lead writer or editor for the newsletter introduces the main storylines for the day. You might want to consider adding some bullet points to highlight the biggest stories of the day so that a reader can easily scan through this section. Those bullets could include:<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:list --> \n\n<ul><li>Facts or figures about your community<\/li><li>Any notable news in your area \u2014 openings\/closings of key businesses, for instance<\/li><li>And anything else you want to make sure readers definitely see<\/li><\/ul> \n\n<!-- \/wp:list --> \n\n<!-- wp:paragraph --> \n\n<p>You may also want to ask a key question here at the top if you\u2019re soliciting story ideas or tips from readers.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:paragraph --> \n\n<p>You should also consider having this section bylined \u2014 it can help establish a relationship between a reader and your staff, and readers may be more likely to reply to a person than a generic voice.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:paragraph --> \n\n<p>\u2014Byline<\/p> \n\n<!-- \/wp:paragraph --><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"very-light-gray\"} --> \n\n<div class=\"wp-block-group alignfull has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:newspack-newsletters\/posts-inserter {\"postsToShow\":4,\"excerptLength\":35,\"displayFeaturedImage\":false,\"innerBlocksToInsert\":[]} \/--><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:group {\"align\":\"full\"} --> \n\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":3} --> \n\n<h3>Around the web<\/h3> \n\n<!-- \/wp:heading --> \n\n<!-- wp:list --> \n\n<ul><li>You may want to curate some links from other news outlets to provide additional value [<a href=\"#\" target=\"_blank\">News outlet #1<\/a>]<\/li><li>Again, try to focus on curation here \u2014 this shouldn't be a pure link dump [<a href=\"#\" target=\"_blank\">News outlet #2<\/a>]<\/li><li>Another way to approach this section: Offer resources from your site instead [<a href=\"#\" target=\"_blank\">News outlet #3<\/a>]<\/li><li>These could be links to maps or charts in your newsletter, or key stories about how to help others in your community. If you do that, you probably just want to <a href=\"#\" target=\"_blank\">link the specific text<\/a> instead of adding the link at the end<\/li><li>You could also move this section <a href=\"#\" target=\"_blank\">elsewhere in the newsletter<\/a>, if you\u2019d like \u2014 it doesn't have to come at the bottom<\/li><\/ul> \n\n<!-- \/wp:list --> \n\n<!-- wp:heading {\"level\":3} --> \n\n<h3>Support our newsroom<\/h3> \n\n<!-- \/wp:heading --> \n\n<!-- wp:paragraph --> \n\n<p>Make sure you have a call-to-action to support your work. This can be a few sentences like this, reminding readers of the value of your newsroom, or it can be an image. Either way, make sure you give a clear CTA and a unique link to track support back to this email.<\/p> \n\n<!-- \/wp:paragraph --> \n\n<!-- wp:buttons {\"align\":\"center\",\"className\":\"aligncenter\"} --> \n\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button --> \n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"#\">Support us<\/a><\/div> \n\n<!-- \/wp:button --><\/div> \n\n<!-- \/wp:buttons --><\/div><\/div> \n\n<!-- \/wp:group --> \n\n<!-- wp:social-links {\"align\":\"center\",\"className\":\"aligncenter\"} --> \n\n<ul class=\"wp-block-social-links aligncenter\"><!-- wp:social-link {\"url\":\"#\",\"service\":\"facebook\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"twitter\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"instagram\"} \/--> \n\n<!-- wp:social-link {\"url\":\"#\",\"service\":\"youtube\"} \/--><\/ul> \n\n<!-- \/wp:social-links -->"
}
Loading