{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 3, "name": "bpsc/header-section", "version": "1.0.0", "title": "Header Section", "category": "section-collection", "description": "A complete site header with mega menus, mobile drawer and sticky or transparent modes.", "keywords": [ "header", "navigation", "menu", "navbar", "mega menu", "sticky header", "site header", "section" ], "textdomain": "section-collection", "attributes": { "themeStyle": { "type": "object", "default": { "theme": "style-1" } }, "sectionTag": { "type": "string", "default": "header" }, "ariaLabel": { "type": "string", "default": "" }, "navAriaLabel": { "type": "string", "default": "Primary" }, "content": { "type": "object", "default": { "logo": { "id": null, "url": "", "alt": "", "title": "" }, "logoLight": { "id": null, "url": "", "alt": "", "title": "" }, "useSiteIdentity": false, "brandName": "Your Brand", "tagline": "Websites that work", "logoUrl": "", "searchPlaceholder": "Search the site...", "searchLabel": "Search", "menuToggleLabel": "Menu", "closeLabel": "Close menu", "drawerHeading": "", "skipLinkLabel": "Skip to content", "logoScrolled": { "id": null, "url": "", "alt": "", "title": "" } } }, "elements": { "type": "object", "default": { "isLogo": true, "isLogoMark": true, "isBrandName": true, "isTagline": false, "isMenu": true, "isCta": true, "isCtaSecondary": true, "isSearch": true, "isTopBar": false, "isTopBarContact": true, "isTopBarSocial": true, "isAnnouncement": false, "isSkipLink": true, "isDrawerCta": true, "isDrawerSearch": true, "isDrawerSocial": true, "isDrawerContact": true, "isSocialMobile": true } }, "menuSource": { "type": "object", "default": { "type": "custom", "menuId": 0 } }, "menuItems": { "type": "array", "default": [ { "id": "m1", "label": "Home", "url": "/", "newTab": false, "nofollow": false, "badge": "", "description": "", "type": "link", "children": [] }, { "id": "m2", "label": "About", "url": "", "newTab": false, "nofollow": false, "badge": "", "description": "", "type": "dropdown", "children": [ { "id": "m2a", "label": "Our story", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Why we started", "children": [] }, { "id": "m2b", "label": "Team", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "The people behind the work", "children": [] }, { "id": "m2c", "label": "Careers", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Join us", "children": [ { "id": "m2c1", "label": "Open roles", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "" }, { "id": "m2c2", "label": "Culture and benefits", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "" } ] } ] }, { "id": "m3", "label": "Services", "url": "", "newTab": false, "nofollow": false, "badge": "New", "description": "", "type": "mega", "mega": { "columns": 3, "width": "container", "featured": { "enabled": true, "image": { "id": null, "url": "", "alt": "" }, "title": "Free website audit", "text": "Get a 20-point review of your site, delivered within 48 hours.", "ctaText": "Book yours", "ctaUrl": "#" } }, "children": [ { "id": "m3a", "label": "Build", "url": "", "children": [ { "id": "m3a1", "label": "Web design", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Custom sites that convert", "children": [] }, { "id": "m3a2", "label": "Branding", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Logos and visual identity", "children": [] }, { "id": "m3a3", "label": "Development", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Fast, scalable builds", "children": [] } ] }, { "id": "m3b", "label": "Grow", "url": "", "children": [ { "id": "m3b1", "label": "SEO", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Rank higher, get found", "children": [] }, { "id": "m3b2", "label": "Content", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Stories that sell", "children": [] }, { "id": "m3b3", "label": "Analytics", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Know what works", "children": [] } ] }, { "id": "m3c", "label": "Support", "url": "", "children": [ { "id": "m3c1", "label": "Maintenance", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Updates and backups", "children": [] }, { "id": "m3c2", "label": "Hosting", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Secure, managed hosting", "children": [] }, { "id": "m3c3", "label": "Training", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "Learn your tools", "children": [] } ] } ] }, { "id": "m4", "label": "Pricing", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "", "type": "link", "children": [] }, { "id": "m5", "label": "Blog", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "", "type": "link", "children": [] }, { "id": "m6", "label": "Contact", "url": "#", "newTab": false, "nofollow": false, "badge": "", "description": "", "type": "link", "children": [] } ] }, "cta": { "type": "object", "default": { "text": "Get started", "url": "#", "newTab": false } }, "ctaSecondary": { "type": "object", "default": { "text": "Log in", "url": "#", "newTab": false } }, "search": { "type": "object", "default": { "mode": "overlay", "postType": "", "action": "" } }, "topBar": { "type": "object", "default": { "contact": [ { "id": "t1", "type": "phone", "label": "+1 (555) 010-1234", "url": "tel:+15550101234" }, { "id": "t2", "type": "email", "label": "hello@example.com", "url": "mailto:hello@example.com" }, { "id": "t3", "type": "hours", "label": "Mon-Fri 9am-6pm", "url": "" } ], "announcement": { "text": "Free shipping on all orders this week.", "linkText": "Shop now", "linkUrl": "#", "dismissible": true, "dismissKey": "v1" }, "align": "space-between" } }, "social": { "type": "array", "default": [ { "id": "s1", "platform": "twitter", "url": "", "newTab": true }, { "id": "s2", "platform": "linkedin", "url": "", "newTab": true }, { "id": "s3", "platform": "instagram", "url": "", "newTab": true }, { "id": "s4", "platform": "facebook", "url": "", "newTab": true } ] }, "layout": { "type": "object", "default": { "height": { "desktop": "80px", "tablet": "72px", "mobile": "64px" }, "menuAlign": "left", "itemGap": { "desktop": "4px", "tablet": "2px", "mobile": "0px" } } }, "behavior": { "type": "object", "default": { "position": "sticky", "offsetTop": "0px", "zIndex": 999, "shrink": { "enabled": true, "height": "64px", "logoScale": 0.88 }, "transparent": { "enabled": false, "scrollThreshold": 24, "spacer": false }, "mobileBreakpoint": 1024, "openOn": "hover", "hoverIntentMs": 130, "dropdownAnimation": "fade", "scrollSpy": false, "scrollPaddingTop": true, "closeDelayMs": 280 } }, "drawer": { "type": "object", "default": { "position": "right", "width": "380px", "closeOnLinkClick": true, "closeOnBackdrop": true, "hamburger": "lines", "submenuMode": "accordion" } }, "compat": { "type": "object", "default": { "hideThemeHeader": true, "themeHeaderSelector": "#masthead, .site-header" } }, "contentMaxWidth": { "type": "object", "default": { "desktop": "1280px", "tablet": "100%", "mobile": "100%" } }, "sectionMargin": { "type": "object", "default": { "desktop": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "tablet": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "mobile": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" } } }, "sectionPadding": { "type": "object", "default": { "desktop": { "top": "0px", "right": "32px", "bottom": "0px", "left": "32px" }, "tablet": { "top": "0px", "right": "24px", "bottom": "0px", "left": "24px" }, "mobile": { "top": "0px", "right": "16px", "bottom": "0px", "left": "16px" } } }, "sectionRadius": { "type": "number", "default": 0 }, "sectionShadow": { "type": "array", "default": [] }, "barBlur": { "type": "string", "default": "0px" }, "background": { "type": "object", "default": { "type": "solid", "color": "#ffffff", "gradient": "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)", "overlayColor": "rgba(0,0,0,0)", "image": { "url": "" }, "position": "center center", "repeat": "no-repeat", "size": "cover" } }, "borderBottom": { "type": "object", "default": { "width": "1px", "color": "#e5e7eb" } }, "stickyBackground": { "type": "object", "default": { "type": "solid", "color": "#ffffff", "gradient": "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)", "overlayColor": "rgba(0,0,0,0)", "image": { "url": "" }, "position": "center center", "repeat": "no-repeat", "size": "cover" } }, "topBarBackground": { "type": "object", "default": { "type": "" } }, "submenuBackground": { "type": "object", "default": { "type": "" } }, "drawerBackground": { "type": "object", "default": { "type": "" } }, "stickyStyle": { "type": "object", "default": { "bg": "#ffffff", "blur": "0px", "borderColor": "#e5e7eb", "shadow": "0 8px 24px -12px rgba(15,23,42,0.18)" } }, "transparentStyle": { "type": "object", "default": { "textColor": "#ffffff", "hoverColor": "#ffffff", "borderColor": "rgba(255,255,255,0.2)", "ctaBg": "#4f46e5", "ctaText": "#ffffff" } }, "logoStyle": { "type": "object", "default": { "maxWidth": "160px", "maxHeight": "40px", "markSize": "34px", "width": { "desktop": "", "tablet": "", "mobile": "" }, "height": { "desktop": "", "tablet": "", "mobile": "" } } }, "brandNameStyle": { "type": "object", "default": { "color": "#111827", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 700, "isUploadFont": true, "fontSize": { "desktop": 21, "tablet": 20, "mobile": 19 }, "lineHeight": "1.2", "textTransform": "none" } } }, "taglineStyle": { "type": "object", "default": { "color": "#4b5563", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 400, "isUploadFont": true, "fontSize": { "desktop": 12, "tablet": 12, "mobile": 12 }, "textTransform": "none" } } }, "menuLinkStyle": { "type": "object", "default": { "color": "#4b5563", "hoverColor": "#111827", "activeColor": "#4338ca", "hoverBg": "rgba(79,70,229,0.08)", "activeBg": "rgba(0,0,0,0)", "indicator": "underline", "indicatorColor": "#4f46e5", "indicatorThickness": "2px", "borderRadius": "8px", "padding": { "desktop": { "top": "10px", "right": "14px", "bottom": "10px", "left": "14px" }, "tablet": { "top": "10px", "right": "12px", "bottom": "10px", "left": "12px" }, "mobile": { "top": "12px", "right": "0px", "bottom": "12px", "left": "0px" } }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 500, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 17 }, "lineHeight": "1.4", "textTransform": "none" } } }, "submenuStyle": { "type": "object", "default": { "bg": "#ffffff", "borderColor": "#e5e7eb", "width": "270px", "borderRadius": "14px", "shadow": "0 24px 48px -18px rgba(15,23,42,0.24)", "itemColor": "#111827", "itemHoverColor": "#4338ca", "itemHoverBg": "rgba(79,70,229,0.08)", "descColor": "#4b5563", "headingColor": "#111827", "badgeBg": "#4f46e5", "badgeText": "#ffffff", "featuredBg": "rgba(79,70,229,0.08)", "featuredText": "#111827", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 500, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 16 }, "lineHeight": "1.4", "textTransform": "none" } } }, "ctaStyle": { "type": "object", "default": { "backgroundColor": "#4f46e5", "textColor": "#ffffff", "hoverBackgroundColor": "#4338ca", "hoverTextColor": "#ffffff", "borderColor": "rgba(0,0,0,0)", "borderRadius": "10px", "padding": { "desktop": { "top": "11px", "right": "22px", "bottom": "11px", "left": "22px" }, "tablet": { "top": "10px", "right": "18px", "bottom": "10px", "left": "18px" }, "mobile": { "top": "13px", "right": "20px", "bottom": "13px", "left": "20px" } }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 16 }, "textTransform": "none" } } }, "ctaSecondaryStyle": { "type": "object", "default": { "backgroundColor": "rgba(0,0,0,0)", "textColor": "#111827", "hoverBackgroundColor": "rgba(79,70,229,0.08)", "hoverTextColor": "#4338ca", "borderColor": "#e5e7eb", "borderRadius": "10px", "padding": { "desktop": { "top": "10px", "right": "20px", "bottom": "10px", "left": "20px" }, "tablet": { "top": "9px", "right": "16px", "bottom": "9px", "left": "16px" }, "mobile": { "top": "12px", "right": "20px", "bottom": "12px", "left": "20px" } }, "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 600, "isUploadFont": true, "fontSize": { "desktop": 15, "tablet": 15, "mobile": 16 }, "textTransform": "none" } } }, "searchStyle": { "type": "object", "default": { "iconColor": "#4b5563", "hoverIconColor": "#4338ca", "iconBg": "rgba(0,0,0,0)", "hoverIconBg": "rgba(79,70,229,0.08)", "panelBg": "#ffffff", "inputBg": "#f8fafc", "inputColor": "#111827", "inputBorder": "#e5e7eb", "focusBorder": "#4f46e5", "size": "20px" } }, "hamburgerStyle": { "type": "object", "default": { "color": "#111827", "bg": "rgba(0,0,0,0)", "hoverBg": "rgba(79,70,229,0.08)", "borderRadius": "10px", "size": "44px" } }, "drawerStyle": { "type": "object", "default": { "bg": "#ffffff", "textColor": "#111827", "dimColor": "#4b5563", "dividerColor": "#e5e7eb", "scrim": "rgba(15,23,42,0.55)", "closeBg": "rgba(79,70,229,0.08)", "closeColor": "#111827", "radius": 0 } }, "topBarStyle": { "type": "object", "default": { "bg": "#0f172a", "textColor": "#ffffff", "dimColor": "rgba(255,255,255,0.75)", "iconColor": "#a5b4fc", "hoverColor": "#ffffff", "borderColor": "rgba(255,255,255,0.12)", "socialSize": "15px", "typo": { "fontCategory": "sans-serif", "fontFamily": "Default", "fontWeight": 400, "isUploadFont": true, "fontSize": { "desktop": 13, "tablet": 13, "mobile": 12 }, "textTransform": "none" } } }, "focusStyle": { "type": "object", "default": { "ringColor": "#4f46e5", "ringWidth": "2px", "ringOffset": "2px" } }, "align": { "type": "string", "default": "full" } }, "supports": { "align": [ "wide", "full" ], "html": false }, "example": { "attributes": {} }, "editorScript": "file:../index.js", "style": "file:./view.css", "render": "file:./render.php", "viewScript": "file:./view.js" }