@automattic/newspack-blocks 2.4.0 → 2.5.0-alpha.1

package/dist/frequencyBased.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'e9ad0b5b5f7cb110d2da07d847723c6d');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '64db686390f39306203d8a619e6659de');

package/dist/frequencyBased.css

@@ -1 +1 @@
-.wpbnbd--frequency-based{background:#fff;border:1px solid #ccc;color:#111;position:relative;width:100%}.wpbnbd--frequency-based input[type=radio]{left:-99999em;position:absolute}.wpbnbd--frequency-based input[readonly]{background-color:#f1f1f1;color:#666}.wpbnbd--frequency-based .freq-label,.wpbnbd--frequency-based .input-container,.wpbnbd--frequency-based .tier-label{display:block;font-weight:700;cursor:pointer}.wpbnbd--frequency-based .freq-label{box-sizing:border-box;overflow:hidden;white-space:nowrap;width:100%;z-index:1}.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 .76rem .76rem}@media only screen and (min-width:782px){.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 1.5rem 1.5rem}}.wpbnbd--frequency-based label.wpbnbd__button{text-transform:uppercase}.wpbnbd--frequency-based .thanks{color:#767676;font-size:.8em;margin:.38rem .76rem .76rem;display:none}@media only screen and (min-width:600px){.wpbnbd--frequency-based .thanks{display:block}}@media only screen and (min-width:782px){.wpbnbd--frequency-based .thanks{margin-left:1.5rem;margin-right:1.5rem}}.wpbnbd.tiered .tiers{margin:.38rem;display:none;flex-wrap:wrap;position:relative}@media only screen and (min-width:782px){.wpbnbd.tiered .tiers{margin:1.12rem 1.12rem .38rem}}.wpbnbd.tiered .tiers .tier-label{border:1px solid #ccc;border-radius:5px;margin:.38rem;padding:.38rem .76rem}.wpbnbd.tiered .tiers .tier-label:hover{background:#f1f1f1}.wpbnbd.tiered .tiers input[type=radio]:focus+.tier-label{background:#f1f1f1;outline:1px dotted currentcolor;outline-offset:-4px}.wpbnbd.tiered .tiers input[type=radio]:checked+.tier-label{background-color:#757575;border-color:transparent;color:#fff}.wpbnbd.tiered .tiers .odl{font-weight:700;left:.38rem;position:absolute;bottom:calc(1.6em + 1.1rem + 2px)}.wpbnbd.tiered .tiers input.other-input~.money-input,.wpbnbd.tiered .tiers input.other-input~.odl{display:none}.wpbnbd.tiered .tiers input.other-input:checked~.money-input{display:flex}.wpbnbd.tiered .tiers input.other-input:checked~.odl{display:block}.wpbnbd.tiered .tiers input.other-input:checked+label{margin-bottom:calc(3.2em + 1.86rem + 2px)}.wpbnbd.tiered .money-input{bottom:.38rem;left:.38rem;position:absolute}.wpbnbd.untiered .input-container{margin:.76rem;display:none}@media only screen and (min-width:782px){.wpbnbd.untiered .input-container{margin:1.5rem 1.5rem .76rem}}.wpbnbd.untiered input[type=radio]:checked~.input-container{display:block}.wpbnbd .money-input{display:flex;align-items:center;position:relative;max-width:200px;background-color:#fff;border-radius:3px;border:1px solid #ccc}.wpbnbd .money-input[focus-within]{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input:focus-within{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input .currency{cursor:default;font-size:.8em;padding-left:.5em}.wpbnbd .money-input input[type=number]{background:none;max-width:174px}.wpbnbd .money-input input[type=number],.wpbnbd .money-input input[type=number]:focus{border:none;outline:none;box-shadow:none}.wpbnbd .frequencies{position:relative;font-size:.7em;padding-top:2.65em}@media only screen and (min-width:600px){.wpbnbd .frequencies{font-size:.8em}}.wpbnbd .frequency .freq-label{position:absolute;top:0;left:0;border-width:0 0 1px}.wpbnbd .frequency input[type=radio]:checked+.freq-label{color:inherit;border-bottom-color:transparent}.wpbnbd .frequency input[type=radio]:checked+.freq-label:hover{background:#fff}.wpbnbd .frequency input[type=radio]:checked~.tiers{display:flex}.wpbnbd .frequency input[type=radio]:focus+.freq-label{text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:1px}.wpbnbd .frequency:nth-of-type(3) .freq-label{left:66.66%}.wpbnbd-frequencies--2.wpbnbd .frequency .freq-label{width:50%}.wpbnbd-frequencies--2.wpbnbd .frequency:nth-of-type(2) .freq-label{border-left-width:1px;left:50%;top:0}.wpbnbd-frequencies--3.wpbnbd .frequency .freq-label{width:33.33%}.wpbnbd-frequencies--3.wpbnbd .frequency:nth-of-type(2) .freq-label{border-left-width:1px;border-right-width:1px;left:33.33%;top:0}
+.wpbnbd--frequency-based{background:#fff;border:1px solid #ccc;color:#111;position:relative;width:100%}.wpbnbd--frequency-based input[type=radio]{position:absolute;left:-99999em}.wpbnbd--frequency-based input[type=radio][name=donation_frequency],.wpbnbd--frequency-based input[type=radio][name=donation_frequency]+label{display:none}.wpbnbd--frequency-based input[readonly]{background-color:#f1f1f1;color:#666}.wpbnbd--frequency-based .freq-label,.wpbnbd--frequency-based .input-container,.wpbnbd--frequency-based .tier-label{display:block;font-weight:700;cursor:pointer}.wpbnbd--frequency-based .freq-label{box-sizing:border-box;overflow:hidden;white-space:nowrap;width:100%;z-index:1}.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 .76rem .76rem}@media only screen and (min-width:782px){.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 1.5rem 1.5rem}}.wpbnbd--frequency-based .submit-button:disabled,.wpbnbd--frequency-based button:disabled{opacity:.5}.wpbnbd--frequency-based .wpbnbd__button{font-size:16px;text-transform:uppercase}.wpbnbd--frequency-based .thanks{color:#767676;font-size:.8em;margin:.38rem .76rem .76rem;display:none}@media only screen and (min-width:600px){.wpbnbd--frequency-based .thanks{display:block}}@media only screen and (min-width:782px){.wpbnbd--frequency-based .thanks{margin-left:1.5rem;margin-right:1.5rem}}.wpbnbd.tiered .tiers{margin:.38rem;display:none;flex-wrap:wrap;position:relative}@media only screen and (min-width:782px){.wpbnbd.tiered .tiers{margin:1.12rem 1.12rem .38rem}}.wpbnbd.tiered .tiers .tier-label{border:1px solid #ccc;border-radius:5px;margin:.38rem;padding:.38rem .76rem}.wpbnbd.tiered .tiers .tier-label:hover{background:#f1f1f1}.wpbnbd.tiered .tiers input[type=radio]:focus+.tier-label{background:#f1f1f1;outline:1px dotted currentcolor;outline-offset:-4px}.wpbnbd.tiered .tiers input[type=radio]:checked+.tier-label{background-color:#757575;border-color:transparent;color:#fff}.wpbnbd.tiered .tiers .odl{font-weight:700;left:.38rem;position:absolute;bottom:calc(1.6em + 1.1rem + 2px)}.wpbnbd.tiered .tiers input.other-input~.money-input,.wpbnbd.tiered .tiers input.other-input~.odl{display:none}.wpbnbd.tiered .tiers input.other-input:checked~.money-input{display:flex}.wpbnbd.tiered .tiers input.other-input:checked~.odl{display:block}.wpbnbd.tiered .tiers input.other-input:checked+label{margin-bottom:calc(3.2em + 1.86rem + 2px)}.wpbnbd.tiered .money-input{bottom:.38rem;left:.38rem;position:absolute}.wpbnbd.untiered .input-container{margin:.76rem;display:none}@media only screen and (min-width:782px){.wpbnbd.untiered .input-container{margin:1.5rem 1.5rem .76rem}}.wpbnbd.untiered input[type=radio]:checked~.input-container{display:block}.wpbnbd .money-input{display:flex;align-items:center;position:relative;max-width:200px;background-color:#fff;border-radius:3px;border:1px solid #ccc}.wpbnbd .money-input[focus-within]{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input:focus-within{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input .currency{cursor:default;font-size:.8em;padding-left:.5em}.wpbnbd .money-input input[type=number]{background:none;max-width:174px}.wpbnbd .money-input input[type=number],.wpbnbd .money-input input[type=number]:focus{border:none;outline:none;box-shadow:none}.wpbnbd .frequencies{position:relative;font-size:.7em}@media only screen and (min-width:600px){.wpbnbd .frequencies{font-size:.8em}}.wpbnbd .frequency input[type=radio]:checked~.tiers,.wpbnbd .tab-container{display:flex}.wpbnbd .tab-container .freq-label{border-radius:0;margin:0}.wpbnbd .tab-container .freq-label.wpbnbd__button--active{color:#111}.wpbnbd .tab-container .freq-label:focus{outline:0;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:1px}

package/dist/frequencyBased.js

@@ -1 +1 @@
-(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{processFrequencyBasedElements:()=>o});var n,r=function(e){var t=e.querySelectorAll(".tiers");if(null!=t&&t.length){var n=e.querySelectorAll('input[name="donation_frequency"]');t.forEach((function(e){var t=e.querySelectorAll('input[type="radio"]'),r=e.querySelector(".money-input input");if(null!=t&&t.length&&r){var o=r.getAttribute("value"),u=function(){r.value=o||""};t.forEach((function(e){e.addEventListener("change",u)})),n.forEach((function(e){e.addEventListener("change",u)}))}}))}},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=e.querySelectorAll(".wpbnbd--frequency-based");t.forEach((function(e){r(e)}))};"undefined"!=typeof window&&(n=function(){return o()},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",n):n()));var u=window;for(var a in t)u[a]=t[a];t.__esModule&&Object.defineProperty(u,"__esModule",{value:!0})})();
+(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{processFrequencyBasedElements:()=>a});var n,r=function(e){var t=e.querySelectorAll(".tiers");if(null!=t&&t.length){var n=e.querySelectorAll('input[name="donation_frequency"]'),r=e.querySelector('button[type="submit"]');t.forEach((function(e){var t=e.querySelectorAll('input[type="radio"]'),o=e.querySelector(".money-input input");if(null!=t&&t.length&&o){var i=o.getAttribute("value"),a=function(){o.value=i||""},u=function(){var t=e.querySelector('input[type="radio"]:checked');t&&("other"!==t.value||o.value?null==r||r.removeAttribute("disabled"):null==r||r.setAttribute("disabled","disabled"))};o.addEventListener("keyup",u),u(),t.forEach((function(e){e.addEventListener("change",a),e.addEventListener("change",u)})),n.forEach((function(e){e.addEventListener("change",a),e.addEventListener("change",u)}))}}))}},o=function(e){var t,n=e.querySelectorAll('div[role="tablist"] [role="tab"]'),r=e.querySelectorAll('div[role="tabpanel"]'),o=e.querySelectorAll('input[type="radio"][name="donation_frequency"]'),a=(null===(t=Array.from(o).find((function(e){return e.checked})))||void 0===t?void 0:t.id)||null;if(a){var u,d="tab-".concat(a);null===(u=document.getElementById(d))||void 0===u||u.setAttribute("aria-selected","true")}n.forEach((function(e){e.addEventListener("click",(function(){i(e,n,o,r)}))}))},i=function(e,t,n,r){t.forEach((function(t){e===t?(t.setAttribute("aria-selected","true"),t.classList.add("wpbnbd__button--active")):(t.setAttribute("aria-selected","false"),t.classList.remove("wpbnbd__button--active"))}));var o=(e.id||"").replace("tab-","");n.forEach((function(e){e.checked=o===e.id})),r.forEach((function(t){e.getAttribute("aria-controls")===t.id?t.setAttribute("tabindex","0"):t.removeAttribute("tabindex")}))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=e.querySelectorAll(".wpbnbd--frequency-based");t.forEach((function(e){r(e),o(e)}))};"undefined"!=typeof window&&(n=function(){return a()},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",n):n()));var u=window;for(var d in t)u[d]=t[d];t.__esModule&&Object.defineProperty(u,"__esModule",{value:!0})})();

package/dist/frequencyBased.rtl.css

@@ -1 +1 @@
-.wpbnbd--frequency-based{background:#fff;border:1px solid #ccc;color:#111;position:relative;width:100%}.wpbnbd--frequency-based input[type=radio]{right:-99999em;position:absolute}.wpbnbd--frequency-based input[readonly]{background-color:#f1f1f1;color:#666}.wpbnbd--frequency-based .freq-label,.wpbnbd--frequency-based .input-container,.wpbnbd--frequency-based .tier-label{display:block;font-weight:700;cursor:pointer}.wpbnbd--frequency-based .freq-label{box-sizing:border-box;overflow:hidden;white-space:nowrap;width:100%;z-index:1}.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 .76rem .76rem}@media only screen and (min-width:782px){.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 1.5rem 1.5rem}}.wpbnbd--frequency-based label.wpbnbd__button{text-transform:uppercase}.wpbnbd--frequency-based .thanks{color:#767676;font-size:.8em;margin:.38rem .76rem .76rem;display:none}@media only screen and (min-width:600px){.wpbnbd--frequency-based .thanks{display:block}}@media only screen and (min-width:782px){.wpbnbd--frequency-based .thanks{margin-right:1.5rem;margin-left:1.5rem}}.wpbnbd.tiered .tiers{margin:.38rem;display:none;flex-wrap:wrap;position:relative}@media only screen and (min-width:782px){.wpbnbd.tiered .tiers{margin:1.12rem 1.12rem .38rem}}.wpbnbd.tiered .tiers .tier-label{border:1px solid #ccc;border-radius:5px;margin:.38rem;padding:.38rem .76rem}.wpbnbd.tiered .tiers .tier-label:hover{background:#f1f1f1}.wpbnbd.tiered .tiers input[type=radio]:focus+.tier-label{background:#f1f1f1;outline:1px dotted currentcolor;outline-offset:-4px}.wpbnbd.tiered .tiers input[type=radio]:checked+.tier-label{background-color:#757575;border-color:transparent;color:#fff}.wpbnbd.tiered .tiers .odl{font-weight:700;right:.38rem;position:absolute;bottom:calc(1.6em + 1.1rem + 2px)}.wpbnbd.tiered .tiers input.other-input~.money-input,.wpbnbd.tiered .tiers input.other-input~.odl{display:none}.wpbnbd.tiered .tiers input.other-input:checked~.money-input{display:flex}.wpbnbd.tiered .tiers input.other-input:checked~.odl{display:block}.wpbnbd.tiered .tiers input.other-input:checked+label{margin-bottom:calc(3.2em + 1.86rem + 2px)}.wpbnbd.tiered .money-input{bottom:.38rem;right:.38rem;position:absolute}.wpbnbd.untiered .input-container{margin:.76rem;display:none}@media only screen and (min-width:782px){.wpbnbd.untiered .input-container{margin:1.5rem 1.5rem .76rem}}.wpbnbd.untiered input[type=radio]:checked~.input-container{display:block}.wpbnbd .money-input{display:flex;align-items:center;position:relative;max-width:200px;background-color:#fff;border-radius:3px;border:1px solid #ccc}.wpbnbd .money-input[focus-within]{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input:focus-within{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input .currency{cursor:default;font-size:.8em;padding-right:.5em}.wpbnbd .money-input input[type=number]{background:none;max-width:174px}.wpbnbd .money-input input[type=number],.wpbnbd .money-input input[type=number]:focus{border:none;outline:none;box-shadow:none}.wpbnbd .frequencies{position:relative;font-size:.7em;padding-top:2.65em}@media only screen and (min-width:600px){.wpbnbd .frequencies{font-size:.8em}}.wpbnbd .frequency .freq-label{position:absolute;top:0;right:0;border-width:0 0 1px}.wpbnbd .frequency input[type=radio]:checked+.freq-label{color:inherit;border-bottom-color:transparent}.wpbnbd .frequency input[type=radio]:checked+.freq-label:hover{background:#fff}.wpbnbd .frequency input[type=radio]:checked~.tiers{display:flex}.wpbnbd .frequency input[type=radio]:focus+.freq-label{text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:1px}.wpbnbd .frequency:nth-of-type(3) .freq-label{right:66.66%}.wpbnbd-frequencies--2.wpbnbd .frequency .freq-label{width:50%}.wpbnbd-frequencies--2.wpbnbd .frequency:nth-of-type(2) .freq-label{border-right-width:1px;right:50%;top:0}.wpbnbd-frequencies--3.wpbnbd .frequency .freq-label{width:33.33%}.wpbnbd-frequencies--3.wpbnbd .frequency:nth-of-type(2) .freq-label{border-right-width:1px;border-left-width:1px;right:33.33%;top:0}
+.wpbnbd--frequency-based{background:#fff;border:1px solid #ccc;color:#111;position:relative;width:100%}.wpbnbd--frequency-based input[type=radio]{position:absolute;right:-99999em}.wpbnbd--frequency-based input[type=radio][name=donation_frequency],.wpbnbd--frequency-based input[type=radio][name=donation_frequency]+label{display:none}.wpbnbd--frequency-based input[readonly]{background-color:#f1f1f1;color:#666}.wpbnbd--frequency-based .freq-label,.wpbnbd--frequency-based .input-container,.wpbnbd--frequency-based .tier-label{display:block;font-weight:700;cursor:pointer}.wpbnbd--frequency-based .freq-label{box-sizing:border-box;overflow:hidden;white-space:nowrap;width:100%;z-index:1}.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 .76rem .76rem}@media only screen and (min-width:782px){.wpbnbd--frequency-based .submit-button,.wpbnbd--frequency-based button{margin:0 1.5rem 1.5rem}}.wpbnbd--frequency-based .submit-button:disabled,.wpbnbd--frequency-based button:disabled{opacity:.5}.wpbnbd--frequency-based .wpbnbd__button{font-size:16px;text-transform:uppercase}.wpbnbd--frequency-based .thanks{color:#767676;font-size:.8em;margin:.38rem .76rem .76rem;display:none}@media only screen and (min-width:600px){.wpbnbd--frequency-based .thanks{display:block}}@media only screen and (min-width:782px){.wpbnbd--frequency-based .thanks{margin-right:1.5rem;margin-left:1.5rem}}.wpbnbd.tiered .tiers{margin:.38rem;display:none;flex-wrap:wrap;position:relative}@media only screen and (min-width:782px){.wpbnbd.tiered .tiers{margin:1.12rem 1.12rem .38rem}}.wpbnbd.tiered .tiers .tier-label{border:1px solid #ccc;border-radius:5px;margin:.38rem;padding:.38rem .76rem}.wpbnbd.tiered .tiers .tier-label:hover{background:#f1f1f1}.wpbnbd.tiered .tiers input[type=radio]:focus+.tier-label{background:#f1f1f1;outline:1px dotted currentcolor;outline-offset:-4px}.wpbnbd.tiered .tiers input[type=radio]:checked+.tier-label{background-color:#757575;border-color:transparent;color:#fff}.wpbnbd.tiered .tiers .odl{font-weight:700;right:.38rem;position:absolute;bottom:calc(1.6em + 1.1rem + 2px)}.wpbnbd.tiered .tiers input.other-input~.money-input,.wpbnbd.tiered .tiers input.other-input~.odl{display:none}.wpbnbd.tiered .tiers input.other-input:checked~.money-input{display:flex}.wpbnbd.tiered .tiers input.other-input:checked~.odl{display:block}.wpbnbd.tiered .tiers input.other-input:checked+label{margin-bottom:calc(3.2em + 1.86rem + 2px)}.wpbnbd.tiered .money-input{bottom:.38rem;right:.38rem;position:absolute}.wpbnbd.untiered .input-container{margin:.76rem;display:none}@media only screen and (min-width:782px){.wpbnbd.untiered .input-container{margin:1.5rem 1.5rem .76rem}}.wpbnbd.untiered input[type=radio]:checked~.input-container{display:block}.wpbnbd .money-input{display:flex;align-items:center;position:relative;max-width:200px;background-color:#fff;border-radius:3px;border:1px solid #ccc}.wpbnbd .money-input[focus-within]{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input:focus-within{border-color:#111;outline:thin solid rgba(17,17,17,.15);outline-offset:-4px}.wpbnbd .money-input .currency{cursor:default;font-size:.8em;padding-right:.5em}.wpbnbd .money-input input[type=number]{background:none;max-width:174px}.wpbnbd .money-input input[type=number],.wpbnbd .money-input input[type=number]:focus{border:none;outline:none;box-shadow:none}.wpbnbd .frequencies{position:relative;font-size:.7em}@media only screen and (min-width:600px){.wpbnbd .frequencies{font-size:.8em}}.wpbnbd .frequency input[type=radio]:checked~.tiers,.wpbnbd .tab-container{display:flex}.wpbnbd .tab-container .freq-label{border-radius:0;margin:0}.wpbnbd .tab-container .freq-label.wpbnbd__button--active{color:#111}.wpbnbd .tab-container .freq-label:focus{outline:0;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:1px}

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         2.4.0
+ * Version:         2.5.0-alpha.1
  *
  * @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', '2.4.0' );
+define( 'NEWSPACK_BLOCKS__VERSION', '2.5.0-alpha.1' );
 
 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,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.4.0",
+	"version": "2.5.0-alpha.1",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.5.1",

package/src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 import { RichText } from '@wordpress/block-editor';
 
@@ -68,6 +68,8 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const isRenderingStripePaymentForm =
 		window.newspack_blocks_data?.is_rendering_stripe_payment_form;
 
+	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
+
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
 		<>
 			<input
@@ -75,22 +77,39 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				value={ frequencySlug }
 				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
 				name="donation_frequency"
-				defaultChecked={ frequencySlug === attributes.defaultFrequency }
+				checked={ frequencySlug === selectedFrequency }
+				onChange={ evt => setSelectedFrequency( evt.target.value as 'once' | 'month' | 'year' ) }
 			/>
-			<label
-				htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }
-				className="wpbnbd__button freq-label"
-			>
+			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>
 				{ FREQUENCIES[ frequencySlug ] }
 			</label>
 		</>
 	);
 
+	const renderTab = ( frequencySlug: DonationFrequencySlug ) => (
+		<button
+			key={ frequencySlug }
+			role="tab"
+			className={ classNames( 'wpbnbd__button freq-label', {
+				'wpbnbd__button--active': frequencySlug === selectedFrequency,
+			} ) }
+			id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
+			onClick={ evt => {
+				evt.preventDefault();
+				setSelectedFrequency( frequencySlug );
+			} }
+		>
+			{ FREQUENCIES[ frequencySlug ] }
+		</button>
+	);
+
+	// This code is fired on tab select and updates aria elements, tabindex states, and radio buttons
 	const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' );
 
 	const renderUntieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
@@ -123,6 +142,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const renderTieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
@@ -166,12 +186,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 												</label>
 												<div className="wp-block-newspack-blocks-donate__money-input money-input">
 													<span className="currency">{ settings.currencySymbol }</span>
-													<AmountValueInput
-														{ ...props }
-														frequencySlug={ frequencySlug }
-														tierIndex={ index }
-														id={ `${ id }-other-input` }
-													/>
+													<input type="number" readOnly />
 												</div>
 											</>
 										) : null }

package/src/blocks/donate/edit/index.tsx

@@ -51,7 +51,6 @@ const TIER_LABELS = [
 	__( 'Low-tier', 'newspack-blocks' ),
 	__( 'Mid-tier', 'newspack-blocks' ),
 	__( 'High-tier', 'newspack-blocks' ),
-	__( 'Other', 'newspack-blocks' ),
 ];
 
 const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
@@ -302,21 +301,27 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 																false
 															) && renderMinAmountWarning() }
 
