Skip to content

Fix mobile menu editor crash, header logo, and Services layout (LS-2243) #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandonmarshal merged 4 commits into from
Aug 4, 2026
Merged

Fix mobile menu editor crash, header logo, and Services layout (LS-2243) #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cdc24dc
Fix mobile menu editor crash, header logo, and Services layout (LS-2243)
brandonmarshal Aug 3, 2026
359c09e
Merge remote-tracking branch 'origin/develop' into LS-2243-mobile-men…
brandonmarshal Aug 3, 2026
8adde4a
Fix hardcoded divider colours and border syntax per Copilot review (L…
brandonmarshal Aug 4, 2026
9460ad1
Update site logo link in header pattern to be clickable (IsLink: true)
brandonmarshal Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions assets/css/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1684,18 +1684,6 @@
text-align: center;
}

/*
* Services accordion: phase groups are separated by dashed dividers rather than solid ones,
* keeping the lighter-weight hierarchy the desktop Services panel also uses between phase
* columns. core/separator has no "style: dashed" support declared in its block.json, so setting
* that via a block style attribute fails Gutenberg's save-output validation — the dashed look is
* applied here instead, against the plain default-attribute wp:separator markup.
*/
.mobile-menu-accordion-services hr.wp-block-separator {
margin-block: var(--wp--preset--spacing--10);
border-style: dashed;
}

.mobile-menu-brand {
min-block-size: 44px;
padding-block-end: var(--wp--preset--spacing--20);
Expand Down
94 changes: 46 additions & 48 deletions parts/mobile-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- wp:group {"className":"mobile-menu","layout":{"type":"flow"}} -->
<div class="wp-block-group mobile-menu"><!-- wp:group {"className":"mobile-menu-brand","layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group mobile-menu-brand"><!-- wp:site-logo /--></div>
<!-- wp:group {"className":"mobile-menu","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|0","bottom":"var:preset|spacing|0"}}},"layout":{"type":"flow"}} -->
<div class="wp-block-group mobile-menu" style="margin-top:var(--wp--preset--spacing--0);margin-bottom:var(--wp--preset--spacing--0);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:group {"className":"mobile-menu-brand","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group mobile-menu-brand" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:site-logo /--></div>
<!-- /wp:group -->

<!-- wp:details {"className":"mobile-menu-accordion"} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>Work</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Travel publisher rebuild</a></p>
Expand Down Expand Up @@ -35,7 +35,7 @@
<!-- /wp:group --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"mobile-menu-accordion"} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>Solutions</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">WordPress</a></p>
Expand All @@ -61,8 +61,8 @@
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Tour Operators</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Design Systems</a></p>
<!-- wp:paragraph {"className":"is-style-link-arrow-accent","fontSize":"100"} -->
<p class="is-style-link-arrow-accent has-100-font-size"><a href="#">Design Systems</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"is-style-link-arrow-accent","fontSize":"100"} -->
Expand All @@ -71,9 +71,11 @@
<!-- /wp:group --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"mobile-menu-accordion mobile-menu-accordion-services"} -->
<details class="wp-block-details mobile-menu-accordion mobile-menu-accordion-services"><summary>Services</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>Services</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","justifyContent":"stretch"}} -->
<div class="wp-block-group"><!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false,"className":"is-style-mega-menu-item-service","style":{"layout":{"selfStretch":"fit","flexSize":null},"border":{"top":{"style":"none","width":"0px"},"right":{"style":"none","width":"0px"},"bottom":{"color":"var:custom|color|border|card","style":"dashed","width":"1px"},"left":{"style":"none","width":"0px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|20"}}},"fontSize":"200"} -->
<div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile is-style-mega-menu-item-service has-200-font-size" style="border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:dashed;border-bottom-width:1px;border-left-style:none;border-left-width:0px;padding-bottom:var(--wp--preset--spacing--20)"><!-- wp:column {"verticalAlignment":"top","width":"180px"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:180px"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-one-strong","iconColorValue":"#32800D","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--discover)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-one-strong-color" style="color:var(--wp--custom--color--phase--discover);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -85,13 +87,11 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Discovery</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:column {"verticalAlignment":"top","width":"180px"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:180px"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-two-strong","iconColorValue":"#0E7B8E","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--create)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-two-strong-color" style="color:var(--wp--custom--color--phase--create);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -107,13 +107,13 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Design</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:columns {"isStackedOnMobile":false,"className":"is-style-mega-menu-item-service","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"dashed","width":"1px"},"top":{},"right":{},"left":{}},"spacing":{"padding":{"bottom":"var:preset|spacing|20"}}},"fontSize":"200"} -->
<div class="wp-block-columns is-not-stacked-on-mobile is-style-mega-menu-item-service has-200-font-size" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:dashed;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--20)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-three-strong","iconColorValue":"#DB016D","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--build)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-three-strong-color" style="color:var(--wp--custom--color--phase--build);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -129,13 +129,11 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Migrations</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-four-strong","iconColorValue":"#826F03","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--launch)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-four-strong-color" style="color:var(--wp--custom--color--phase--launch);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -159,13 +157,13 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Training</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:columns {"isStackedOnMobile":false,"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<div class="wp-block-columns is-not-stacked-on-mobile is-style-mega-menu-item-service has-200-font-size"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-five-strong","iconColorValue":"#157F5C","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--grow)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-five-strong-color" style="color:var(--wp--custom--color--phase--grow);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -189,13 +187,11 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Email marketing</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"","iconColor":"phase-six-strong","iconColorValue":"#585AF7","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--phase--evolve)"}}} -->
<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container has-icon-color has-phase-six-strong-color" style="color:var(--wp--custom--color--phase--evolve);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->
Expand All @@ -207,19 +203,21 @@

<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">AI</a></p>
<!-- /wp:paragraph -->
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"className":"is-style-link-arrow-accent","fontSize":"100"} -->
<p class="is-style-link-arrow-accent has-100-font-size"><a href="#">See all services</a></p>
<!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">See all services</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></details>
<!-- /wp:details -->

<!-- wp:paragraph {"className":"mobile-menu-link-row"} -->
<p class="mobile-menu-link-row"><a href="/systems/">Systems</a></p>
<!-- wp:paragraph {"className":"mobile-menu-link-row","style":{"spacing":{"padding":{"top":"var:preset|spacing|10"}}}} -->
<p class="mobile-menu-link-row" style="padding-top:var(--wp--preset--spacing--10)"><a href="/systems/">Systems</a></p>
<!-- /wp:paragraph -->

<!-- wp:details {"className":"mobile-menu-accordion"} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>Pricing</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Foundation</a></p>
Expand Down Expand Up @@ -251,7 +249,7 @@
<!-- /wp:group --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"mobile-menu-accordion"} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>Insights</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Block themes &amp; FSE</a></p>
Expand Down Expand Up @@ -283,7 +281,7 @@
<!-- /wp:group --></details>
<!-- /wp:details -->

<!-- wp:details {"className":"mobile-menu-accordion"} -->
<!-- wp:details {"className":"mobile-menu-accordion","layout":{"type":"default"}} -->
<details class="wp-block-details mobile-menu-accordion"><summary>About</summary><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"is-style-mega-menu-item-service","fontSize":"200"} -->
<p class="is-style-mega-menu-item-service has-200-font-size"><a href="#">Why LightSpeed</a></p>
Expand Down
4 changes: 1 addition & 3 deletions patterns/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@

<!-- wp:group {"tagName":"header","metadata":{"patternName":"ls-theme/header","name":"Header","description":"Site header — logo, primary navigation, search, light/dark toggle, and \u0022Start a project\u0022 CTA.","categories":["header"]},"className":"site-header","style":{"border":{"bottom":{"width":"1px","style":"solid","color":"var:custom|color|border|card"}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}}} -->
<header class="wp-block-group site-header" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:solid;border-bottom-width:1px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"id":225,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:8882/wp-content/uploads/2026/07/image-1.png" alt="<?php echo esc_attr__( 'LightSpeed', 'ls-theme' ); ?>" class="wp-image-225"/></figure>
<!-- /wp:image -->
<div class="wp-block-group"><!-- wp:site-logo {"isLink":true} /-->

<!-- wp:navigation {"ref":226,"mobileMenuSlug":"mobile-menu","mobileMenuBreakpointEnabled":true,"mobileMenuBreakpoint":1024,"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} /-->

Expand Down
12 changes: 0 additions & 12 deletions src/scss/animations/_mobile-menu-motion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,18 +217,6 @@
}
}

/*
* Services accordion: phase groups are separated by dashed dividers rather than solid ones,
* keeping the lighter-weight hierarchy the desktop Services panel also uses between phase
* columns. core/separator has no "style: dashed" support declared in its block.json, so setting
* that via a block style attribute fails Gutenberg's save-output validation — the dashed look is
* applied here instead, against the plain default-attribute wp:separator markup.
*/
.mobile-menu-accordion-services hr.wp-block-separator {
margin-block: var(--wp--preset--spacing--10);
border-style: dashed;
}

.mobile-menu-brand {
min-block-size: 44px;
padding-block-end: var(--wp--preset--spacing--20);
Expand Down
Loading