Full Site Editing - Version 0.17

Version Description

  • Introduces Blog Posts block, a better version of Posts List.
Download this release

Release Info

Developer obenland
Plugin Icon wp plugin Full Site Editing
Version 0.17
Comparing to
See all releases

Code changes from version 0.16.2 to 0.17

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