-															{ amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => (
-																<AmountValueInput
-																	ignoreMinimumAmount
-																	{ ...componentProps }
-																	key={ `amount-${ frequency }-${ tierIndex }` }
-																	frequencySlug={ frequency }
-																	tierIndex={ tierIndex }
-																	label={ TIER_LABELS[ tierIndex ] }
-																	id={ `${ frequency }-${ tierIndex }-amount` }
-																	disabled={
-																		isTierBasedLayoutEnabled &&
-																		tierIndex === DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX
-																	}
-																/>
-															) ) }
+															{ amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => {
+																// The "Other" tier is no longer customizable and should always render empty for tiered layout.
+																if ( tierIndex === 3 ) {
+																	return null;
+																}
+																return (
+																	<AmountValueInput
+																		ignoreMinimumAmount
+																		{ ...componentProps }
+																		key={ `amount-${ frequency }-${ tierIndex }` }
+																		frequencySlug={ frequency }
+																		tierIndex={ tierIndex }
+																		label={ TIER_LABELS[ tierIndex ] }
+																		id={ `${ frequency }-${ tierIndex }-amount` }
+																		disabled={
+																			isTierBasedLayoutEnabled &&
+																			tierIndex === DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX
+																		}
+																	/>
+																);
+															} ) }
 														</div>
 													) }
 												</Fragment>

