Atomic: No-label search bar in Site-Assembler-created-header adds horizontal empty space to pages and posts

[candy02058912]

Quick summary

From https://github.com/Automattic/themes/issues/6141, styles are inconsistent when a site is on atomic compared to on simple.

For this particular issue I bumped into, it was only reproducible by going through Site Assembler + Atomic. Directly changing the theme to Creatio 2 and editing the header won't cause this issue.

Feels tricky, so opening an issue to document it and wondering if there's a larger bug happening in the background.

Steps to reproduce

On Atomic site

1. Go to /themes
2. Go to Site Assembler
3. Pick patterns (see videos for what I picked)
4. Go to Full Site Editing
5. Add in the search bar (see videos for exact steps)
6. Browse site post (home page is okay)

https://github.com/Automattic/wp-calypso/assets/6586048/e002bb1b-a5bb-4ef0-bf33-04938b619889

On Simple site

https://github.com/Automattic/wp-calypso/assets/6586048/714183b8-61fb-4d0c-80d5-c7d842789f87

Revert to non-atomic in case you don't want to create a new site and go over all the steps. Or you can start vise-versa with the simple site and convert it to atomic, same steps apply as the video.

What you expected to happen

Search bar should not cause the site styles to break on simple or atomic.

What actually happened

Simple ✅ Atomic: ❌ Styles are different and broke the layout

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

A workaround would be to use CSS style overrides to fix the issue.

.wp-block-search__label {
  width: initial;
}

Style issue happens on Chrome and Safari due to the width:100% on atomic sites. Firefox renders normally but also loads the width:100% on atomic sites.

Observing the CSS, though, it is inconsistent between atomic and simple.

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO The patterns added in the video were:

• Simple Header
• Recent Posts
• Simple centered footer

And the settings applied to the search block were: inserted after nav block, no label, no button, & inside of a row with the nav block.

https://github.com/Automattic/wp-calypso/assets/27249804/e9df5545-98b2-4062-bde9-2ffe3e8c7c68

It seems that the specific patterns don't matter, but created via site assembler and no label on search block must be included. That results in this:

.wp-block-search__label {
    width: 100%;
}

https://github.com/Automattic/wp-calypso/assets/27249804/538b5318-af54-4f3d-9ce3-001a8397c6f4

---

Could not replicate on Simple, or on AT using any other theme including Creatio 2 selected from the theme showcase.

📌 ACTIONS

• Triaged