Playing with Gutenberg And React

One thing is sure. If someone tries the new Gutenberg editor there is no way back to the old one. The new is light-years better than the old.

As a designer and developer I’ve got really excited by the power of creating content this way. Literally we are liberated from a fixed, rigid flow of creating web documents into a real wild one, where everything is possible.

Once you go beyond the surface you’ll realize Gutenberg is not ready yet for prime time. Details and web development best practices are missing. For example if you add a background video and align — it will be really distorted. And you can’t control the autoplay, the loop, or the splash image — things one familiar with best practices should expect.

In this wilderness — the main creator offering and incomplete product — there will be a huge race to come up with better block frameworks.

Currently theming Gutenberg means tweaking: you add a block on the back-end, check the source code on the front-end, overwrite existing styles and insert your own. Certainly painful. You don’t control the HTML structure, you don’t enjoy the styling process.

Creating your own blocks is even more painful. The guys from Human Made / The Event Calendar had to skip Gutenberg entirely and work directly with the underlying React and Redux frameworks.

Perhaps ACF Blocks are a rescue. They let you visually develop new blocks. I had no chance to test it yet since it will be rolled out only the next days / weeks.

I’ve also checked the official Gutenberg Handbook. I did not understood a word. A day ago I’ve read the React handbook which was a clear joy and made me exactly understand how it works and what it takes to learn, master it.

Summing up, Gutenberg today is excitement turned into chaos. Do not jump in unless there is a vital need. After a few months there will be proper, web standards based blocks both looking perfect on the back-end and front-end. Then the magic will start.

Leave a Reply

Your email address will not be published. Required fields are marked *