Zoom out may break out of canvas in Twenty Twenty Five theme

[getdave]

In the report below it appears that TT5 may break Zoom Out (or Zoom Out doesn't cater for something special TT5 is doing).

Pinging @sarahmonster @MaggieCabrera for expertise.

Needs triage.

---

There's a curious width issue, not sure if it's related to this branch or not:

Originally posted by @jasmussen in #65392 (comment)

[MaggieCabrera]

I could not reproduce this by inserting these patterns in a page. I did find that the full page patterns in TT5 are wrapped in a group, which invalidates zoom out and maybe that should be patched within the theme

[MaggieCabrera]

The problem is the yellow pattern, the text is too big and it causes overflow on zoom out. I am not sure if the problem should be fixed on TT5 or if anything else should be done in zoom out too.

Editor	Frontend

[jasmussen]

We probably want to improve it in TT5, however it seems like something we might want zooming to handle as well. Can you try just a really long paragraph, see how that fares?

ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

[MaggieCabrera]

There seems to be something weird going on. Without zoom out mode at all, this is the editor vs the frontend:

Editor:

Frontend (a horizontal scrollbar appears):

[jasmussen]

Hrm. We might need a word-break rule somewhere. I guess this is a theme thing?

[MaggieCabrera]

Hrm. We might need a word-break rule somewhere. I guess this is a theme thing?

No, I saved a post with this template pasted and moved to emptytheme and the inconsistency persists

[getdave]

This isn't a Zoom Out specific thing then right?

[MaggieCabrera]

This isn't a Zoom Out specific thing then right?

I see two different things here:

• The difference between editor and frontend. That seems like an editor issue
• The zoom out problem, that looks like a zoom out scaling issue, since it should work like the editor and overflow the wording. I think this is covered by Scaling not one to one when zooming out #65757

In any case, TT5 is not at fault beyond just having big text that highlights this issue. I checked the theme and it has very little CSS, so this kind of issue could affect any other theme.

[richtabor]

Is it just the big text that is causing the zoom out distortion? We can make it smaller to mask the issue while #65757 is being explored.

[MaggieCabrera]

Is it just the big text that is causing the zoom out distortion? We can make it smaller to mask the issue while #65757 is being explored.

yes, if you remove the Stories pattern it goes away

[richtabor]

Related #65974

[colorful-tones]

I'm not sure how/why this was not on the WP 6.7 board, but I'm adding it now.

[colorful-tones]

I just tested this in WP 6.7 beta 2 with Twenty Twenty-Five and I am not able to recreate the original issue reported:

In the report below it appears that TT5 may break Zoom Out (or Zoom Out doesn't cater for something special TT5 is doing).

and

There's a curious width issue, not sure if it's related to this branch or not:

I'm not sure what branch @getdave was referring to?

However, there is a separate issue later referred to and likely worthy of opening a separate issue for:

The difference between editor and frontend. That seems like an editor issue

The issue persists, and it seems to be related possibly to browser styling. In Chrome 129 there are some additional styles that are output in the editor only:

p[Attributes Style] {
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

This seems odd to me that they're only output by the browser and only in the editor? 😕

[MaggieCabrera]

I think we can close this one as fixed via #65757 and let's open a new one regarding the frontend/site editor disparity, which is unrelated to zoom out or TT5

[getdave]

Ok let's close out 👍