Gutenberg Theme Styles Integration and almost WYSIWYG

I am betting on Gutenberg.

WordPress desperately needed a modern editing experience to evolve from the blogging platform it was, to the CMS that it is now.

Competing with website builders like Wix, Squarespace, and Shopify that keeps chugging away at WordPress’s market share called for an obvious solution, an editor that made building websites easy. TinyMCE could never achieve this. Plugins and themes that built their own solutions helped but that required installing and configuring them to make WordPress ready to build websites.

Gutenberg fills this gap. It is an important gap to fill and I’m glad that this is taken seriously.

Recently, I’ve been trying to learn the reason behind the approach Gutenberg took in comparison to all the website builders out there. I asked this question on WordPress’s official slack channel. I wanted to understand the reason behind the choice of the backend approach of Gutenberg which requires writing CSS styles for both the frontend and backend, separately. I wanted to understand why Gutenberg didn’t take the approach of frontend editing experience from the get-go because that would offer tighter integration with the existing themes without additional requirements. We already have so many successful examples in the form of existing website builders.

I couldn’t find an answer to it. I understand that Gutenberg was critical and we might eventually get to the point where frontend editing experience might be offered but my current opinion is that even with the full-site editing experience, we will still have almost WYSIWYG editing experience which is actually an inconvenience for the developers and strange for the users.

According to the replies on the official WordPress slack, I was explained that this is simply a user-interface gap and Gutenberg blocks work similarly to the existing frontend editors (Elementor in this case). I understand their explanation behind the user-interface gap but this is a huge gap that doesn’t simply feel like a user-interface gap.

From the tech perspective, Elementor only requires frontend markup once to build its block. Gutenberg, on the other hand, requires building a view for both backend edit and frontend save.

For this same reason, I am hitting roadblocks in the development of my own Gutenberg plugin. I found an ugly workaround to match the styles in the frontend but it is still an almost WYSIWYG experience. This could have been avoided with a frontend editing experience. This causes inconvenience and a lack of full integration when developers don’t have full control over the theme’s style. To explain this further, theme editors need to update and build styles for Gutenberg blocks. In comparison to Elementor, this is not a requirement.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up Next:

Why I'm betting on Gutenberg

Why I'm betting on Gutenberg