-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Media & Text block: remove inline styles #11268
Comments
I second not having inline styles. It makes editing the css with a theme almost impossible. |
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. Something along the lines of Then in the gutenburg
Same browser support as |
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. |
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. |
Good point @m-e-h. One more reason to tweak this. |
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 |
@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! |
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 |
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:
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
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.
The text was updated successfully, but these errors were encountered: