Gutenberg editor styling: more work for CSS developers?

Many agencies trying out Gutenberg early seem to have run into issues styling the editor. Keeping the front end and editor styles similar and in sync will be even more important with the new editor because of its visual nature, but it doesn’t seem like it’s going to be easy for developers.

In June, Marie Manandise wrote about her Gutenberg research at Studio 24. The post is quite long and worth reading even though Gutenberg development has progressed a lot since then. One of her main conclusions was quite scary though:

Were we to implement one of our current websites with Gutenberg now, we estimate that the extra CSS work required to style blocks in the editor and the complexity of updating block markup would more than double our development and QA time.

And that’s not counting the time to invest in coming up with internal best practices, build tools and a potential bank of re-usable components. 

“We tried converting a bespoke website design in WordPress with Gutenberg” on Medium

Luehrsen Heinrich‘s more recent experiences building a site for a game studio were overall positive, but they too mentioned this in WP Tavern’s article:

From a development perspective, Luehrsen said his team still struggles with the backend styles for the editor and that frontend and backend styles differ wildly because of that. They also haven’t yet found a maintainable, stable way of applying global styles to the Gutenberg editor.

“How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website” on WP Tavern

Exciting times. Hopefully there’s still time to do something about that now that 5.0 development has been pushed back to November.