Version Description
- Introduces Blog Posts block, a better version of Posts List.
Download this release
Release Info
Developer | obenland |
Plugin | ![]() |
Version | 0.17 |
Comparing to | |
See all releases |
Code changes from version 0.16.2 to 0.17
- blog-posts-block/README.md +30 -0
- blog-posts-block/dist/editor.asset.php +1 -0
- blog-posts-block/dist/editor.css +1 -0
- blog-posts-block/dist/editor.js +2 -0
- blog-posts-block/dist/editor.js.LICENSE +5 -0
- blog-posts-block/dist/editor.rtl.css +1 -0
- blog-posts-block/dist/view.asset.php +1 -0
- blog-posts-block/dist/view.css +1 -0
- blog-posts-block/dist/view.js +1 -0
- blog-posts-block/dist/view.rtl.css +1 -0
- blog-posts-block/editor.js +34 -0
- blog-posts-block/index.php +92 -0
- blog-posts-block/newspack-homepage-articles/README.md +5 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/block.json +118 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php +123 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/edit.js +641 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/editor.js +7 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/editor.scss +39 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/index.js +106 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/article.php +143 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/articles-list.php +21 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/articles-loop.php +29 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/view.js +211 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/view.php +221 -0
- blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/view.scss +554 -0
- blog-posts-block/newspack-homepage-articles/class-newspack-blocks-api.php +220 -0
- blog-posts-block/newspack-homepage-articles/class-newspack-blocks.php +393 -0
- blog-posts-block/newspack-homepage-articles/components/autocomplete-tokenfield.js +175 -0
- blog-posts-block/newspack-homepage-articles/components/autocomplete-tokenfield.scss +9 -0
- blog-posts-block/newspack-homepage-articles/components/query-controls.js +214 -0
- blog-posts-block/newspack-homepage-articles/shared/sass/_colors.scss +8 -0
- blog-posts-block/newspack-homepage-articles/shared/sass/_legacy_colors.scss +13 -0
- blog-posts-block/newspack-homepage-articles/shared/sass/_mixins.scss +26 -0
- blog-posts-block/newspack-homepage-articles/shared/sass/_variables.scss +27 -0
- blog-posts-block/view.js +1 -0
- full-site-editing-plugin.php +44 -171
- full-site-editing/dist/full-site-editing.asset.php +1 -1
- full-site-editing/dist/full-site-editing.js +1 -1
- full-site-editing/helpers.php +181 -0
- global-styles/class-global-styles.php +12 -8
- global-styles/dist/global-styles.asset.php +1 -1
- posts-list-block/blocks/posts-list/editor.scss +9 -0
- posts-list-block/blocks/posts-list/index.js +75 -49
- posts-list-block/blocks/posts-list/transforms.js +34 -0
- posts-list-block/dist/posts-list-block.asset.php +1 -1
- posts-list-block/dist/posts-list-block.css +1 -1
- posts-list-block/dist/posts-list-block.js +1 -1
- posts-list-block/dist/posts-list-block.rtl.css +1 -1
- readme.txt +5 -9
- starter-page-templates/dist/starter-page-templates.asset.php +1 -1
- starter-page-templates/dist/starter-page-templates.js +1 -1
- starter-page-templates/page-template-modal/index.js +56 -29
blog-posts-block/README.md
ADDED
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Blog Posts Block
|
2 |
+
|
3 |
+
This block allows you to list your posts in various layouts and filter them by criteria like category, tag or author.
|
4 |
+
|
5 |
+
It originally comes from the [Newspack Blocks collection](https://github.com/automattic/newspack-blocks) and the block is still being developed there.
|
6 |
+
|
7 |
+
It was added to this repository in order to make it available to other parts of the FSE plugin, such as Starter Page Templates where this block will be used.
|
8 |
+
|
9 |
+
## Structure
|
10 |
+
|
11 |
+
```
|
12 |
+
index.php — main entry file, registers the block on backend
|
13 |
+
editor.js — assets for the block editor
|
14 |
+
view.js — assets for the block rendered on frontend
|
15 |
+
newspack-homepage-articles/** — source code synced from the Newspack Blocks repository
|
16 |
+
```
|
17 |
+
|
18 |
+
### Synchronizing the code
|
19 |
+
|
20 |
+
You can see that `newspack-homepage-articles` is being synced with the Newspack Blocks repository. Please make all improvements and additions on the Newspack side. Please don't make any direct changes to files in this directory as the next synchronization will overwrite them.
|
21 |
+
|
22 |
+
Once your changes land on the Newspack side, coordinate with the team (over issues/PRs) to [make a new release](https://github.com/Automattic/newspack-blocks/releases) and once you have the release ID, you can pull the code into here.
|
23 |
+
|
24 |
+
While being in `apps/full-site-editing/` directory, you can run:
|
25 |
+
|
26 |
+
```
|
27 |
+
npm run sync:blog-posts-block --release=1.0.0-alpha.17
|
28 |
+
```
|
29 |
+
|
30 |
+
This will pull the code from the release and integrate it into this repository. Please review changes, make sure to update `NEWSPACK_BLOCKS__VERSION` in [index.php](./index.php) and commit.
|
blog-posts-block/dist/editor.asset.php
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
<?php return array('dependencies' => array('lodash', 'moment', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-polyfill', 'wp-url'), 'version' => 'd1a7b1582367286500f855e68a4228d0');
|
blog-posts-block/dist/editor.css
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
.autocomplete-tokenfield{position:relative}.autocomplete-tokenfield .components-spinner{position:absolute;top:2em;right:0}.type-scale-slider .dashicon{height:16px;width:16px}.type-scale-slider input+.dashicon{height:24px;margin-left:10px;margin-right:0;width:24px}.wpnbha .editor-rich-text{width:100%}.wpnbha .cat-links{font-size:.7em}.wpnbha span.avatar{display:inline-block;margin-right:.5em}.wpnbha span.avatar div{display:inline}.wpnbha .excerpt-contain p{margin:.5em 0}.wpnbha{margin-bottom:1em}.wpnbha article{margin-bottom:1.5em;word-break:break-word;overflow-wrap:break-word;position:relative}.wpnbha article:last-of-type{margin-bottom:0}.wpnbha .article-section-title{font-size:.8em;margin-bottom:.5em;width:100%}.wpnbha.is-grid{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%}@media only screen and (min-width:782px){.wpnbha.is-grid article,.wpnbha.is-grid article:last-child{margin-bottom:1em}}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.333% - 16px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-5 article:last-of-type:nth-child(odd){flex-grow:1}}@media only screen and (min-width:782px){.wpnbha.columns-2 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-3 article{flex-basis:calc(33.33333% - 16px)}.wpnbha.columns-4 article{flex-basis:calc(25% - 16px)}.wpnbha.columns-5 article{flex-basis:calc(20% - 16px)}.wpnbha.columns-6 article{flex-basis:calc(16.66667% - 16px)}}.wpnbha .post-thumbnail{margin:0}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha figcaption{font-size:.6em}.wpnbha.image-aligntop .post-thumbnail{margin-bottom:.25em}.wpnbha.image-aligntop .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha.image-alignleft .post-has-image,.wpnbha.image-alignright .post-has-image{display:flex}.wpnbha.image-alignleft .post-has-image .post-thumbnail,.wpnbha.image-alignright .post-has-image .post-thumbnail{flex-basis:33%}.wpnbha.image-alignleft .post-has-image .entry-wrapper,.wpnbha.image-alignright .post-has-image .entry-wrapper{flex-basis:67%}.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:block}@media only screen and (min-width:600px){.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:flex}.wpnbha.image-alignleft.is-4 .post-thumbnail,.wpnbha.image-alignright.is-4 .post-thumbnail{flex-basis:75%}.wpnbha.image-alignleft.is-4 .entry-wrapper,.wpnbha.image-alignright.is-4 .entry-wrapper{flex-basis:25%}.wpnbha.image-alignleft.is-3 .entry-wrapper,.wpnbha.image-alignleft.is-3 .post-thumbnail,.wpnbha.image-alignright.is-3 .entry-wrapper,.wpnbha.image-alignright.is-3 .post-thumbnail{flex-basis:50%}}.wpnbha.image-alignleft.is-1 .post-thumbnail,.wpnbha.image-alignright.is-1 .post-thumbnail{flex-basis:25%}.wpnbha.image-alignleft.is-1 .entry-wrapper,.wpnbha.image-alignright.is-1 .entry-wrapper{flex-basis:75%}.wpnbha.image-alignleft .post-thumbnail{margin-right:1em}.wpnbha.image-alignright .post-thumbnail{margin-left:1em}.wpnbha.image-alignright .entry-wrapper{order:-1}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.wpnbha .cat-links{font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:.5em}.wpnbha .entry-meta .byline:not(:last-child){margin-right:1.5em}.wpnbha .avatar{border-radius:100%;display:block;margin-right:.5em}.wpnbha p{margin:.5em 0}.wpnbha.has-text-color .article-section-title,.wpnbha.has-text-color .cat-links,.wpnbha.has-text-color .cat-links a,.wpnbha.has-text-color .cat-links a:visited,.wpnbha.has-text-color .entry-meta,.wpnbha.has-text-color .entry-meta .byline a,.wpnbha.has-text-color .entry-meta .byline a:visited,.wpnbha.has-text-color .entry-meta a,.wpnbha.has-text-color .entry-title,.wpnbha.has-text-color .entry-title a,.wpnbha.has-text-color .entry-title a:visited,.wpnbha.has-text-color figcaption{color:inherit}.wpnbha.has-text-color .entry-meta span:not(.avatar){opacity:.8}.wpnbha.image-alignbehind .post-has-image{display:flex;align-items:flex-end;position:relative}.wpnbha.image-alignbehind .post-has-image .post-thumbnail{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%;-o-object-fit:cover;object-fit:cover;max-width:1000%;width:100%}.wpnbha.image-alignbehind .post-has-image .post-thumbnail figcaption{bottom:1em;-webkit-box-orient:vertical;color:hsla(0,0%,100%,.9);display:-webkit-box;font-style:italic;left:0;-webkit-line-clamp:1;margin:0;max-height:1.6em;overflow:hidden;padding:0 1em;position:absolute;right:0;text-align:right;text-overflow:ellipsis;z-index:2}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2em;position:relative;z-index:2}.wpnbha.image-alignbehind .post-has-image .cat-links a,.wpnbha.image-alignbehind .post-has-image .entry-meta,.wpnbha.image-alignbehind .post-has-image .entry-meta .byline a,.wpnbha.image-alignbehind .post-has-image .entry-title a,.wpnbha.image-alignbehind .post-has-image .entry-wrapper{color:#fff}.wpnbha article .entry-title{font-size:1.2em}.wpnbha article .entry-meta{font-size:.8em}.wpnbha article .avatar{height:25px;width:25px}@media only screen and (min-width:782px){.wpnbha article .entry-title{font-size:1.6em}.wpnbha article .avatar{height:40px;width:40px}}.wpnbha.ts-8 .entry-title,.wpnbha.ts-9 .entry-title,.wpnbha.ts-10 .entry-title{line-height:1.1em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .avatar,.wpnbha.ts-9 article .avatar,.wpnbha.ts-10 article .avatar{height:2.4em;width:2.4em}}.wpnbha.ts-10 article .entry-title{font-size:2.6em}@media only screen and (min-width:782px){.wpnbha.ts-10 article .entry-title{font-size:3.6em}}@media only screen and (min-width:1168px){.wpnbha.ts-10 article .entry-title{font-size:4.8em}}.wpnbha.ts-9 article .entry-title{font-size:2.4em}@media only screen and (min-width:782px){.wpnbha.ts-9 article .entry-title{font-size:3.4em}}@media only screen and (min-width:1168px){.wpnbha.ts-9 article .entry-title{font-size:4.2em}}.wpnbha.ts-8 article .entry-title{font-size:2.2em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .entry-title{font-size:3em}}@media only screen and (min-width:1168px){.wpnbha.ts-8 article .entry-title{font-size:3.6em}}.wpnbha.ts-7 article .entry-title{font-size:2em}@media only screen and (min-width:782px){.wpnbha.ts-7 article .entry-title{font-size:2.4em}.wpnbha.ts-7 article .avatar{height:48px;width:48px}}@media only screen and (min-width:1168px){.wpnbha.ts-7 article .entry-title{font-size:3em}}.wpnbha.ts-6 article .entry-title{font-size:1.7em}@media only screen and (min-width:782px){.wpnbha.ts-6 article .entry-title{font-size:2em}.wpnbha.ts-6 article .avatar{height:44px;width:44px}}@media only screen and (min-width:1168px){.wpnbha.ts-6 article .entry-title{font-size:2.4em}}.wpnbha.ts-5 article .entry-title{font-size:1.4em}@media only screen and (min-width:782px){.wpnbha.ts-5 article .entry-title{font-size:1.8em}.wpnbha.ts-5 article .avatar{height:40px;width:40px}}@media only screen and (min-width:1168px){.wpnbha.ts-5 article .entry-title{font-size:2em}}.wpnbha.ts-3 article .entry-title{font-size:1em}.wpnbha.ts-3 article .entry-wrapper p{font-size:.8em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-2 article .entry-title{font-size:.8em}.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper p{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-2 article .avatar{height:28px;width:28px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-1 article .entry-wrapper p{font-size:.7em}.wpnbha.ts-1 article .entry-meta{font-size:.6em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .avatar{height:24px;width:24px}}.wpnbha.is-style-borders article{border:solid rgba(0,0,0,.2);border-width:0 0 1px;margin-bottom:1em;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type{margin-bottom:0}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0}@media only screen and (min-width:782px){.wpnbha.is-style-borders.columns-2 article{padding-right:32px}.wpnbha.is-style-borders.columns-3 article{padding-right:24px}.wpnbha.is-style-borders.columns-4 article{padding-right:21.33333px}.wpnbha.is-style-borders.columns-5 article{padding-right:20px}.wpnbha.is-style-borders.columns-6 article{padding-right:19.2px}.wpnbha.is-style-borders.is-grid article{border-width:0 1px 0 0}.wpnbha.is-style-borders.columns-1 article,.wpnbha.is-style-borders.columns-2 article:nth-of-type(2n),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n),.wpnbha.is-style-borders.columns-4 article:nth-of-type(4n),.wpnbha.is-style-borders.columns-5 article:nth-of-type(5n),.wpnbha.is-style-borders.columns-6 article:nth-of-type(6n),.wpnbha.is-style-borders.is-grid article:last-of-type{border:0}}
|
blog-posts-block/dist/editor.js
ADDED
@@ -0,0 +1,2 @@
|
|
|
|
|
1 |
+
/*! For license information please see editor.js.LICENSE */
|
2 |
+
!function(e,t){for(var n in t)e[n]=t[n]}(window,function(e){var t={};function n(o){if(t[o])return t[o].exports;var c=t[o]={i:o,l:!1,exports:{}};return e[o].call(c.exports,c,c.exports,n),c.l=!0,c.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)n.d(o,c,function(t){return e[t]}.bind(null,c));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=33)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.components}()},function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){!function(){e.exports=this.wp.htmlEntities}()},function(e,t){!function(){e.exports=this.wp.url}()},function(e,t){!function(){e.exports=this.wp.apiFetch}()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t,n){var o=n(28),c=n(4);e.exports=function(e,t){return!t||"object"!==o(t)&&"function"!=typeof t?c(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var o=n(29);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}},function(e,t){!function(){e.exports=this.wp.editor}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t){!function(){e.exports=this.lodash}()},function(e,t){!function(){e.exports=this.wp.hooks}()},function(e,t,n){var o=n(25),c=n(26),a=n(27);e.exports=function(e){return o(e)||c(e)||a()}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}e.exports=function(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),e}},function(e){e.exports=JSON.parse('{"name":"homepage-articles","category":"newspack","attributes":{"className":{"type":"string","default":""},"showExcerpt":{"type":"boolean","default":true},"showDate":{"type":"boolean","default":true},"showImage":{"type":"boolean","default":true},"showCaption":{"type":"boolean","default":false},"imageShape":{"type":"string","default":"landscape"},"minHeight":{"type":"integer","default":0},"moreButton":{"type":"boolean","default":false},"showAuthor":{"type":"boolean","default":true},"showAvatar":{"type":"boolean","default":true},"showCategory":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"integer","default":3},"postsToShow":{"type":"integer","default":3},"mediaPosition":{"type":"string","default":"top"},"authors":{"type":"array","default":[],"items":{"type":"integer"}},"categories":{"type":"array","default":[],"items":{"type":"integer"}},"tags":{"type":"array","default":[],"items":{"type":"integer"}},"specificPosts":{"type":"array","default":[],"items":{"type":"integer"}},"typeScale":{"type":"integer","default":4},"imageScale":{"type":"integer","default":3},"mobileStack":{"type":"boolean","default":false},"sectionHeader":{"type":"string","default":""},"specificMode":{"type":"boolean","default":false},"textColor":{"type":"string","default":""},"customTextColor":{"type":"string","default":""},"singleMode":{"type":"boolean","default":false}}}')},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t,n){var o=n(3);function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}e.exports=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}},function(e,t,n){var o;!function(){"use strict";var n={}.hasOwnProperty;function c(){for(var e=[],t=0;t<arguments.length;t++){var o=arguments[t];if(o){var a=typeof o;if("string"===a||"number"===a)e.push(o);else if(Array.isArray(o)&&o.length){var r=c.apply(null,o);r&&e.push(r)}else if("object"===a)for(var s in o)n.call(o,s)&&o[s]&&e.push(s)}}return e.join(" ")}e.exports?(c.default=c,e.exports=c):void 0===(o=function(){return c}.apply(t,[]))||(e.exports=o)}()},function(e,t){!function(){e.exports=this.moment}()},function(e,t){!function(){e.exports=this.wp.data}()},function(e,t){!function(){e.exports=this.wp.compose}()},function(e,t){e.exports=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}},function(e,t){e.exports=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},function(e,t){function n(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=n=function(e){return typeof e}:e.exports=n=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(t)}e.exports=n},function(e,t){function n(t,o){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,o)}e.exports=n},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var o=n(20),c=n.n(o),a=n(13),r=n(1),s=n(15),i=n(0),l=n(2),u=n(16),p=n.n(u),b=n(8),h=n.n(b),f=n(17),g=n.n(f),m=n(9),d=n.n(m),w=n(10),O=n.n(w),k=n(4),j=n.n(k),_=n(11),y=n.n(_),v=n(3),S=n.n(v),E=n(7),C=n.n(E),P=n(6),x=n(5),A=n(14),T=(n(30),function(e){function t(e){var n;return h()(this,t),(n=d()(this,O()(t).call(this,e))).state={suggestions:[],validValues:{},loading:!1},n.debouncedUpdateSuggestions=Object(A.debounce)(n.updateSuggestions,500),n}return y()(t,e),g()(t,[{key:"componentDidMount",value:function(){var e=this,t=this.props,n=t.tokens,o=t.fetchSavedInfo;n.length&&o&&this.setState({loading:!0},(function(){o(n).then((function(t){var n=e.state.validValues;t.forEach((function(e){n[e.value]=e.label})),e.setState({validValues:n,loading:!1})}))}))}},{key:"componentWillUnmount",value:function(){delete this.suggestionsRequest,this.debouncedUpdateSuggestions.cancel()}},{key:"getLabelsForValues",value:function(e){var t=this.state.validValues;return e.reduce((function(e,n){return t[n]?[].concat(p()(e),[t[n]]):e}),[])}},{key:"getValuesForLabels",value:function(e){var t=this.state.validValues;return e.map((function(e){return Object.keys(t).find((function(n){return t[n]===e}))}))}},{key:"updateSuggestions",value:function(e){var t=this,n=this.props.fetchSuggestions;n&&this.setState({loading:!0},(function(){var o=n(e);o.then((function(e){if(t.suggestionsRequest===o){var n=t.state.validValues,c=[];e.forEach((function(e){c.push(e.label),n[e.value]=e.label})),t.setState({suggestions:c,validValues:n,loading:!1})}})).catch((function(){t.suggestionsRequest===o&&t.setState({loading:!1})})),t.suggestionsRequest=o}))}},{key:"handleOnChange",value:function(e){(0,this.props.onChange)(this.getValuesForLabels(e))}},{key:"getTokens",value:function(){var e=this.props.tokens;return this.getLabelsForValues(e)}},{key:"render",value:function(){var e=this,t=this.props.label,n=void 0===t?"":t,o=this.state,c=o.suggestions,a=o.loading;return Object(i.createElement)("div",{className:"autocomplete-tokenfield"},Object(i.createElement)(l.FormTokenField,{value:this.getTokens(),suggestions:c,onChange:function(t){return e.handleOnChange(t)},onInputChange:function(t){return e.debouncedUpdateSuggestions(t)},label:n}),a&&Object(i.createElement)(l.Spinner,null))}}]),t}(i.Component)),M=function(e){function t(){var e,n;h()(this,t);for(var o=arguments.length,c=new Array(o),a=0;a<o;a++)c[a]=arguments[a];return n=d()(this,(e=O()(t)).call.apply(e,[this].concat(c))),S()(j()(n),"fetchPostSuggestions",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/search",{search:e,per_page:20,_fields:"id,title",type:"post"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.title)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"fetchSavedPosts",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/posts",{per_page:100,include:e.join(","),_fields:"id,title"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.title.rendered)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"fetchAuthorSuggestions",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/users",{search:e,per_page:20,_fields:"id,name"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no name)","newspack-blocks")}}))}))})),S()(j()(n),"fetchSavedAuthors",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/users",{per_page:100,include:e.join(","),_fields:"id,name"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no name)","newspack-blocks")}}))}))})),S()(j()(n),"fetchCategorySuggestions",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/categories",{search:e,per_page:20,_fields:"id,name",orderby:"count",order:"desc"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"fetchSavedCategories",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/categories",{per_page:100,_fields:"id,name",include:e.join(",")})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"fetchTagSuggestions",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/tags",{search:e,per_page:20,_fields:"id,name",orderby:"count",order:"desc"})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"fetchSavedTags",(function(e){return C()({path:Object(P.addQueryArgs)("/wp/v2/tags",{per_page:100,_fields:"id,name",include:e.join(",")})}).then((function(e){return e.map((function(e){return{value:e.id,label:Object(x.decodeEntities)(e.name)||Object(r.__)("(no title)","newspack-blocks")}}))}))})),S()(j()(n),"render",(function(){var e=n.props,t=(e.numberOfItems,e.onNumberOfItemsChange,e.specificMode),o=e.onSpecificModeChange,c=e.specificPosts,a=e.onSpecificPostsChange,s=e.authors,u=e.onAuthorsChange,p=e.categories,b=e.onCategoriesChange,h=e.tags,f=e.onTagsChange;return[e.enableSpecific&&Object(i.createElement)(l.ToggleControl,{checked:t,onChange:o,label:Object(r.__)("Choose specific stories","newspack-blocks")}),t&&Object(i.createElement)(T,{tokens:c||[],onChange:a,fetchSuggestions:n.fetchPostSuggestions,fetchSavedInfo:n.fetchSavedPosts,label:Object(r.__)("Posts","newspack-blocks")}),!t&&Object(i.createElement)(l.QueryControls,n.props),!t&&u&&Object(i.createElement)(T,{tokens:s||[],onChange:u,fetchSuggestions:n.fetchAuthorSuggestions,fetchSavedInfo:n.fetchSavedAuthors,label:Object(r.__)("Authors","newspack-blocks")}),!t&&b&&Object(i.createElement)(T,{tokens:p||[],onChange:b,fetchSuggestions:n.fetchCategorySuggestions,fetchSavedInfo:n.fetchSavedCategories,label:Object(r.__)("Categories","newspack-blocks")}),!t&&f&&Object(i.createElement)(T,{tokens:h||[],onChange:f,fetchSuggestions:n.fetchTagSuggestions,fetchSavedInfo:n.fetchSavedTags,label:Object(r.__)("Tags","newspack-blocks")})]})),n}return y()(t,e),t}(i.Component);M.defaultProps={enableSpecific:!0,specificPosts:[],authors:[],categories:[],tags:[]};var H=M,V=n(21),z=n.n(V),N=n(22),I=n.n(N),B=n(12),L=n(23),R=n(24),D=n(19),F=6,q=Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z"})),Q=Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14z"})),G=Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"})),U=Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"})),W=Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z"})),J=function(e){function t(){var e,n;h()(this,t);for(var o=arguments.length,c=new Array(o),a=0;a<o;a++)c[a]=arguments[a];return n=d()(this,(e=O()(t)).call.apply(e,[this].concat(c))),S()(j()(n),"renderPost",(function(e){var t=n.props.attributes,o=t.showImage,c=t.imageShape,a=t.mediaPosition,r=t.minHeight,s=t.showCaption,l=t.showExcerpt,u=t.showAuthor,p=t.showAvatar,b=t.showDate,h=t.showCategory,f=t.sectionHeader,g={minHeight:"behind"===a&&o&&e.newspack_featured_image_src&&r+"vh",paddingTop:"behind"===a&&o&&e.newspack_featured_image_src&&r/5+"vh"};e.newspack_author_info.length;return Object(i.createElement)("article",{className:e.newspack_featured_image_src?"post-has-image":null,key:e.id,style:g},o&&e.newspack_featured_image_src&&Object(i.createElement)("figure",{className:"post-thumbnail",key:"thumbnail"},Object(i.createElement)("a",{href:"#"},"landscape"===c&&Object(i.createElement)("img",{src:e.newspack_featured_image_src.landscape}),"portrait"===c&&Object(i.createElement)("img",{src:e.newspack_featured_image_src.portrait}),"square"===c&&Object(i.createElement)("img",{src:e.newspack_featured_image_src.square}),"uncropped"===c&&Object(i.createElement)("img",{src:e.newspack_featured_image_src.uncropped})),s&&""!==e.newspack_featured_image_caption&&Object(i.createElement)("figcaption",null,e.newspack_featured_image_caption)),Object(i.createElement)("div",{className:"entry-wrapper"},h&&e.newspack_category_info.length&&Object(i.createElement)("div",{className:"cat-links"},Object(i.createElement)("a",{href:"#"},e.newspack_category_info)),B.RichText.isEmpty(f)?Object(i.createElement)("h2",{className:"entry-title",key:"title"},Object(i.createElement)("a",{href:"#"},Object(x.decodeEntities)(e.title.rendered.trim()))):Object(i.createElement)("h3",{className:"entry-title",key:"title"},Object(i.createElement)("a",{href:"#"},Object(x.decodeEntities)(e.title.rendered.trim()))),l&&Object(i.createElement)(i.RawHTML,{key:"excerpt",className:"excerpt-contain"},e.excerpt.rendered),Object(i.createElement)("div",{className:"entry-meta"},u&&p&&n.formatAvatars(e.newspack_author_info),u&&n.formatByline(e.newspack_author_info),b&&Object(i.createElement)("time",{className:"entry-date published",key:"pub-date"},I()(e.date_gmt).local().format("MMMM DD, Y")))))})),S()(j()(n),"formatAvatars",(function(e){return e.map((function(e){return Object(i.createElement)("span",{className:"avatar author-avatar"},Object(i.createElement)("a",{className:"url fn n",href:"#"},Object(i.createElement)(i.RawHTML,{key:e.id},e.avatar)))}))})),S()(j()(n),"formatByline",(function(e){return Object(i.createElement)("span",{className:"byline"},Object(r.__)("by","newspack-blocks")," ",e.reduce((function(t,n,o){return[].concat(p()(t),[Object(i.createElement)("span",{className:"author vcard",key:n.id},Object(i.createElement)("a",{className:"url fn n",href:"#"},n.display_name)),o<e.length-2&&", ",e.length>1&&o===e.length-2&&Object(r.__)(" and ","newspack-blocks")])}),[]))})),S()(j()(n),"renderInspectorControls",(function(){var e=n.props,t=e.attributes,o=e.setAttributes,c=e.latestPosts,a=(e.isSelected,e.textColor),s=e.setTextColor,u=Array.isArray(c)&&c.length,p=t.authors,b=t.specificPosts,h=t.postsToShow,f=t.categories,g=(t.sectionHeader,t.columns),m=t.showImage,d=t.showCaption,w=t.imageScale,O=t.mobileStack,k=t.minHeight,j=t.moreButton,_=t.showExcerpt,y=t.typeScale,v=t.showDate,S=t.showAuthor,E=t.showAvatar,C=t.showCategory,P=t.postLayout,x=t.mediaPosition,A=t.specificMode,T=t.tags,M=(t.url,[{value:1,label:Object(r.__)("Small","newspack-blocks"),shortName:Object(r.__)("S","newspack-blocks")},{value:2,label:Object(r.__)("Medium","newspack-blocks"),shortName:Object(r.__)("M","newspack-blocks")},{value:3,label:Object(r.__)("Large","newspack-blocks"),shortName:Object(r.__)("L","newspack-blocks")},{value:4,label:Object(r.__)("Extra Large","newspack-blocks"),shortName:Object(r.__)("XL","newspack-blocks")}]);return Object(i.createElement)(i.Fragment,null,Object(i.createElement)(l.PanelBody,{title:Object(r.__)("Display Settings","newspack-blocks"),initialOpen:!0},h&&Object(i.createElement)(H,{numberOfItems:h,onNumberOfItemsChange:function(e){return o({postsToShow:e})},specificMode:A,onSpecificModeChange:function(e){return o({specificMode:e})},specificPosts:b,onSpecificPostsChange:function(e){return o({specificPosts:e})},authors:p,onAuthorsChange:function(e){return o({authors:e})},categories:f,onCategoriesChange:function(e){return o({categories:e})},tags:T,onTagsChange:function(e){return o({tags:e})}}),"grid"===P&&Object(i.createElement)(l.RangeControl,{label:Object(r.__)("Columns","newspack-blocks"),value:g,onChange:function(e){return o({columns:e})},min:2,max:u?Math.min(F,c.length):F,required:!0}),!A&&Object(i.createElement)(l.ToggleControl,{label:Object(r.__)('Show "More" Button',"newspack-blocks"),checked:j,onChange:function(){return o({moreButton:!j})},help:Object(r.__)("Only available for non-AMP requests.","newspack-blocks")})),Object(i.createElement)(l.PanelBody,{title:Object(r.__)("Featured Image Settings","newspack-blocks")},Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Featured Image","newspack-blocks"),checked:m,onChange:function(){return o({showImage:!m})}})),m&&Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Featured Image Caption","newspack-blocks"),checked:d,onChange:function(){return o({showCaption:!d})}})),m&&"top"!==x&&"behind"!==x&&Object(i.createElement)(i.Fragment,null,Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Stack on mobile","newspack-blocks"),checked:O,onChange:function(){return o({mobileStack:!O})}})),Object(i.createElement)(l.BaseControl,{label:Object(r.__)("Featured Image Size","newspack-blocks")},Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ButtonGroup,{"aria-label":Object(r.__)("Featured Image Size","newspack-blocks")},M.map((function(e){var t=w===e.value;return Object(i.createElement)(l.Button,{isLarge:!0,isPrimary:t,"aria-pressed":t,"aria-label":e.label,onClick:function(){return o({imageScale:e.value})}},e.shortName)})))))),m&&"behind"===x&&Object(i.createElement)(l.RangeControl,{label:Object(r.__)("Minimum height","newspack-blocks"),help:Object(r.__)("Sets a minimum height for the block, using a percentage of the screen's current height.","newspack-blocks"),value:k,onChange:function(e){return o({minHeight:e})},min:0,max:100,required:!0})),Object(i.createElement)(l.PanelBody,{title:Object(r.__)("Post Control Settings","newspack-blocks")},Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Excerpt","newspack-blocks"),checked:_,onChange:function(){return o({showExcerpt:!_})}})),Object(i.createElement)(l.RangeControl,{className:"type-scale-slider",label:Object(r.__)("Type Scale","newspack-blocks"),value:y,onChange:function(e){return o({typeScale:e})},min:1,max:10,beforeIcon:"editor-textcolor",afterIcon:"editor-textcolor",required:!0})),Object(i.createElement)(D.PanelColorSettings,{title:Object(r.__)("Color Settings","newspack-blocks"),initialOpen:!0,colorSettings:[{value:a.color,onChange:s,label:Object(r.__)("Text Color","newspack-blocks")}]}),Object(i.createElement)(l.PanelBody,{title:Object(r.__)("Post Meta Settings","newspack-blocks")},Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Date","newspack-blocks"),checked:v,onChange:function(){return o({showDate:!v})}})),Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Category","newspack-blocks"),checked:C,onChange:function(){return o({showCategory:!C})}})),Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Author","newspack-blocks"),checked:S,onChange:function(){return o({showAuthor:!S})}})),S&&Object(i.createElement)(l.PanelRow,null,Object(i.createElement)(l.ToggleControl,{label:Object(r.__)("Show Author Avatar","newspack-blocks"),checked:E,onChange:function(){return o({showAvatar:!E})}}))))})),n}return y()(t,e),g()(t,[{key:"render",value:function(){var e,t=this,n=this.props,o=n.attributes,c=n.className,a=n.setAttributes,s=n.isSelected,u=n.latestPosts,p=(n.hasPosts,n.textColor),b=(o.showExcerpt,o.showDate,o.showImage),h=o.imageShape,f=(o.showAuthor,o.showAvatar,o.postsToShow,o.postLayout),g=o.mediaPosition,m=o.moreButton,d=o.columns,w=(o.categories,o.typeScale),O=o.imageScale,k=o.mobileStack,j=o.sectionHeader,_=o.showCaption,y=o.showCategory,v=o.specificMode,E=z()(c,(e={"is-grid":"grid"===f,"show-image":b},S()(e,"columns-".concat(d),"grid"===f),S()(e,"ts-".concat(w),"5"!==w),S()(e,"image-align".concat(g),b),S()(e,"is-".concat(O),"1"!==O&&b),S()(e,"mobile-stack",k),S()(e,"image-shape".concat(h),"landscape"!==h),S()(e,"has-text-color",""!==p.color),S()(e,"show-caption",_),S()(e,"show-category",y),S()(e,"wpnbha",!0),e)),C=[{icon:"list-view",title:Object(r.__)("List View","newspack-blocks"),onClick:function(){return a({postLayout:"list"})},isActive:"list"===f},{icon:"grid-view",title:Object(r.__)("Grid View","newspack-blocks"),onClick:function(){return a({postLayout:"grid"})},isActive:"grid"===f}],P=[{icon:"align-none",title:Object(r.__)("Show media on top","newspack-blocks"),isActive:"top"===g,onClick:function(){return a({mediaPosition:"top"})}},{icon:"align-pull-left",title:Object(r.__)("Show media on left","newspack-blocks"),isActive:"left"===g,onClick:function(){return a({mediaPosition:"left"})}},{icon:"align-pull-right",title:Object(r.__)("Show media on right","newspack-blocks"),isActive:"right"===g,onClick:function(){return a({mediaPosition:"right"})}},{icon:W,title:Object(r.__)("Show media behind","newspack-blocks"),isActive:"behind"===g,onClick:function(){return a({mediaPosition:"behind"})}}],x=[{icon:q,title:Object(r.__)("Landscape Image Shape","newspack-blocks"),isActive:"landscape"===h,onClick:function(){return a({imageShape:"landscape"})}},{icon:Q,title:Object(r.__)("portrait Image Shape","newspack-blocks"),isActive:"portrait"===h,onClick:function(){return a({imageShape:"portrait"})}},{icon:G,title:Object(r.__)("Square Image Shape","newspack-blocks"),isActive:"square"===h,onClick:function(){return a({imageShape:"square"})}},{icon:U,title:Object(r.__)("Uncropped","newspack-blocks"),isActive:"uncropped"===h,onClick:function(){return a({imageShape:"uncropped"})}}];return Object(i.createElement)(i.Fragment,null,Object(i.createElement)("div",{className:E,style:{color:p.color}},u&&(!B.RichText.isEmpty(j)||s)&&Object(i.createElement)(B.RichText,{onChange:function(e){return a({sectionHeader:e})},placeholder:Object(r.__)("Write header…","newspack-blocks"),value:j,tagName:"h2",className:"article-section-title"}),u&&!u.length&&Object(i.createElement)(l.Placeholder,null,Object(r.__)("Sorry, no posts were found.","newspack-blocks")),!u&&Object(i.createElement)(l.Placeholder,null,Object(i.createElement)(l.Spinner,null)),u&&u.map((function(e){return t.renderPost(e)}))),!v&&u&&m&&Object(i.createElement)("button",{className:"button",type:"button"},Object(r.__)("More…","newspack-blocks")),Object(i.createElement)(B.BlockControls,null,Object(i.createElement)(l.Toolbar,{controls:C}),b&&Object(i.createElement)(l.Toolbar,{controls:P}),b&&Object(i.createElement)(l.Toolbar,{controls:x})),Object(i.createElement)(B.InspectorControls,null,this.renderInspectorControls()))}}]),t}(i.Component),X=Object(R.compose)([Object(D.withColors)({textColor:"color"}),Object(L.withSelect)((function(e,t){var n=t.attributes,o=n.postsToShow,c=n.authors,a=n.categories,r=n.tags,s=n.specificPosts,i=n.specificMode,l=e("core");l.getAuthors;return{latestPosts:(0,l.getEntityRecords)("postType","post",Object(A.pickBy)(i&&s&&s.length?{include:s,orderby:"include"}:{per_page:o,categories:a,author:c,tags:r},(function(e){return!Object(A.isUndefined)(e)})))}}))])(J),Y=(n(31),n(32),n(18)),K=(Y.name,Y.attributes),Z=Y.category,$={title:Object(r.__)("Homepage Posts","newspack-blocks"),icon:Object(i.createElement)(l.SVG,{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},Object(i.createElement)(l.Path,{d:"M0 0h24v24H0z",fill:"none"}),Object(i.createElement)(l.Path,{d:"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM10 9h8v2h-8zm0 3h4v2h-4zm0-6h8v2h-8z"})),attributes:K,category:Z,keywords:[Object(r.__)("posts","newspack-blocks"),Object(r.__)("articles","newspack-blocks"),Object(r.__)("latest","newspack-blocks")],description:Object(r.__)("A block for displaying homepage posts.","newspack-blocks"),styles:[{name:"default",label:Object(r._x)("Default","block style","newspack-blocks"),isDefault:!0},{name:"borders",label:Object(r._x)("Borders","block style","newspack-blocks")}],supports:{html:!1,align:["wide","full"],default:""},edit:X,save:function(){return null},transforms:{from:[{type:"block",blocks:["core/latest-posts"],transform:function(e){var t=e.displayPostContent,n=e.displayPostDate,o=e.postLayout,c=e.columns,r=e.postsToShow,i=e.categories;return Object(a.createBlock)(Object(s.applyFilters)("blocks.transforms_from_name","newspack-blocks/homepage-articles"),{showExcerpt:t,showDate:n,postLayout:o,columns:c,postsToShow:r,showAuthor:!1,categories:i?[i]:[]})}}],to:[{type:"block",blocks:["core/latest-posts"],transform:function(e){var t=e.showExcerpt,n=e.showDate,o=e.postLayout,c=e.columns,r=e.postsToShow,s=e.categories;return Object(a.createBlock)("core/latest-posts",{displayPostContent:t,displayPostDate:n,postLayout:o,columns:c,postsToShow:r,categories:s[0]||""})}}]}},ee="a8c/blog-posts";Object(s.addFilter)("blocks.transforms_from_name","set-transformed-block-name",(function(e){return"newspack-blocks/homepage-articles"!==e?e:ee})),Object(a.registerBlockType)(ee,c()({},$,{title:Object(r.__)("Blog Posts","full-site-editing"),category:"layout"}))}]));
|
blog-posts-block/dist/editor.js.LICENSE
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*!
|
2 |
+
Copyright (c) 2017 Jed Watson.
|
3 |
+
Licensed under the MIT License (MIT), see
|
4 |
+
http://jedwatson.github.io/classnames
|
5 |
+
*/
|
blog-posts-block/dist/editor.rtl.css
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
.autocomplete-tokenfield{position:relative}.autocomplete-tokenfield .components-spinner{position:absolute;top:2em;left:0}.type-scale-slider .dashicon{height:16px;width:16px}.type-scale-slider input+.dashicon{height:24px;margin-right:10px;margin-left:0;width:24px}.wpnbha .editor-rich-text{width:100%}.wpnbha .cat-links{font-size:.7em}.wpnbha span.avatar{display:inline-block;margin-left:.5em}.wpnbha span.avatar div{display:inline}.wpnbha .excerpt-contain p{margin:.5em 0}.wpnbha{margin-bottom:1em}.wpnbha article{margin-bottom:1.5em;word-break:break-word;overflow-wrap:break-word;position:relative}.wpnbha article:last-of-type{margin-bottom:0}.wpnbha .article-section-title{font-size:.8em;margin-bottom:.5em;width:100%}.wpnbha.is-grid{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%}@media only screen and (min-width:782px){.wpnbha.is-grid article,.wpnbha.is-grid article:last-child{margin-bottom:1em}}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.333% - 16px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-5 article:last-of-type:nth-child(odd){flex-grow:1}}@media only screen and (min-width:782px){.wpnbha.columns-2 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-3 article{flex-basis:calc(33.33333% - 16px)}.wpnbha.columns-4 article{flex-basis:calc(25% - 16px)}.wpnbha.columns-5 article{flex-basis:calc(20% - 16px)}.wpnbha.columns-6 article{flex-basis:calc(16.66667% - 16px)}}.wpnbha .post-thumbnail{margin:0}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha figcaption{font-size:.6em}.wpnbha.image-aligntop .post-thumbnail{margin-bottom:.25em}.wpnbha.image-aligntop .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha.image-alignleft .post-has-image,.wpnbha.image-alignright .post-has-image{display:flex}.wpnbha.image-alignleft .post-has-image .post-thumbnail,.wpnbha.image-alignright .post-has-image .post-thumbnail{flex-basis:33%}.wpnbha.image-alignleft .post-has-image .entry-wrapper,.wpnbha.image-alignright .post-has-image .entry-wrapper{flex-basis:67%}.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:block}@media only screen and (min-width:600px){.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:flex}.wpnbha.image-alignleft.is-4 .post-thumbnail,.wpnbha.image-alignright.is-4 .post-thumbnail{flex-basis:75%}.wpnbha.image-alignleft.is-4 .entry-wrapper,.wpnbha.image-alignright.is-4 .entry-wrapper{flex-basis:25%}.wpnbha.image-alignleft.is-3 .entry-wrapper,.wpnbha.image-alignleft.is-3 .post-thumbnail,.wpnbha.image-alignright.is-3 .entry-wrapper,.wpnbha.image-alignright.is-3 .post-thumbnail{flex-basis:50%}}.wpnbha.image-alignleft.is-1 .post-thumbnail,.wpnbha.image-alignright.is-1 .post-thumbnail{flex-basis:25%}.wpnbha.image-alignleft.is-1 .entry-wrapper,.wpnbha.image-alignright.is-1 .entry-wrapper{flex-basis:75%}.wpnbha.image-alignleft .post-thumbnail{margin-left:1em}.wpnbha.image-alignright .post-thumbnail{margin-right:1em}.wpnbha.image-alignright .entry-wrapper{order:-1}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.wpnbha .cat-links{font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:.5em}.wpnbha .entry-meta .byline:not(:last-child){margin-left:1.5em}.wpnbha .avatar{border-radius:100%;display:block;margin-left:.5em}.wpnbha p{margin:.5em 0}.wpnbha.has-text-color .article-section-title,.wpnbha.has-text-color .cat-links,.wpnbha.has-text-color .cat-links a,.wpnbha.has-text-color .cat-links a:visited,.wpnbha.has-text-color .entry-meta,.wpnbha.has-text-color .entry-meta .byline a,.wpnbha.has-text-color .entry-meta .byline a:visited,.wpnbha.has-text-color .entry-meta a,.wpnbha.has-text-color .entry-title,.wpnbha.has-text-color .entry-title a,.wpnbha.has-text-color .entry-title a:visited,.wpnbha.has-text-color figcaption{color:inherit}.wpnbha.has-text-color .entry-meta span:not(.avatar){opacity:.8}.wpnbha.image-alignbehind .post-has-image{display:flex;align-items:flex-end;position:relative}.wpnbha.image-alignbehind .post-has-image .post-thumbnail{bottom:0;right:0;overflow:hidden;position:absolute;left:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%;-o-object-fit:cover;object-fit:cover;max-width:1000%;width:100%}.wpnbha.image-alignbehind .post-has-image .post-thumbnail figcaption{bottom:1em;-webkit-box-orient:vertical;color:hsla(0,0%,100%,.9);display:-webkit-box;font-style:italic;right:0;-webkit-line-clamp:1;margin:0;max-height:1.6em;overflow:hidden;padding:0 1em;position:absolute;left:0;text-align:left;text-overflow:ellipsis;z-index:2}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);bottom:0;content:"";right:0;position:absolute;left:0;top:0;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2em;position:relative;z-index:2}.wpnbha.image-alignbehind .post-has-image .cat-links a,.wpnbha.image-alignbehind .post-has-image .entry-meta,.wpnbha.image-alignbehind .post-has-image .entry-meta .byline a,.wpnbha.image-alignbehind .post-has-image .entry-title a,.wpnbha.image-alignbehind .post-has-image .entry-wrapper{color:#fff}.wpnbha article .entry-title{font-size:1.2em}.wpnbha article .entry-meta{font-size:.8em}.wpnbha article .avatar{height:25px;width:25px}@media only screen and (min-width:782px){.wpnbha article .entry-title{font-size:1.6em}.wpnbha article .avatar{height:40px;width:40px}}.wpnbha.ts-8 .entry-title,.wpnbha.ts-9 .entry-title,.wpnbha.ts-10 .entry-title{line-height:1.1em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .avatar,.wpnbha.ts-9 article .avatar,.wpnbha.ts-10 article .avatar{height:2.4em;width:2.4em}}.wpnbha.ts-10 article .entry-title{font-size:2.6em}@media only screen and (min-width:782px){.wpnbha.ts-10 article .entry-title{font-size:3.6em}}@media only screen and (min-width:1168px){.wpnbha.ts-10 article .entry-title{font-size:4.8em}}.wpnbha.ts-9 article .entry-title{font-size:2.4em}@media only screen and (min-width:782px){.wpnbha.ts-9 article .entry-title{font-size:3.4em}}@media only screen and (min-width:1168px){.wpnbha.ts-9 article .entry-title{font-size:4.2em}}.wpnbha.ts-8 article .entry-title{font-size:2.2em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .entry-title{font-size:3em}}@media only screen and (min-width:1168px){.wpnbha.ts-8 article .entry-title{font-size:3.6em}}.wpnbha.ts-7 article .entry-title{font-size:2em}@media only screen and (min-width:782px){.wpnbha.ts-7 article .entry-title{font-size:2.4em}.wpnbha.ts-7 article .avatar{height:48px;width:48px}}@media only screen and (min-width:1168px){.wpnbha.ts-7 article .entry-title{font-size:3em}}.wpnbha.ts-6 article .entry-title{font-size:1.7em}@media only screen and (min-width:782px){.wpnbha.ts-6 article .entry-title{font-size:2em}.wpnbha.ts-6 article .avatar{height:44px;width:44px}}@media only screen and (min-width:1168px){.wpnbha.ts-6 article .entry-title{font-size:2.4em}}.wpnbha.ts-5 article .entry-title{font-size:1.4em}@media only screen and (min-width:782px){.wpnbha.ts-5 article .entry-title{font-size:1.8em}.wpnbha.ts-5 article .avatar{height:40px;width:40px}}@media only screen and (min-width:1168px){.wpnbha.ts-5 article .entry-title{font-size:2em}}.wpnbha.ts-3 article .entry-title{font-size:1em}.wpnbha.ts-3 article .entry-wrapper p{font-size:.8em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-2 article .entry-title{font-size:.8em}.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper p{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-2 article .avatar{height:28px;width:28px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-1 article .entry-wrapper p{font-size:.7em}.wpnbha.ts-1 article .entry-meta{font-size:.6em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .avatar{height:24px;width:24px}}.wpnbha.is-style-borders article{border:solid rgba(0,0,0,.2);border-width:0 0 1px;margin-bottom:1em;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type{margin-bottom:0}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0}@media only screen and (min-width:782px){.wpnbha.is-style-borders.columns-2 article{padding-left:32px}.wpnbha.is-style-borders.columns-3 article{padding-left:24px}.wpnbha.is-style-borders.columns-4 article{padding-left:21.33333px}.wpnbha.is-style-borders.columns-5 article{padding-left:20px}.wpnbha.is-style-borders.columns-6 article{padding-left:19.2px}.wpnbha.is-style-borders.is-grid article{border-width:0 0 0 1px}.wpnbha.is-style-borders.columns-1 article,.wpnbha.is-style-borders.columns-2 article:nth-of-type(2n),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n),.wpnbha.is-style-borders.columns-4 article:nth-of-type(4n),.wpnbha.is-style-borders.columns-5 article:nth-of-type(5n),.wpnbha.is-style-borders.columns-6 article:nth-of-type(6n),.wpnbha.is-style-borders.is-grid article:last-of-type{border:0}}
|
blog-posts-block/dist/view.asset.php
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'dcb5e643cfdcb1de98dea3b5275c9687');
|
blog-posts-block/dist/view.css
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
.wpnbha{margin-bottom:1em}.wpnbha article{margin-bottom:1.5em;word-break:break-word;overflow-wrap:break-word;position:relative}.wpnbha article:last-of-type{margin-bottom:0}.wpnbha .article-section-title{font-size:.8em;margin-bottom:.5em;width:100%}.wpnbha.is-grid{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%}@media only screen and (min-width:782px){.wpnbha.is-grid article,.wpnbha.is-grid article:last-child{margin-bottom:1em}}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.333% - 16px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-5 article:last-of-type:nth-child(odd){flex-grow:1}}@media only screen and (min-width:782px){.wpnbha.columns-2 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-3 article{flex-basis:calc(33.33333% - 16px)}.wpnbha.columns-4 article{flex-basis:calc(25% - 16px)}.wpnbha.columns-5 article{flex-basis:calc(20% - 16px)}.wpnbha.columns-6 article{flex-basis:calc(16.66667% - 16px)}}.wpnbha .post-thumbnail{margin:0}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha figcaption{font-size:.6em}.wpnbha.image-aligntop .post-thumbnail{margin-bottom:.25em}.wpnbha.image-aligntop .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha.image-alignleft .post-has-image,.wpnbha.image-alignright .post-has-image{display:flex}.wpnbha.image-alignleft .post-has-image .post-thumbnail,.wpnbha.image-alignright .post-has-image .post-thumbnail{flex-basis:33%}.wpnbha.image-alignleft .post-has-image .entry-wrapper,.wpnbha.image-alignright .post-has-image .entry-wrapper{flex-basis:67%}.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:block}@media only screen and (min-width:600px){.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:flex}.wpnbha.image-alignleft.is-4 .post-thumbnail,.wpnbha.image-alignright.is-4 .post-thumbnail{flex-basis:75%}.wpnbha.image-alignleft.is-4 .entry-wrapper,.wpnbha.image-alignright.is-4 .entry-wrapper{flex-basis:25%}.wpnbha.image-alignleft.is-3 .entry-wrapper,.wpnbha.image-alignleft.is-3 .post-thumbnail,.wpnbha.image-alignright.is-3 .entry-wrapper,.wpnbha.image-alignright.is-3 .post-thumbnail{flex-basis:50%}}.wpnbha.image-alignleft.is-1 .post-thumbnail,.wpnbha.image-alignright.is-1 .post-thumbnail{flex-basis:25%}.wpnbha.image-alignleft.is-1 .entry-wrapper,.wpnbha.image-alignright.is-1 .entry-wrapper{flex-basis:75%}.wpnbha.image-alignleft .post-thumbnail{margin-right:1em}.wpnbha.image-alignright .post-thumbnail{margin-left:1em}.wpnbha.image-alignright .entry-wrapper{order:-1}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.wpnbha .cat-links{font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:.5em}.wpnbha .entry-meta .byline:not(:last-child){margin-right:1.5em}.wpnbha .avatar{border-radius:100%;display:block;margin-right:.5em}.wpnbha p{margin:.5em 0}.wpnbha.has-text-color .article-section-title,.wpnbha.has-text-color .cat-links,.wpnbha.has-text-color .cat-links a,.wpnbha.has-text-color .cat-links a:visited,.wpnbha.has-text-color .entry-meta,.wpnbha.has-text-color .entry-meta .byline a,.wpnbha.has-text-color .entry-meta .byline a:visited,.wpnbha.has-text-color .entry-meta a,.wpnbha.has-text-color .entry-title,.wpnbha.has-text-color .entry-title a,.wpnbha.has-text-color .entry-title a:visited,.wpnbha.has-text-color figcaption{color:inherit}.wpnbha.has-text-color .entry-meta span:not(.avatar){opacity:.8}.wpnbha.image-alignbehind .post-has-image{display:flex;align-items:flex-end;position:relative}.wpnbha.image-alignbehind .post-has-image .post-thumbnail{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%;-o-object-fit:cover;object-fit:cover;max-width:1000%;width:100%}.wpnbha.image-alignbehind .post-has-image .post-thumbnail figcaption{bottom:1em;-webkit-box-orient:vertical;color:hsla(0,0%,100%,.9);display:-webkit-box;font-style:italic;left:0;-webkit-line-clamp:1;margin:0;max-height:1.6em;overflow:hidden;padding:0 1em;position:absolute;right:0;text-align:right;text-overflow:ellipsis;z-index:2}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2em;position:relative;z-index:2}.wpnbha.image-alignbehind .post-has-image .cat-links a,.wpnbha.image-alignbehind .post-has-image .entry-meta,.wpnbha.image-alignbehind .post-has-image .entry-meta .byline a,.wpnbha.image-alignbehind .post-has-image .entry-title a,.wpnbha.image-alignbehind .post-has-image .entry-wrapper{color:#fff}.wpnbha article .entry-title{font-size:1.2em}.wpnbha article .entry-meta{font-size:.8em}.wpnbha article .avatar{height:25px;width:25px}@media only screen and (min-width:782px){.wpnbha article .entry-title{font-size:1.6em}.wpnbha article .avatar{height:40px;width:40px}}.wpnbha.ts-8 .entry-title,.wpnbha.ts-9 .entry-title,.wpnbha.ts-10 .entry-title{line-height:1.1em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .avatar,.wpnbha.ts-9 article .avatar,.wpnbha.ts-10 article .avatar{height:2.4em;width:2.4em}}.wpnbha.ts-10 article .entry-title{font-size:2.6em}@media only screen and (min-width:782px){.wpnbha.ts-10 article .entry-title{font-size:3.6em}}@media only screen and (min-width:1168px){.wpnbha.ts-10 article .entry-title{font-size:4.8em}}.wpnbha.ts-9 article .entry-title{font-size:2.4em}@media only screen and (min-width:782px){.wpnbha.ts-9 article .entry-title{font-size:3.4em}}@media only screen and (min-width:1168px){.wpnbha.ts-9 article .entry-title{font-size:4.2em}}.wpnbha.ts-8 article .entry-title{font-size:2.2em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .entry-title{font-size:3em}}@media only screen and (min-width:1168px){.wpnbha.ts-8 article .entry-title{font-size:3.6em}}.wpnbha.ts-7 article .entry-title{font-size:2em}@media only screen and (min-width:782px){.wpnbha.ts-7 article .entry-title{font-size:2.4em}.wpnbha.ts-7 article .avatar{height:48px;width:48px}}@media only screen and (min-width:1168px){.wpnbha.ts-7 article .entry-title{font-size:3em}}.wpnbha.ts-6 article .entry-title{font-size:1.7em}@media only screen and (min-width:782px){.wpnbha.ts-6 article .entry-title{font-size:2em}.wpnbha.ts-6 article .avatar{height:44px;width:44px}}@media only screen and (min-width:1168px){.wpnbha.ts-6 article .entry-title{font-size:2.4em}}.wpnbha.ts-5 article .entry-title{font-size:1.4em}@media only screen and (min-width:782px){.wpnbha.ts-5 article .entry-title{font-size:1.8em}.wpnbha.ts-5 article .avatar{height:40px;width:40px}}@media only screen and (min-width:1168px){.wpnbha.ts-5 article .entry-title{font-size:2em}}.wpnbha.ts-3 article .entry-title{font-size:1em}.wpnbha.ts-3 article .entry-wrapper p{font-size:.8em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-2 article .entry-title{font-size:.8em}.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper p{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-2 article .avatar{height:28px;width:28px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-1 article .entry-wrapper p{font-size:.7em}.wpnbha.ts-1 article .entry-meta{font-size:.6em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .avatar{height:24px;width:24px}}.wpnbha.is-style-borders article{border:solid rgba(0,0,0,.2);border-width:0 0 1px;margin-bottom:1em;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type{margin-bottom:0}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0}@media only screen and (min-width:782px){.wpnbha.is-style-borders.columns-2 article{padding-right:32px}.wpnbha.is-style-borders.columns-3 article{padding-right:24px}.wpnbha.is-style-borders.columns-4 article{padding-right:21.33333px}.wpnbha.is-style-borders.columns-5 article{padding-right:20px}.wpnbha.is-style-borders.columns-6 article{padding-right:19.2px}.wpnbha.is-style-borders.is-grid article{border-width:0 1px 0 0}.wpnbha.is-style-borders.columns-1 article,.wpnbha.is-style-borders.columns-2 article:nth-of-type(2n),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n),.wpnbha.is-style-borders.columns-4 article:nth-of-type(4n),.wpnbha.is-style-borders.columns-5 article:nth-of-type(5n),.wpnbha.is-style-borders.columns-6 article:nth-of-type(6n),.wpnbha.is-style-borders.is-grid article:last-of-type{border:0}}
|
blog-posts-block/dist/view.js
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
!function(t,e){for(var r in e)t[r]=e[r]}(window,function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=1)}([function(t,e,r){},function(t,e,r){"use strict";r.r(e);r(0);var n="data-load-more-url",o=3;function u(t){t.style.display="none",t.setAttribute("hidden","")}function i(t){t.style.display="",t.removeAttribute("hidden")}function a(t,e){return Object.prototype.hasOwnProperty.call(t,e)}document.querySelectorAll("[data-load-more-btn]").forEach((function(t){if(!t)return null;var e=function(t){var e=t.parentElement,r=e.querySelector("[data-posts-container]"),c=e.querySelector("[data-load-more-loading-text]"),l=e.querySelector("[data-load-more-error-text]"),f=!1,s=!1;return function(){if(f||s)return!1;f=!0,u(t),u(l),i(c);!function t(e,r){var n=new XMLHttpRequest;n.onreadystatechange=function(){if(4===n.readyState){if(n.status>=200&&n.status<300){var o=JSON.parse(n.responseText);return e.onSuccess(o)}return r?t(e,r-1):e.onError()}},n.open("GET",e.url),n.send()}({url:t.getAttribute(n),onSuccess:function(e){if(function(t){if(t&&a(t,"items")&&a(t,"next")&&Array.isArray(t.items)&&t.items.length&&a(t.items[0],"html")&&"string"==typeof t.items[0].html)return!0;return!1}(e)){var o=e.items.map((function(t){return t.html})).join("");r.insertAdjacentHTML("beforeend",o),e.next?(t.setAttribute(n,e.next),i(t)):s=!0,f=!1,u(c)}},onError:function(){f=!1,u(c),i(l),i(t)}},o)}}(t);t.addEventListener("click",e)}))}]));
|
blog-posts-block/dist/view.rtl.css
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
.wpnbha{margin-bottom:1em}.wpnbha article{margin-bottom:1.5em;word-break:break-word;overflow-wrap:break-word;position:relative}.wpnbha article:last-of-type{margin-bottom:0}.wpnbha .article-section-title{font-size:.8em;margin-bottom:.5em;width:100%}.wpnbha.is-grid{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%}@media only screen and (min-width:782px){.wpnbha.is-grid article,.wpnbha.is-grid article:last-child{margin-bottom:1em}}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.333% - 16px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-5 article:last-of-type:nth-child(odd){flex-grow:1}}@media only screen and (min-width:782px){.wpnbha.columns-2 article{flex-basis:calc(50% - 16px)}.wpnbha.columns-3 article{flex-basis:calc(33.33333% - 16px)}.wpnbha.columns-4 article{flex-basis:calc(25% - 16px)}.wpnbha.columns-5 article{flex-basis:calc(20% - 16px)}.wpnbha.columns-6 article{flex-basis:calc(16.66667% - 16px)}}.wpnbha .post-thumbnail{margin:0}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha figcaption{font-size:.6em}.wpnbha.image-aligntop .post-thumbnail{margin-bottom:.25em}.wpnbha.image-aligntop .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha.image-alignleft .post-has-image,.wpnbha.image-alignright .post-has-image{display:flex}.wpnbha.image-alignleft .post-has-image .post-thumbnail,.wpnbha.image-alignright .post-has-image .post-thumbnail{flex-basis:33%}.wpnbha.image-alignleft .post-has-image .entry-wrapper,.wpnbha.image-alignright .post-has-image .entry-wrapper{flex-basis:67%}.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:block}@media only screen and (min-width:600px){.wpnbha.image-alignleft.mobile-stack .post-has-image,.wpnbha.image-alignright.mobile-stack .post-has-image{display:flex}.wpnbha.image-alignleft.is-4 .post-thumbnail,.wpnbha.image-alignright.is-4 .post-thumbnail{flex-basis:75%}.wpnbha.image-alignleft.is-4 .entry-wrapper,.wpnbha.image-alignright.is-4 .entry-wrapper{flex-basis:25%}.wpnbha.image-alignleft.is-3 .entry-wrapper,.wpnbha.image-alignleft.is-3 .post-thumbnail,.wpnbha.image-alignright.is-3 .entry-wrapper,.wpnbha.image-alignright.is-3 .post-thumbnail{flex-basis:50%}}.wpnbha.image-alignleft.is-1 .post-thumbnail,.wpnbha.image-alignright.is-1 .post-thumbnail{flex-basis:25%}.wpnbha.image-alignleft.is-1 .entry-wrapper,.wpnbha.image-alignright.is-1 .entry-wrapper{flex-basis:75%}.wpnbha.image-alignleft .post-thumbnail{margin-left:1em}.wpnbha.image-alignright .post-thumbnail{margin-right:1em}.wpnbha.image-alignright .entry-wrapper{order:-1}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.wpnbha .cat-links{font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:.5em}.wpnbha .entry-meta .byline:not(:last-child){margin-left:1.5em}.wpnbha .avatar{border-radius:100%;display:block;margin-left:.5em}.wpnbha p{margin:.5em 0}.wpnbha.has-text-color .article-section-title,.wpnbha.has-text-color .cat-links,.wpnbha.has-text-color .cat-links a,.wpnbha.has-text-color .cat-links a:visited,.wpnbha.has-text-color .entry-meta,.wpnbha.has-text-color .entry-meta .byline a,.wpnbha.has-text-color .entry-meta .byline a:visited,.wpnbha.has-text-color .entry-meta a,.wpnbha.has-text-color .entry-title,.wpnbha.has-text-color .entry-title a,.wpnbha.has-text-color .entry-title a:visited,.wpnbha.has-text-color figcaption{color:inherit}.wpnbha.has-text-color .entry-meta span:not(.avatar){opacity:.8}.wpnbha.image-alignbehind .post-has-image{display:flex;align-items:flex-end;position:relative}.wpnbha.image-alignbehind .post-has-image .post-thumbnail{bottom:0;right:0;overflow:hidden;position:absolute;left:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%;-o-object-fit:cover;object-fit:cover;max-width:1000%;width:100%}.wpnbha.image-alignbehind .post-has-image .post-thumbnail figcaption{bottom:1em;-webkit-box-orient:vertical;color:hsla(0,0%,100%,.9);display:-webkit-box;font-style:italic;right:0;-webkit-line-clamp:1;margin:0;max-height:1.6em;overflow:hidden;padding:0 1em;position:absolute;left:0;text-align:left;text-overflow:ellipsis;z-index:2}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);bottom:0;content:"";right:0;position:absolute;left:0;top:0;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2em;position:relative;z-index:2}.wpnbha.image-alignbehind .post-has-image .cat-links a,.wpnbha.image-alignbehind .post-has-image .entry-meta,.wpnbha.image-alignbehind .post-has-image .entry-meta .byline a,.wpnbha.image-alignbehind .post-has-image .entry-title a,.wpnbha.image-alignbehind .post-has-image .entry-wrapper{color:#fff}.wpnbha article .entry-title{font-size:1.2em}.wpnbha article .entry-meta{font-size:.8em}.wpnbha article .avatar{height:25px;width:25px}@media only screen and (min-width:782px){.wpnbha article .entry-title{font-size:1.6em}.wpnbha article .avatar{height:40px;width:40px}}.wpnbha.ts-8 .entry-title,.wpnbha.ts-9 .entry-title,.wpnbha.ts-10 .entry-title{line-height:1.1em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .avatar,.wpnbha.ts-9 article .avatar,.wpnbha.ts-10 article .avatar{height:2.4em;width:2.4em}}.wpnbha.ts-10 article .entry-title{font-size:2.6em}@media only screen and (min-width:782px){.wpnbha.ts-10 article .entry-title{font-size:3.6em}}@media only screen and (min-width:1168px){.wpnbha.ts-10 article .entry-title{font-size:4.8em}}.wpnbha.ts-9 article .entry-title{font-size:2.4em}@media only screen and (min-width:782px){.wpnbha.ts-9 article .entry-title{font-size:3.4em}}@media only screen and (min-width:1168px){.wpnbha.ts-9 article .entry-title{font-size:4.2em}}.wpnbha.ts-8 article .entry-title{font-size:2.2em}@media only screen and (min-width:782px){.wpnbha.ts-8 article .entry-title{font-size:3em}}@media only screen and (min-width:1168px){.wpnbha.ts-8 article .entry-title{font-size:3.6em}}.wpnbha.ts-7 article .entry-title{font-size:2em}@media only screen and (min-width:782px){.wpnbha.ts-7 article .entry-title{font-size:2.4em}.wpnbha.ts-7 article .avatar{height:48px;width:48px}}@media only screen and (min-width:1168px){.wpnbha.ts-7 article .entry-title{font-size:3em}}.wpnbha.ts-6 article .entry-title{font-size:1.7em}@media only screen and (min-width:782px){.wpnbha.ts-6 article .entry-title{font-size:2em}.wpnbha.ts-6 article .avatar{height:44px;width:44px}}@media only screen and (min-width:1168px){.wpnbha.ts-6 article .entry-title{font-size:2.4em}}.wpnbha.ts-5 article .entry-title{font-size:1.4em}@media only screen and (min-width:782px){.wpnbha.ts-5 article .entry-title{font-size:1.8em}.wpnbha.ts-5 article .avatar{height:40px;width:40px}}@media only screen and (min-width:1168px){.wpnbha.ts-5 article .entry-title{font-size:2em}}.wpnbha.ts-3 article .entry-title{font-size:1em}.wpnbha.ts-3 article .entry-wrapper p{font-size:.8em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-2 article .entry-title{font-size:.8em}.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper p{font-size:.7em}@media only screen and (min-width:782px){.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-2 article .avatar{height:28px;width:28px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-1 article .entry-wrapper p{font-size:.7em}.wpnbha.ts-1 article .entry-meta{font-size:.6em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .avatar{height:24px;width:24px}}.wpnbha.is-style-borders article{border:solid rgba(0,0,0,.2);border-width:0 0 1px;margin-bottom:1em;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type{margin-bottom:0}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0}@media only screen and (min-width:782px){.wpnbha.is-style-borders.columns-2 article{padding-left:32px}.wpnbha.is-style-borders.columns-3 article{padding-left:24px}.wpnbha.is-style-borders.columns-4 article{padding-left:21.33333px}.wpnbha.is-style-borders.columns-5 article{padding-left:20px}.wpnbha.is-style-borders.columns-6 article{padding-left:19.2px}.wpnbha.is-style-borders.is-grid article{border-width:0 0 0 1px}.wpnbha.is-style-borders.columns-1 article,.wpnbha.is-style-borders.columns-2 article:nth-of-type(2n),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n),.wpnbha.is-style-borders.columns-4 article:nth-of-type(4n),.wpnbha.is-style-borders.columns-5 article:nth-of-type(5n),.wpnbha.is-style-borders.columns-6 article:nth-of-type(6n),.wpnbha.is-style-borders.is-grid article:last-of-type{border:0}}
|
blog-posts-block/editor.js
ADDED
@@ -0,0 +1,34 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* eslint-disable import/no-extraneous-dependencies */
|
2 |
+
/**
|
3 |
+
* Internal dependencies
|
4 |
+
*/
|
5 |
+
import { registerBlockType } from '@wordpress/blocks';
|
6 |
+
import { __ } from '@wordpress/i18n';
|
7 |
+
import { addFilter } from '@wordpress/hooks';
|
8 |
+
/* eslint-enable import/no-extraneous-dependencies */
|
9 |
+
|
10 |
+
/**
|
11 |
+
* NHA dependencies
|
12 |
+
*/
|
13 |
+
import { settings } from './newspack-homepage-articles/blocks/homepage-articles/index';
|
14 |
+
|
15 |
+
/**
|
16 |
+
* Block name in the A8C\FSE context.
|
17 |
+
*/
|
18 |
+
const blockName = 'a8c/blog-posts';
|
19 |
+
|
20 |
+
function setBlockTransformationName( name ) {
|
21 |
+
return name !== 'newspack-blocks/homepage-articles' ? name : blockName;
|
22 |
+
}
|
23 |
+
|
24 |
+
addFilter(
|
25 |
+
'blocks.transforms_from_name',
|
26 |
+
'set-transformed-block-name',
|
27 |
+
setBlockTransformationName
|
28 |
+
);
|
29 |
+
|
30 |
+
registerBlockType( blockName, {
|
31 |
+
...settings,
|
32 |
+
title: __( 'Blog Posts', 'full-site-editing' ),
|
33 |
+
category: 'layout',
|
34 |
+
} );
|
blog-posts-block/index.php
ADDED
@@ -0,0 +1,92 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Blog posts file.
|
4 |
+
*
|
5 |
+
* @package A8C\FSE
|
6 |
+
*/
|
7 |
+
|
8 |
+
namespace A8C\FSE;
|
9 |
+
|
10 |
+
define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
|
11 |
+
define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
|
12 |
+
define( 'NEWSPACK_BLOCKS__VERSION', '1.0.0-alpha.18' );
|
13 |
+
|
14 |
+
/**
|
15 |
+
* Filters block name.
|
16 |
+
*
|
17 |
+
* @param string $name Block name.
|
18 |
+
* @return string
|
19 |
+
*/
|
20 |
+
function blog_posts_block_name( $name ) {
|
21 |
+
if ( 'newspack-blocks/homepage-articles' === $name ) {
|
22 |
+
return 'a8c/blog-posts';
|
23 |
+
}
|
24 |
+
return $name;
|
25 |
+
}
|
26 |
+
add_filter( 'newspack_blocks_block_name', __NAMESPACE__ . '\blog_posts_block_name' );
|
27 |
+
|
28 |
+
/**
|
29 |
+
* Filters block arguments for `register_block_type()`.
|
30 |
+
*
|
31 |
+
* @param array $args Arguments to `register_block_type()`.
|
32 |
+
* @param string $name Block name.
|
33 |
+
* @return array
|
34 |
+
*/
|
35 |
+
function blog_posts_block_args( $args, $name ) {
|
36 |
+
if ( 'homepage-articles' !== $name ) {
|
37 |
+
return $args;
|
38 |
+
}
|
39 |
+
|
40 |
+
// Editor script.
|
41 |
+
$script_data = require NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'editor.asset.php';
|
42 |
+
wp_register_script(
|
43 |
+
'blog-posts-block-editor',
|
44 |
+
plugins_url( NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'editor.js', __FILE__ ),
|
45 |
+
$script_data['dependencies'],
|
46 |
+
$script_data['version'],
|
47 |
+
true
|
48 |
+
);
|
49 |
+
|
50 |
+
// Editor style.
|
51 |
+
$editor_style = plugins_url( NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'editor.css', __FILE__ );
|
52 |
+
wp_register_style( 'blog-posts-block-editor', $editor_style, array(), NEWSPACK_BLOCKS__VERSION );
|
53 |
+
|
54 |
+
// View script.
|
55 |
+
$script_data = require NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'view.asset.php';
|
56 |
+
wp_register_script(
|
57 |
+
'blog-posts-block-view',
|
58 |
+
plugins_url( NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'view.js', __FILE__ ),
|
59 |
+
$script_data['dependencies'],
|
60 |
+
$script_data['version'],
|
61 |
+
true
|
62 |
+
);
|
63 |
+
|
64 |
+
// View style.
|
65 |
+
$editor_style = plugins_url( NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . 'view.css', __FILE__ );
|
66 |
+
wp_register_style( 'blog-posts-block-view', $editor_style, array(), NEWSPACK_BLOCKS__VERSION );
|
67 |
+
|
68 |
+
$args['editor_script'] = 'blog-posts-block-editor';
|
69 |
+
$args['editor_style'] = 'blog-posts-block-editor';
|
70 |
+
$args['script'] = 'blog-posts-block-view';
|
71 |
+
$args['style'] = 'blog-posts-block-view';
|
72 |
+
|
73 |
+
return $args;
|
74 |
+
}
|
75 |
+
add_filter( 'newspack_blocks_block_args', __NAMESPACE__ . '\blog_posts_block_args', 10, 2 );
|
76 |
+
|
77 |
+
require_once __DIR__ . '/newspack-homepage-articles/class-newspack-blocks.php';
|
78 |
+
require_once __DIR__ . '/newspack-homepage-articles/class-newspack-blocks-api.php';
|
79 |
+
|
80 |
+
require_once __DIR__ . '/newspack-homepage-articles/blocks/homepage-articles/view.php';
|
81 |
+
|
82 |
+
// REST Controller for Articles Block.
|
83 |
+
require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'newspack-homepage-articles/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php';
|
84 |
+
|
85 |
+
/**
|
86 |
+
* Registers Articles block routes.
|
87 |
+
*/
|
88 |
+
function register_rest_routes() {
|
89 |
+
$articles_controller = new \WP_REST_Newspack_Articles_Controller();
|
90 |
+
$articles_controller->register_routes();
|
91 |
+
}
|
92 |
+
add_action( 'rest_api_init', __NAMESPACE__ . '\register_rest_routes' );
|
blog-posts-block/newspack-homepage-articles/README.md
ADDED
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Newspack Homepage Articles
|
2 |
+
|
3 |
+
This folder is synchronized from [Newspack Blocks repository](https://github.com/automattic/newspack-blocks) where the original code lives.
|
4 |
+
|
5 |
+
Please don't make any changes to these files directly but rather open a PR in the original repository and once landed there, use the sync script.
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/block.json
ADDED
@@ -0,0 +1,118 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"name": "homepage-articles",
|
3 |
+
"category": "newspack",
|
4 |
+
"attributes": {
|
5 |
+
"className": {
|
6 |
+
"type": "string",
|
7 |
+
"default": ""
|
8 |
+
},
|
9 |
+
"showExcerpt": {
|
10 |
+
"type": "boolean",
|
11 |
+
"default": true
|
12 |
+
},
|
13 |
+
"showDate": {
|
14 |
+
"type": "boolean",
|
15 |
+
"default": true
|
16 |
+
},
|
17 |
+
"showImage": {
|
18 |
+
"type": "boolean",
|
19 |
+
"default": true
|
20 |
+
},
|
21 |
+
"showCaption": {
|
22 |
+
"type": "boolean",
|
23 |
+
"default": false
|
24 |
+
},
|
25 |
+
"imageShape": {
|
26 |
+
"type": "string",
|
27 |
+
"default": "landscape"
|
28 |
+
},
|
29 |
+
"minHeight": {
|
30 |
+
"type": "integer",
|
31 |
+
"default": 0
|
32 |
+
},
|
33 |
+
"moreButton": {
|
34 |
+
"type": "boolean",
|
35 |
+
"default": false
|
36 |
+
},
|
37 |
+
"showAuthor": {
|
38 |
+
"type": "boolean",
|
39 |
+
"default": true
|
40 |
+
},
|
41 |
+
"showAvatar": {
|
42 |
+
"type": "boolean",
|
43 |
+
"default": true
|
44 |
+
},
|
45 |
+
"showCategory": {
|
46 |
+
"type": "boolean",
|
47 |
+
"default": false
|
48 |
+
},
|
49 |
+
"postLayout": {
|
50 |
+
"type": "string",
|
51 |
+
"default": "list"
|
52 |
+
},
|
53 |
+
"columns": {
|
54 |
+
"type": "integer",
|
55 |
+
"default": 3
|
56 |
+
},
|
57 |
+
"postsToShow": {
|
58 |
+
"type": "integer",
|
59 |
+
"default": 3
|
60 |
+
},
|
61 |
+
"mediaPosition": {
|
62 |
+
"type": "string",
|
63 |
+
"default": "top"
|
64 |
+
},
|
65 |
+
"authors": {
|
66 |
+
"type": "array",
|
67 |
+
"default": [],
|
68 |
+
"items": { "type": "integer" }
|
69 |
+
},
|
70 |
+
"categories": {
|
71 |
+
"type": "array",
|
72 |
+
"default": [],
|
73 |
+
"items": { "type": "integer" }
|
74 |
+
},
|
75 |
+
"tags": {
|
76 |
+
"type": "array",
|
77 |
+
"default": [],
|
78 |
+
"items": { "type": "integer" }
|
79 |
+
},
|
80 |
+
"specificPosts": {
|
81 |
+
"type": "array",
|
82 |
+
"default": [],
|
83 |
+
"items": { "type": "integer" }
|
84 |
+
},
|
85 |
+
"typeScale": {
|
86 |
+
"type": "integer",
|
87 |
+
"default": 4
|
88 |
+
},
|
89 |
+
"imageScale": {
|
90 |
+
"type": "integer",
|
91 |
+
"default": 3
|
92 |
+
},
|
93 |
+
"mobileStack": {
|
94 |
+
"type": "boolean",
|
95 |
+
"default": false
|
96 |
+
},
|
97 |
+
"sectionHeader": {
|
98 |
+
"type": "string",
|
99 |
+
"default": ""
|
100 |
+
},
|
101 |
+
"specificMode": {
|
102 |
+
"type": "boolean",
|
103 |
+
"default": false
|
104 |
+
},
|
105 |
+
"textColor": {
|
106 |
+
"type": "string",
|
107 |
+
"default": ""
|
108 |
+
},
|
109 |
+
"customTextColor": {
|
110 |
+
"type": "string",
|
111 |
+
"default": ""
|
112 |
+
},
|
113 |
+
"singleMode": {
|
114 |
+
"type": "boolean",
|
115 |
+
"default": false
|
116 |
+
}
|
117 |
+
}
|
118 |
+
}
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php
ADDED
@@ -0,0 +1,123 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* WP_REST_Newspack_Articles_Controller file.
|
4 |
+
*/
|
5 |
+
|
6 |
+
/**
|
7 |
+
* Class WP_REST_Newspack_Articles_Controller.
|
8 |
+
*/
|
9 |
+
class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
|
10 |
+
|
11 |
+
/**
|
12 |
+
* Attribute schema.
|
13 |
+
*
|
14 |
+
* @var array
|
15 |
+
*/
|
16 |
+
public $attribute_schema;
|
17 |
+
|
18 |
+
/**
|
19 |
+
* Constructs the controller.
|
20 |
+
*
|
21 |
+
* @access public
|
22 |
+
*/
|
23 |
+
public function __construct() {
|
24 |
+
$this->namespace = 'newspack-blocks/v1';
|
25 |
+
$this->rest_base = 'articles';
|
26 |
+
}
|
27 |
+
|
28 |
+
/**
|
29 |
+
* Registers the necessary REST API routes.
|
30 |
+
*
|
31 |
+
* @access public
|
32 |
+
*/
|
33 |
+
public function register_routes() {
|
34 |
+
register_rest_route(
|
35 |
+
$this->namespace,
|
36 |
+
'/' . $this->rest_base,
|
37 |
+
[
|
38 |
+
[
|
39 |
+
'methods' => WP_REST_Server::READABLE,
|
40 |
+
'callback' => [ $this, 'get_items' ],
|
41 |
+
'args' => $this->get_attribute_schema(),
|
42 |
+
'permission_callback' => '__return_true',
|
43 |
+
],
|
44 |
+
]
|
45 |
+
);
|
46 |
+
}
|
47 |
+
|
48 |
+
/**
|
49 |
+
* Returns a list of rendered posts.
|
50 |
+
*
|
51 |
+
* @param WP_REST_Request $request Request object.
|
52 |
+
* @return WP_REST_Response
|
53 |
+
*/
|
54 |
+
public function get_items( $request ) {
|
55 |
+
$page = $request->get_param( 'page' ) ?? 1;
|
56 |
+
$next_page = $page + 1;
|
57 |
+
$attributes = wp_parse_args(
|
58 |
+
$request->get_params() ?? [],
|
59 |
+
wp_list_pluck( $this->get_attribute_schema(), 'default' )
|
60 |
+
);
|
61 |
+
$article_query_args = Newspack_Blocks::build_articles_query( $attributes );
|
62 |
+
|
63 |
+
// Append custom pagination arg for REST API endpoint.
|
64 |
+
$article_query_args['paged'] = $page;
|
65 |
+
|
66 |
+
// Run Query.
|
67 |
+
$article_query = new WP_Query( $article_query_args );
|
68 |
+
|
69 |
+
// Defaults.
|
70 |
+
$items = [];
|
71 |
+
$next_url = '';
|
72 |
+
|
73 |
+
// The Loop.
|
74 |
+
while ( $article_query->have_posts() ) {
|
75 |
+
$article_query->the_post();
|
76 |
+
$items[]['html'] = Newspack_Blocks::template_inc(
|
77 |
+
__DIR__ . '/templates/article.php',
|
78 |
+
[
|
79 |
+
'attributes' => $attributes,
|
80 |
+
]
|
81 |
+
);
|
82 |
+
}
|
83 |
+
|
84 |
+
// Provide next URL if there are more pages.
|
85 |
+
if ( $next_page <= $article_query->max_num_pages ) {
|
86 |
+
$next_url = add_query_arg(
|
87 |
+
array_merge(
|
88 |
+
array_map(
|
89 |
+
function( $attribute ) {
|
90 |
+
return $attribute === false ? '0' : $attribute; },
|
91 |
+
$attributes
|
92 |
+
),
|
93 |
+
[ 'page' => $next_page ] // phpcs:ignore PHPCompatibility.Syntax.NewShortArray.Found
|
94 |
+
),
|
95 |
+
rest_url( '/newspack-blocks/v1/articles' )
|
96 |
+
);
|
97 |
+
}
|
98 |
+
|
99 |
+
return rest_ensure_response(
|
100 |
+
[
|
101 |
+
'items' => $items,
|
102 |
+
'next' => $next_url,
|
103 |
+
]
|
104 |
+
);
|
105 |
+
}
|
106 |
+
|
107 |
+
/**
|
108 |
+
* Sets up and returns attribute schema.
|
109 |
+
*
|
110 |
+
* @return array
|
111 |
+
*/
|
112 |
+
public function get_attribute_schema() {
|
113 |
+
if ( empty( $this->attribute_schema ) ) {
|
114 |
+
$block_json = json_decode(
|
115 |
+
file_get_contents( __DIR__ . '/block.json' ),
|
116 |
+
true
|
117 |
+
);
|
118 |
+
$this->attribute_schema = $block_json['attributes'];
|
119 |
+
}
|
120 |
+
|
121 |
+
return $this->attribute_schema;
|
122 |
+
}
|
123 |
+
}
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/edit.js
ADDED
@@ -0,0 +1,641 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import QueryControls from '../../components/query-controls';
|
5 |
+
|
6 |
+
/**
|
7 |
+
* External dependencies
|
8 |
+
*/
|
9 |
+
import classNames from 'classnames';
|
10 |
+
import { isUndefined, pickBy } from 'lodash';
|
11 |
+
import moment from 'moment';
|
12 |
+
|
13 |
+
/**
|
14 |
+
* WordPress dependencies
|
15 |
+
*/
|
16 |
+
import { __ } from '@wordpress/i18n';
|
17 |
+
import { Component, Fragment, RawHTML } from '@wordpress/element';
|
18 |
+
import { InspectorControls, RichText, BlockControls } from '@wordpress/editor';
|
19 |
+
import {
|
20 |
+
Button,
|
21 |
+
ButtonGroup,
|
22 |
+
PanelBody,
|
23 |
+
PanelRow,
|
24 |
+
RangeControl,
|
25 |
+
Toolbar,
|
26 |
+
ToggleControl,
|
27 |
+
Dashicon,
|
28 |
+
Placeholder,
|
29 |
+
Spinner,
|
30 |
+
BaseControl,
|
31 |
+
Path,
|
32 |
+
SVG,
|
33 |
+
} from '@wordpress/components';
|
34 |
+
import { withSelect } from '@wordpress/data';
|
35 |
+
import { compose } from '@wordpress/compose';
|
36 |
+
import { addQueryArgs } from '@wordpress/url';
|
37 |
+
import { decodeEntities } from '@wordpress/html-entities';
|
38 |
+
import { PanelColorSettings, withColors } from '@wordpress/block-editor';
|
39 |
+
|
40 |
+
/**
|
41 |
+
* Module Constants
|
42 |
+
*/
|
43 |
+
const MAX_POSTS_COLUMNS = 6;
|
44 |
+
|
45 |
+
/* From https://material.io/tools/icons */
|
46 |
+
const landscapeIcon = (
|
47 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
48 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
49 |
+
<Path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z" />
|
50 |
+
</SVG>
|
51 |
+
);
|
52 |
+
|
53 |
+
const portraitIcon = (
|
54 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
55 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
56 |
+
<Path d="M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14z" />
|
57 |
+
</SVG>
|
58 |
+
);
|
59 |
+
|
60 |
+
const squareIcon = (
|
61 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
62 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
63 |
+
<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z" />
|
64 |
+
</SVG>
|
65 |
+
);
|
66 |
+
|
67 |
+
const uncroppedIcon = (
|
68 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
69 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
70 |
+
<Path d="M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z" />
|
71 |
+
</SVG>
|
72 |
+
);
|
73 |
+
|
74 |
+
const coverIcon = (
|
75 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
76 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
77 |
+
<Path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" />
|
78 |
+
</SVG>
|
79 |
+
);
|
80 |
+
|
81 |
+
class Edit extends Component {
|
82 |
+
renderPost = post => {
|
83 |
+
const { attributes } = this.props;
|
84 |
+
const {
|
85 |
+
showImage,
|
86 |
+
imageShape,
|
87 |
+
mediaPosition,
|
88 |
+
minHeight,
|
89 |
+
showCaption,
|
90 |
+
showExcerpt,
|
91 |
+
showAuthor,
|
92 |
+
showAvatar,
|
93 |
+
showDate,
|
94 |
+
showCategory,
|
95 |
+
sectionHeader,
|
96 |
+
} = attributes;
|
97 |
+
|
98 |
+
const styles = {
|
99 |
+
minHeight:
|
100 |
+
mediaPosition === 'behind' &&
|
101 |
+
showImage &&
|
102 |
+
post.newspack_featured_image_src &&
|
103 |
+
minHeight + 'vh',
|
104 |
+
paddingTop:
|
105 |
+
mediaPosition === 'behind' &&
|
106 |
+
showImage &&
|
107 |
+
post.newspack_featured_image_src &&
|
108 |
+
minHeight / 5 + 'vh',
|
109 |
+
};
|
110 |
+
|
111 |
+
const authorNumber = post.newspack_author_info.length;
|
112 |
+
|
113 |
+
return (
|
114 |
+
<article
|
115 |
+
className={ post.newspack_featured_image_src ? 'post-has-image' : null }
|
116 |
+
key={ post.id }
|
117 |
+
style={ styles }
|
118 |
+
>
|
119 |
+
{ showImage && post.newspack_featured_image_src && (
|
120 |
+
<figure className="post-thumbnail" key="thumbnail">
|
121 |
+
<a href="#">
|
122 |
+
{ imageShape === 'landscape' && (
|
123 |
+
<img src={ post.newspack_featured_image_src.landscape } />
|
124 |
+
) }
|
125 |
+
{ imageShape === 'portrait' && (
|
126 |
+
<img src={ post.newspack_featured_image_src.portrait } />
|
127 |
+
) }
|
128 |
+
{ imageShape === 'square' && <img src={ post.newspack_featured_image_src.square } /> }
|
129 |
+
|
130 |
+
{ imageShape === 'uncropped' && (
|
131 |
+
<img src={ post.newspack_featured_image_src.uncropped } />
|
132 |
+
) }
|
133 |
+
</a>
|
134 |
+
{ showCaption && '' !== post.newspack_featured_image_caption && (
|
135 |
+
<figcaption>{ post.newspack_featured_image_caption }</figcaption>
|
136 |
+
) }
|
137 |
+
</figure>
|
138 |
+
) }
|
139 |
+
|
140 |
+
<div className="entry-wrapper">
|
141 |
+
{ showCategory && post.newspack_category_info.length && (
|
142 |
+
<div className="cat-links">
|
143 |
+
<a href="#">{ post.newspack_category_info }</a>
|
144 |
+
</div>
|
145 |
+
) }
|
146 |
+
{ RichText.isEmpty( sectionHeader ) ? (
|
147 |
+
<h2 className="entry-title" key="title">
|
148 |
+
<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
|
149 |
+
</h2>
|
150 |
+
) : (
|
151 |
+
<h3 className="entry-title" key="title">
|
152 |
+
<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
|
153 |
+
</h3>
|
154 |
+
) }
|
155 |
+
{ showExcerpt && (
|
156 |
+
<RawHTML key="excerpt" className="excerpt-contain">
|
157 |
+
{ post.excerpt.rendered }
|
158 |
+
</RawHTML>
|
159 |
+
) }
|
160 |
+
<div className="entry-meta">
|
161 |
+
{ showAuthor && showAvatar && this.formatAvatars( post.newspack_author_info ) }
|
162 |
+
{ showAuthor && this.formatByline( post.newspack_author_info ) }
|
163 |
+
{ showDate && (
|
164 |
+
<time className="entry-date published" key="pub-date">
|
165 |
+
{ moment( post.date_gmt )
|
166 |
+
.local()
|
167 |
+
.format( 'MMMM DD, Y' ) }
|
168 |
+
</time>
|
169 |
+
) }
|
170 |
+
</div>
|
171 |
+
</div>
|
172 |
+
</article>
|
173 |
+
);
|
174 |
+
};
|
175 |
+
|
176 |
+
formatAvatars = authorInfo =>
|
177 |
+
authorInfo.map( author => (
|
178 |
+
<span className="avatar author-avatar">
|
179 |
+
<a className="url fn n" href="#">
|
180 |
+
<RawHTML key={ author.id }>{ author.avatar }</RawHTML>
|
181 |
+
</a>
|
182 |
+
</span>
|
183 |
+
) );
|
184 |
+
|
185 |
+
formatByline = authorInfo => (
|
186 |
+
<span className="byline">
|
187 |
+
{ __( 'by', 'newspack-blocks' ) }{ ' ' }
|
188 |
+
{ authorInfo.reduce( ( accumulator, author, index ) => {
|
189 |
+
return [
|
190 |
+
...accumulator,
|
191 |
+
<span className="author vcard" key={ author.id }>
|
192 |
+
<a className="url fn n" href="#">
|
193 |
+
{ author.display_name }
|
194 |
+
</a>
|
195 |
+
</span>,
|
196 |
+
index < authorInfo.length - 2 && ', ',
|
197 |
+
authorInfo.length > 1 &&
|
198 |
+
index === authorInfo.length - 2 &&
|
199 |
+
__( ' and ', 'newspack-blocks' ),
|
200 |
+
];
|
201 |
+
}, [] ) }
|
202 |
+
</span>
|
203 |
+
);
|
204 |
+
|
205 |
+
renderInspectorControls = () => {
|
206 |
+
const {
|
207 |
+
attributes,
|
208 |
+
setAttributes,
|
209 |
+
latestPosts,
|
210 |
+
isSelected,
|
211 |
+
textColor,
|
212 |
+
setTextColor,
|
213 |
+
} = this.props;
|
214 |
+
const hasPosts = Array.isArray( latestPosts ) && latestPosts.length;
|
215 |
+
|
216 |
+
const {
|
217 |
+
authors,
|
218 |
+
specificPosts,
|
219 |
+
postsToShow,
|
220 |
+
categories,
|
221 |
+
sectionHeader,
|
222 |
+
columns,
|
223 |
+
showImage,
|
224 |
+
showCaption,
|
225 |
+
imageScale,
|
226 |
+
mobileStack,
|
227 |
+
minHeight,
|
228 |
+
moreButton,
|
229 |
+
showExcerpt,
|
230 |
+
typeScale,
|
231 |
+
showDate,
|
232 |
+
showAuthor,
|
233 |
+
showAvatar,
|
234 |
+
showCategory,
|
235 |
+
postLayout,
|
236 |
+
mediaPosition,
|
237 |
+
specificMode,
|
238 |
+
tags,
|
239 |
+
url,
|
240 |
+
} = attributes;
|
241 |
+
|
242 |
+
const imageSizeOptions = [
|
243 |
+
{
|
244 |
+
value: 1,
|
245 |
+
label: /* translators: label for small size option */ __( 'Small', 'newspack-blocks' ),
|
246 |
+
shortName: /* translators: abbreviation for small size */ __( 'S', 'newspack-blocks' ),
|
247 |
+
},
|
248 |
+
{
|
249 |
+
value: 2,
|
250 |
+
label: /* translators: label for medium size option */ __( 'Medium', 'newspack-blocks' ),
|
251 |
+
shortName: /* translators: abbreviation for medium size */ __( 'M', 'newspack-blocks' ),
|
252 |
+
},
|
253 |
+
{
|
254 |
+
value: 3,
|
255 |
+
label: /* translators: label for large size option */ __( 'Large', 'newspack-blocks' ),
|
256 |
+
shortName: /* translators: abbreviation for large size */ __( 'L', 'newspack-blocks' ),
|
257 |
+
},
|
258 |
+
{
|
259 |
+
value: 4,
|
260 |
+
label: /* translators: label for extra large size option */ __(
|
261 |
+
'Extra Large',
|
262 |
+
'newspack-blocks'
|
263 |
+
),
|
264 |
+
shortName: /* translators: abbreviation for extra large size */ __(
|
265 |
+
'XL',
|
266 |
+
'newspack-blocks'
|
267 |
+
),
|
268 |
+
},
|
269 |
+
];
|
270 |
+
|
271 |
+
return (
|
272 |
+
<Fragment>
|
273 |
+
<PanelBody title={ __( 'Display Settings', 'newspack-blocks' ) } initialOpen={ true }>
|
274 |
+
{ postsToShow && (
|
275 |
+
<QueryControls
|
276 |
+
numberOfItems={ postsToShow }
|
277 |
+
onNumberOfItemsChange={ value => setAttributes( { postsToShow: value } ) }
|
278 |
+
specificMode={ specificMode }
|
279 |
+
onSpecificModeChange={ value => setAttributes( { specificMode: value } ) }
|
280 |
+
specificPosts={ specificPosts }
|
281 |
+
onSpecificPostsChange={ value => setAttributes( { specificPosts: value } ) }
|
282 |
+
authors={ authors }
|
283 |
+
onAuthorsChange={ value => setAttributes( { authors: value } ) }
|
284 |
+
categories={ categories }
|
285 |
+
onCategoriesChange={ value => setAttributes( { categories: value } ) }
|
286 |
+
tags={ tags }
|
287 |
+
onTagsChange={ value => setAttributes( { tags: value } ) }
|
288 |
+
/>
|
289 |
+
) }
|
290 |
+
{ postLayout === 'grid' && (
|
291 |
+
<RangeControl
|
292 |
+
label={ __( 'Columns', 'newspack-blocks' ) }
|
293 |
+
value={ columns }
|
294 |
+
onChange={ value => setAttributes( { columns: value } ) }
|
295 |
+
min={ 2 }
|
296 |
+
max={
|
297 |
+
! hasPosts ? MAX_POSTS_COLUMNS : Math.min( MAX_POSTS_COLUMNS, latestPosts.length )
|
298 |
+
}
|
299 |
+
required
|
300 |
+
/>
|
301 |
+
) }
|
302 |
+
{ ! specificMode && (
|
303 |
+
<ToggleControl
|
304 |
+
label={ __( 'Show "More" Button', 'newspack-blocks' ) }
|
305 |
+
checked={ moreButton }
|
306 |
+
onChange={ () => setAttributes( { moreButton: ! moreButton } ) }
|
307 |
+
help={ __( 'Only available for non-AMP requests.', 'newspack-blocks' ) }
|
308 |
+
/>
|
309 |
+
) }
|
310 |
+
</PanelBody>
|
311 |
+
<PanelBody title={ __( 'Featured Image Settings', 'newspack-blocks' ) }>
|
312 |
+
<PanelRow>
|
313 |
+
<ToggleControl
|
314 |
+
label={ __( 'Show Featured Image', 'newspack-blocks' ) }
|
315 |
+
checked={ showImage }
|
316 |
+
onChange={ () => setAttributes( { showImage: ! showImage } ) }
|
317 |
+
/>
|
318 |
+
</PanelRow>
|
319 |
+
|
320 |
+
{ showImage && (
|
321 |
+
<PanelRow>
|
322 |
+
<ToggleControl
|
323 |
+
label={ __( 'Show Featured Image Caption', 'newspack-blocks' ) }
|
324 |
+
checked={ showCaption }
|
325 |
+
onChange={ () => setAttributes( { showCaption: ! showCaption } ) }
|
326 |
+
/>
|
327 |
+
</PanelRow>
|
328 |
+
) }
|
329 |
+
|
330 |
+
{ showImage && mediaPosition !== 'top' && mediaPosition !== 'behind' && (
|
331 |
+
<Fragment>
|
332 |
+
<PanelRow>
|
333 |
+
<ToggleControl
|
334 |
+
label={ __( 'Stack on mobile', 'newspack-blocks' ) }
|
335 |
+
checked={ mobileStack }
|
336 |
+
onChange={ () => setAttributes( { mobileStack: ! mobileStack } ) }
|
337 |
+
/>
|
338 |
+
</PanelRow>
|
339 |
+
<BaseControl label={ __( 'Featured Image Size', 'newspack-blocks' ) }>
|
340 |
+
<PanelRow>
|
341 |
+
<ButtonGroup aria-label={ __( 'Featured Image Size', 'newspack-blocks' ) }>
|
342 |
+
{ imageSizeOptions.map( option => {
|
343 |
+
const isCurrent = imageScale === option.value;
|
344 |
+
return (
|
345 |
+
<Button
|
346 |
+
isLarge
|
347 |
+
isPrimary={ isCurrent }
|
348 |
+
aria-pressed={ isCurrent }
|
349 |
+
aria-label={ option.label }
|
350 |
+
onClick={ () => setAttributes( { imageScale: option.value } ) }
|
351 |
+
>
|
352 |
+
{ option.shortName }
|
353 |
+
</Button>
|
354 |
+
);
|
355 |
+
} ) }
|
356 |
+
</ButtonGroup>
|
357 |
+
</PanelRow>
|
358 |
+
</BaseControl>
|
359 |
+
</Fragment>
|
360 |
+
) }
|
361 |
+
|
362 |
+
{ showImage && mediaPosition === 'behind' && (
|
363 |
+
<RangeControl
|
364 |
+
label={ __( 'Minimum height', 'newspack-blocks' ) }
|
365 |
+
help={ __(
|
366 |
+
"Sets a minimum height for the block, using a percentage of the screen's current height.",
|
367 |
+
'newspack-blocks'
|
368 |
+
) }
|
369 |
+
value={ minHeight }
|
370 |
+
onChange={ value => setAttributes( { minHeight: value } ) }
|
371 |
+
min={ 0 }
|
372 |
+
max={ 100 }
|
373 |
+
required
|
374 |
+
/>
|
375 |
+
) }
|
376 |
+
</PanelBody>
|
377 |
+
<PanelBody title={ __( 'Post Control Settings', 'newspack-blocks' ) }>
|
378 |
+
<PanelRow>
|
379 |
+
<ToggleControl
|
380 |
+
label={ __( 'Show Excerpt', 'newspack-blocks' ) }
|
381 |
+
checked={ showExcerpt }
|
382 |
+
onChange={ () => setAttributes( { showExcerpt: ! showExcerpt } ) }
|
383 |
+
/>
|
384 |
+
</PanelRow>
|
385 |
+
<RangeControl
|
386 |
+
className="type-scale-slider"
|
387 |
+
label={ __( 'Type Scale', 'newspack-blocks' ) }
|
388 |
+
value={ typeScale }
|
389 |
+
onChange={ value => setAttributes( { typeScale: value } ) }
|
390 |
+
min={ 1 }
|
391 |
+
max={ 10 }
|
392 |
+
beforeIcon="editor-textcolor"
|
393 |
+
afterIcon="editor-textcolor"
|
394 |
+
required
|
395 |
+
/>
|
396 |
+
</PanelBody>
|
397 |
+
<PanelColorSettings
|
398 |
+
title={ __( 'Color Settings', 'newspack-blocks' ) }
|
399 |
+
initialOpen={ true }
|
400 |
+
colorSettings={ [
|
401 |
+
{
|
402 |
+
value: textColor.color,
|
403 |
+
onChange: setTextColor,
|
404 |
+
label: __( 'Text Color', 'newspack-blocks' ),
|
405 |
+
},
|
406 |
+
] }
|
407 |
+
/>
|
408 |
+
<PanelBody title={ __( 'Post Meta Settings', 'newspack-blocks' ) }>
|
409 |
+
<PanelRow>
|
410 |
+
<ToggleControl
|
411 |
+
label={ __( 'Show Date', 'newspack-blocks' ) }
|
412 |
+
checked={ showDate }
|
413 |
+
onChange={ () => setAttributes( { showDate: ! showDate } ) }
|
414 |
+
/>
|
415 |
+
</PanelRow>
|
416 |
+
<PanelRow>
|
417 |
+
<ToggleControl
|
418 |
+
label={ __( 'Show Category', 'newspack-blocks' ) }
|
419 |
+
checked={ showCategory }
|
420 |
+
onChange={ () => setAttributes( { showCategory: ! showCategory } ) }
|
421 |
+
/>
|
422 |
+
</PanelRow>
|
423 |
+
<PanelRow>
|
424 |
+
<ToggleControl
|
425 |
+
label={ __( 'Show Author', 'newspack-blocks' ) }
|
426 |
+
checked={ showAuthor }
|
427 |
+
onChange={ () => setAttributes( { showAuthor: ! showAuthor } ) }
|
428 |
+
/>
|
429 |
+
</PanelRow>
|
430 |
+
{ showAuthor && (
|
431 |
+
<PanelRow>
|
432 |
+
<ToggleControl
|
433 |
+
label={ __( 'Show Author Avatar', 'newspack-blocks' ) }
|
434 |
+
checked={ showAvatar }
|
435 |
+
onChange={ () => setAttributes( { showAvatar: ! showAvatar } ) }
|
436 |
+
/>
|
437 |
+
</PanelRow>
|
438 |
+
) }
|
439 |
+
</PanelBody>
|
440 |
+
</Fragment>
|
441 |
+
);
|
442 |
+
};
|
443 |
+
|
444 |
+
render() {
|
445 |
+
/**
|
446 |
+
* Constants
|
447 |
+
*/
|
448 |
+
const {
|
449 |
+
attributes,
|
450 |
+
className,
|
451 |
+
setAttributes,
|
452 |
+
isSelected,
|
453 |
+
latestPosts,
|
454 |
+
hasPosts,
|
455 |
+
textColor,
|
456 |
+
} = this.props; // variables getting pulled out of props
|
457 |
+
const {
|
458 |
+
showExcerpt,
|
459 |
+
showDate,
|
460 |
+
showImage,
|
461 |
+
imageShape,
|
462 |
+
showAuthor,
|
463 |
+
showAvatar,
|
464 |
+
postsToShow,
|
465 |
+
postLayout,
|
466 |
+
mediaPosition,
|
467 |
+
moreButton,
|
468 |
+
columns,
|
469 |
+
categories,
|
470 |
+
typeScale,
|
471 |
+
imageScale,
|
472 |
+
mobileStack,
|
473 |
+
sectionHeader,
|
474 |
+
showCaption,
|
475 |
+
showCategory,
|
476 |
+
specificMode,
|
477 |
+
} = attributes;
|
478 |
+
|
479 |
+
const classes = classNames( className, {
|
480 |
+
'is-grid': postLayout === 'grid',
|
481 |
+
'show-image': showImage,
|
482 |
+
[ `columns-${ columns }` ]: postLayout === 'grid',
|
483 |
+
[ `ts-${ typeScale }` ]: typeScale !== '5',
|
484 |
+
[ `image-align${ mediaPosition }` ]: showImage,
|
485 |
+
[ `is-${ imageScale }` ]: imageScale !== '1' && showImage,
|
486 |
+
'mobile-stack': mobileStack,
|
487 |
+
[ `image-shape${ imageShape }` ]: imageShape !== 'landscape',
|
488 |
+
'has-text-color': textColor.color !== '',
|
489 |
+
'show-caption': showCaption,
|
490 |
+
'show-category': showCategory,
|
491 |
+
wpnbha: true,
|
492 |
+
} );
|
493 |
+
|
494 |
+
const blockControls = [
|
495 |
+
{
|
496 |
+
icon: 'list-view',
|
497 |
+
title: __( 'List View', 'newspack-blocks' ),
|
498 |
+
onClick: () => setAttributes( { postLayout: 'list' } ),
|
499 |
+
isActive: postLayout === 'list',
|
500 |
+
},
|
501 |
+
{
|
502 |
+
icon: 'grid-view',
|
503 |
+
title: __( 'Grid View', 'newspack-blocks' ),
|
504 |
+
onClick: () => setAttributes( { postLayout: 'grid' } ),
|
505 |
+
isActive: postLayout === 'grid',
|
506 |
+
},
|
507 |
+
];
|
508 |
+
|
509 |
+
const blockControlsImages = [
|
510 |
+
{
|
511 |
+
icon: 'align-none',
|
512 |
+
title: __( 'Show media on top', 'newspack-blocks' ),
|
513 |
+
isActive: mediaPosition === 'top',
|
514 |
+
onClick: () => setAttributes( { mediaPosition: 'top' } ),
|
515 |
+
},
|
516 |
+
{
|
517 |
+
icon: 'align-pull-left',
|
518 |
+
title: __( 'Show media on left', 'newspack-blocks' ),
|
519 |
+
isActive: mediaPosition === 'left',
|
520 |
+
onClick: () => setAttributes( { mediaPosition: 'left' } ),
|
521 |
+
},
|
522 |
+
{
|
523 |
+
icon: 'align-pull-right',
|
524 |
+
title: __( 'Show media on right', 'newspack-blocks' ),
|
525 |
+
isActive: mediaPosition === 'right',
|
526 |
+
onClick: () => setAttributes( { mediaPosition: 'right' } ),
|
527 |
+
},
|
528 |
+
{
|
529 |
+
icon: coverIcon,
|
530 |
+
title: __( 'Show media behind', 'newspack-blocks' ),
|
531 |
+
isActive: mediaPosition === 'behind',
|
532 |
+
onClick: () => setAttributes( { mediaPosition: 'behind' } ),
|
533 |
+
},
|
534 |
+
];
|
535 |
+
|
536 |
+
const blockControlsImageShape = [
|
537 |
+
{
|
538 |
+
icon: landscapeIcon,
|
539 |
+
title: __( 'Landscape Image Shape', 'newspack-blocks' ),
|
540 |
+
isActive: imageShape === 'landscape',
|
541 |
+
onClick: () => setAttributes( { imageShape: 'landscape' } ),
|
542 |
+
},
|
543 |
+
{
|
544 |
+
icon: portraitIcon,
|
545 |
+
title: __( 'portrait Image Shape', 'newspack-blocks' ),
|
546 |
+
isActive: imageShape === 'portrait',
|
547 |
+
onClick: () => setAttributes( { imageShape: 'portrait' } ),
|
548 |
+
},
|
549 |
+
{
|
550 |
+
icon: squareIcon,
|
551 |
+
title: __( 'Square Image Shape', 'newspack-blocks' ),
|
552 |
+
isActive: imageShape === 'square',
|
553 |
+
onClick: () => setAttributes( { imageShape: 'square' } ),
|
554 |
+
},
|
555 |
+
{
|
556 |
+
icon: uncroppedIcon,
|
557 |
+
title: __( 'Uncropped', 'newspack-blocks' ),
|
558 |
+
isActive: imageShape === 'uncropped',
|
559 |
+
onClick: () => setAttributes( { imageShape: 'uncropped' } ),
|
560 |
+
},
|
561 |
+
];
|
562 |
+
|
563 |
+
return (
|
564 |
+
<Fragment>
|
565 |
+
<div
|
566 |
+
className={ classes }
|
567 |
+
style={ {
|
568 |
+
color: textColor.color,
|
569 |
+
} }
|
570 |
+
>
|
571 |
+
{ latestPosts && ( ! RichText.isEmpty( sectionHeader ) || isSelected ) && (
|
572 |
+
<RichText
|
573 |
+
onChange={ value => setAttributes( { sectionHeader: value } ) }
|
574 |
+
placeholder={ __( 'Write header…', 'newspack-blocks' ) }
|
575 |
+
value={ sectionHeader }
|
576 |
+
tagName="h2"
|
577 |
+
className="article-section-title"
|
578 |
+
/>
|
579 |
+
) }
|
580 |
+
{ latestPosts && ! latestPosts.length && (
|
581 |
+
<Placeholder>{ __( 'Sorry, no posts were found.', 'newspack-blocks' ) }</Placeholder>
|
582 |
+
) }
|
583 |
+
{ ! latestPosts && (
|
584 |
+
<Placeholder>
|
585 |
+
<Spinner />
|
586 |
+
</Placeholder>
|
587 |
+
) }
|
588 |
+
{ latestPosts && latestPosts.map( post => this.renderPost( post ) ) }
|
589 |
+
</div>
|
590 |
+
|
591 |
+
{ ! specificMode && latestPosts && moreButton && (
|
592 |
+
<button className="button" type="button">
|
593 |
+
{ __( 'More…', 'newspack-blocks' ) }
|
594 |
+
</button>
|
595 |
+
) }
|
596 |
+
|
597 |
+
<BlockControls>
|
598 |
+
<Toolbar controls={ blockControls } />
|
599 |
+
{ showImage && <Toolbar controls={ blockControlsImages } /> }
|
600 |
+
{ showImage && <Toolbar controls={ blockControlsImageShape } /> }
|
601 |
+
</BlockControls>
|
602 |
+
<InspectorControls>{ this.renderInspectorControls() }</InspectorControls>
|
603 |
+
</Fragment>
|
604 |
+
);
|
605 |
+
}
|
606 |
+
}
|
607 |
+
|
608 |
+
export default compose( [
|
609 |
+
withColors( { textColor: 'color' } ),
|
610 |
+
withSelect( ( select, props ) => {
|
611 |
+
const {
|
612 |
+
postsToShow,
|
613 |
+
authors,
|
614 |
+
categories,
|
615 |
+
tags,
|
616 |
+
specificPosts,
|
617 |
+
specificMode,
|
618 |
+
} = props.attributes;
|
619 |
+
const { getAuthors, getEntityRecords } = select( 'core' );
|
620 |
+
const latestPostsQuery = pickBy(
|
621 |
+
specificMode && specificPosts && specificPosts.length
|
622 |
+
? {
|
623 |
+
include: specificPosts,
|
624 |
+
orderby: 'include',
|
625 |
+
}
|
626 |
+
: {
|
627 |
+
per_page: postsToShow,
|
628 |
+
categories,
|
629 |
+
author: authors,
|
630 |
+
tags,
|
631 |
+
},
|
632 |
+
value => ! isUndefined( value )
|
633 |
+
);
|
634 |
+
const postsListQuery = {
|
635 |
+
per_page: 50,
|
636 |
+
};
|
637 |
+
return {
|
638 |
+
latestPosts: getEntityRecords( 'postType', 'post', latestPostsQuery ),
|
639 |
+
};
|
640 |
+
} ),
|
641 |
+
] )( Edit );
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/editor.js
ADDED
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* Internal dependencies
|
3 |
+
*/
|
4 |
+
import { registerBlockType } from '@wordpress/blocks';
|
5 |
+
import { name, settings } from '.';
|
6 |
+
|
7 |
+
registerBlockType( `newspack-blocks/${ name }`, settings );
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/editor.scss
ADDED
@@ -0,0 +1,39 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
@import "../../shared/sass/variables";
|
2 |
+
|
3 |
+
.type-scale-slider {
|
4 |
+
.dashicon {
|
5 |
+
height: 16px;
|
6 |
+
width: 16px;
|
7 |
+
}
|
8 |
+
|
9 |
+
input + .dashicon {
|
10 |
+
height: 24px;
|
11 |
+
margin-left: 10px;
|
12 |
+
margin-right: 0;
|
13 |
+
width: 24px;
|
14 |
+
}
|
15 |
+
}
|
16 |
+
|
17 |
+
.wpnbha {
|
18 |
+
.editor-rich-text {
|
19 |
+
width: 100%;
|
20 |
+
}
|
21 |
+
|
22 |
+
/* Article meta */
|
23 |
+
.cat-links {
|
24 |
+
font-size: $font__size-xs;
|
25 |
+
}
|
26 |
+
|
27 |
+
span.avatar {
|
28 |
+
display: inline-block;
|
29 |
+
margin-right: 0.5em;
|
30 |
+
div {
|
31 |
+
display: inline;
|
32 |
+
}
|
33 |
+
}
|
34 |
+
|
35 |
+
/* Article excerpt */
|
36 |
+
.excerpt-contain p {
|
37 |
+
margin: 0.5em 0;
|
38 |
+
}
|
39 |
+
}
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/index.js
ADDED
@@ -0,0 +1,106 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* External dependencies
|
3 |
+
*/
|
4 |
+
import { Path, SVG } from '@wordpress/components';
|
5 |
+
import { createBlock } from '@wordpress/blocks';
|
6 |
+
|
7 |
+
/**
|
8 |
+
* WordPress dependencies
|
9 |
+
*/
|
10 |
+
import { applyFilters } from '@wordpress/hooks';
|
11 |
+
import { __, _x } from '@wordpress/i18n';
|
12 |
+
|
13 |
+
/**
|
14 |
+
* Internal dependencies
|
15 |
+
*/
|
16 |
+
import edit from './edit';
|
17 |
+
|
18 |
+
/**
|
19 |
+
* Style dependencies - will load in editor
|
20 |
+
*/
|
21 |
+
import './editor.scss';
|
22 |
+
import './view.scss';
|
23 |
+
import metadata from './block.json';
|
24 |
+
const { name, attributes, category } = metadata;
|
25 |
+
|
26 |
+
// Name must be exported separately.
|
27 |
+
export { name };
|
28 |
+
|
29 |
+
export const title = __( 'Homepage Posts', 'newspack-blocks' );
|
30 |
+
|
31 |
+
/* From https://material.io/tools/icons */
|
32 |
+
export const icon = (
|
33 |
+
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
34 |
+
<Path d="M0 0h24v24H0z" fill="none" />
|
35 |
+
<Path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM10 9h8v2h-8zm0 3h4v2h-4zm0-6h8v2h-8z" />
|
36 |
+
</SVG>
|
37 |
+
);
|
38 |
+
|
39 |
+
export const settings = {
|
40 |
+
title,
|
41 |
+
icon,
|
42 |
+
attributes,
|
43 |
+
category,
|
44 |
+
keywords: [
|
45 |
+
__( 'posts', 'newspack-blocks' ),
|
46 |
+
__( 'articles', 'newspack-blocks' ),
|
47 |
+
__( 'latest', 'newspack-blocks' ),
|
48 |
+
],
|
49 |
+
description: __( 'A block for displaying homepage posts.', 'newspack-blocks' ),
|
50 |
+
styles: [
|
51 |
+
{ name: 'default', label: _x( 'Default', 'block style', 'newspack-blocks' ), isDefault: true },
|
52 |
+
{ name: 'borders', label: _x( 'Borders', 'block style', 'newspack-blocks' ) },
|
53 |
+
],
|
54 |
+
supports: {
|
55 |
+
html: false,
|
56 |
+
align: [ 'wide', 'full' ],
|
57 |
+
default: '',
|
58 |
+
},
|
59 |
+
edit,
|
60 |
+
save: () => null, // to use view.php
|
61 |
+
transforms: {
|
62 |
+
from: [
|
63 |
+
{
|
64 |
+
type: 'block',
|
65 |
+
blocks: [ 'core/latest-posts' ],
|
66 |
+
transform: ( {
|
67 |
+
displayPostContent,
|
68 |
+
displayPostDate,
|
69 |
+
postLayout,
|
70 |
+
columns,
|
71 |
+
postsToShow,
|
72 |
+
categories,
|
73 |
+
} ) => {
|
74 |
+
return createBlock(
|
75 |
+
applyFilters( 'blocks.transforms_from_name', 'newspack-blocks/homepage-articles' ),
|
76 |
+
{
|
77 |
+
showExcerpt: displayPostContent,
|
78 |
+
showDate: displayPostDate,
|
79 |
+
postLayout,
|
80 |
+
columns,
|
81 |
+
postsToShow,
|
82 |
+
showAuthor: false,
|
83 |
+
categories: categories ? [ categories ] : [],
|
84 |
+
}
|
85 |
+
);
|
86 |
+
},
|
87 |
+
},
|
88 |
+
],
|
89 |
+
to: [
|
90 |
+
{
|
91 |
+
type: 'block',
|
92 |
+
blocks: [ 'core/latest-posts' ],
|
93 |
+
transform: ( { showExcerpt, showDate, postLayout, columns, postsToShow, categories } ) => {
|
94 |
+
return createBlock( 'core/latest-posts', {
|
95 |
+
displayPostContent: showExcerpt,
|
96 |
+
displayPostDate: showDate,
|
97 |
+
postLayout,
|
98 |
+
columns,
|
99 |
+
postsToShow,
|
100 |
+
categories: categories[ 0 ] || '',
|
101 |
+
} );
|
102 |
+
},
|
103 |
+
},
|
104 |
+
],
|
105 |
+
},
|
106 |
+
};
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/article.php
ADDED
@@ -0,0 +1,143 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Article template.
|
4 |
+
*
|
5 |
+
* @global array $attributes Block attributes.
|
6 |
+
* @package WordPress
|
7 |
+
*/
|
8 |
+
|
9 |
+
call_user_func(
|
10 |
+
function( $data ) {
|
11 |
+
$attributes = $data['attributes'];
|
12 |
+
|
13 |
+
$authors = Newspack_Blocks::prepare_authors();
|
14 |
+
|
15 |
+
$styles = '';
|
16 |
+
|
17 |
+
if ( 'behind' === $attributes['mediaPosition'] && $attributes['showImage'] && has_post_thumbnail() ) {
|
18 |
+
$styles = 'min-height: ' . $attributes['minHeight'] . 'vh; padding-top: ' . ( $attributes['minHeight'] / 5 ) . 'vh;';
|
19 |
+
}
|
20 |
+
$image_size = 'newspack-article-block-uncropped';
|
21 |
+
if ( 'uncropped' !== $attributes['imageShape'] ) {
|
22 |
+
$image_size = Newspack_Blocks::image_size_for_orientation( $attributes['imageShape'] );
|
23 |
+
}
|
24 |
+
$thumbnail_args = '';
|
25 |
+
// If the image position is behind, pass the object-fit setting to maintain styles with AMP.
|
26 |
+
if ( 'behind' === $attributes['mediaPosition'] ) {
|
27 |
+
$thumbnail_args = array( 'object-fit' => 'cover' );
|
28 |
+
}
|
29 |
+
$category = false;
|
30 |
+
// Use Yoast primary category if set.
|
31 |
+
if ( class_exists( 'WPSEO_Primary_Term' ) ) {
|
32 |
+
$primary_term = new WPSEO_Primary_Term( 'category', get_the_ID() );
|
33 |
+
$category_id = $primary_term->get_primary_term();
|
34 |
+
if ( $category_id ) {
|
35 |
+
$category = get_term( $category_id );
|
36 |
+
}
|
37 |
+
}
|
38 |
+
if ( ! $category ) {
|
39 |
+
$categories_list = get_the_category();
|
40 |
+
if ( ! empty( $categories_list ) ) {
|
41 |
+
$category = $categories_list[0];
|
42 |
+
}
|
43 |
+
}
|
44 |
+
?>
|
45 |
+
<article
|
46 |
+
<?php if ( has_post_thumbnail() ) : ?>
|
47 |
+
class="post-has-image"
|
48 |
+
<?php endif; ?>
|
49 |
+
<?php if ( $styles ) : ?>
|
50 |
+
style="<?php echo esc_attr( $styles ); ?>"
|
51 |
+
<?php endif; ?>
|
52 |
+
>
|
53 |
+
<?php if ( has_post_thumbnail() && $attributes['showImage'] && $attributes['imageShape'] ) : ?>
|
54 |
+
<figure class="post-thumbnail">
|
55 |
+
<a href="<?php the_permalink(); ?>" rel="bookmark">
|
56 |
+
<?php the_post_thumbnail( $image_size, $thumbnail_args ); ?>
|
57 |
+
</a>
|
58 |
+
|
59 |
+
<?php if ( $attributes['showCaption'] && '' !== get_the_post_thumbnail_caption() ) : ?>
|
60 |
+
<figcaption><?php the_post_thumbnail_caption(); ?></figcaption>
|
61 |
+
<?php endif; ?>
|
62 |
+
</figure><!-- .featured-image -->
|
63 |
+
<?php endif; ?>
|
64 |
+
|
65 |
+
<div class="entry-wrapper">
|
66 |
+
<?php if ( $attributes['showCategory'] && $category ) : ?>
|
67 |
+
<div class="cat-links">
|
68 |
+
<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
|
69 |
+
<?php echo esc_html( $category->name ); ?>
|
70 |
+
</a>
|
71 |
+
</div>
|
72 |
+
<?php
|
73 |
+
endif;
|
74 |
+
if ( '' === $attributes['sectionHeader'] ) :
|
75 |
+
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
|
76 |
+
else :
|
77 |
+
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
|
78 |
+
endif;
|
79 |
+
if ( $attributes['showExcerpt'] ) :
|
80 |
+
the_excerpt();
|
81 |
+
endif;
|
82 |
+
if ( $attributes['showAuthor'] || $attributes['showDate'] ) :
|
83 |
+
?>
|
84 |
+
<div class="entry-meta">
|
85 |
+
<?php
|
86 |
+
if ( $attributes['showAuthor'] ) :
|
87 |
+
if ( $attributes['showAvatar'] ) :
|
88 |
+
echo wp_kses(
|
89 |
+
newspack_blocks_format_avatars( $authors ),
|
90 |
+
array(
|
91 |
+
'img' => array(
|
92 |
+
'class' => true,
|
93 |
+
'src' => true,
|
94 |
+
'alt' => true,
|
95 |
+
'width' => true,
|
96 |
+
'height' => true,
|
97 |
+
'data-*' => true,
|
98 |
+
'srcset' => true,
|
99 |
+
),
|
100 |
+
'noscript' => array(),
|
101 |
+
'a' => array(
|
102 |
+
'href' => true,
|
103 |
+
),
|
104 |
+
)
|
105 |
+
);
|
106 |
+
endif;
|
107 |
+
?>
|
108 |
+
<span class="byline">
|
109 |
+
<?php echo wp_kses_post( newspack_blocks_format_byline( $authors ) ); ?>
|
110 |
+
</span><!-- .author-name -->
|
111 |
+
<?php
|
112 |
+
endif;
|
113 |
+
if ( $attributes['showDate'] ) :
|
114 |
+
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
|
115 |
+
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) :
|
116 |
+
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
|
117 |
+
endif;
|
118 |
+
printf(
|
119 |
+
wp_kses(
|
120 |
+
$time_string,
|
121 |
+
array(
|
122 |
+
'time' => array(
|
123 |
+
'class' => true,
|
124 |
+
'datetime' => true,
|
125 |
+
),
|
126 |
+
)
|
127 |
+
),
|
128 |
+
esc_attr( get_the_date( DATE_W3C ) ),
|
129 |
+
esc_html( get_the_date() ),
|
130 |
+
esc_attr( get_the_modified_date( DATE_W3C ) ),
|
131 |
+
esc_html( get_the_modified_date() )
|
132 |
+
);
|
133 |
+
endif;
|
134 |
+
?>
|
135 |
+
</div><!-- .entry-meta -->
|
136 |
+
<?php endif; ?>
|
137 |
+
</div><!-- .entry-wrapper -->
|
138 |
+
</article>
|
139 |
+
|
140 |
+
<?php
|
141 |
+
},
|
142 |
+
$data // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
|
143 |
+
);
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/articles-list.php
ADDED
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Article list template.
|
4 |
+
*
|
5 |
+
* @global WP_Query $article_query Article query.
|
6 |
+
* @global array $attributes
|
7 |
+
* @package WordPress
|
8 |
+
*/
|
9 |
+
|
10 |
+
call_user_func(
|
11 |
+
function( $data ) {
|
12 |
+
echo Newspack_Blocks::template_inc( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
13 |
+
__DIR__ . '/articles-loop.php',
|
14 |
+
array(
|
15 |
+
'attributes' => $data['attributes'],
|
16 |
+
'article_query' => $data['article_query'],
|
17 |
+
)
|
18 |
+
);
|
19 |
+
},
|
20 |
+
$data // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
|
21 |
+
);
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/templates/articles-loop.php
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Articles loop template.
|
4 |
+
*
|
5 |
+
* @package WordPress
|
6 |
+
* @global \WP_Query $article_query Article query.
|
7 |
+
* @global array $attributes
|
8 |
+
* @global array $newspack_blocks_post_id
|
9 |
+
*/
|
10 |
+
|
11 |
+
call_user_func(
|
12 |
+
function( $data ) {
|
13 |
+
$attributes = $data['attributes'];
|
14 |
+
$article_query = $data['article_query'];
|
15 |
+
global $newspack_blocks_post_id;
|
16 |
+
$post_counter = 0;
|
17 |
+
while ( $article_query->have_posts() ) {
|
18 |
+
$article_query->the_post();
|
19 |
+
if ( ! $attributes['specificMode'] && ( isset( $newspack_blocks_post_id[ get_the_ID() ] ) || $post_counter >= $attributes['postsToShow'] ) ) {
|
20 |
+
continue;
|
21 |
+
}
|
22 |
+
$newspack_blocks_post_id[ get_the_ID() ] = true;
|
23 |
+
$post_counter++;
|
24 |
+
echo Newspack_Blocks::template_inc( __DIR__ . '/article.php', array( 'attributes' => $attributes ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
25 |
+
}
|
26 |
+
wp_reset_postdata();
|
27 |
+
},
|
28 |
+
$data // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
|
29 |
+
);
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/view.js
ADDED
@@ -0,0 +1,211 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/**
|
2 |
+
* VIEW
|
3 |
+
* JavaScript used on front of site.
|
4 |
+
*/
|
5 |
+
|
6 |
+
/**
|
7 |
+
* Style dependencies
|
8 |
+
*/
|
9 |
+
import './view.scss';
|
10 |
+
|
11 |
+
const btnURLAttr = 'data-load-more-url';
|
12 |
+
const fetchRetryCount = 3;
|
13 |
+
|
14 |
+
/**
|
15 |
+
* Load More Button Handling
|
16 |
+
*/
|
17 |
+
|
18 |
+
document.querySelectorAll( '[data-load-more-btn]' ).forEach( attachLoadMoreHandler );
|
19 |
+
|
20 |
+
/**
|
21 |
+
* Attaches an event handler to the Load more button.
|
22 |
+
* @param {DOMElement} btnEl the button that was clicked
|
23 |
+
*/
|
24 |
+
function attachLoadMoreHandler( btnEl ) {
|
25 |
+
if ( ! btnEl ) {
|
26 |
+
return null;
|
27 |
+
}
|
28 |
+
|
29 |
+
const handler = buildLoadMoreHandler( btnEl );
|
30 |
+
|
31 |
+
btnEl.addEventListener( 'click', handler );
|
32 |
+
}
|
33 |
+
|
34 |
+
/**
|
35 |
+
* Builds a function to handle clicks on the load more button.
|
36 |
+
* Creates internal state via closure to ensure all state is
|
37 |
+
* isolated to a single Block + button instance.
|
38 |
+
*
|
39 |
+
* @param {DOMElement} btnEl the button that was clicked
|
40 |
+
*/
|
41 |
+
function buildLoadMoreHandler( btnEl ) {
|
42 |
+
// Set elements from scope determined by the clicked "Load more" button.
|
43 |
+
const blockWrapperEl = btnEl.parentElement; // scope root element
|
44 |
+
const postsContainerEl = blockWrapperEl.querySelector( '[data-posts-container]' );
|
45 |
+
const loadingEl = blockWrapperEl.querySelector( '[data-load-more-loading-text]' );
|
46 |
+
const errorEl = blockWrapperEl.querySelector( '[data-load-more-error-text]' );
|
47 |
+
|
48 |
+
// Set initial state flags.
|
49 |
+
let isFetching = false;
|
50 |
+
let isEndOfData = false;
|
51 |
+
|
52 |
+
return () => {
|
53 |
+
// Early return if still fetching or no more posts to render.
|
54 |
+
if ( isFetching || isEndOfData ) {
|
55 |
+
return false;
|
56 |
+
}
|
57 |
+
|
58 |
+
isFetching = true;
|
59 |
+
|
60 |
+
// Set elements visibility for fetching state.
|
61 |
+
hideEl( btnEl );
|
62 |
+
hideEl( errorEl );
|
63 |
+
showEl( loadingEl );
|
64 |
+
|
65 |
+
const onSuccess = data => {
|
66 |
+
// Validate received data.
|
67 |
+
if ( isPostsDataValid( data ) ) {
|
68 |
+
// Render posts' HTML from string.
|
69 |
+
const postsHTML = data.items.map( item => item.html ).join( '' );
|
70 |
+
postsContainerEl.insertAdjacentHTML( 'beforeend', postsHTML );
|
71 |
+
|
72 |
+
if ( data.next ) {
|
73 |
+
// Save next URL as button's attribute.
|
74 |
+
btnEl.setAttribute( btnURLAttr, data.next );
|
75 |
+
|
76 |
+
// Unhide button since there are more posts available.
|
77 |
+
showEl( btnEl );
|
78 |
+
} else {
|
79 |
+
isEndOfData = true;
|
80 |
+
}
|
81 |
+
|
82 |
+
isFetching = false;
|
83 |
+
|
84 |
+
hideEl( loadingEl );
|
85 |
+
}
|
86 |
+
};
|
87 |
+
|
88 |
+
const onError = () => {
|
89 |
+
isFetching = false;
|
90 |
+
|
91 |
+
// Display error message and keep the button visible to enable retrying.
|
92 |
+
hideEl( loadingEl );
|
93 |
+
showEl( errorEl );
|
94 |
+
showEl( btnEl );
|
95 |
+
};
|
96 |
+
|
97 |
+
fetchWithRetry(
|
98 |
+
{ url: btnEl.getAttribute( btnURLAttr ), onSuccess, onError },
|
99 |
+
fetchRetryCount
|
100 |
+
);
|
101 |
+
};
|
102 |
+
}
|
103 |
+
|
104 |
+
/**
|
105 |
+
* Wrapper for XMLHttpRequest that performs given number of retries when error
|
106 |
+
* occurs.
|
107 |
+
*
|
108 |
+
* @param {Object} options XMLHttpRequest options
|
109 |
+
* @param {Number} n retry count before throwing
|
110 |
+
*/
|
111 |
+
function fetchWithRetry( options, n ) {
|
112 |
+
const xhr = new XMLHttpRequest();
|
113 |
+
|
114 |
+
xhr.onreadystatechange = () => {
|
115 |
+
// Return if the request is completed.
|
116 |
+
if ( xhr.readyState !== 4 ) {
|
117 |
+
return;
|
118 |
+
}
|
119 |
+
|
120 |
+
// Call onSuccess with parsed JSON if the request is successful.
|
121 |
+
if ( xhr.status >= 200 && xhr.status < 300 ) {
|
122 |
+
const data = JSON.parse( xhr.responseText );
|
123 |
+
|
124 |
+
return options.onSuccess( data );
|
125 |
+
}
|
126 |
+
|
127 |
+
// Call onError if the request has failed n + 1 times (or if n is undefined).
|
128 |
+
if ( ! n ) {
|
129 |
+
return options.onError();
|
130 |
+
}
|
131 |
+
|
132 |
+
// Retry fetching if request has failed and n > 0.
|
133 |
+
return fetchWithRetry( options, n - 1 );
|
134 |
+
};
|
135 |
+
|
136 |
+
xhr.open( 'GET', options.url );
|
137 |
+
xhr.send();
|
138 |
+
}
|
139 |
+
|
140 |
+
/**
|
141 |
+
* Validates the "Load more" posts endpoint schema:
|
142 |
+
* {
|
143 |
+
* "type": "object",
|
144 |
+
* "properties": {
|
145 |
+
* "items": {
|
146 |
+
* "type": "array",
|
147 |
+
* "items": {
|
148 |
+
* "type": "object",
|
149 |
+
* "properties": {
|
150 |
+
* "html": {
|
151 |
+
* "type": "string"
|
152 |
+
* }
|
153 |
+
* },
|
154 |
+
* "required": ["html"]
|
155 |
+
* },
|
156 |
+
* "required": ["items"]
|
157 |
+
* },
|
158 |
+
* "next": {
|
159 |
+
* "type": ["string", "null"]
|
160 |
+
* }
|
161 |
+
* },
|
162 |
+
* "required": ["items", "next"]
|
163 |
+
* }
|
164 |
+
*
|
165 |
+
* @param {Object} data posts endpoint payload
|
166 |
+
*/
|
167 |
+
function isPostsDataValid( data ) {
|
168 |
+
if (
|
169 |
+
data &&
|
170 |
+
hasOwnProp( data, 'items' ) &&
|
171 |
+
hasOwnProp( data, 'next' ) &&
|
172 |
+
Array.isArray( data.items ) &&
|
173 |
+
data.items.length &&
|
174 |
+
hasOwnProp( data.items[ 0 ], 'html' ) &&
|
175 |
+
typeof data.items[ 0 ].html === 'string'
|
176 |
+
) {
|
177 |
+
return true;
|
178 |
+
}
|
179 |
+
|
180 |
+
return false;
|
181 |
+
}
|
182 |
+
|
183 |
+
/**
|
184 |
+
* Hides given DOM element.
|
185 |
+
*
|
186 |
+
* @param {DOMElement} el
|
187 |
+
*/
|
188 |
+
function hideEl( el ) {
|
189 |
+
el.style.display = 'none';
|
190 |
+
el.setAttribute( 'hidden', '' );
|
191 |
+
}
|
192 |
+
|
193 |
+
/**
|
194 |
+
* Unhides given DOM element.
|
195 |
+
*
|
196 |
+
* @param {DOMElement} el
|
197 |
+
*/
|
198 |
+
function showEl( el ) {
|
199 |
+
el.style.display = '';
|
200 |
+
el.removeAttribute( 'hidden' );
|
201 |
+
}
|
202 |
+
|
203 |
+
/**
|
204 |
+
* Checks if object has own property.
|
205 |
+
*
|
206 |
+
* @param {Object} obj
|
207 |
+
* @param {String} prop
|
208 |
+
*/
|
209 |
+
function hasOwnProp( obj, prop ) {
|
210 |
+
return Object.prototype.hasOwnProperty.call( obj, prop );
|
211 |
+
}
|
blog-posts-block/newspack-homepage-articles/blocks/homepage-articles/view.php
ADDED
@@ -0,0 +1,221 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
/**
|
3 |
+
* Server-side rendering of the `newspack-blocks/homepage-posts` block.
|
4 |
+
*
|
5 |
+
* @package WordPress
|
6 |
+
*/
|
7 |
+
|
8 |
+
/**
|
9 |
+
* Renders the `newspack-blocks/homepage-posts` block on server.
|
10 |
+
*
|
11 |
+
* @param array $attributes The block attributes.
|
12 |
+
*
|
13 |
+
* @return string Returns the post content with latest posts added.
|
14 |
+
*/
|
15 |
+
function newspack_blocks_render_block_homepage_articles( $attributes ) {
|
16 |
+
$article_query = new WP_Query( Newspack_Blocks::build_articles_query( $attributes ) );
|
17 |
+
|
18 |
+
$classes = Newspack_Blocks::block_classes( 'homepage-articles', $attributes, [ 'wpnbha' ] );
|
19 |
+
|
20 |
+
if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
|
21 |
+
$classes .= ' is-grid';
|
22 |
+
}
|
23 |
+
if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
|
24 |
+
$classes .= ' columns-' . $attributes['columns'];
|
25 |
+
}
|
26 |
+
if ( $attributes['showImage'] ) {
|
27 |
+
$classes .= ' show-image';
|
28 |
+
}
|
29 |
+
if ( $attributes['showImage'] && isset( $attributes['mediaPosition'] ) ) {
|
30 |
+
$classes .= ' image-align' . $attributes['mediaPosition'];
|
31 |
+
}
|
32 |
+
if ( isset( $attributes['typeScale'] ) ) {
|
33 |
+
$classes .= ' ts-' . $attributes['typeScale'];
|
34 |
+
}
|
35 |
+
if ( $attributes['showImage'] && isset( $attributes['imageScale'] ) ) {
|
36 |
+
$classes .= ' is-' . $attributes['imageScale'];
|
37 |
+
}
|
38 |
+
if ( $attributes['showImage'] && $attributes['mobileStack'] ) {
|
39 |
+
$classes .= ' mobile-stack';
|
40 |
+
}
|
41 |
+
if ( $attributes['showCaption'] ) {
|
42 |
+
$classes .= ' show-caption';
|
43 |
+
}
|
44 |
+
if ( $attributes['showCategory'] ) {
|
45 |
+
$classes .= ' show-category';
|
46 |
+
}
|
47 |
+
if ( isset( $attributes['className'] ) ) {
|
48 |
+
$classes .= ' ' . $attributes['className'];
|
49 |
+
}
|
50 |
+
|
51 |
+
if ( '' !== $attributes['textColor'] || '' !== $attributes['customTextColor'] ) {
|
52 |
+
$classes .= ' has-text-color';
|
53 |
+
}
|
54 |
+
if ( '' !== $attributes['textColor'] ) {
|
55 |
+
$classes .= ' has-' . $attributes['textColor'] . '-color';
|
56 |
+
}
|
57 |
+
|
58 |
+
$styles = '';
|
59 |
+
|
60 |
+
if ( '' !== $attributes['customTextColor'] ) {
|
61 |
+
$styles = 'color: ' . $attributes['customTextColor'] . ';';
|
62 |
+
}
|
63 |
+
|
64 |
+
$articles_rest_url = add_query_arg(
|
65 |
+
array_merge(
|
66 |
+
array_map(
|
67 |
+
function( $attribute ) {
|
68 |
+
return false === $attribute ? '0' : $attribute;
|
69 |