@dream-encode/wp-js-plugin-utils 0.6.1 → 0.6.3

package/dist/settings/RailSettingsPage.js

@@ -173,8 +173,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
         role: "tabpanel",
         "aria-labelledby": `de-settings-tab-${activeSection.key}`,
         tabIndex: 0,
-        children: !settingsLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+        children: !settingsLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "de-settings__loading",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: (0, _i18n.__)('Loading settings…', textDomain)
+          })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Notices.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "de-settings__pane-head",

package/dist/settings/styles/_settings-rail.scss

@@ -137,6 +137,7 @@
 	}
 
 	.de-settings__rail {
+		margin-left: 1rem;
 		background: var( --de-settings-surface );
 		border-right: 1px solid var( --de-settings-line );
 	}
@@ -262,6 +263,19 @@
 		}
 	}
 
+	.de-settings__loading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 32px 0;
+		color: var( --de-settings-ink-faint );
+
+		p {
+			margin: 0;
+			font-size: 13px;
+		}
+	}
+
 	.de-settings__pane-head {
 		margin-bottom: 18px;
 

package/dist/settings/useActiveSection.js

@@ -5,6 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _element = require("@wordpress/element");
+/**
+ * Read the raw section key carried in the URL hash.
+ *
+ * @since  0.6.3
+ * @return {string}  Hash without its leading `#`, or an empty string.
+ */
+const readHash = () => {
+  return window.location.hash.replace(/^#/, '');
+};
+
 /**
  * Read the section key carried in the URL hash.
  *
@@ -13,7 +23,7 @@ var _element = require("@wordpress/element");
  * @return {string|null}  Matching section key, or null when the hash names nothing known.
  */
 const readSectionFromHash = keys => {
-  const hash = window.location.hash.replace(/^#/, '');
+  const hash = readHash();
   return keys.includes(hash) ? hash : null;
 };
 
@@ -26,6 +36,15 @@ const readSectionFromHash = keys => {
  * the browser Back button still leaves the settings page instead of walking back
  * through the sections that were opened.
  *
+ * A page whose sections depend on a setting registers them in two passes: the first
+ * render happens before `/wp/v2/settings` answers, so any section gated behind a
+ * value is missing from `sections` at that point. A hash naming one of those is
+ * therefore unknown when the page mounts. Rather than discard it and fall back to
+ * the first section, the requested key is parked and adopted as soon as it appears,
+ * which is what makes a link to a gated section work. The parked key is dropped the
+ * moment the reader chooses a section themselves, so a late arriving section can
+ * never pull them away from what they are looking at.
+ *
  * @since  0.6.0
  * @param  {Array}  sections  Section definitions.
  * @return {Array}            The active section key and a setter for it.
@@ -35,15 +54,26 @@ const useActiveSection = sections => {
   const keys = (0, _element.useMemo)(() => {
     return keySignature.split('|').filter(Boolean);
   }, [keySignature]);
+  const requestedSection = (0, _element.useRef)(null);
   const [activeKey, setActiveKey] = (0, _element.useState)(() => {
+    const hash = readHash();
+    if (hash && !keys.includes(hash)) {
+      requestedSection.current = hash;
+    }
     return readSectionFromHash(keys) || keys[0] || '';
   });
   (0, _element.useEffect)(() => {
     const handleHashChange = () => {
-      const nextKey = readSectionFromHash(keys);
-      if (nextKey) {
-        setActiveKey(nextKey);
+      const hash = readHash();
+      if (!hash) {
+        return;
       }
+      if (keys.includes(hash)) {
+        requestedSection.current = null;
+        setActiveKey(hash);
+        return;
+      }
+      requestedSection.current = hash;
     };
     window.addEventListener('hashchange', handleHashChange);
     return () => {
@@ -51,11 +81,25 @@ const useActiveSection = sections => {
     };
   }, [keys]);
   (0, _element.useEffect)(() => {
+    if (!requestedSection.current) {
+      return;
+    }
+    if (!keys.includes(requestedSection.current)) {
+      return;
+    }
+    setActiveKey(requestedSection.current);
+    requestedSection.current = null;
+  }, [keys]);
+  (0, _element.useEffect)(() => {
+    if (requestedSection.current) {
+      return;
+    }
     if (keys.length && !keys.includes(activeKey)) {
       setActiveKey(keys[0]);
     }
   }, [keys, activeKey]);
   const selectSection = (0, _element.useCallback)(key => {
+    requestedSection.current = null;
     setActiveKey(key);
     window.history.replaceState(null, '', `#${key}`);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",