newspack-components 4.6.1 → 4.6.2-hotfix-wizard-stale-data-after-plugin-install.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## newspack-components [4.6.2-hotfix-wizard-stale-data-after-plugin-install.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.2-hotfix-wizard-stale-data-after-plugin-install.1...newspack-components@4.6.2-hotfix-wizard-stale-data-after-plugin-install.2) (2026-08-17)
+
+
+### Bug Fixes
+
+* three WordPress 7.1 regressions in Newsletters ([#876](https://github.com/Automattic/newspack-workspace/issues/876)) ([#894](https://github.com/Automattic/newspack-workspace/issues/894)) ([3b6ac6c](https://github.com/Automattic/newspack-workspace/commit/3b6ac6cce050f2d70f73df1d98f175de1f19a759))
+
 ## newspack-components [4.6.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.0...newspack-components@4.6.1) (2026-08-17)
 
 

package/dist/cjs/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/dist/cjs/wizard/index.js

@@ -160,6 +160,8 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = (0, _data.useSelect)(function (select) {
     return select(_store.WIZARD_STORE_NAMESPACE).getNotices();
   });
+  var _useDispatch2 = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
+    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -188,6 +190,30 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+
+  // The data fetch above runs once per mount, while the required plugins are
+  // still missing — endpoints that need them answer empty or error outright,
+  // and either way the resolver records that as the answer. So the installer
+  // has to trigger a refetch, or the section mounts against it and renders
+  // nothing until the user saves. Requirements already met on mount are left
+  // alone: that fetch saw the real site, and refetching would cost every such
+  // wizard a second request on every load.
+  var requirementsWereUnmet = (0, _element.useRef)(false);
+  var onPluginStatus = function onPluginStatus(_ref3) {
+    var complete = _ref3.complete;
+    // Leave the installer first: whatever happens to the refetch, the user
+    // should not be stranded on a required-plugins screen for a plugin they
+    // just installed.
+    setPluginRequirementsSatisfied(complete);
+    if (!complete) {
+      requirementsWereUnmet.current = true;
+    } else if (requirementsWereUnmet.current) {
+      requirementsWereUnmet.current = false;
+      if (apiSlug && isInitialFetchTriggered) {
+        invalidateResolution('getWizardAPIData', [apiSlug]);
+      }
+    }
+  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -195,10 +221,7 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref3) {
-            var complete = _ref3.complete;
-            return setPluginRequirementsSatisfied(complete);
-          }
+          onStatus: onPluginStatus
         });
       }
     }];

