Gutenberg: long anchors make the list view take a lot of space

[mxhassani]

Quick summary

When adding long HTML anchors to a block in the Advanced settings, the list view in the editor takes more and more space on the screen.

Steps to reproduce

1. Add a block
2. Open the list view
3. Go to block settings > Advanced > HTML anchor
4. Add a long anchor text
5. Notice the width of the list view getting bigger

What you expected to happen

The width of the list view to stay the same

What actually happened

The list view gets bigger, and makes the editor too small

Context

5453488-zd-woothemes

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

Firefox 103 on macOS (Catalina) - doesn't look specific

Reproducibility

Consistent

Severity

All

Available workarounds?

No response

Workaround details

The issue seems to be coming from this backend CSS code:

.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
max-width: min(100px,40%);
}

It can be replaced with this instead:

.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
max-width: min(100px,40vw);
}

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5453488-zen

[KirkwallDay]

• Another instance here: 36387662-hc

[renata-franco]

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - Yes

---

📌 FINDINGS/SCREENSHOTS/VIDEO

I was able to replicate it on Simple, AT, and self-hosted sites.

Simple:

AT site:

Self-Hosted:

Here is a video of what it looks like:

CleanShot.2022-08-10.at.17.18.35.mp4

---

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[Robertght]

Looks like it's gonna be fixed in the 14.0 release: WordPress/gutenberg#43134

[annezazu]

Closing out as this has been fixed :) WordPress/gutenberg#43134