Adding classes to backend editor-styles-wrapper for preview selections (mobile, tablet, desktop)

[covertnine]

Brought this up in #19082 about adding class names to the editor-styles-wrapper when the preview width is changed so those of us with media queries on containers in that backend will be able to make adjustments in lieu of the upcoming iFrame solution.

Something like has-mobile-preview, has-tablet-preview-portrait etc.

Is your feature request related to a problem? Please describe.
It's related to backend container widths overflowing the preview area cause their widths are set with pixels and a media query for screen width, which technically isn't changing. See recordit below:

https://recordit.co/rT2hnNKYzT

Describe the solution you'd like
Adding classnames for each preview screen size to the editor-styles-wrapper element such as has-mobile-review or has-tablet-preview

I'd also suggest adding more previews: phone landscape and tablet landscape.

Describe alternatives you've considered
This would be a bridge solution to the iframe editor is completed.

[jasmussen]

Thank you for the ticket.

High level, we want to make it easy for theme and plugin developers to work with their plugins and visuals inside the editing canvas. The preview dropdown was one step towards that, and there are many other efforts that may make improve this further in the future.

In the mean time, adding these utility classes does seem like a very small but useful interim improvement.

We want to make sure that the classes are mindful of the add_editor_style mechanism, which rewrites .editor-styles-wrapper to body in editor styles.

When you get a chance to breathe, @youknowriad, I'd appreciate your thoughts on this.

[cr0ybot]

I was just commenting about this in #34569 (comment), though this seems like a more appropriate issue (and it's been open a heck of a lot longer).

While I'd appreciate some way to utilize the is-mobile-preview et al classes within editor styles (which you can't, since the element is above .editor-styles-wrapper), I noticed that the core block styles seem to be using some separate mechanism that applies a different stylesheet when one of the preview types is active. If I can't somehow adapt my stylesheets to utilize the classes we're talking about, I could possibly adapt them to put styles for different preview states into different stylesheets. This would require some kind of enhancement to the add_editor_style() method to maybe include a second parameter for the preview slug: 'desktop', 'tablet', or 'mobile', and not specifying a slug would mean the stylesheet applies globally.

[jordesign]

Just looping back to this older issue - @covertnine do you see the issues mentioned in this resolved with the new iframed editor/preview?

[covertnine]

I haven't had a chance to test but I will do so over the weekend.