package/dist/cjs/wizard/index.test.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("@testing-library/react");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _ = _interopRequireDefault(require("./"));
+var _utils = require("./store/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } /**
+ * External dependencies.
+ */ /**
+ * WordPress dependencies.
+ */ /**
+ * Internal dependencies.
+ */
+jest.mock('@wordpress/api-fetch', function () {
+  return jest.fn();
+});
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = {
+  is_debug_mode: false
+};
+window.newspack_urls = {
+  support: 'https://help.newspack.com/'
+};
+var SETTINGS = {
+  minimumDonation: '5'
+};
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+var Section = function Section(_ref) {
+  var slug = _ref.slug;
+  var wizardData = (0, _utils.useWizardData)(slug);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: wizardData.settings ? 'Settings form' : null
+  });
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+var StaticSection = function StaticSection() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "Static section"
+  });
+};
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+var mockEndpoints = function mockEndpoints(slug) {
+  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
+  var counts = {
+    wizard: 0
+  };
+  var pluginStatus = initialStatus;
+  var plugin = function plugin() {
+    return {
+      Name: 'WooCommerce',
+      Description: 'Store',
+      Status: pluginStatus,
+      Download: 'wporg'
+    };
+  };
+  _apiFetch["default"].mockImplementation(function (_ref2) {
+    var path = _ref2.path,
+      method = _ref2.method;
+    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
+      counts.wizard++;
+      return 'active' === pluginStatus ? Promise.resolve({
+        settings: SETTINGS
+      }) : Promise.reject({
+        code: 'newspack_missing_required_plugin',
+        message: 'The WooCommerce plugin is not installed and activated.'
+      });
+    }
+    if (path === '/newspack/v1/plugins/') {
+      return Promise.resolve({
+        woocommerce: plugin()
+      });
+    }
+    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
+      pluginStatus = 'active';
+      return Promise.resolve(plugin());
+    }
+    return Promise.resolve({});
+  });
+  return counts;
+};
+var renderWizard = function renderWizard(slug) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$withApiSlug = _ref3.withApiSlug,
+    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
+  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+    headerText: "Test wizard",
+    apiSlug: withApiSlug ? slug : undefined,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return withApiSlug ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
+          slug: slug
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticSection, {});
+      }
+    }]
+  }));
+};
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+var clickActivate = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$screen$findAll, _yield$screen$findAll2, activate;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return _react.screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 1:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = (0, _slicedToArray2["default"])(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          _react.fireEvent.click(activate);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function clickActivate() {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+var flushPending = function flushPending() {
+  return (0, _react.act)(function () {
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, 0);
+    });
+  });
+};
+describe('Wizard', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+  });
+  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          // A distinct slug per test: the store's resolution cache lives in the
+          // module registry, so it is shared by every test in this file.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails. Until the
+          // installer is satisfied it owns the whole route, so the installer screen
+          // showing is what proves we are in the pre-activation state.
+          _context2.n = 1;
+          return (0, _react.waitFor)(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          _t = expect;
+          _context2.n = 2;
+          return _react.screen.findByText('WooCommerce');
+        case 2:
+          _t(_context2.v).toBeInTheDocument();
+          _context2.n = 3;
+          return clickActivate();
+        case 3:
+          _t2 = expect;
+          _context2.n = 4;
+          return _react.screen.findByText('Settings form');
+        case 4:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 5;
+          return flushPending();
+        case 5:
+          expect(counts.wizard).toBe(2);
+        case 6:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var slug, counts, _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t3 = expect;
+          _context3.n = 1;
+          return _react.screen.findByText('Settings form');
+        case 1:
+          _t3(_context3.v).toBeInTheDocument();
+          _context3.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var slug, counts, _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          // The shape of every other Newspack wizard that gates on plugins: it
+          // reads page-load globals rather than wizard API data. This change has to
+          // stay inert for them. Note this pins the inertness, not the `apiSlug`
+          // guard itself — the resolver already no-ops on an undefined slug, so
+          // that guard is a second line of defence rather than the load-bearing one.
+          slug = 'test-wizard-no-api-slug';
+          counts = mockEndpoints(slug);
+          renderWizard(slug, {
+            withApiSlug: false
+          });
+          _context4.n = 1;
+          return clickActivate();
+        case 1:
+          _t4 = expect;
+          _context4.n = 2;
+          return _react.screen.findByText('Static section');
+        case 2:
+          _t4(_context4.v).toBeInTheDocument();
+          _context4.n = 3;
+          return flushPending();
+        case 3:
+          expect(counts.wizard).toBe(0);
+        case 4:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+});

package/dist/esm/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/dist/esm/wizard/index.js

@@ -12,7 +12,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -157,6 +157,8 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = useSelect(function (select) {
     return select(WIZARD_STORE_NAMESPACE).getNotices();
   });
+  var _useDispatch2 = useDispatch(WIZARD_STORE_NAMESPACE),
+    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -185,6 +187,30 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
+
+  // The data fetch above runs once per mount, while the required plugins are
+  // still missing — endpoints that need them answer empty or error outright,
+  // and either way the resolver records that as the answer. So the installer
+  // has to trigger a refetch, or the section mounts against it and renders
+  // nothing until the user saves. Requirements already met on mount are left
+  // alone: that fetch saw the real site, and refetching would cost every such
+  // wizard a second request on every load.
+  var requirementsWereUnmet = useRef(false);
+  var onPluginStatus = function onPluginStatus(_ref3) {
+    var complete = _ref3.complete;
+    // Leave the installer first: whatever happens to the refetch, the user
+    // should not be stranded on a required-plugins screen for a plugin they
+    // just installed.
+    setPluginRequirementsSatisfied(complete);
+    if (!complete) {
+      requirementsWereUnmet.current = true;
+    } else if (requirementsWereUnmet.current) {
+      requirementsWereUnmet.current = false;
+      if (apiSlug && isInitialFetchTriggered) {
+        invalidateResolution('getWizardAPIData', [apiSlug]);
+      }
+    }
+  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -192,10 +218,7 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/_jsx(PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref3) {
-            var complete = _ref3.complete;
-            return setPluginRequirementsSatisfied(complete);
-          }
+          onStatus: onPluginStatus
         });
       }
     }];

package/dist/esm/wizard/index.test.js

