Assembler: Navigation block unexpectedly moving to the right on mobile.

[alaczek]

Quick summary

When I was working on Luxus theme (using Assembler as base) I run into an issue with the mobile menu switching position from left (before Site Title), to right (after Site Title) on mobile, for no discernible reason. I finally realized this section of the style.css was responsible: https://github.com/Automattic/themes/blob/trunk/assembler/style.css#L55

@richtabor can you add more background as to why this piece of CSS is necessary?

Steps to reproduce

1. Try out this header pattern with the Assembler theme:

<!-- wp:group {"metadata":{"name":"Header Container"},"align":"full","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}},"border":{"bottom":{"color":"var:preset|color|theme-4","width":"1px"}},"position":{"type":""}},"backgroundColor":"theme-1","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-theme-1-background-color has-background" style="border-bottom-color:var(--wp--preset--color--theme-4);border-bottom-width:1px;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:spacer {"height":"var:preset|spacing|20","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"tagName":"header","metadata":{"name":"Contents"},"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"position":{"type":""}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"grid","columnCount":"2","minimumColumnWidth":null}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:navigation {"overlayMenu":"always","overlayBackgroundColor":"theme-1","overlayTextColor":"theme-4","className":"order-1 md:order-0","layout":{"type":"flex","justifyContent":"left","flexWrap":"wrap"},"fontSize":"medium"} /-->

<!-- wp:site-title {"fontSize":"medium"} /--></div>
<!-- /wp:group -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Book now — (123) 456 - 789</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></header>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|20","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

2. Note the behavior on desktop vs mobile. On desktop the nav buttton is on the left, while on mobile it switched position to the right (after Site Title).

Desktop view:

Mobile view:

What you expected to happen

I expected the nav to respect block settings and remain in the same spot on desktop and mobile.

What actually happened

The nav switched places with Site Title block.

Browser

No response

Context

theme building

Platform (Simple, Atomic, or both?)

No response

Other notes

No response

Reproducibility

Consistent

Severity

None

Available workarounds?

None

Workaround details

No response

[richtabor]

for no discernible reason.

It's so the navigation moves to the farthest left/right position (dependent on the pattern).

Desktop

Mobile

Before	After

[richtabor]

For your new theme, you can remove the class add to the blocks' "Advanced" Panel in the Block Inspector, as your menu is properly placed for mobile and desktop without needing a helper class.

[alaczek]

For your new theme, you can remove the class add to the blocks' "Advanced" Panel in the Block Inspector, as your menu is properly placed for mobile and desktop without needing a helper class.

Yeah, I know this (now). The bigger issue is that I'm on my third Assembler based theme, and this and other manual tasks I need to do are starting to annoy me. For reference, here's what I typically do when I start working on a new theme:

• remove the custom CSS (from the style.css and theme.json - this one is particularly annoying)
• remove all the fonts bundled with Assembler (there's a lot)
• switching the page templates around (Assembler's default is page without title, but I always include title in themes)
• not a task but a something I still haven't fully embraced are the color slot names - it's hard to figure out at a glance which colors are for foreground/background.

[lsl]

Moving needs shaping: The bug isn't really a bug, but there are a few things in the Assembler theme that could use iterating on, is that a correct take?

[alaczek]

Yep, sounds right, and given Assembler's primary goal isn't to a base theme for other themes, we can close this.

[lsl]

I'm on my third Assembler based theme

Third and last?

[alaczek]

I will likely use one of my previous Assembler themes as a base going forward.