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 Posts Inserter to modal and strip placeholder style #98

Merged
merged 2 commits into from
Apr 21, 2020
Merged

Add Posts Inserter to modal and strip placeholder style #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b104ea5
feat: add posts inserter to modal and strip placeholder style
thomasguillot Apr 21, 2020
1f6aab1
Merge branch 'master' into add/posts-inserter-to-modal
thomasguillot Apr 21, 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
35 changes: 35 additions & 0 deletions src/components/template-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '~@wordpress/base-styles/colors';

// Modal
.newspack-newsletters-modal {
&__screen-overlay {
animation: none;
Expand Down Expand Up @@ -200,3 +201,37 @@
}
}
}

// Posts Inserter - Preview
.block-editor-block-preview__container {
.newspack-posts-inserter {
border: 0;
padding: 0;

&__header,
.components-button {
display: none;
}

&__preview {
border: 0;
margin: 0;
}

.block-editor-block-preview__container {
max-height: 100%;
min-height: 0;
margin-bottom: -28px;

.block-editor-block-list__layout.is-root-container {
padding-left: 0;
padding-right: 0;
}

.components-disabled,
iframe {
margin-top: 0;
}
}
}
}
2 changes: 1 addition & 1 deletion src/templates/daily-weekly.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",
"content": "__LOGO_OR_SITENAME__<!-- 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=\"#\" 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=\"#\" target=\"_blank\">News outlet #2</a>]</li><li>How many is right for this sort of section? [<a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">News outlet #3</a>]</li><li>Probably anywhere from 5 to 7 stories, depending on the day [<a rel=\"noreferrer noopener\" href=\"#\" 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=\"#\" 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 -->"
"content": "__LOGO_OR_SITENAME__<!-- 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:newspack-newsletters/posts-inserter /-->\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=\"#\" 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=\"#\" target=\"_blank\">News outlet #2</a>]</li><li>How many is right for this sort of section? [<a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">News outlet #3</a>]</li><li>Probably anywhere from 5 to 7 stories, depending on the day [<a rel=\"noreferrer noopener\" href=\"#\" 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=\"#\" 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 -->"
}