package/src/blocks/donate/frequency-based/index.ts

@@ -25,12 +25,13 @@ function domReady( callback: () => void ): void {
 	document.addEventListener( 'DOMContentLoaded', callback );
 }
 
-const resetOtherValue = ( container: HTMLElement ) => {
+const handleOtherValue = ( container: HTMLElement ) => {
 	const frequencies = container.querySelectorAll( '.tiers' );
 	if ( ! frequencies?.length ) {
 		return;
 	}
 	const frequencyInputs = container.querySelectorAll( 'input[name="donation_frequency"]' );
+	const submitButton = container.querySelector( 'button[type="submit"]' );
 	frequencies.forEach( frequency => {
 		const tiers = frequency.querySelectorAll( 'input[type="radio"]' );
 		const input = <HTMLInputElement>frequency.querySelector( '.money-input input' );
@@ -41,21 +42,100 @@ const resetOtherValue = ( container: HTMLElement ) => {
 		const reset = () => {
 			input.value = originalValue || '';
 		};
+		const toggleSubmit = () => {
+			const checkedTier = <HTMLInputElement>(
+				frequency.querySelector( 'input[type="radio"]:checked' )
+			);
+			if ( ! checkedTier ) {
+				return;
+			}
+			if ( checkedTier.value === 'other' && ! input.value ) {
+				submitButton?.setAttribute( 'disabled', 'disabled' );
+			} else {
+				submitButton?.removeAttribute( 'disabled' );
+			}
+		};
+		input.addEventListener( 'keyup', toggleSubmit );
+		toggleSubmit();
 		tiers.forEach( tierInput => {
 			tierInput.addEventListener( 'change', reset );
+			tierInput.addEventListener( 'change', toggleSubmit );
 		} );
 		frequencyInputs.forEach( frequencyInput => {
 			frequencyInput.addEventListener( 'change', reset );
+			frequencyInput.addEventListener( 'change', toggleSubmit );
+		} );
+	} );
+};
+
+const addAccessibleTabs = ( container: HTMLElement ) => {
+	// Get the block's tabs, panels, and radio buttons associated with donation frequency.
+	const tabList = container.querySelectorAll(
+		'div[role="tablist"] [role="tab"]'
+	) as NodeListOf< HTMLElement >;
+	const panels = container.querySelectorAll( 'div[role="tabpanel"]' ) as NodeListOf< HTMLElement >;
+	const radioButtons = container.querySelectorAll(
+		'input[type="radio"][name="donation_frequency"]'
+	) as NodeListOf< HTMLInputElement >;
+	// Figure out which radio button is currently selected.
+	const checkedRadioId =
+		Array.from( radioButtons ).find( ( radio: HTMLInputElement ) => radio.checked )?.id || null;
+
+	// Set the tab associated to the radio button to selected.
+	if ( checkedRadioId ) {
+		const selectedTabId = `tab-${ checkedRadioId }`;
+		document.getElementById( selectedTabId )?.setAttribute( 'aria-selected', 'true' );
+	}
+
+	// Add a click event listener to each tab.
+	tabList.forEach( ( tab: HTMLElement ) => {
+		tab.addEventListener( 'click', function () {
+			selectTab( tab, tabList, radioButtons, panels );
 		} );
 	} );
 };
 
+const selectTab = (
+	tab: HTMLElement,
+	tabList: NodeListOf< HTMLElement >,
+	radioButtons: NodeListOf< HTMLInputElement >,
+	panels: NodeListOf< HTMLElement >
+) => {
+	// Loop through tabs and set them as selected or not selected:
+	tabList.forEach( ( thisTab: HTMLElement ) => {
+		if ( tab === thisTab ) {
+			thisTab.setAttribute( 'aria-selected', 'true' );
+			thisTab.classList.add( 'wpbnbd__button--active' );
+		} else {
+			thisTab.setAttribute( 'aria-selected', 'false' );
+			thisTab.classList.remove( 'wpbnbd__button--active' );
+		}
+	} );
+
+	// Update the underlying radio button.
+	const tabId = tab.id || '';
+	const frequencyId = tabId.replace( 'tab-', '' );
+	radioButtons.forEach( ( radio: HTMLInputElement ) => {
+		radio.checked = frequencyId === radio.id;
+	} );
+
+	// Loop through the panels and set tabindex 0 on the selected panel; remove it from others.
+	panels.forEach( ( panel: HTMLElement ) => {
+		if ( tab.getAttribute( 'aria-controls' ) === panel.id ) {
+			panel.setAttribute( 'tabindex', '0' );
+		} else {
+			panel.removeAttribute( 'tabindex' );
+		}
+	} );
+};
+
 export const processFrequencyBasedElements = ( parentEl = document ) => {
 	const elements = parentEl.querySelectorAll(
 		'.wpbnbd--frequency-based'
 	) as NodeListOf< HTMLElement >;
 	elements.forEach( container => {
-		resetOtherValue( container );
+		handleOtherValue( container );
+		addAccessibleTabs( container );
 	} );
 };
 

package/src/blocks/donate/frequency-based/style.scss

@@ -9,9 +9,16 @@
 	position: relative;
 	width: 100%;
 
+	// Hide some radio buttons absolutely.
 	input[type='radio'] {
-		left: -99999em;
 		position: absolute;
+		left: -99999em;
+
+		// And hide the ones being replaced by tabs completely.
+		&[name='donation_frequency'],
+		&[name='donation_frequency'] + label {
+			display: none;
+		}
 	}
 
 	input[readonly] {
@@ -42,9 +49,13 @@
 		@include mixins.media( tablet ) {
 			margin: 0 1.5rem 1.5rem;
 		}
+		&:disabled {
+			opacity: 0.5;
+		}
 	}
-	label.wpbnbd {
+	.wpbnbd {
 		&__button {
+			font-size: 16px;
 			text-transform: uppercase;
 		}
 	}
@@ -188,76 +199,35 @@
 	}
 }
 
-.wpbnbd .frequencies {
-	position: relative;
-	font-size: variables.$font__size-xs;
-	@include mixins.media( mobile ) {
-		font-size: variables.$font__size-sm;
+.wpbnbd {
+	.frequencies {
+		position: relative;
+		font-size: variables.$font__size-xs;
+		@include mixins.media( mobile ) {
+			font-size: variables.$font__size-sm;
+		}
 	}
 
-	padding-top: 2.65em;
-}
-
-.wpbnbd .frequency {
-	.freq-label {
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-width: 0 0 1px;
+	.frequency input[type='radio']:checked ~ .tiers {
+		display: flex;
 	}
 
-	input[type='radio'] {
-		&:checked {
-			+ .freq-label {
-				color: inherit;
-				border-bottom-color: transparent;
-
-				&:hover {
-					background: colors.$color__background-body;
-				}
-			}
+	.tab-container {
+		display: flex;
+		.freq-label {
+			border-radius: 0;
+			margin: 0;
 
-			~ .tiers {
-				display: flex;
+			&.wpbnbd__button--active {
+				color: colors.$color__text-main;
 			}
-		}
-
-		&:focus + .freq-label {
-			text-decoration: underline;
-			text-decoration-style: dotted;
-			text-decoration-thickness: 1px;
-		}
-	}
 
-	&:nth-of-type( 3 ) .freq-label {
-		left: 66.66%;
-	}
-}
-
-.wpbnbd-frequencies {
-	&--2 {
-		&.wpbnbd .frequency {
-			.freq-label {
-				width: 50%;
-			}
-			&:nth-of-type( 2 ) .freq-label {
-				border-left-width: 1px;
-				left: 50%;
-				top: 0;
+			&:focus {
+				outline: 0;
+				text-decoration: underline;
+				text-decoration-style: dotted;
+				text-decoration-thickness: 1px;
 			}
 		}
 	}
-	&--3 {
-		&.wpbnbd .frequency {
-			.freq-label {
-				width: 33.33%;
-			}
-			&:nth-of-type( 2 ) .freq-label {
-				border-left-width: 1px;
-				border-right-width: 1px;
-				left: 33.33%;
-				top: 0;
-			}
-		}
-	}
-}
+}

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php

@@ -38,16 +38,41 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 			);
 			?>
 		/>
-		<label
-			for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-			class='wpbnbd__button freq-label'
-		>
+		<label for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'>
 			<?php echo esc_html( $frequency_name ); ?>
 		</label>
 		<?php
 		return ob_get_clean();
 	}
 
+	/**
+	 * Renders the frequency selection of the donation form in accessible tabs.
+	 *
+	 * @param string $frequency_slug Frequency slug.
+	 * @param string $frequency_name Frequency name.
+	 * @param number $uid Unique ID.
+	 * @param array  $configuration The donations settings.
+	 *
+	 * @return string
+	 */
+	private static function render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ) {
+		ob_start();
+		?>
+		<button
+			role='tab'
+			type='button'
+			aria-controls='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			class="wpbnbd__button freq-label<?php echo esc_attr( $frequency_slug === $configuration['defaultFrequency'] ? ' wpbnbd__button--active' : '' ); ?>"
+			data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			<?php echo "aria-selected='" . ( $frequency_slug === $configuration['defaultFrequency'] ? 'true' : 'false' ) . "'"; ?>
+			>
+				<?php echo esc_html( $frequency_name ); ?>
+		</button>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Renders the footer of the donation form.
 	 *
@@ -108,12 +133,25 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+
+						<div role='tablist' class='tab-container'>
+							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+							<?php endforeach; ?>
+						</div>
+
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 							<?php
 								$formatted_amount = $configuration['amounts'][ $frequency_slug ][3];
 							?>
 
-							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
+							<div
+								class='wp-block-newspack-blocks-donate__frequency frequency'
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+								>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 								<div class='input-container'>
 									<label
@@ -157,9 +195,21 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+						<div role='tablist' class='tab-container'>
+							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+							<?php endforeach; ?>
+						</div>
+
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 
-							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
+							<div
+								class='wp-block-newspack-blocks-donate__frequency frequency'
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+								>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 								<div class='wp-block-newspack-blocks-donate__tiers tiers'>
 									<?php foreach ( $suggested_amounts[ $frequency_slug ] as $index => $amount ) : ?>
@@ -194,7 +244,6 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 														type='number'
 														min='<?php echo esc_attr( $configuration['minimumDonation'] ); ?>'
 														name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_other'
-														value='<?php echo esc_attr( $amount ); ?>'
 														id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
 													/>
 												</div>

package/src/blocks/donate/styles/editor.scss

@@ -23,7 +23,7 @@
 		span {
 			margin-bottom: 7px;
 			display: inline-block;
-			width: 48%;
+			width: 32%;
 		}
 		input {
 			max-width: 100%;