Skip to content

Commit aa0336f

Browse files
committed
feat: add new template
1 parent cd0289f commit aa0336f

File tree

3 files changed

+27
-7
lines changed

3 files changed

+27
-7
lines changed

newspack-newsletters-templates.php

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,18 @@ function( $templates ) {
5151
10,
5252
2
5353
);
54+
55+
add_filter(
56+
'newspack_newsletters_templates',
57+
function( $templates ) {
58+
$decode = json_decode( file_get_contents( NEWSPACK_NEWSLETTERS_PLUGIN_FILE . 'src/templates/template-2.json'), true ); //phpcs:ignore
59+
$content = $decode['content'];
60+
$templates[] = [
61+
'content' => $content,
62+
'title' => __( 'Template 2', 'newspack-newsletters' ),
63+
];
64+
return $templates;
65+
},
66+
10,
67+
2
68+
);

src/components/template-modal/style.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141
top: 0;
4242
transform: none;
4343
width: 100%;
44-
45-
.is-primary {
46-
position: absolute;
47-
right: 24px;
48-
top: 12px;
49-
z-index: 11;
50-
}
5144
}
5245

5346
&__content {
@@ -62,6 +55,13 @@
6255
height: auto;
6356
}
6457

58+
+ .is-primary {
59+
position: absolute;
60+
right: 24px;
61+
top: 12px;
62+
z-index: 11;
63+
}
64+
6565
.block-editor-patterns {
6666
display: grid;
6767
gap: 16px;

src/templates/template-2.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"__file": "wp_block",
3+
"title": "Template 2",
4+
"content": "<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Start your newsletter with an intro, sometimes known as&nbsp;a “topper.” This is where the lead writer or editor for the newsletter introduces the main storylines&nbsp;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<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Facts or figures about COVID-19 in your community</li><li>Any notable news in your area — openings/closings of key businesses, for instance</li><li>And anything else you want to make sure readers definitely see</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>You may also want to ask a key question here at the top if you’re soliciting story ideas or tips from readers.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You should also consider having this section bylined — 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<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>—Byline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:heading -->\n<h2>The main story section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>You may want to have a lead story for the newsletter</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This is where you can add additional context or a dek to tease this story. Try to add at least or sentence or two to the dek.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Latest headlines</h3>\n<!-- /wp:heading -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:heading {\"level\":4} -->\n<h4>Headline for the story goes here</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This is where you'll put the dek for secondary stories. Make sure you really describe what’s in the story and give readers a reason to click.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:heading {\"level\":4} -->\n<h4>Headline for another story goes here</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This is where you'll put the dek for the second story. Focus on curation here — don’t send a reader too many links. The goal is to get readers to your site. Once they’re there, you can focus on driving deeper engagement.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:heading {\"level\":4} -->\n<h4>Headline for a third story goes here</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>How many links is too many? That’s worth testing out for yourself to see what works best for your audience, but start with about 5-7 links for this section and see how readers react.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:heading -->\n<h2>Around the web</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>You may want to curate some links from other news outlets to provide additional value [<a rel=\"noreferrer noopener\" href=\"http://link goes here\" target=\"_blank\">News outlet #1</a>]</li><li>Again, try to focus on curation here — this shouldn't be a pure link dump&nbsp;[<a rel=\"noreferrer noopener\" href=\"http://link goes here\" target=\"_blank\">News outlet #2</a>]</li><li>How many is right for this sort of section? [<a rel=\"noreferrer noopener\" href=\"http://link goes here\" target=\"_blank\">News outlet #3</a>]</li><li>Probably anywhere from 5 to 7 stories, depending on the day [<a rel=\"noreferrer noopener\" href=\"http://link goes here\" target=\"_blank\">News outlet #4</a>]</li><li>You could also move this section elsewhere in the newsletter, if you’d like — it doesn't have to come at the bottom [<a rel=\"noreferrer noopener\" href=\"http://link goes here\" target=\"_blank\">News outlet #5</a>]</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:heading -->\n<h2>Support our newsroom</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Finally, 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<!-- /wp:paragraph -->\n\n<!-- wp:separator {\"className\":\"is-style-wide\"} -->\n<hr class=\"wp-block-separator is-style-wide\"/>\n<!-- /wp:separator -->\n\n<!-- wp:social-links {\"align\":\"center\"} -->\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<!-- /wp:social-links -->"
5+
}

0 commit comments

Comments
 (0)