@@ -0,0 +1,254 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies.
+ */
+import Wizard from './';
+import { useWizardData } from './store/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@wordpress/api-fetch', function () {
+  return jest.fn();
+});
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = {
+  is_debug_mode: false
+};
+window.newspack_urls = {
+  support: 'https://help.newspack.com/'
+};
+var SETTINGS = {
+  minimumDonation: '5'
+};
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+var Section = function Section(_ref) {
+  var slug = _ref.slug;
+  var wizardData = useWizardData(slug);
+  return /*#__PURE__*/_jsx("div", {
+    children: wizardData.settings ? 'Settings form' : null
+  });
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+var StaticSection = function StaticSection() {
+  return /*#__PURE__*/_jsx("div", {
+    children: "Static section"
+  });
+};
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+var mockEndpoints = function mockEndpoints(slug) {
+  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
+  var counts = {
+    wizard: 0
+  };
+  var pluginStatus = initialStatus;
+  var plugin = function plugin() {
+    return {
+      Name: 'WooCommerce',
+      Description: 'Store',
+      Status: pluginStatus,
+      Download: 'wporg'
+    };
+  };
+  apiFetch.mockImplementation(function (_ref2) {
+    var path = _ref2.path,
+      method = _ref2.method;
+    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
+      counts.wizard++;
+      return 'active' === pluginStatus ? Promise.resolve({
+        settings: SETTINGS
+      }) : Promise.reject({
+        code: 'newspack_missing_required_plugin',
+        message: 'The WooCommerce plugin is not installed and activated.'
+      });
+    }
+    if (path === '/newspack/v1/plugins/') {
+      return Promise.resolve({
+        woocommerce: plugin()
+      });
+    }
+    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
+      pluginStatus = 'active';
+      return Promise.resolve(plugin());
+    }
+    return Promise.resolve({});
+  });
+  return counts;
+};
+var renderWizard = function renderWizard(slug) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$withApiSlug = _ref3.withApiSlug,
+    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
+  return render(/*#__PURE__*/_jsx(Wizard, {
+    headerText: "Test wizard",
+    apiSlug: withApiSlug ? slug : undefined,
+    requiredPlugins: ['woocommerce'],
+    sections: [{
+      label: 'Configuration',
+      path: '/configuration',
+      render: function render() {
+        return withApiSlug ? /*#__PURE__*/_jsx(Section, {
+          slug: slug
+        }) : /*#__PURE__*/_jsx(StaticSection, {});
+      }
+    }]
+  }));
+};
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+var clickActivate = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$screen$findAll, _yield$screen$findAll2, activate;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return screen.findAllByRole('button', {
+            name: 'Activate'
+          });
+        case 1:
+          _yield$screen$findAll = _context.v;
+          _yield$screen$findAll2 = _slicedToArray(_yield$screen$findAll, 1);
+          activate = _yield$screen$findAll2[0];
+          fireEvent.click(activate);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function clickActivate() {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+var flushPending = function flushPending() {
+  return act(function () {
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, 0);
+    });
+  });
+};
+describe('Wizard', function () {
+  beforeEach(function () {
+    apiFetch.mockReset();
+  });
+  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var slug, counts, _t, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          // A distinct slug per test: the store's resolution cache lives in the
+          // module registry, so it is shared by every test in this file.
+          slug = 'test-wizard-refetch';
+          counts = mockEndpoints(slug);
+          renderWizard(slug);
+
+          // The first fetch runs before the plugin exists, so it fails. Until the
+          // installer is satisfied it owns the whole route, so the installer screen
+          // showing is what proves we are in the pre-activation state.
+          _context2.n = 1;
+          return waitFor(function () {
+            return expect(counts.wizard).toBe(1);
+          });
+        case 1:
+          _t = expect;
+          _context2.n = 2;
+          return screen.findByText('WooCommerce');
+        case 2:
+          _t(_context2.v).toBeInTheDocument();
+          _context2.n = 3;
+          return clickActivate();
+        case 3:
+          _t2 = expect;
+          _context2.n = 4;
+          return screen.findByText('Settings form');
+        case 4:
+          _t2(_context2.v).toBeInTheDocument();
+          _context2.n = 5;
+          return flushPending();
+        case 5:
+          expect(counts.wizard).toBe(2);
+        case 6:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('does not refetch when the required plugins were already active', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var slug, counts, _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          slug = 'test-wizard-no-refetch';
+          counts = mockEndpoints(slug, 'active');
+          renderWizard(slug);
+          _t3 = expect;
+          _context3.n = 1;
+          return screen.findByText('Settings form');
+        case 1:
+          _t3(_context3.v).toBeInTheDocument();
+          _context3.n = 2;
+          return flushPending();
+        case 2:
+          expect(counts.wizard).toBe(1);
+        case 3:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var slug, counts, _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          // The shape of every other Newspack wizard that gates on plugins: it
+          // reads page-load globals rather than wizard API data. This change has to
+          // stay inert for them. Note this pins the inertness, not the `apiSlug`
+          // guard itself — the resolver already no-ops on an undefined slug, so
+          // that guard is a second line of defence rather than the load-bearing one.
+          slug = 'test-wizard-no-api-slug';
+          counts = mockEndpoints(slug);
+          renderWizard(slug, {
+            withApiSlug: false
+          });
+          _context4.n = 1;
+          return clickActivate();
+        case 1:
+          _t4 = expect;
+          _context4.n = 2;
+          return screen.findByText('Static section');
+        case 2:
+          _t4(_context4.v).toBeInTheDocument();
+          _context4.n = 3;
+          return flushPending();
+        case 3:
+          expect(counts.wizard).toBe(0);
+        case 4:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.6.1",
+	"version": "4.6.2-hotfix-wizard-stale-data-after-plugin-install.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/src/wizard/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -126,6 +126,7 @@ const Wizard = (
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
 	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
+	const { invalidateResolution } = useDispatch( WIZARD_STORE_NAMESPACE );
 	const { actions, backNav, badges, sectionDescription, sectionMenu, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } =
 		headerData;
 
@@ -139,14 +140,36 @@ const Wizard = (
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
 	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
+
+	// The data fetch above runs once per mount, while the required plugins are
+	// still missing — endpoints that need them answer empty or error outright,
+	// and either way the resolver records that as the answer. So the installer
+	// has to trigger a refetch, or the section mounts against it and renders
+	// nothing until the user saves. Requirements already met on mount are left
+	// alone: that fetch saw the real site, and refetching would cost every such
+	// wizard a second request on every load.
+	const requirementsWereUnmet = useRef( false );
+	const onPluginStatus = ( { complete } ) => {
+		// Leave the installer first: whatever happens to the refetch, the user
+		// should not be stranded on a required-plugins screen for a plugin they
+		// just installed.
+		setPluginRequirementsSatisfied( complete );
+		if ( ! complete ) {
+			requirementsWereUnmet.current = true;
+		} else if ( requirementsWereUnmet.current ) {
+			requirementsWereUnmet.current = false;
+			if ( apiSlug && isInitialFetchTriggered ) {
+				invalidateResolution( 'getWizardAPIData', [ apiSlug ] );
+			}
+		}
+	};
+
 	if ( ! pluginRequirementsSatisfied ) {
 		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
-				render: () => (
-					<PluginInstaller plugins={ requiredPlugins } onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) } />
-				),
+				render: () => <PluginInstaller plugins={ requiredPlugins } onStatus={ onPluginStatus } />,
 			},
 		];
 	}

