Adding class on preview (mobile, tablet, desktop, ...) to visual-editor or body

[Vanillabacke]

Hallo,

For developing an block that has an responsive behavior, it would be nice to get a class like "preview-tablet" for the visual editor, sidebar or best case for the body in the backend. An advantage for it would be, that you can easily use it in the block css and it would directly effect the style without checking the container width in the script.

Some event for that would be nice too, so that you can use it in the script as well.

For example, I'm building an wrapper for some components that you can change the value for different breakpoints and it would be nice, that you can use this state of the visual editor to detect the current view.

Another nice to have would be anyways to have the components repsonsive ready. For example you have an block and you should be able to change the values (padding, margin, width, align, font-size, ...) for some breakpoints. (see the image)
The values could be returned like this

{
default: 10,
mobile: undefined, // or null, false, ...
tablet: 30,
desktop: 60
}

cheers

[joelyoder]

If this is something we decide to implement, it would be good to have @ItsJonQ weigh in on this since it would need consideration as a part of G2.

[jasmussen]

I believe that long term, the block editor should absolutely provide better affordances for responsive editing. A key attribute of that is that the editing canvas should resize itself to the breakpoint, so you can actually see your responsive changes in context of an accurate view. An iframe is on the way to help with that, and ultimately, I believe an approach such as that outlined in #19909 can help do that.

In the mean time, I would not personally object to a CSS class being added somewhere to indicate the selected breakpoint in the preview dropdown menu. In fact, I could swear there was an existing ticket for this.

[Vanillabacke]

@jasmussen

In the mean time, I would not personally object to a CSS class being added somewhere to indicate the selected breakpoint in the preview dropdown menu. In fact, I could swear there was an existing ticket for this.

there should be at least an event or something like that to have a quick reference to the current responsive view on init / change.
for example a column block:
_ setting up the basic layout for mobile
_ change the preview for tablet
_ the options in the sidebar are now connected to the exactly that screen
_ chaning the width of some columns, maybe the order, hide for that screensize a column, etc.
_ change the preview for desktop
_ sidebar is updating to the next screen and all changes you made will affect only on that screen

I experienced that some clients were expecting this wysiwyg behavior a lot.

[jasmussen]

Agreed. That should be possible for plugins to do today, though. The Layout Grid block taps into the preview dropdown and lets you edit responsive properties for each. The source should be here.

[Vanillabacke]

@jasmussen

Agreed. That should be possible for plugins to do today, though. The Layout Grid block taps into the preview dropdown and lets you edit responsive properties for each. The source should be here.

Thanks, I will have a look.

[bystrzan]

Any (good) news to have a body class on toggle device state in editor?

To be clear: even newbie could make css conditionals based on body class of the editor, but for now it's impossible to target popover device toggle, as it is poprover dynamic element in dom.