@automattic/newspack-blocks 1.68.2 → 1.69.0-alpha.2

package/dist/homepage-articles/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '348e10e0546200d3c2a14a695987c6ee');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '5358e8ecb6dea486eae826fdce280fff');

package/dist/homepage-articles/view.css

@@ -1 +1 @@
-.newspack-preview-label{position:absolute;top:5px;left:5px;z-index:1;font-family:sans-serif;font-size:10px;text-transform:uppercase;background:#ffc000;padding:0 4px;border-radius:2px}:root{--wpnbha-col-gap:1em}@media only screen and (min-width:600px){:root{--wpnbha-col-gap:16px}}@media only screen and (min-width:782px){:root{--wpnbha-col-gap:32px}}@media only screen and (min-width:600px){.colgap-2{--wpnbha-col-gap:16px}}@media only screen and (min-width:600px){.colgap-1{--wpnbha-col-gap:8px}}.wpnbha{margin-bottom:1em}.wpnbha article{min-width:0;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 .article-section-title mark{background-color:transparent}.wpnbha.is-grid>div{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:var(--wpnbha-col-gap);padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%;margin-bottom:0}.wpnbha.is-grid .article-section-title{margin-bottom:calc(1em - var(--wpnbha-col-gap))}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)/3*2)}.wpnbha.is-style-borders.columns-3 article,.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)*2/3*2 - 1px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)/2)}.wpnbha.is-style-borders.columns-2 article,.wpnbha.is-style-borders.columns-4 article,.wpnbha.is-style-borders.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)*2/2 - 1px)}.wpnbha.columns-5 article:last-of-type,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:100%}}@media only screen and (min-width:782px){.wpnbha.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)/4*3)}.wpnbha.is-style-borders.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)*2/4*3 - 1px)}.wpnbha.columns-5 article,.wpnbha.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)/5*4)}.wpnbha.is-style-borders.columns-5 article,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)*2/5*4 - 1px)}.wpnbha.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)/6*5)}.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)*2/6*5 - 1px)}}.wpnbha .post-thumbnail{margin:0 0 .25em}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha figcaption{font-size:.6em}.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}}@media only screen and (min-width:600px){.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.mobile-stack.image-alignleft .post-thumbnail,.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-left:0;margin-right:0}@media only screen and (min-width:600px){.wpnbha.mobile-stack.image-alignleft .post-thumbnail{margin-right:1em}.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-left:1em}}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.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 .entry-meta .updated{display:none}.wpnbha .entry-meta .updated.published{display:block}.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;margin:0;overflow:hidden;position:absolute;right:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;margin:0!important;max-width:1000%!important;width:100%!important}.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:2rem 1rem;position:relative;width:100%;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1.5rem}}.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.image-alignbehind 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 1rem;position:absolute;right:0;text-align:right;text-overflow:ellipsis;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind figcaption{padding:0 1.5rem}}.wpnbha .error,.wpnbha .loading,.wpnbha button{display:none}.wpnbha>button{margin-top:1em}.wpnbha.has-more-button button{display:block}.wpnbha.has-more-button.is-loading button{display:none}.wpnbha.has-more-button.is-error .error,.wpnbha.has-more-button.is-error button,.wpnbha.has-more-button.is-loading .loading{display:block}.wpnbha .author-avatar,.wpnbha .byline,.wpnbha .cat-links,.wpnbha .posted-on,.wpnbha .tags-links{clip:auto;height:auto;position:relative;width:auto}.wpnbha.has-text-align-center .cat-links,.wpnbha.has-text-align-center .entry-meta,.wpnbha.has-text-align-center .entry-sponsors{justify-content:center}.wpnbha.has-text-align-center.image-alignbehind figcaption,.wpnbha.has-text-align-center figcaption{text-align:inherit}.wpnbha.has-text-align-right .cat-links,.wpnbha.has-text-align-right .entry-meta,.wpnbha.has-text-align-right .entry-sponsors,.wpnbha.has-text-align-right .sponsor-logos{justify-content:flex-end;text-align:right}.wpnbha.has-text-align-right figcaption{text-align:inherit}.wpnbha.has-text-align-right .entry-date:not(:first-child){margin-left:1.5em}.wpnbha.has-text-align-right .entry-meta .byline:not(:last-child){margin:0}.wpnbha .cat-links,amp-script .wpnbha .cat-links{display:flex;flex-wrap:wrap;font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links.sponsor-label,amp-script .wpnbha .cat-links.sponsor-label{align-items:center;display:flex;gap:.5em}.wpnbha .cat-links a,amp-script .wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover,amp-script .wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-sponsors,amp-script .wpnbha .entry-sponsors{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.25em;width:100%}.wpnbha .entry-sponsors.plus-author,amp-script .wpnbha .entry-sponsors.plus-author{font-size:.9em}.wpnbha .entry-sponsors.plus-author:not(:last-child),amp-script .wpnbha .entry-sponsors.plus-author:not(:last-child){margin-bottom:.5rem}.wpnbha .sponsor-logos,amp-script .wpnbha .sponsor-logos{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5em;line-height:1}.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.1}@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-7 .newspack-post-subtitle,.wpnbha.ts-8 .newspack-post-subtitle,.wpnbha.ts-9 .newspack-post-subtitle,.wpnbha.ts-10 .newspack-post-subtitle{font-size:1.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}.wpnbha.ts-6 article .newspack-post-subtitle{font-size:1.4em}@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}.wpnbha.ts-5 article .newspack-post-subtitle{font-size:1.2em}@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-meta,.wpnbha.ts-3 article .entry-wrapper .more-link,.wpnbha.ts-3 article .entry-wrapper p,.wpnbha.ts-3 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{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}}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-title{font-size:.7em}.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;box-sizing:content-box;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0;padding-right:0}@media only screen and (min-width:600px){.wpnbha.is-style-borders.is-grid article{border-width:0;padding-right:0}.wpnbha.is-style-borders.columns-2 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+2):not(:last-of-type),.wpnbha.is-style-borders.columns-4 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-5 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+2):not(:last-of-type){border-width:0 1px 0 0;padding-right:var(--wpnbha-col-gap)}}@media only screen and (min-width:782px){.wpnbha.is-style-borders.is-grid article{border-width:0 1px 0 0;padding-right:var(--wpnbha-col-gap)}.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;padding-right:0}}.newspack-post-subtitle--in-homepage-block{margin-top:.3em;margin-bottom:0;line-height:1.4;font-style:italic}amp-script .wpnbha.has-more-button.is-loading button{display:none}amp-script .wpnbha.has-more-button.is-error .error,amp-script .wpnbha.has-more-button.is-error button,amp-script .wpnbha.has-more-button.is-loading .loading{display:block}
+.newspack-preview-label{position:absolute;top:5px;left:5px;z-index:1;font-family:sans-serif;font-size:10px;text-transform:uppercase;background:#ffc000;padding:0 4px;border-radius:2px}:root{--wpnbha-col-gap:1em}@media only screen and (min-width:600px){:root{--wpnbha-col-gap:16px}}@media only screen and (min-width:782px){:root{--wpnbha-col-gap:32px}}@media only screen and (min-width:600px){.colgap-2{--wpnbha-col-gap:16px}}@media only screen and (min-width:600px){.colgap-1{--wpnbha-col-gap:8px}}.wpnbha{margin-bottom:1em}.wpnbha article{min-width:0;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 .article-section-title mark{background-color:transparent}.wpnbha.is-grid>div{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:var(--wpnbha-col-gap);padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%;margin-bottom:0}.wpnbha.is-grid .article-section-title{margin-bottom:calc(1em - var(--wpnbha-col-gap))}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)/3*2)}.wpnbha.is-style-borders.columns-3 article,.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)*2/3*2 - 1px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)/2)}.wpnbha.is-style-borders.columns-2 article,.wpnbha.is-style-borders.columns-4 article,.wpnbha.is-style-borders.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)*2/2 - 1px)}.wpnbha.columns-5 article:last-of-type,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:100%}}@media only screen and (min-width:782px){.wpnbha.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)/4*3)}.wpnbha.is-style-borders.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)*2/4*3 - 1px)}.wpnbha.columns-5 article,.wpnbha.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)/5*4)}.wpnbha.is-style-borders.columns-5 article,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)*2/5*4 - 1px)}.wpnbha.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)/6*5)}.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)*2/6*5 - 1px)}}.wpnbha .post-thumbnail{margin:0 0 .25em}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha figcaption{font-size:.6em}.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}}@media only screen and (min-width:600px){.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.mobile-stack.image-alignleft .post-thumbnail,.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-left:0;margin-right:0}@media only screen and (min-width:600px){.wpnbha.mobile-stack.image-alignleft .post-thumbnail{margin-right:1em}.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-left:1em}}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.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 .entry-meta .updated{display:none}.wpnbha .entry-meta .updated.published{display:block}.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{inset:0;margin:0;overflow:hidden;position:absolute}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;margin:0!important;max-width:1000%!important;width:100%!important}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);content:"";inset:0;position:absolute;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1rem;position:relative;width:100%;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1.5rem}}.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.image-alignbehind 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 1rem;position:absolute;right:0;text-align:right;text-overflow:ellipsis;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind figcaption{padding:0 1.5rem}}.wpnbha .error,.wpnbha .loading,.wpnbha button{display:none}.wpnbha>button{margin-top:1em}.wpnbha.has-more-button button{display:block}.wpnbha.has-more-button.is-loading button{display:none}.wpnbha.has-more-button.is-error .error,.wpnbha.has-more-button.is-error button,.wpnbha.has-more-button.is-loading .loading{display:block}.wpnbha .author-avatar,.wpnbha .byline,.wpnbha .cat-links,.wpnbha .posted-on,.wpnbha .tags-links{clip:auto;height:auto;position:relative;width:auto}.wpnbha.has-text-align-center .cat-links,.wpnbha.has-text-align-center .entry-meta,.wpnbha.has-text-align-center .entry-sponsors{justify-content:center}.wpnbha.has-text-align-center.image-alignbehind figcaption,.wpnbha.has-text-align-center figcaption{text-align:inherit}.wpnbha.has-text-align-right .cat-links,.wpnbha.has-text-align-right .entry-meta,.wpnbha.has-text-align-right .entry-sponsors,.wpnbha.has-text-align-right .sponsor-logos{justify-content:flex-end;text-align:right}.wpnbha.has-text-align-right figcaption{text-align:inherit}.wpnbha.has-text-align-right .entry-date:not(:first-child){margin-left:1.5em}.wpnbha.has-text-align-right .entry-meta .byline:not(:last-child){margin:0}.wpnbha .cat-links,amp-script .wpnbha .cat-links{display:flex;flex-wrap:wrap;font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links.sponsor-label,amp-script .wpnbha .cat-links.sponsor-label{align-items:center;display:flex;gap:.5em}.wpnbha .cat-links a,amp-script .wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover,amp-script .wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-sponsors,amp-script .wpnbha .entry-sponsors{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.25em;width:100%}.wpnbha .entry-sponsors.plus-author,amp-script .wpnbha .entry-sponsors.plus-author{font-size:.9em}.wpnbha .entry-sponsors.plus-author:not(:last-child),amp-script .wpnbha .entry-sponsors.plus-author:not(:last-child){margin-bottom:.5rem}.wpnbha .sponsor-logos,amp-script .wpnbha .sponsor-logos{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5em;line-height:1}.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.1}@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-7 .newspack-post-subtitle,.wpnbha.ts-8 .newspack-post-subtitle,.wpnbha.ts-9 .newspack-post-subtitle,.wpnbha.ts-10 .newspack-post-subtitle{font-size:1.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}.wpnbha.ts-6 article .newspack-post-subtitle{font-size:1.4em}@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}.wpnbha.ts-5 article .newspack-post-subtitle{font-size:1.2em}@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-meta,.wpnbha.ts-3 article .entry-wrapper .more-link,.wpnbha.ts-3 article .entry-wrapper p,.wpnbha.ts-3 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{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}}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-title{font-size:.7em}.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;box-sizing:content-box;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0;padding-right:0}@media only screen and (min-width:600px){.wpnbha.is-style-borders.is-grid article{border-width:0;padding-right:0}.wpnbha.is-style-borders.columns-2 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+2):not(:last-of-type),.wpnbha.is-style-borders.columns-4 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-5 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+2):not(:last-of-type){border-width:0 1px 0 0;padding-right:var(--wpnbha-col-gap)}}@media only screen and (min-width:782px){.wpnbha.is-style-borders.is-grid article{border-width:0 1px 0 0;padding-right:var(--wpnbha-col-gap)}.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;padding-right:0}}.newspack-post-subtitle--in-homepage-block{margin-top:.3em;margin-bottom:0;line-height:1.4;font-style:italic}amp-script .wpnbha.has-more-button.is-loading button{display:none}amp-script .wpnbha.has-more-button.is-error .error,amp-script .wpnbha.has-more-button.is-error button,amp-script .wpnbha.has-more-button.is-loading .loading{display:block}

package/dist/homepage-articles/view.rtl.css

@@ -1 +1 @@
-.newspack-preview-label{position:absolute;top:5px;right:5px;z-index:1;font-family:sans-serif;font-size:10px;text-transform:uppercase;background:#ffc000;padding:0 4px;border-radius:2px}:root{--wpnbha-col-gap:1em}@media only screen and (min-width:600px){:root{--wpnbha-col-gap:16px}}@media only screen and (min-width:782px){:root{--wpnbha-col-gap:32px}}@media only screen and (min-width:600px){.colgap-2{--wpnbha-col-gap:16px}}@media only screen and (min-width:600px){.colgap-1{--wpnbha-col-gap:8px}}.wpnbha{margin-bottom:1em}.wpnbha article{min-width:0;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 .article-section-title mark{background-color:transparent}.wpnbha.is-grid>div{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:var(--wpnbha-col-gap);padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%;margin-bottom:0}.wpnbha.is-grid .article-section-title{margin-bottom:calc(1em - var(--wpnbha-col-gap))}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)/3*2)}.wpnbha.is-style-borders.columns-3 article,.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)*2/3*2 - 1px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)/2)}.wpnbha.is-style-borders.columns-2 article,.wpnbha.is-style-borders.columns-4 article,.wpnbha.is-style-borders.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)*2/2 - 1px)}.wpnbha.columns-5 article:last-of-type,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:100%}}@media only screen and (min-width:782px){.wpnbha.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)/4*3)}.wpnbha.is-style-borders.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)*2/4*3 - 1px)}.wpnbha.columns-5 article,.wpnbha.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)/5*4)}.wpnbha.is-style-borders.columns-5 article,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)*2/5*4 - 1px)}.wpnbha.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)/6*5)}.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)*2/6*5 - 1px)}}.wpnbha .post-thumbnail{margin:0 0 .25em}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha figcaption{font-size:.6em}.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}}@media only screen and (min-width:600px){.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.mobile-stack.image-alignleft .post-thumbnail,.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-right:0;margin-left:0}@media only screen and (min-width:600px){.wpnbha.mobile-stack.image-alignleft .post-thumbnail{margin-left:1em}.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-right:1em}}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.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 .entry-meta .updated{display:none}.wpnbha .entry-meta .updated.published{display:block}.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;margin:0;overflow:hidden;position:absolute;left:0;top:0}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;margin:0!important;max-width:1000%!important;width:100%!important}.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:2rem 1rem;position:relative;width:100%;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1.5rem}}.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.image-alignbehind 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 1rem;position:absolute;left:0;text-align:left;text-overflow:ellipsis;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind figcaption{padding:0 1.5rem}}.wpnbha .error,.wpnbha .loading,.wpnbha button{display:none}.wpnbha>button{margin-top:1em}.wpnbha.has-more-button button{display:block}.wpnbha.has-more-button.is-loading button{display:none}.wpnbha.has-more-button.is-error .error,.wpnbha.has-more-button.is-error button,.wpnbha.has-more-button.is-loading .loading{display:block}.wpnbha .author-avatar,.wpnbha .byline,.wpnbha .cat-links,.wpnbha .posted-on,.wpnbha .tags-links{clip:auto;height:auto;position:relative;width:auto}.wpnbha.has-text-align-center .cat-links,.wpnbha.has-text-align-center .entry-meta,.wpnbha.has-text-align-center .entry-sponsors{justify-content:center}.wpnbha.has-text-align-center.image-alignbehind figcaption,.wpnbha.has-text-align-center figcaption{text-align:inherit}.wpnbha.has-text-align-right .cat-links,.wpnbha.has-text-align-right .entry-meta,.wpnbha.has-text-align-right .entry-sponsors,.wpnbha.has-text-align-right .sponsor-logos{justify-content:flex-end;text-align:left}.wpnbha.has-text-align-right figcaption{text-align:inherit}.wpnbha.has-text-align-right .entry-date:not(:first-child){margin-right:1.5em}.wpnbha.has-text-align-right .entry-meta .byline:not(:last-child){margin:0}.wpnbha .cat-links,amp-script .wpnbha .cat-links{display:flex;flex-wrap:wrap;font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links.sponsor-label,amp-script .wpnbha .cat-links.sponsor-label{align-items:center;display:flex;gap:.5em}.wpnbha .cat-links a,amp-script .wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover,amp-script .wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-sponsors,amp-script .wpnbha .entry-sponsors{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.25em;width:100%}.wpnbha .entry-sponsors.plus-author,amp-script .wpnbha .entry-sponsors.plus-author{font-size:.9em}.wpnbha .entry-sponsors.plus-author:not(:last-child),amp-script .wpnbha .entry-sponsors.plus-author:not(:last-child){margin-bottom:.5rem}.wpnbha .sponsor-logos,amp-script .wpnbha .sponsor-logos{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5em;line-height:1}.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.1}@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-7 .newspack-post-subtitle,.wpnbha.ts-8 .newspack-post-subtitle,.wpnbha.ts-9 .newspack-post-subtitle,.wpnbha.ts-10 .newspack-post-subtitle{font-size:1.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}.wpnbha.ts-6 article .newspack-post-subtitle{font-size:1.4em}@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}.wpnbha.ts-5 article .newspack-post-subtitle{font-size:1.2em}@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-meta,.wpnbha.ts-3 article .entry-wrapper .more-link,.wpnbha.ts-3 article .entry-wrapper p,.wpnbha.ts-3 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{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}}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-title{font-size:.7em}.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;box-sizing:content-box;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0;padding-left:0}@media only screen and (min-width:600px){.wpnbha.is-style-borders.is-grid article{border-width:0;padding-left:0}.wpnbha.is-style-borders.columns-2 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+2):not(:last-of-type),.wpnbha.is-style-borders.columns-4 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-5 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+2):not(:last-of-type){border-width:0 0 0 1px;padding-left:var(--wpnbha-col-gap)}}@media only screen and (min-width:782px){.wpnbha.is-style-borders.is-grid article{border-width:0 0 0 1px;padding-left:var(--wpnbha-col-gap)}.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;padding-left:0}}.newspack-post-subtitle--in-homepage-block{margin-top:.3em;margin-bottom:0;line-height:1.4;font-style:italic}amp-script .wpnbha.has-more-button.is-loading button{display:none}amp-script .wpnbha.has-more-button.is-error .error,amp-script .wpnbha.has-more-button.is-error button,amp-script .wpnbha.has-more-button.is-loading .loading{display:block}
+.newspack-preview-label{position:absolute;top:5px;right:5px;z-index:1;font-family:sans-serif;font-size:10px;text-transform:uppercase;background:#ffc000;padding:0 4px;border-radius:2px}:root{--wpnbha-col-gap:1em}@media only screen and (min-width:600px){:root{--wpnbha-col-gap:16px}}@media only screen and (min-width:782px){:root{--wpnbha-col-gap:32px}}@media only screen and (min-width:600px){.colgap-2{--wpnbha-col-gap:16px}}@media only screen and (min-width:600px){.colgap-1{--wpnbha-col-gap:8px}}.wpnbha{margin-bottom:1em}.wpnbha article{min-width:0;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 .article-section-title mark{background-color:transparent}.wpnbha.is-grid>div{display:flex;flex-flow:row wrap;justify-content:flex-start;gap:var(--wpnbha-col-gap);padding:0;list-style:none}.wpnbha.is-grid article{flex-basis:100%;margin-bottom:0}.wpnbha.is-grid .article-section-title{margin-bottom:calc(1em - var(--wpnbha-col-gap))}@media only screen and (min-width:600px){.wpnbha.columns-3 article,.wpnbha.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)/3*2)}.wpnbha.is-style-borders.columns-3 article,.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(33.33% - var(--wpnbha-col-gap)*2/3*2 - 1px)}.wpnbha.columns-2 article,.wpnbha.columns-4 article,.wpnbha.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)/2)}.wpnbha.is-style-borders.columns-2 article,.wpnbha.is-style-borders.columns-4 article,.wpnbha.is-style-borders.columns-5 article{flex-basis:calc(50% - var(--wpnbha-col-gap)*2/2 - 1px)}.wpnbha.columns-5 article:last-of-type,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:100%}}@media only screen and (min-width:782px){.wpnbha.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)/4*3)}.wpnbha.is-style-borders.columns-4 article{flex-basis:calc(25% - var(--wpnbha-col-gap)*2/4*3 - 1px)}.wpnbha.columns-5 article,.wpnbha.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)/5*4)}.wpnbha.is-style-borders.columns-5 article,.wpnbha.is-style-borders.columns-5 article:last-of-type{flex-basis:calc(20% - var(--wpnbha-col-gap)*2/5*4 - 1px)}.wpnbha.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)/6*5)}.wpnbha.is-style-borders.columns-6 article{flex-basis:calc(16.6666% - var(--wpnbha-col-gap)*2/6*5 - 1px)}}.wpnbha .post-thumbnail{margin:0 0 .25em}.wpnbha .post-thumbnail img{height:auto;width:100%}.wpnbha .post-thumbnail figcaption{margin-bottom:.5em}.wpnbha figcaption{font-size:.6em}.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}}@media only screen and (min-width:600px){.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.mobile-stack.image-alignleft .post-thumbnail,.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-right:0;margin-left:0}@media only screen and (min-width:600px){.wpnbha.mobile-stack.image-alignleft .post-thumbnail{margin-left:1em}.wpnbha.mobile-stack.image-alignright .post-thumbnail{margin-right:1em}}.wpnbha .entry-title{margin:0 0 .25em}.wpnbha .entry-title a{color:inherit;text-decoration:none}.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 .entry-meta .updated{display:none}.wpnbha .entry-meta .updated.published{display:block}.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{inset:0;margin:0;overflow:hidden;position:absolute}.wpnbha.image-alignbehind .post-has-image .post-thumbnail img{height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;margin:0!important;max-width:1000%!important;width:100%!important}.wpnbha.image-alignbehind .post-has-image .post-thumbnail:after{background:rgba(0,0,0,.5);content:"";inset:0;position:absolute;z-index:1}.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1rem;position:relative;width:100%;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind .post-has-image .entry-wrapper{padding:2rem 1.5rem}}.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.image-alignbehind 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 1rem;position:absolute;left:0;text-align:left;text-overflow:ellipsis;z-index:2}@media only screen and (min-width:1168px){.wpnbha.image-alignbehind figcaption{padding:0 1.5rem}}.wpnbha .error,.wpnbha .loading,.wpnbha button{display:none}.wpnbha>button{margin-top:1em}.wpnbha.has-more-button button{display:block}.wpnbha.has-more-button.is-loading button{display:none}.wpnbha.has-more-button.is-error .error,.wpnbha.has-more-button.is-error button,.wpnbha.has-more-button.is-loading .loading{display:block}.wpnbha .author-avatar,.wpnbha .byline,.wpnbha .cat-links,.wpnbha .posted-on,.wpnbha .tags-links{clip:auto;height:auto;position:relative;width:auto}.wpnbha.has-text-align-center .cat-links,.wpnbha.has-text-align-center .entry-meta,.wpnbha.has-text-align-center .entry-sponsors{justify-content:center}.wpnbha.has-text-align-center.image-alignbehind figcaption,.wpnbha.has-text-align-center figcaption{text-align:inherit}.wpnbha.has-text-align-right .cat-links,.wpnbha.has-text-align-right .entry-meta,.wpnbha.has-text-align-right .entry-sponsors,.wpnbha.has-text-align-right .sponsor-logos{justify-content:flex-end;text-align:left}.wpnbha.has-text-align-right figcaption{text-align:inherit}.wpnbha.has-text-align-right .entry-date:not(:first-child){margin-right:1.5em}.wpnbha.has-text-align-right .entry-meta .byline:not(:last-child){margin:0}.wpnbha .cat-links,amp-script .wpnbha .cat-links{display:flex;flex-wrap:wrap;font-size:.6em;font-weight:700;margin:0 0 .5em}.wpnbha .cat-links.sponsor-label,amp-script .wpnbha .cat-links.sponsor-label{align-items:center;display:flex;gap:.5em}.wpnbha .cat-links a,amp-script .wpnbha .cat-links a{text-decoration:none}.wpnbha .cat-links a:hover,amp-script .wpnbha .cat-links a:hover{text-decoration:underline}.wpnbha .entry-sponsors,amp-script .wpnbha .entry-sponsors{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.25em;width:100%}.wpnbha .entry-sponsors.plus-author,amp-script .wpnbha .entry-sponsors.plus-author{font-size:.9em}.wpnbha .entry-sponsors.plus-author:not(:last-child),amp-script .wpnbha .entry-sponsors.plus-author:not(:last-child){margin-bottom:.5rem}.wpnbha .sponsor-logos,amp-script .wpnbha .sponsor-logos{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5em;line-height:1}.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.1}@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-7 .newspack-post-subtitle,.wpnbha.ts-8 .newspack-post-subtitle,.wpnbha.ts-9 .newspack-post-subtitle,.wpnbha.ts-10 .newspack-post-subtitle{font-size:1.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}.wpnbha.ts-6 article .newspack-post-subtitle{font-size:1.4em}@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}.wpnbha.ts-5 article .newspack-post-subtitle{font-size:1.2em}@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-meta,.wpnbha.ts-3 article .entry-wrapper .more-link,.wpnbha.ts-3 article .entry-wrapper p,.wpnbha.ts-3 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}.wpnbha.ts-3 article .entry-meta{font-size:.7em}.wpnbha.ts-3 article .avatar{height:32px;width:32px}}.wpnbha.ts-1 article .entry-title,.wpnbha.ts-2 article .entry-title{font-size:.9em}.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{font-size:.8em}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-meta,.wpnbha.ts-1 article .entry-wrapper .more-link,.wpnbha.ts-1 article .entry-wrapper p,.wpnbha.ts-1 article .newspack-post-subtitle,.wpnbha.ts-2 article .entry-meta,.wpnbha.ts-2 article .entry-wrapper .more-link,.wpnbha.ts-2 article .entry-wrapper p,.wpnbha.ts-2 article .newspack-post-subtitle{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}}@media only screen and (min-width:782px){.wpnbha.ts-1 article .entry-title{font-size:.7em}.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;box-sizing:content-box;padding-bottom:1em}.wpnbha.is-style-borders article:last-of-type:not(:first-of-type){border-bottom:0;padding-left:0}@media only screen and (min-width:600px){.wpnbha.is-style-borders.is-grid article{border-width:0;padding-left:0}.wpnbha.is-style-borders.columns-2 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-3 article:nth-of-type(3n+2):not(:last-of-type),.wpnbha.is-style-borders.columns-4 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-5 article:nth-of-type(odd):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+1):not(:last-of-type),.wpnbha.is-style-borders.columns-6 article:nth-of-type(3n+2):not(:last-of-type){border-width:0 0 0 1px;padding-left:var(--wpnbha-col-gap)}}@media only screen and (min-width:782px){.wpnbha.is-style-borders.is-grid article{border-width:0 0 0 1px;padding-left:var(--wpnbha-col-gap)}.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;padding-left:0}}.newspack-post-subtitle--in-homepage-block{margin-top:.3em;margin-bottom:0;line-height:1.4;font-style:italic}amp-script .wpnbha.has-more-button.is-loading button{display:none}amp-script .wpnbha.has-more-button.is-error .error,amp-script .wpnbha.has-more-button.is-error button,amp-script .wpnbha.has-more-button.is-loading .loading{display:block}

package/dist/modal.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '04d35452766297fb31a594fc50807f06');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '89b5a69d0fc9f8514a18ce79f563ad07');

package/dist/modal.css

@@ -1 +1 @@
-@-webkit-keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.newspack-blocks-checkout-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:99999}.newspack-blocks-checkout-modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 32px);max-width:580px;min-height:200px;max-height:calc(100vh - 32px);background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close){width:100%;height:100%;border:0;border-radius:5px}.newspack-blocks-checkout-modal__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__spinner>span{width:25px;height:25px;border:2px solid #fff;border-top-color:#767676;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.newspack-blocks-checkout-modal__close{position:absolute;top:0;right:0;padding:8px;border:0;background:transparent;color:#111;cursor:pointer}.newspack-blocks-checkout-modal__close:focus,.newspack-blocks-checkout-modal__close:hover{color:#767676}.newspack-blocks-checkout-modal__close svg{display:block}@media(max-width:600px){.newspack-blocks-checkout-modal__content{max-width:100%;width:100%;border-radius:0;top:auto;bottom:0;left:0;transform:none}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close){border-radius:0}}
+@-webkit-keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.newspack-blocks-checkout-modal,.newspack-blocks-variation-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:99999}.newspack-blocks-checkout-modal__content,.newspack-blocks-variation-modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 32px);max-width:580px;min-height:200px;max-height:calc(100vh - 32px);background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close),.newspack-blocks-variation-modal__content>:not(.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close){width:100%;height:100%;border:0;border-radius:5px}.newspack-blocks-checkout-modal__spinner,.newspack-blocks-variation-modal__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__spinner>span,.newspack-blocks-variation-modal__spinner>span{width:25px;height:25px;border:2px solid #fff;border-top-color:#767676;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close{position:absolute;top:0;right:0;padding:8px;border:0;background:transparent;color:#111;cursor:pointer}.newspack-blocks-checkout-modal__close:focus,.newspack-blocks-checkout-modal__close:hover,.newspack-blocks-variation-modal__close:focus,.newspack-blocks-variation-modal__close:hover{color:#767676}.newspack-blocks-checkout-modal__close svg,.newspack-blocks-variation-modal__close svg{display:block}.newspack-blocks-variation-modal__content{padding:32px}.newspack-blocks-variation-modal__content h3{margin:0 0 1em}.newspack-blocks-variation-modal__content p{font-size:.8em}.newspack-blocks-variation-modal__content form{margin:0 0 .5em}.newspack-blocks-variation-modal__content form:last-child{margin:0}.newspack-blocks-variation-modal__content form button{display:block;width:100%;padding:16px;margin:0;border:1px solid #ccc;background:transparent;color:#111;text-align:inherit;font-weight:inherit}.newspack-blocks-variation-modal__content form button>span{display:block}.newspack-blocks-variation-modal__content form button .summary{width:100%;display:flex;justify-content:space-between;align-items:baseline}.newspack-blocks-variation-modal__content form button .variation_name{font-weight:600}.newspack-blocks-variation-modal__content form button .description{padding-top:1em;margin-top:1em;font-size:.9em;border-top:1px solid #ccc}.newspack-blocks-variation-modal__content form button bdi{font-weight:600;font-size:1.8em}@media(max-width:600px){.newspack-blocks-checkout-modal__content,.newspack-blocks-variation-modal__content{max-width:100%;width:100%;border-radius:0;top:auto;bottom:0;left:0;transform:none}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-variation-modal__close,.newspack-blocks-checkout-modal__close),.newspack-blocks-variation-modal__content>:not(.newspack-blocks-variation-modal__close,.newspack-blocks-checkout-modal__close){border-radius:0}}

package/dist/modal.js

@@ -1 +1 @@
-(()=>{"use strict";var e={r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t);var n,o;function c(e){var t=e.querySelector("iframe");t&&(t.src="about:blank"),document.body.classList.remove("newspack-modal-checkout-open"),n.disconnect(),e.style.display="none"}o=function(){var e=document.querySelector(".newspack-blocks-checkout-modal");if(e){var t=document.querySelector(".newspack-blocks-checkout-modal__spinner"),o="newspack_modal_checkout",a=document.createElement("input");a.type="hidden",a.name="modal_checkout",a.value="1";var r=e.querySelector(".newspack-blocks-checkout-modal__content"),d=document.createElement("iframe");d.name=o,r.appendChild(d),document.querySelectorAll(".wpbnbd.wpbnbd--platform-wc,.wp-block-newspack-blocks-checkout-button").forEach((function(c){c.querySelectorAll("form").forEach((function(c){c.appendChild(a.cloneNode()),c.target=o,c.addEventListener("submit",(function(){t.style.display="flex",e.style.display="block",document.body.classList.add("newspack-modal-checkout-open"),n=new ResizeObserver((function(e){if(e&&e.length){var t=e[0].contentRect;t&&(r.style.height=t.top+t.bottom+"px")}})),d.addEventListener("load",(function(){var e=d.contentWindow.location;if(window.newspackReaderActivation&&e.href.indexOf("order-received")>-1){var o=window.newspackReaderActivation,c=new Proxy(new URLSearchParams(e.search),{get:function(e,t){return e.get(t)}});c.email&&(o.setReaderEmail(c.email),o.setAuthenticated(!0))}var a=d.contentWindow.document.querySelector("#newspack_modal_checkout");a&&n.observe(a),t.style.display="none"}))}))}))})),e.addEventListener("click",(function(t){t.target===e&&c(e)})),e.querySelectorAll(".newspack-blocks-checkout-modal__close").forEach((function(t){t.addEventListener("click",(function(t){t.preventDefault(),c(e)}))}))}},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",o):o());var a=window;for(var r in t)a[r]=t[r];t.__esModule&&Object.defineProperty(a,"__esModule",{value:!0})})();
+(()=>{"use strict";var e={r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function o(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return n(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?n(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}e.r(t);var r,a;function c(e){var t=e.querySelector("iframe");t&&(t.src="about:blank"),document.body.classList.remove("newspack-modal-checkout-open"),r.disconnect(),e.style.display="none"}a=function(){var e=document.querySelector(".newspack-blocks-checkout-modal");if(e){var t=document.querySelector(".newspack-blocks-checkout-modal__spinner"),n="newspack_modal_checkout",a=document.createElement("input");a.type="hidden",a.name="modal_checkout",a.value="1";var i=e.querySelector(".newspack-blocks-checkout-modal__content"),l=document.createElement("iframe");l.name=n,i.appendChild(l),e.addEventListener("click",(function(t){t.target===e&&c(e)})),e.querySelectorAll(".newspack-blocks-checkout-modal__close").forEach((function(t){t.addEventListener("click",(function(t){t.preventDefault(),c(e)}))}));var d=document.querySelectorAll(".newspack-blocks-variation-modal");d.forEach((function(e){e.addEventListener("click",(function(t){t.target===e&&(e.style.display="none")})),e.querySelectorAll(".newspack-blocks-variation-modal__close").forEach((function(t){t.addEventListener("click",(function(t){t.preventDefault(),e.style.display="none"}))}))})),document.querySelectorAll(".wpbnbd.wpbnbd--platform-wc,.wp-block-newspack-blocks-checkout-button,.newspack-blocks-variation-modal").forEach((function(c){c.querySelectorAll("form").forEach((function(c){c.appendChild(a.cloneNode()),c.target=n,c.addEventListener("submit",(function(n){var a=new FormData(c);if(d.forEach((function(e){return e.style.display="none"})),a.get("is_variable")&&!a.get("variation_id")){var u=o(d).find((function(e){return e.dataset.productId===a.get("product_id")}));if(u)return n.preventDefault(),void(u.style.display="block")}t.style.display="flex",e.style.display="block",document.body.classList.add("newspack-modal-checkout-open"),r=new ResizeObserver((function(e){if(e&&e.length){var t=e[0].contentRect;t&&(i.style.height=t.top+t.bottom+"px")}})),l.addEventListener("load",(function(){var e=l.contentWindow.location;if(window.newspackReaderActivation&&e.href.indexOf("order-received")>-1){var n=window.newspackReaderActivation,o=new Proxy(new URLSearchParams(e.search),{get:function(e,t){return e.get(t)}});o.email&&(n.setReaderEmail(o.email),n.setAuthenticated(!0))}var a=l.contentWindow.document.querySelector("#newspack_modal_checkout");a&&r.observe(a),t.style.display="none"}))}))}))}))}},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",a):a());var i=window;for(var l in t)i[l]=t[l];t.__esModule&&Object.defineProperty(i,"__esModule",{value:!0})})();

package/dist/modal.rtl.css

@@ -1 +1 @@
-@-webkit-keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}to{transform:rotate(-1turn)}}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}to{transform:rotate(-1turn)}}.newspack-blocks-checkout-modal{position:fixed;top:0;right:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:99999}.newspack-blocks-checkout-modal__content{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:calc(100vw - 32px);max-width:580px;min-height:200px;max-height:calc(100vh - 32px);background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close){width:100%;height:100%;border:0;border-radius:5px}.newspack-blocks-checkout-modal__spinner{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__spinner>span{width:25px;height:25px;border:2px solid #fff;border-top-color:#767676;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.newspack-blocks-checkout-modal__close{position:absolute;top:0;left:0;padding:8px;border:0;background:transparent;color:#111;cursor:pointer}.newspack-blocks-checkout-modal__close:focus,.newspack-blocks-checkout-modal__close:hover{color:#767676}.newspack-blocks-checkout-modal__close svg{display:block}@media(max-width:600px){.newspack-blocks-checkout-modal__content{max-width:100%;width:100%;border-radius:0;top:auto;bottom:0;right:0;transform:none}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close){border-radius:0}}
+@-webkit-keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}to{transform:rotate(-1turn)}}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}to{transform:rotate(-1turn)}}.newspack-blocks-checkout-modal,.newspack-blocks-variation-modal{position:fixed;top:0;right:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:99999}.newspack-blocks-checkout-modal__content,.newspack-blocks-variation-modal__content{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:calc(100vw - 32px);max-width:580px;min-height:200px;max-height:calc(100vh - 32px);background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close),.newspack-blocks-variation-modal__content>:not(.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close){width:100%;height:100%;border:0;border-radius:5px}.newspack-blocks-checkout-modal__spinner,.newspack-blocks-variation-modal__spinner{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:5px}.newspack-blocks-checkout-modal__spinner>span,.newspack-blocks-variation-modal__spinner>span{width:25px;height:25px;border:2px solid #fff;border-top-color:#767676;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.newspack-blocks-checkout-modal__close,.newspack-blocks-variation-modal__close{position:absolute;top:0;left:0;padding:8px;border:0;background:transparent;color:#111;cursor:pointer}.newspack-blocks-checkout-modal__close:focus,.newspack-blocks-checkout-modal__close:hover,.newspack-blocks-variation-modal__close:focus,.newspack-blocks-variation-modal__close:hover{color:#767676}.newspack-blocks-checkout-modal__close svg,.newspack-blocks-variation-modal__close svg{display:block}.newspack-blocks-variation-modal__content{padding:32px}.newspack-blocks-variation-modal__content h3{margin:0 0 1em}.newspack-blocks-variation-modal__content p{font-size:.8em}.newspack-blocks-variation-modal__content form{margin:0 0 .5em}.newspack-blocks-variation-modal__content form:last-child{margin:0}.newspack-blocks-variation-modal__content form button{display:block;width:100%;padding:16px;margin:0;border:1px solid #ccc;background:transparent;color:#111;text-align:inherit;font-weight:inherit}.newspack-blocks-variation-modal__content form button>span{display:block}.newspack-blocks-variation-modal__content form button .summary{width:100%;display:flex;justify-content:space-between;align-items:baseline}.newspack-blocks-variation-modal__content form button .variation_name{font-weight:600}.newspack-blocks-variation-modal__content form button .description{padding-top:1em;margin-top:1em;font-size:.9em;border-top:1px solid #ccc}.newspack-blocks-variation-modal__content form button bdi{font-weight:600;font-size:1.8em}@media(max-width:600px){.newspack-blocks-checkout-modal__content,.newspack-blocks-variation-modal__content{max-width:100%;width:100%;border-radius:0;top:auto;bottom:0;right:0;transform:none}.newspack-blocks-checkout-modal__content>:not(.newspack-blocks-variation-modal__close,.newspack-blocks-checkout-modal__close),.newspack-blocks-variation-modal__content>:not(.newspack-blocks-variation-modal__close,.newspack-blocks-checkout-modal__close){border-radius:0}}

package/includes/class-modal-checkout.php

@@ -20,12 +20,20 @@ final class Modal_Checkout {
 	 */
 	private static $has_modal = false;
 
+	/**
+	 * Products that are being rendered a checkout modal for.
+	 *
+	 * @var true[] Product IDs as keys.
+	 */
+	private static $products = [];
+
 	/**
 	 * Initialize hooks.
 	 */
 	public static function init() {
 		add_action( 'template_redirect', [ __CLASS__, 'process_checkout_request' ] );
 		add_action( 'wp_footer', [ __CLASS__, 'render_modal_markup' ], 100 );
+		add_action( 'wp_footer', [ __CLASS__, 'render_variation_selection' ], 100 );
 		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'enqueue_scripts' ] );
 		add_filter( 'show_admin_bar', [ __CLASS__, 'show_admin_bar' ] );
 		add_action( 'template_include', [ __CLASS__, 'get_checkout_template' ] );
@@ -41,9 +49,13 @@ final class Modal_Checkout {
 	public static function process_checkout_request() {
 		$is_newspack_checkout = filter_input( INPUT_GET, 'newspack_checkout', FILTER_SANITIZE_NUMBER_INT );
 		$product_id           = filter_input( INPUT_GET, 'product_id', FILTER_SANITIZE_NUMBER_INT );
+		$variation_id         = filter_input( INPUT_GET, 'variation_id', FILTER_SANITIZE_NUMBER_INT );
 		if ( ! $is_newspack_checkout || ! $product_id ) {
 			return;
 		}
+		if ( $variation_id ) {
+			$product_id = $variation_id;
+		}
 
 		\WC()->cart->empty_cart();
 
@@ -162,6 +174,58 @@ final class Modal_Checkout {
 		<?php
 	}
 
+	/**
+	 * Render variation selection modal for variable products.
+	 */
+	public static function render_variation_selection() {
+		$products = array_keys( self::$products );
+		foreach ( $products as $product_id ) {
+			$product = wc_get_product( $product_id );
+			if ( ! $product->is_type( 'variable' ) ) {
+				continue;
+			}
+			?>
+			<div class="newspack-blocks-variation-modal" data-product-id="<?php echo esc_attr( $product_id ); ?>" style="display:none;">
+				<div class="newspack-blocks-variation-modal__content">
+					<a href="#" class="newspack-blocks-variation-modal__close">
+						<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
+							<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+						</svg>
+					</a>
+					<div class="newspack-blocks-variation-modal__selection" data-product-id="<?php echo esc_attr( $product_id ); ?>">
+						<h3><?php echo esc_html( $product->get_name() ); ?></h3>
+						<p><?php esc_html_e( 'Select an option below:', 'newspack-blocks' ); ?></p>
+						<?php
+						$variations = $product->get_available_variations( 'objects' );
+						foreach ( $variations as $variation ) {
+							$name        = $variation->get_formatted_variation_attributes( true );
+							$price       = $variation->get_price_html();
+							$description = $variation->get_variation_description();
+							?>
+							<form>
+								<input type="hidden" name="newspack_checkout" value="1" />
+								<input type="hidden" name="product_id" value="<?php echo esc_attr( $variation->get_id() ); ?>" />
+								<button>
+									<span class="summary">
+										<span class="price"><?php echo $price; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
+										<span class="variation_name"><?php echo esc_html( $name ); ?></span>
+									</span>
+									<?php if ( ! empty( $description ) ) : ?>
+										<span class="description"><?php echo esc_html( $description ); ?></span>
+									<?php endif; ?>
+								</button>
+							</form>
+							<?php
+						}
+						?>
+					</div>
+				</div>
+			</div>
+			<?php
+		}
+	}
+
 	/**
 	 * Enqueue scripts for the checkout page rendered in a modal.
 	 */
@@ -189,9 +253,14 @@ final class Modal_Checkout {
 
 	/**
 	 * Enqueue script for triggering modal checkout.
+	 *
+	 * @param int $product_id Product ID (optional).
 	 */
-	public static function enqueue_modal() {
+	public static function enqueue_modal( $product_id = null ) {
 		self::$has_modal = true;
+		if ( ! empty( $product_id ) ) {
+			self::$products[ $product_id ] = true;
+		}
 		wp_enqueue_script(
 			'newspack-blocks-modal',
 			plugins_url( 'dist/modal.js', \NEWSPACK_BLOCKS__PLUGIN_FILE ),

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.blog/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         1.68.2
+ * Version:         1.69.0-alpha.2
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '1.68.2' );
+define( 'NEWSPACK_BLOCKS__VERSION', '1.69.0-alpha.2' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "1.68.2",
+	"version": "1.69.0-alpha.2",
 	"author": "Automattic",
 	"devDependencies": {
-		"@rushstack/eslint-patch": "^1.2.0",
+		"@rushstack/eslint-patch": "^1.3.0",
 		"@testing-library/dom": "^8.20.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/lodash": "^4.14.194",
@@ -16,11 +16,11 @@
 		"newspack-scripts": "^5.1.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "npm:wp-prettier@^2.6.2-beta-1",
-		"stylelint": "^15.2.0"
+		"stylelint": "^15.6.2"
 	},
 	"description": "=== Newspack Blocks === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://example.com/ Tags: comments, spam Requires at least: 4.5 Tested up to: 5.1.1 Stable tag: 0.1.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html",
 	"dependencies": {
-		"@stripe/stripe-js": "^1.52.1",
+		"@stripe/stripe-js": "^1.53.0",
 		"classnames": "^2.3.2",
 		"lodash": "^4.17.21",
 		"newspack-components": "^2.1.0",
@@ -28,7 +28,7 @@
 		"redux": "^4.2.1",
 		"redux-saga": "^1.2.3",
 		"regenerator-runtime": "^0.13.11",
-		"swiper": "9.3.0"
+		"swiper": "9.3.2"
 	},
 	"scripts": {
 		"cm": "newspack-scripts commit",

package/src/block-styles/core/columns/view.scss

@@ -57,10 +57,7 @@ div.wp-block-columns {
 				&::after {
 					border-right-width: 1px;
 					border-top-width: 0;
-					bottom: 0;
-					left: auto;
-					right: -32px;
-					top: 0;
+					inset: 0 -32px 0 auto;
 				}
 			}
 		}
@@ -86,10 +83,7 @@ div.wp-block-columns {
 				&::after {
 					border-right-width: 1px;
 					border-top-width: 0;
-					bottom: 0;
-					left: auto;
-					right: -20px;
-					top: 0;
+					inset: 0 -20px 0 auto;
 
 					@include mixins.media( tablet ) {
 						right: -32px;

package/src/blocks/checkout-button/block.json

@@ -11,6 +11,13 @@
 		"product": {
 			"type": "string"
 		},
+		"variation": {
+			"type": "string"
+		},
+		"is_variable": {
+			"type": "boolean",
+			"default": false
+		},
 		"price": {
 			"type": "string"
 		},

package/src/blocks/checkout-button/edit.js

@@ -20,7 +20,9 @@ import {
 import {
 	PanelBody,
 	BaseControl,
+	CheckboxControl,
 	TextControl,
+	SelectControl,
 	FormTokenField,
 	Button,
 	Spinner,
@@ -33,6 +35,23 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import './edit.scss';
 
+function getVariationName( variation ) {
+	const attributes = [];
+	for ( const attribute of variation.attributes ) {
+		attributes.push( attribute.name + ': ' + attribute.option );
+	}
+	return attributes.join( ', ' );
+}
+
+function getNYP( product ) {
+	return {
+		isNYP: product?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
+		suggestedPrice: product?.meta_data?.find( meta => meta.key === '_suggested_price' )?.value,
+		minPrice: product?.meta_data?.find( meta => meta.key === '_min_price' )?.value,
+		maxPrice: product?.meta_data?.find( meta => meta.key === '_maximum_price' )?.value,
+	};
+}
+
 function ProductControl( props ) {
 	const [ inFlight, setInFlight ] = useState( false );
 	const [ suggestions, setSuggestions ] = useState( {} );
@@ -106,6 +125,7 @@ function ProductControl( props ) {
 							{ selected.name }
 						</Button>
 					</BaseControl>
+					{ props.children }
 				</>
 			) : (
 				<>
@@ -135,22 +155,48 @@ function ProductControl( props ) {
 
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
-	const { placeholder, style, text, product, price } = attributes;
+	const { placeholder, style, text, product, price, variation } = attributes;
 
+	const [ productData, setProductData ] = useState( {} );
+	const [ variations, setVariations ] = useState( [] );
 	const [ nyp, setNYP ] = useState( false );
+
 	function handleProduct( data ) {
-		const _nyp = {
-			isNYP: data?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
-			suggestedPrice: data?.meta_data?.find( meta => meta.key === '_suggested_price' )?.value,
-			minPrice: data?.meta_data?.find( meta => meta.key === '_min_price' )?.value,
-			maxPrice: data?.meta_data?.find( meta => meta.key === '_maximum_price' )?.value,
-		};
-		setNYP( _nyp );
-		if ( ! price ) {
-			setAttributes( { price: _nyp?.suggestedPrice } );
+		setProductData( data );
+
+		// Handle product variation data.
+		if ( data?.variations?.length ) {
+			setAttributes( { is_variable: true } );
+			apiFetch( { path: `/wc/v2/products/${ data.id }/variations` } )
+				.then( res => setVariations( res ) )
+				.catch( () => setVariations( [] ) );
+		} else {
+			setAttributes( { is_variable: false } );
+			setVariations( [] );
+		}
+
+		// Handle NYP data.
+		if ( ! variation ) {
+			setNYP( getNYP( data ) );
 		}
 	}
 
+	useEffect( () => {
+		if ( variation ) {
+			apiFetch( { path: `/wc/v2/products/${ product }/variations/${ variation }` } )
+				.then( res => setNYP( getNYP( res ) ) )
+				.catch( () => setNYP( {} ) );
+		} else {
+			setNYP( getNYP( productData ) );
+		}
+	}, [ variation ] );
+
+	useEffect( () => {
+		if ( ! price && nyp?.suggestedPrice ) {
+			setAttributes( { price: nyp.suggestedPrice } );
+		}
+	}, [ nyp ] );
+
 	function setButtonText( newText ) {
 		// Remove anchor tags from button text content.
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
@@ -200,9 +246,50 @@ function CheckoutButtonEdit( props ) {
 					<ProductControl
 						value={ product }
 						price={ price }
-						onChange={ value => setAttributes( { product: value } ) }
+						onChange={ value => setAttributes( { product: value, variation: '', price: '' } ) }
 						onProduct={ handleProduct }
-					/>
+					>
+						{ productData?.variations?.length > 0 && (
+							<>
+								<CheckboxControl
+									label={ __(
+										'Allow the reader to select the variation before checkout.',
+										'newspack-blocks'
+									) }
+									checked={ ! variation }
+									onChange={ value =>
+										setAttributes( {
+											variation: value ? '' : variations[ 0 ].id.toString(),
+											price: '',
+										} )
+									}
+								/>
+								{ variations.length ? (
+									<SelectControl
+										label={ __( 'Variation', 'newspack-blocks' ) }
+										help={ __(
+											'Select the product variation to be added to cart.',
+											'newspack-blocks'
+										) }
+										value={ variation }
+										disabled={ ! variation }
+										options={ [
+											{ label: '--', value: '' },
+											...variations.map( item => ( {
+												label: getVariationName( item ),
+												value: item.id,
+											} ) ),
+										] }
+										onChange={ value =>
+											setAttributes( { variation: value.toString(), price: '' } )
+										}
+									/>
+								) : (
+									<Spinner />
+								) }
+							</>
+						) }
+					</ProductControl>
 				</PanelBody>
 				{ nyp?.isNYP && (
 					<PanelBody title={ __( 'Name Your Price', 'newspack-blocks' ) }>

package/src/blocks/checkout-button/save.js

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const { textAlign, fontSize, style, text, product, price } = attributes;
+	const { textAlign, fontSize, style, text, product, price, variation, is_variable } = attributes;
 
 	if ( ! text || ! product ) {
 		return null;
@@ -58,6 +58,8 @@ export default function save( { attributes, className } ) {
 				<input type="hidden" name="product_id" value={ product } />
 				<input type="hidden" name="newspack_checkout" value="1" />
 				{ price && <input type="hidden" name="price" value={ price } /> }
+				{ variation && <input type="hidden" name="variation_id" value={ variation } /> }
+				{ is_variable && <input type="hidden" name="is_variable" value="1" /> }
 			</form>
 		</div>
 	);

package/src/blocks/checkout-button/view.php

@@ -29,7 +29,14 @@ add_action( 'init', __NAMESPACE__ . '\\register_block' );
  * @return string
  */
 function render_callback( $attributes, $content ) {
-	\Newspack_Blocks\Modal_Checkout::enqueue_modal();
+	if ( empty( $attributes['product'] ) ) {
+		return '';
+	}
+	$product_id = $attributes['product'];
+	if ( $attributes['is_variable'] && ! empty( $attributes['variation'] ) ) {
+		$product_id = $attributes['variation'];
+	}
+	\Newspack_Blocks\Modal_Checkout::enqueue_modal( $product_id );
 	\Newspack_Blocks::enqueue_view_assets( 'checkout-button' );
 	return $content;
 }

package/src/blocks/donate/styles/style-variations.scss

@@ -115,13 +115,10 @@
 			+ .freq-label {
 				&::after {
 					box-sizing: content-box;
-					bottom: 0.19rem;
 					content: '';
 					display: block;
-					left: 0.19rem;
+					inset: 0.19rem;
 					position: absolute;
-					right: 0.19rem;
-					top: 0.19rem;
 					z-index: -1;
 				}
 				&:hover {

package/src/blocks/homepage-articles/view.scss

@@ -307,13 +307,10 @@
 			position: relative;
 
 			.post-thumbnail {
-				bottom: 0;
-				left: 0;
+				inset: 0;
 				margin: 0;
 				overflow: hidden;
 				position: absolute;
-				right: 0;
-				top: 0;
 
 				img {
 					height: 100% !important;
@@ -325,12 +322,9 @@
 
 				&::after {
 					background: rgba( 0, 0, 0, 0.5 );
-					bottom: 0;
 					content: '';
-					left: 0;
+					inset: 0;
 					position: absolute;
-					right: 0;
-					top: 0;
 					z-index: 1;
 				}
 			}