FSE: Larger site logo is not resized on smaller screens

[Gustavo-Hilario]

Quick summary

When using a larger Site Logo on a template, the logo isn't getting resized on smaller screens.

Steps to reproduce

1. Activate the Blockbase theme or one of its children's themes.
2. Add the Site Logo block to your template.
3. On the editor resize the image to be larger than the normal viewport for mobile devices.
4. Save the changes.
5. Check your site on a mobile device.

What you expected to happen

I expected the logo to resize on smaller screens.

What actually happened

Apparently, the logo keeps the same size set on the editor.

Screenshot:

Context

Customer report here: 5266202-zen

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

I replicated this issue on the Blockbase theme, but also on its children's themes like Dorna and Hari.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

There are two possible workarounds here:

1 – CSS code. This isn't ideal as the image might be distorted, but users can use this CSS code:

.custom-logo {
    max-width: 100%;
}

2 – Use an Image block instead of the Site Logo block. For this, users might want to add the home page link to their image.

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - Yes

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• Context: this is not theme specific. I noticed this happens with other FSE themes as well.

📌 ACTIONS

• Marked as Triaged for Quality Squad review

@scruffian I found this PR WordPress/gutenberg#41298 - will this be available in Gutenberg 13.4?

[scruffian]

Yeah I think this is fixed by WordPress/gutenberg#41298

[mikeicode]

I ran into this today using the theme Meraki, the resized logo was too large on mobile so I used CSS to set the max-width. pdEkSe-xG-p2

.custom-logo {
  max-width:100%;
  height:auto;
}