Version Description
- Introduces Blog Posts block, a better version of Posts List.
Download this release
Release Info
| Developer | obenland |
| Plugin |  Full Site Editing |
| 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 |
+
|