diff --git a/build/priority-editor.asset.php b/build/priority-editor.asset.php index 2d5aeeb..0c6b9f9 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' => '3c18caf20bb2d937b841'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'dd30c35b1debc7c7b70d'); diff --git a/build/priority-editor.js b/build/priority-editor.js index eb7a3d2..d4e935c 100644 --- a/build/priority-editor.js +++ b/build/priority-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.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 n=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:t,scope:["inserter","transform"],attributes:{className:"is-style-priority-nav",overlayMenu:"never",priorityNavEnabled:!0,priorityNavMoreLabel:"Browse",priorityNavMoreIcon:"none"},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.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:"Browse"},priorityNavMoreIcon:{type:"string",default:"none"}}});const a=window.wp.blockEditor,l=window.wp.components,s=(0,window.wp.compose.createHigherOrderComponent)(e=>r=>{const{name:t,attributes:n,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(e,{...r});const{priorityNavEnabled:v,priorityNavMoreLabel:p,priorityNavMoreIcon:c}=n;return(0,i.jsxs)(i.Fragment,{children:[v&&(0,i.jsx)("div",{className:"priority-nav-editor-wrapper",children:(0,i.jsx)(e,{...r})}),!v&&(0,i.jsx)(e,{...r}),(0,i.jsx)(a.InspectorControls,{children:(0,i.jsxs)(l.PanelBody,{title:(0,o.__)("Priority+ Settings","priority-nav"),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)(l.SelectControl,{label:(0,o.__)("More Button Icon","priority-nav"),value:c,options:[{label:(0,o.__)("None","priority-nav"),value:"none"},{label:(0,o.__)("Chevron Down (▼)","priority-nav"),value:"chevron"},{label:(0,o.__)("Plus (+)","priority-nav"),value:"plus"},{label:(0,o.__)("Menu (≡)","priority-nav"),value:"menu"}],onChange:o=>s({priorityNavMoreIcon:o})})]})})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-nav/add-priority-nav-controls",s)})(); \ No newline at end of file +(()=>{"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:"Browse",priorityNavMoreIcon:"none",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:"Browse"},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,v=(0,window.wp.compose.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:a,setAttributes:v}=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:s,priorityNavMoreLabel:p,priorityNavMoreIcon:d,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:c,priorityNavMoreTextColor:u,priorityNavMoreTextColorHover:g,priorityNavMorePadding:_}=a,b=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsx)(n.InspectorControls,{children:(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-nav"),resetAll:()=>v({priorityNavMoreLabel:"Browse",priorityNavMoreIcon:"none"}),children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!p,label:(0,o.__)("More Button Label","priority-nav"),onDeselect:()=>v({priorityNavMoreLabel:"Browse"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-nav"),value:p,onChange:o=>v({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-nav")})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!d,label:(0,o.__)("More Button Icon","priority-nav"),onDeselect:()=>v({priorityNavMoreIcon:"none"}),isShownByDefault:!0,children:(0,i.jsx)(l.SelectControl,{label:(0,o.__)("More Button Icon","priority-nav"),value:d,options:[{label:(0,o.__)("None","priority-nav"),value:"none"},{label:(0,o.__)("Chevron Down (▼)","priority-nav"),value:"chevron"},{label:(0,o.__)("Plus (+)","priority-nav"),value:"plus"},{label:(0,o.__)("Menu (≡)","priority-nav"),value:"menu"}],onChange:o=>v({priorityNavMoreIcon:o})})})]})}),(0,i.jsxs)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(n.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-nav"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-nav"),value:u,onChange:o=>v({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-nav"),value:g,onChange:o=>v({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-nav"),value:y,onChange:o=>v({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-nav"),value:c,onChange:o=>v({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-nav"),resetAll:()=>v({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!_&&Object.keys(_).length>0,label:(0,o.__)("Padding","priority-nav"),onDeselect:()=>v({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:b.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:_,onChange:o=>v({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:_,onChange:o=>v({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",v)})(); \ No newline at end of file diff --git a/build/style-priority-plus-nav-rtl.css b/build/style-priority-plus-nav-rtl.css index be79db0..ada9d9f 100644 --- a/build/style-priority-plus-nav-rtl.css +++ b/build/style-priority-plus-nav-rtl.css @@ -1 +1 @@ -:root{--priority-nav--background:transparent;--priority-nav--background-hover:rgba(0,0,0,.05);--priority-nav--border:none;--priority-nav--border-radius:4px;--priority-nav--color:inherit;--priority-nav--font-family:inherit;--priority-nav--font-size:inherit;--priority-nav--padding:0.5rem 0.75rem}.is-style-priority-nav{position:relative}.is-style-priority-nav .priority-nav-more-button{align-items:center;background:var(--priority-nav--background);border:var(--priority-nav--border);border-radius:var(--priority-nav--border-radius);color:var(--priority-nav--color);cursor:pointer;display:flex;font-family:var(--priority-nav--font-family);font-size:var(--priority-nav--font-size);gap:.5rem;padding:var(--priority-nav--padding);transition:all .2s ease}.is-style-priority-nav .priority-nav-more-button:hover{background:var(--priority-nav--background-hover)}.is-style-priority-nav .priority-nav-more-button .icon{display:inline-block;line-height:1}.is-style-priority-nav .priority-nav-more-button[aria-expanded=true] .icon{transform:rotate(-180deg)}.is-style-priority-nav .priority-nav-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;left:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-nav .priority-nav-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-nav .priority-nav-dropdown li{margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-nav .priority-nav-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content.is-open{display:block!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content .priority-nav-accordion-content{padding-right:1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:right;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-text{flex:1}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow .priority-nav-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-nav[data-more-hidden=true] .priority-nav-more{display:none} +.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;position:relative}.is-style-priority-nav .priority-nav-more-button{align-items:center;background:var(--priority-nav--background);border-color:var(--priority-nav--border-color);border-radius:var(--priority-nav--border-radius);border-style:var(--priority-nav--border-style);border-width:var(--priority-nav--border-width);color:var(--priority-nav--color);cursor:pointer;display:flex;font-family:var(--priority-nav--font-family);font-size:var(--priority-nav--font-size);font-weight:var(--priority-nav--font-weight);gap:.5rem;padding:var(--priority-nav--padding);transition:all .2s ease}.is-style-priority-nav .priority-nav-more-button:hover{background:var(--priority-nav--background-hover);color:var(--priority-nav--color-hover)}.is-style-priority-nav .priority-nav-more-button .icon{display:inline-block;line-height:1}.is-style-priority-nav .priority-nav-more-button[aria-expanded=true] .icon{transform:rotate(-180deg)}.is-style-priority-nav .priority-nav-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;left:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-nav .priority-nav-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-nav .priority-nav-dropdown li{margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-nav .priority-nav-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content.is-open{display:block!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content .priority-nav-accordion-content{padding-right:1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:right;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-text{flex:1}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow .priority-nav-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-nav[data-more-hidden=true] .priority-nav-more{display:none} diff --git a/build/style-priority-plus-nav.css b/build/style-priority-plus-nav.css index 42975fd..c84231a 100644 --- a/build/style-priority-plus-nav.css +++ b/build/style-priority-plus-nav.css @@ -1 +1 @@ -:root{--priority-nav--background:transparent;--priority-nav--background-hover:rgba(0,0,0,.05);--priority-nav--border:none;--priority-nav--border-radius:4px;--priority-nav--color:inherit;--priority-nav--font-family:inherit;--priority-nav--font-size:inherit;--priority-nav--padding:0.5rem 0.75rem}.is-style-priority-nav{position:relative}.is-style-priority-nav .priority-nav-more-button{align-items:center;background:var(--priority-nav--background);border:var(--priority-nav--border);border-radius:var(--priority-nav--border-radius);color:var(--priority-nav--color);cursor:pointer;display:flex;font-family:var(--priority-nav--font-family);font-size:var(--priority-nav--font-size);gap:.5rem;padding:var(--priority-nav--padding);transition:all .2s ease}.is-style-priority-nav .priority-nav-more-button:hover{background:var(--priority-nav--background-hover)}.is-style-priority-nav .priority-nav-more-button .icon{display:inline-block;line-height:1}.is-style-priority-nav .priority-nav-more-button[aria-expanded=true] .icon{transform:rotate(180deg)}.is-style-priority-nav .priority-nav-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;right:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-nav .priority-nav-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-nav .priority-nav-dropdown li{margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-nav .priority-nav-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content.is-open{display:block!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content .priority-nav-accordion-content{padding-left:1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:left;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-text{flex:1}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(90deg)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow .priority-nav-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(90deg)}.is-style-priority-nav[data-more-hidden=true] .priority-nav-more{display:none} +.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;position:relative}.is-style-priority-nav .priority-nav-more-button{align-items:center;background:var(--priority-nav--background);border-color:var(--priority-nav--border-color);border-radius:var(--priority-nav--border-radius);border-style:var(--priority-nav--border-style);border-width:var(--priority-nav--border-width);color:var(--priority-nav--color);cursor:pointer;display:flex;font-family:var(--priority-nav--font-family);font-size:var(--priority-nav--font-size);font-weight:var(--priority-nav--font-weight);gap:.5rem;padding:var(--priority-nav--padding);transition:all .2s ease}.is-style-priority-nav .priority-nav-more-button:hover{background:var(--priority-nav--background-hover);color:var(--priority-nav--color-hover)}.is-style-priority-nav .priority-nav-more-button .icon{display:inline-block;line-height:1}.is-style-priority-nav .priority-nav-more-button[aria-expanded=true] .icon{transform:rotate(180deg)}.is-style-priority-nav .priority-nav-dropdown{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);list-style:none;margin:0;min-width:200px;opacity:0;padding:.5rem 0;position:absolute;right:0;top:calc(100% + .5rem);transform:translateY(-10px);transition:all .2s ease;visibility:hidden;z-index:1000}.is-style-priority-nav .priority-nav-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-nav .priority-nav-dropdown li{margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown li a{color:inherit;display:block;padding:.75rem 1rem;text-decoration:none;transition:background .2s ease}.is-style-priority-nav .priority-nav-dropdown li a:hover{background:rgba(0,0,0,.05)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content.is-open{display:block!important}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-content .priority-nav-accordion-content{padding-left:1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:.75rem 1rem;text-align:left;width:100%}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-text{flex:1}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full .priority-nav-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-full[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(90deg)}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-link{flex:1;padding:.75rem 1rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;padding:.75rem}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow .priority-nav-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-nav .priority-nav-dropdown .priority-nav-accordion-toggle-arrow[aria-expanded=true] .priority-nav-accordion-arrow{transform:rotate(90deg)}.is-style-priority-nav[data-more-hidden=true] .priority-nav-more{display:none} diff --git a/classes/class-enqueues.php b/classes/class-enqueues.php index b1a7fe9..9347b11 100644 --- a/classes/class-enqueues.php +++ b/classes/class-enqueues.php @@ -138,11 +138,25 @@ public function render_block( string $block_content, array $block ): string { $this->enqueue_frontend_assets_once(); // Get Priority+ configuration with defaults. - $more_label = $this->get_priority_attr( $block, 'priorityNavMoreLabel', 'Browse' ); - $more_icon = $this->get_priority_attr( $block, 'priorityNavMoreIcon', 'none' ); + $more_label = $this->get_priority_attr( $block, 'priorityNavMoreLabel', 'Browse' ); + $more_icon = $this->get_priority_attr( $block, 'priorityNavMoreIcon', 'none' ); + $more_background_color = $this->get_priority_attr( $block, 'priorityNavMoreBackgroundColor', '' ); + $more_background_color_hover = $this->get_priority_attr( $block, 'priorityNavMoreBackgroundColorHover', '' ); + $more_text_color = $this->get_priority_attr( $block, 'priorityNavMoreTextColor', '' ); + $more_text_color_hover = $this->get_priority_attr( $block, 'priorityNavMoreTextColorHover', '' ); + $more_padding = $this->get_priority_attr( $block, 'priorityNavMorePadding', array() ); // Inject data attributes into the navigation element. - return $this->inject_priority_attributes( $block_content, $more_label, $more_icon ); + return $this->inject_priority_attributes( + $block_content, + $more_label, + $more_icon, + $more_background_color, + $more_background_color_hover, + $more_text_color, + $more_text_color_hover, + $more_padding + ); } /** @@ -167,39 +181,240 @@ private function is_priority_nav_enabled( array $block ): bool { /** * Get a Priority+ attribute value with a default fallback. * - * @param array $block The full block array. - * @param string $attr_name The attribute name to retrieve. - * @param string $default The default value if attribute is missing or empty. - * @return string The attribute value or default. + * @param array $block The full block array. + * @param string $attr_name The attribute name to retrieve. + * @param string|array $default_value The default value if attribute is missing or empty. + * @return string|array The attribute value or default. */ - private function get_priority_attr( array $block, string $attr_name, string $default ): string { + private function get_priority_attr( array $block, string $attr_name, $default_value = '' ) { $attrs = $block['attrs'] ?? array(); - $value = $attrs[ $attr_name ] ?? ''; + $value = $attrs[ $attr_name ] ?? null; + + if ( null === $value ) { + return $default_value; + } + + // For strings, check if empty. + if ( is_string( $value ) && '' === $value ) { + return $default_value; + } + + // For arrays, check if it's truly empty (no elements). + // Note: An array with keys but empty string values is NOT considered empty here, + // as it might contain valid empty values that should be processed. + if ( is_array( $value ) && 0 === count( $value ) ) { + return $default_value; + } + + return $value; + } + + /** + * Convert WordPress preset value format to CSS custom property format. + * + * WordPress stores preset values as "var:preset|spacing|30" which needs to be + * converted to "var(--wp--preset--spacing--30)" for CSS. + * + * @param string $value The preset value string. + * @return string Converted CSS custom property or original value. + */ + private function convert_preset_value( string $value ): string { + // Check if value matches WordPress preset format: var:preset|spacing|30. + if ( preg_match( '/^var:preset\|([^|]+)\|(.+)$/', $value, $matches ) ) { + $preset_type = $matches[1]; + $preset_slug = $matches[2]; + return sprintf( 'var(--wp--preset--%s--%s)', $preset_type, $preset_slug ); + } + + // If it's already a CSS custom property, return as-is. + if ( strpos( $value, 'var(' ) === 0 ) { + return $value; + } + + // Otherwise return the original value. + return $value; + } + + /** + * Convert padding object to CSS value string. + * + * @param array $padding Padding object with top, right, bottom, left keys. + * @return string CSS padding value string. + */ + private function padding_to_css( array $padding ): string { + if ( empty( $padding ) ) { + return ''; + } + + $top = isset( $padding['top'] ) ? (string) $padding['top'] : ''; + $right = isset( $padding['right'] ) ? (string) $padding['right'] : ''; + $bottom = isset( $padding['bottom'] ) ? (string) $padding['bottom'] : ''; + $left = isset( $padding['left'] ) ? (string) $padding['left'] : ''; + + // If all values are empty, return empty string. + if ( '' === $top && '' === $right && '' === $bottom && '' === $left ) { + return ''; + } + + // Convert preset values to CSS custom property format. + $top = '' !== $top ? $this->convert_preset_value( $top ) : ''; + $right = '' !== $right ? $this->convert_preset_value( $right ) : ''; + $bottom = '' !== $bottom ? $this->convert_preset_value( $bottom ) : ''; + $left = '' !== $left ? $this->convert_preset_value( $left ) : ''; + + // If all values are the same and not empty, use single value shorthand. + if ( '' !== $top && $top === $right && $right === $bottom && $bottom === $left ) { + return $top; + } + + // For partial padding or mixed values, we need all 4 values. + // Use '0' for empty sides to ensure proper CSS. + $top = '' !== $top ? $top : '0'; + $right = '' !== $right ? $right : '0'; + $bottom = '' !== $bottom ? $bottom : '0'; + $left = '' !== $left ? $left : '0'; + + // Use shorthand when top/bottom are same and left/right are same. + if ( $top === $bottom && $right === $left ) { + return $top . ' ' . $right; + } + + // Otherwise, return all 4 values. + return $top . ' ' . $right . ' ' . $bottom . ' ' . $left; + } + + /** + * Convert border radius object to CSS value string. + * + * @param mixed $border_radius Border radius value (string or array with topLeft, topRight, bottomRight, bottomLeft). + * @return string CSS border-radius value string. + */ + private function border_radius_to_css( $border_radius ): string { + // Handle string value. + if ( is_string( $border_radius ) ) { + return $border_radius; + } + + // Handle array value. + if ( ! is_array( $border_radius ) || empty( $border_radius ) ) { + return ''; + } + + $top_left = isset( $border_radius['topLeft'] ) ? (string) $border_radius['topLeft'] : ''; + $top_right = isset( $border_radius['topRight'] ) ? (string) $border_radius['topRight'] : ''; + $bottom_right = isset( $border_radius['bottomRight'] ) ? (string) $border_radius['bottomRight'] : ''; + $bottom_left = isset( $border_radius['bottomLeft'] ) ? (string) $border_radius['bottomLeft'] : ''; - return ( '' !== $value ) ? $value : $default; + // If all values are empty, return empty string. + if ( '' === $top_left && '' === $top_right && '' === $bottom_right && '' === $bottom_left ) { + return ''; + } + + // If all values are the same and not empty, use single value shorthand. + if ( '' !== $top_left && $top_left === $top_right && $top_right === $bottom_right && $bottom_right === $bottom_left ) { + return $top_left; + } + + // For partial radius or mixed values, we need all 4 values. + // Use '0' for empty corners to ensure proper CSS. + $top_left = '' !== $top_left ? $top_left : '0'; + $top_right = '' !== $top_right ? $top_right : '0'; + $bottom_right = '' !== $bottom_right ? $bottom_right : '0'; + $bottom_left = '' !== $bottom_left ? $bottom_left : '0'; + + // CSS border-radius order: top-left, top-right, bottom-right, bottom-left. + return $top_left . ' ' . $top_right . ' ' . $bottom_right . ' ' . $bottom_left; } /** * Inject Priority+ data attributes into the navigation element. * - * @param string $block_content The block HTML content. - * @param string $more_label The "more" button label. - * @param string $more_icon The "more" button icon. + * @param string $block_content The block HTML content. + * @param string $more_label The "more" button label. + * @param string $more_icon The "more" button icon. + * @param string $more_background_color The "more" button background color. + * @param string $more_background_color_hover The "more" button background hover color. + * @param string $more_text_color The "more" button text color. + * @param string $more_text_color_hover The "more" button text hover color. + * @param array $more_padding The "more" button padding values. * @return string Modified block content with data attributes. */ - private function inject_priority_attributes( string $block_content, string $more_label, string $more_icon ): string { + private function inject_priority_attributes( string $block_content, string $more_label, string $more_icon, string $more_background_color = '', string $more_background_color_hover = '', string $more_text_color = '', string $more_text_color_hover = '', array $more_padding = array() ): string { if ( '' === $block_content ) { return $block_content; } // Match the opening