package/src/wizard/index.test.js

@@ -0,0 +1,156 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies.
+ */
+import Wizard from './';
+import { useWizardData } from './store/utils';
+
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+
+// Both globals are localized onto every real wizard screen. The footer's
+// ExternalLink needs a string href, and the debug Notice reads aux data.
+window.newspack_aux_data = { is_debug_mode: false };
+window.newspack_urls = { support: 'https://help.newspack.com/' };
+
+const SETTINGS = { minimumDonation: '5' };
+
+// Stands in for a wizard section that can only render once its API data has
+// arrived — the shape a wizard section has when the wizard owns an apiSlug.
+const Section = ( { slug } ) => {
+	const wizardData = useWizardData( slug );
+	return <div>{ wizardData.settings ? 'Settings form' : null }</div>;
+};
+
+// The other shape: a section on a wizard with no apiSlug, which reads page-load
+// globals rather than wizard API data and so never touches the store.
+const StaticSection = () => <div>Static section</div>;
+
+// Mocks the endpoints a wizard hits, gated on whether the required plugin is
+// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
+// Audience_Donations::api_get_donation_settings() does without WooCommerce.
+// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
+// a wizard given no apiSlug fetches nothing at all.
+const mockEndpoints = ( slug, initialStatus = 'inactive' ) => {
+	const counts = { wizard: 0 };
+	let pluginStatus = initialStatus;
+	const plugin = () => ( { Name: 'WooCommerce', Description: 'Store', Status: pluginStatus, Download: 'wporg' } );
+	apiFetch.mockImplementation( ( { path, method } ) => {
+		if ( path.startsWith( '/newspack/v1/wizard/' ) && 'POST' !== method ) {
+			counts.wizard++;
+			return 'active' === pluginStatus
+				? Promise.resolve( { settings: SETTINGS } )
+				: Promise.reject( {
+						code: 'newspack_missing_required_plugin',
+						message: 'The WooCommerce plugin is not installed and activated.',
+				  } );
+		}
+		if ( path === '/newspack/v1/plugins/' ) {
+			return Promise.resolve( { woocommerce: plugin() } );
+		}
+		if ( path === '/newspack/v1/plugins/woocommerce/configure/' ) {
+			pluginStatus = 'active';
+			return Promise.resolve( plugin() );
+		}
+		return Promise.resolve( {} );
+	} );
+	return counts;
+};
+
+const renderWizard = ( slug, { withApiSlug = true } = {} ) =>
+	render(
+		<Wizard
+			headerText="Test wizard"
+			apiSlug={ withApiSlug ? slug : undefined }
+			requiredPlugins={ [ 'woocommerce' ] }
+			sections={ [
+				{
+					label: 'Configuration',
+					path: '/configuration',
+					render: () => ( withApiSlug ? <Section slug={ slug } /> : <StaticSection /> ),
+				},
+			] }
+		/>
+	);
+
+// The plugin's own row button, not the footer's activate-all — both read
+// "Activate", and the row button comes first in the DOM.
+const clickActivate = async () => {
+	const [ activate ] = await screen.findAllByRole( 'button', { name: 'Activate' } );
+	fireEvent.click( activate );
+};
+
+// Lets every already-queued promise settle, so an assertion that something did
+// NOT happen has actually given it the chance to.
+const flushPending = () => act( () => new Promise( resolve => setTimeout( resolve, 0 ) ) );
+
+describe( 'Wizard', () => {
+	beforeEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'refetches its API data after the installer satisfies the plugin requirements', async () => {
+		// A distinct slug per test: the store's resolution cache lives in the
+		// module registry, so it is shared by every test in this file.
+		const slug = 'test-wizard-refetch';
+		const counts = mockEndpoints( slug );
+
+		renderWizard( slug );
+
+		// The first fetch runs before the plugin exists, so it fails. Until the
+		// installer is satisfied it owns the whole route, so the installer screen
+		// showing is what proves we are in the pre-activation state.
+		await waitFor( () => expect( counts.wizard ).toBe( 1 ) );
+		expect( await screen.findByText( 'WooCommerce' ) ).toBeInTheDocument();
+
+		await clickActivate();
+
+		// Activation makes the endpoint answerable, so the section must render
+		// against fresh data rather than the empty pre-activation response.
+		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
+
+		// Exactly one refetch. The installer re-reports its status on every
+		// re-render while it is mounted, so this is the assertion that would
+		// catch a latch that re-fired.
+		await flushPending();
+		expect( counts.wizard ).toBe( 2 );
+	} );
+
+	it( 'does not refetch when the required plugins were already active', async () => {
+		const slug = 'test-wizard-no-refetch';
+		const counts = mockEndpoints( slug, 'active' );
+
+		renderWizard( slug );
+
+		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
+		await flushPending();
+		expect( counts.wizard ).toBe( 1 );
+	} );
+
+	it( 'fetches nothing for a wizard that has required plugins but no API slug', async () => {
+		// The shape of every other Newspack wizard that gates on plugins: it
+		// reads page-load globals rather than wizard API data. This change has to
+		// stay inert for them. Note this pins the inertness, not the `apiSlug`
+		// guard itself — the resolver already no-ops on an undefined slug, so
+		// that guard is a second line of defence rather than the load-bearing one.
+		const slug = 'test-wizard-no-api-slug';
+		const counts = mockEndpoints( slug );
+
+		renderWizard( slug, { withApiSlug: false } );
+
+		await clickActivate();
+
+		// The installer still completes and hands the route back to the section.
+		expect( await screen.findByText( 'Static section' ) ).toBeInTheDocument();
+		await flushPending();
+		expect( counts.wizard ).toBe( 0 );
+	} );
+} );