Media & Text block: remove inline styles

[samikeijonen]

Is your feature request related to a problem? Please describe

In Media & Text block user can resize the image but it uses inline styles for styling:

<div class="wp-block-media-text alignwide" style="grid-template-columns:37% auto;">

Like in any other blocks we should not use inline styles.

In this case it locks using CSS Grid and two columns, and behaviour is hard to overwrite with own styles. Nothing wrong with CSS Grid, I use it myself.

Here is one example when using alignfull and setting the actual content the same width as "alignwide".

Screenshot without inline styles (no resizing yet)

Styles

.wp-block-media-text.alignfull {
   grid-template-areas: "media-text-start media-text-media media-text-content media-text-end";
   grid-template-columns: auto minmax(0, 22rem) minmax(0, 22rem) auto;
}

Note that trick is using four columns now.

Screenshot with inline styles grid-template-columns:37% auto

Could be hard to see from the image but it basically breaks the layout.

Even bigger issue is that in the editor I can't resize the image at all with my custom styles.

Describe the solution you'd like

Have bock setting to set 4-5 "steps" for image width, and use conditional classes like on every other block so far.

Describe alternatives you've considered

Remove re-sizing feature and inline styles. It doesn't give theme authors freedom to do what they want.

[BinaryMoon]

I second not having inline styles. It makes editing the css with a theme almost impossible.

[m-e-h]

I like @samikeijonen idea with the steps.

But if inline styles are a must, it should be something that theme authors can use in other ways. Adding a Custom Property inline could be used however the developer chooses.

Something along the lines of <div style="--media-text__media--width: ${mediaWidth}%">.

Then in the gutenburg .css, there'd be this:

grid-template-columns: var(--media-text__media--width) auto;

Same browser support as grid if not a little better.

[BinaryMoon]

I think I would prefer to have separate width options to match all the other settings, but if that's not possible then using custom properties is the next best thing.

[m-e-h]

Another issue with the current implementation is that the actual percent is added "silently" in the editor.

If I wanted several rows of Media & Text on a page, each with a consistent 60% width image, the best I could do now would be to eyeball it. A visual number confirmation of the width percent, similar to how cover background opacity works or even a dynamic tooltip during adjustment, would be helpful here.

[samikeijonen]

Good point @m-e-h. One more reason to tweak this.

[richtabor]

We chatted about this in the Weekly Gutenberg Design Triage meeting on Slack. Seems a good idea, though this would be the first use of a CSS Custom Property/variable within the editor - correct? We should check with @ItsJonQ on his thoughts of how this should work, in regards to the global design styles.

And just to double check, would the variable be added inline instead? Like <div style="--media-text__media--width: ${mediaWidth}%">?

[ItsJonQ]

Seems a good idea, though this would be the first use of a CSS Custom Property/variable within the editor - correct

@richtabor Haii!! In regards to Global Styles we're starting off with CSS variables. However, we're not 100% certain if that is the method we're going to use (mostly from a IE compatibility vs polyfill performance standpoint).

For this particular implementation, I can see how CSS variables would be handy (I'm a fan of CSS variables myself). Something to consider is if we start using CSS vars, how would we adopt them throughout Gutenberg (e.g. when to use them. how to name them. etc...)

CC'ing @youknowriad for thoughts :)

Hope this helps!

[Brandoning]

I came across this today and second being able to disable or remove the inline styles. The styles are there even without tweaking the block, they're silently added.

I see that "stack on mobile" forces a new class on the Media / Text block which has grid-template-columns: 100%!important; in a media query for below 600px. I can't alter the media query (the width at which Gutenberg considers mobile) and It's also kinda annoying to have !important's everywhere because of the inline rules.