From 59aa49f79320c7f3f68ebc0adce2ebd72ae02cff Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Thu, 1 Jan 2026 23:51:37 -0500 Subject: [PATCH 1/3] fix: overlay menu with priority nav --- build/priority-editor-rtl.css | 1 + build/priority-editor.asset.php | 2 +- build/priority-editor.css | 1 + build/priority-editor.js | 2 +- build/priority-plus-nav.asset.php | 2 +- build/priority-plus-nav.js | 2 +- classes/class-enqueues.php | 18 +++++-- src/core/PriorityNav.js | 7 +++ src/priority-editor.js | 2 +- src/styles/editor.scss | 11 +++++ src/utils/dom-utils.js | 36 ++++++++++---- src/variation/controls.js | 78 ++++++++++++++++++++++++++++++- 12 files changed, 142 insertions(+), 20 deletions(-) create mode 100644 build/priority-editor-rtl.css create mode 100644 build/priority-editor.css diff --git a/build/priority-editor-rtl.css b/build/priority-editor-rtl.css new file mode 100644 index 0000000..ef70bd5 --- /dev/null +++ b/build/priority-editor-rtl.css @@ -0,0 +1 @@ +.is-style-priority-nav{--priority-nav--background:transparent;--priority-nav--background-hover:transparent;--priority-nav--color:inherit;--priority-nav--color-hover:inherit;--priority-nav--border-color:transparent;--priority-nav--border-style:solid;--priority-nav--border-width:0;--priority-nav--border-radius:0;--priority-nav--font-family:inherit;--priority-nav--font-size:inherit;--priority-nav--font-weight:inherit;--priority-nav--padding:0}.editor-styles-wrapper .priority-nav-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-nav-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-editor.asset.php b/build/priority-editor.asset.php index a53e749..0825a66 100644 --- a/build/priority-editor.asset.php +++ b/build/priority-editor.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'fa3aaf3a5d627561994a'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'c5037544c0114052e43e'); diff --git a/build/priority-editor.css b/build/priority-editor.css new file mode 100644 index 0000000..ef70bd5 --- /dev/null +++ b/build/priority-editor.css @@ -0,0 +1 @@ +.is-style-priority-nav{--priority-nav--background:transparent;--priority-nav--background-hover:transparent;--priority-nav--color:inherit;--priority-nav--color-hover:inherit;--priority-nav--border-color:transparent;--priority-nav--border-style:solid;--priority-nav--border-width:0;--priority-nav--border-radius:0;--priority-nav--font-family:inherit;--priority-nav--font-size:inherit;--priority-nav--font-weight:inherit;--priority-nav--padding:0}.editor-styles-wrapper .priority-nav-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-nav-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-editor.js b/build/priority-editor.js index f37fc84..21f67cf 100644 --- a/build/priority-editor.js +++ b/build/priority-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,r=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(e.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(e.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"})});const a=window.wp.hooks;(0,r.registerBlockVariation)("core/navigation",{name:"priority-nav",title:(0,o.__)("Priority Plus Nav","priority-nav"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-nav"),icon:t,scope:["inserter","transform"],attributes:{className:"is-style-priority-nav",overlayMenu:"never",priorityNavEnabled:!0,priorityNavMoreLabel:"More",priorityNavMoreBackgroundColor:void 0,priorityNavMoreBackgroundColorHover:void 0,priorityNavMoreTextColor:void 0,priorityNavMoreTextColorHover:void 0},isActive:(o,r)=>o.className?.includes(r.className)}),(0,a.addFilter)("blocks.registerBlockType","priority-nav/extend-core-navigation",(o,r)=>"core/navigation"!==r?o:{...o,attributes:{...o.attributes,priorityNavEnabled:{type:"boolean",default:!1},priorityNavMoreLabel:{type:"string",default:"More"},priorityNavMoreIcon:{type:"string",default:"none"},priorityNavMoreBackgroundColor:{type:"string"},priorityNavMoreBackgroundColorHover:{type:"string"},priorityNavMoreTextColor:{type:"string"},priorityNavMoreTextColorHover:{type:"string"},priorityNavMorePadding:{type:"object",default:void 0}}});const n=window.wp.blockEditor,l=window.wp.components,s=(0,window.wp.compose.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:a,setAttributes:s}=e;if("core/navigation"!==t)return(0,i.jsx)(r,{...e});if(!(a.className||"").includes("is-style-priority-nav")&&!0!==a.priorityNavEnabled)return(0,i.jsx)(r,{...e});const{priorityNavEnabled:v,priorityNavMoreLabel:p,priorityNavMoreBackgroundColor:d,priorityNavMoreBackgroundColorHover:y,priorityNavMoreTextColor:c,priorityNavMoreTextColorHover:u,priorityNavMorePadding:g}=a,b=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsxs)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-nav"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!p,label:(0,o.__)("More Button Label","priority-nav"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-nav"),value:p,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-nav")})})}),(0,i.jsx)(n.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-nav"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-nav"),value:c,onChange:o=>s({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-nav"),value:u,onChange:o=>s({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-nav"),value:d,onChange:o=>s({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-nav"),value:y,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-nav"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!g&&Object.keys(g).length>0,label:(0,o.__)("Padding","priority-nav"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:b.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:g,onChange:o=>s({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-nav"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-nav"),values:g,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})})]})]})},"withPriorityNavControls");(0,a.addFilter)("editor.BlockEdit","priority-nav/add-priority-nav-controls",s)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,r=window.wp.primitives,t=window.ReactJSXRuntime;var i=(0,t.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,t.jsx)(r.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"})});const a=window.wp.hooks;(0,e.registerBlockVariation)("core/navigation",{name:"priority-nav",title:(0,o.__)("Priority Plus Nav","priority-nav"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-nav"),icon:i,scope:["inserter","transform"],attributes:{className:"is-style-priority-nav",overlayMenu:"never",priorityNavEnabled:!0,priorityNavMoreLabel:"More",priorityNavMoreBackgroundColor:void 0,priorityNavMoreBackgroundColorHover:void 0,priorityNavMoreTextColor:void 0,priorityNavMoreTextColorHover:void 0},isActive:(o,e)=>o.className?.includes(e.className)}),(0,a.addFilter)("blocks.registerBlockType","priority-nav/extend-core-navigation",(o,e)=>"core/navigation"!==e?o:{...o,attributes:{...o.attributes,priorityNavEnabled:{type:"boolean",default:!1},priorityNavMoreLabel:{type:"string",default:"More"},priorityNavMoreIcon:{type:"string",default:"none"},priorityNavMoreBackgroundColor:{type:"string"},priorityNavMoreBackgroundColorHover:{type:"string"},priorityNavMoreTextColor:{type:"string"},priorityNavMoreTextColorHover:{type:"string"},priorityNavMorePadding:{type:"object",default:void 0}}});const n=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,v=window.wp.element,p=(0,s.createHigherOrderComponent)(o=>e=>{const{name:r,attributes:i}=e;if("core/navigation"!==r)return(0,t.jsx)(o,{...e});const a=(i.className||"").includes("is-style-priority-nav")||!0===i.priorityNavEnabled;return(0,v.useEffect)(()=>{if(!a)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[a,i.overlayMenu]),(0,t.jsx)(o,{...e})},"addDisableAlwaysOption"),d=(0,s.createHigherOrderComponent)(e=>r=>{const{name:i,attributes:a,setAttributes:s}=r;if("core/navigation"!==i)return(0,t.jsx)(e,{...r});const p=(a.className||"").includes("is-style-priority-nav")||!0===a.priorityNavEnabled;if(!p)return(0,t.jsx)(e,{...r});const{priorityNavEnabled:d,priorityNavMoreLabel:y,priorityNavMoreBackgroundColor:c,priorityNavMoreBackgroundColorHover:u,priorityNavMoreTextColor:g,priorityNavMoreTextColorHover:b,priorityNavMorePadding:w,overlayMenu:h}=a;(0,v.useEffect)(()=>{p&&"always"===h&&s({overlayMenu:"mobile"})},[p,h,s]);const M=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e,{...r}),(0,t.jsx)(n.InspectorControls,{group:"settings",children:(0,t.jsx)(l.Notice,{status:"info",isDismissible:!1,children:(0,o.__)('Priority+ Navigation is not compatible with "Always" overlay menu. The overlay menu is set to "Mobile" to allow Priority+ to work on desktop.',"priority-nav")})}),(0,t.jsxs)(n.InspectorControls,{group:"styles",children:[(0,t.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-nav"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,t.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!y,label:(0,o.__)("More Button Label","priority-nav"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,t.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-nav"),value:y,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-nav")})})}),(0,t.jsx)(n.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-nav"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-nav"),value:g,onChange:o=>s({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-nav"),value:b,onChange:o=>s({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-nav"),value:c,onChange:o=>s({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-nav"),value:u,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,t.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-nav"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,t.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!w&&Object.keys(w).length>0,label:(0,o.__)("Padding","priority-nav"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:M.length>0?(0,t.jsx)(n.__experimentalSpacingSizesControl,{values:w,onChange:o=>s({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-nav"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,t.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-nav"),values:w,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})})]})]})},"withPriorityNavControls");(0,a.addFilter)("editor.BlockEdit","priority-nav/add-disable-always-option",p,5),(0,a.addFilter)("editor.BlockEdit","priority-nav/add-priority-nav-controls",d,10)})(); \ No newline at end of file diff --git a/build/priority-plus-nav.asset.php b/build/priority-plus-nav.asset.php index c8e313e..54e0a14 100644 --- a/build/priority-plus-nav.asset.php +++ b/build/priority-plus-nav.asset.php @@ -1 +1 @@ - array(), 'version' => '2f4c69d163ee8a1c85ce'); + array(), 'version' => '8b04d0f4d8a50d320780'); diff --git a/build/priority-plus-nav.js b/build/priority-plus-nav.js index d2b9941..8c06c2c 100644 --- a/build/priority-plus-nav.js +++ b/build/priority-plus-nav.js @@ -1 +1 @@ -(()=>{"use strict";var t,e={400(){const t="More";function e(t){if(!t)return!1;const e=window.getComputedStyle(t),i=t.getBoundingClientRect();return"none"!==e.display&&"hidden"!==e.visibility&&i.width>0&&i.height>0}function i(t){return e(t)?t.getBoundingClientRect().width:0}function n(t){return e(t)}function s(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function o(t){const e={text:"",url:"#",hasSubmenu:!1,children:[]},i=t.querySelector(":scope > .wp-block-navigation__submenu-container");let n=t.querySelector(":scope > a");if(n||(n=t.querySelector(":scope > .wp-block-navigation-item__content a")),!n){if(i){const i=t.cloneNode(!0),n=i.querySelector(".wp-block-navigation__submenu-container");n&&n.remove(),e.text=i.textContent.trim()}else e.text=t.textContent.trim();return i&&(e.hasSubmenu=!0,i.querySelectorAll(":scope > li").forEach(t=>{e.children.push(o(t))})),e}return e.text=function(t){if(!t)return"";const e=t.querySelector(".wp-block-navigation-item__label");if(e)return e.textContent.trim();const i=t.cloneNode(!0);i.querySelectorAll("*").forEach(t=>t.remove());let n=i.textContent.trim();if(!n){const e=Array.from(t.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE);e.length>0&&(n=e.map(t=>t.textContent.trim()).filter(t=>t).join(" "))}return n}(n),i&&e.text&&(e.text=function(t,e){if(!t||!e)return t;const i=[];if(e.querySelectorAll("li a").forEach(e=>{const n=e.textContent.trim();n&&t.includes(n)&&i.push(n)}),i.length>0){let e=t;return i.forEach(t=>{e=e.replace(t,"").trim()}),e}return t}(e.text,i)),e.url=n.getAttribute("href")||"#",i&&(e.hasSubmenu=!0,i.querySelectorAll(":scope > li").forEach(t=>{e.children.push(o(t))})),e}function r(t,e,i,n,o){const a=`${i}-submenu-${n.value++}`;let l="";return t.hasSubmenu?(l=o?`\n\t\t\t\t\n\t\t\t\t