Martin Roberts asked 5 years ago
One thing I've learned with technology over the years is not to resist change when change comes from behemoths like Microsoft, Adobe, Apple and now ... WordPress. I have been wanting the opportunity to learn Gutenberg and lockdown seemed the perfect moment, so I have plunged in.
Another thing I've learned is to get in the right state of mind about change – try to love it and recognise that in a few weeks you'll be laughing about why you ever asked the question. I'm not there yet with Gutenberg but I guess I will be – hell, I have to!
So far, with your excellent videos and googling the hell out of it I'm slow but doing ok. BUT ... I cannot figure out how to have the admin area at least in some way resemble live.
Surely, surely, surely the WP guys have incorporated this? Hell, most of desktop publishing went this way in the late 80s! At the moment if I change a style in Appearance > Customise > Additional CSS (i.e the standard way to customise a theme) the change is stubbornly resisted in the editor.
At the moment, I am having to work with some white type out of white as this is how the editor CSS renders it.
I had a fond idea that I could change the editor CSS in the same way as I change live CSS but no – no change. The only way to work is to switch to code view. I'm lucky – I can work with code but what about all those millions of site owners who don't know code from a hole in the wall?
I decided to work with a WP standard theme for learning purposes BTW – I chose Twenty Twenty for this project.
Any ideas?
Thanks,
Martin
Shawn Hesketh answered 5 years ago
style.css
But, the Editor doesn't automatically utilize that stylesheet when you're creating or editing content within the Editor. Rather, it looks for another file with styles that are specific to the Editor. In the Twenty Twenty theme, this file is located here: /twentytwenty/assets/css/editor-style-block.css
Ideally, every modern WordPress theme would include styles for all the blocks and combinations included in WordPress by default. Unfortunately, as you've discovered, sometimes that support is lacking... even when you're using the default theme that ships with WordPress.
This is frustrating, but likely the nature of the beast, since Gutenberg is rapidly evolving... even outpacing WordPress' own default theme. This is why you may have encountered the situation where you're editing white text on a white background.
Things get even worse when a site owner chooses a theme that was created by a 3rd-party developer who may not be as committed to keeping pace with every possible Gutenberg block in each new release of WordPress.
For an interesting read about the challenge facing theme creators, check out this recent article and the conversations in the comments below:
https://wptavern.com/where-gutenberg-went-wrong-theme-developer-edition
Here's an excellent article that shares one way to ensure that the styles in your theme are also present in the Editor:
https://robinroelofsen.com/editor-styling-gutenberg
But keep in mind, if you choose to create your own Editor stylesheet, you'll also have to continually add new styles to support new Gutenberg blocks in future releases.
My recommendation? Stick with officially-supported WordPress themes for the time being, OR only use a theme from a reputable theme company that is deeply committed to keeping pace with the rapid enhancements that are introduced to Gutenberg on a continuing basis.
Here's my list of the best WordPress theme companies I trust to provide support for the constantly-evolving Gutenberg.
Finally, a bit of context to keep in mind... the world of WordPress blocks is a little bit like the Wild West these days. There are new block plugins being launched every week, each one introducing their own unique blocks and block patterns. With each one, it becomes increasingly unlikely that any one theme will include support for every block that is out there.
It'll settle down. But in the meantime, it's incredibly likely that you'll continue to encounter instances where WYS in the Editor simply doesn't match WYG on the front end of your site.
Hang in there. We're witnessing a rapid pace of evolution in WordPress right now, but plugins and themes will catch up in time.