Why is the code for Gutenberg blocks so horrible?

[ad_1]

For a while now, I have been trying to develop Gutenberg blocks. Even though I have quite a bit of experience in React and have developed themes and plugins, Gutenberg blocks are something that simply confuses me a lot, and I don't even know where to start.

I've seen courses (the few that exist), tried reading the documentation, and used tools that facilitate project creation, but I can't get them to work.

The entire API regarding how to handle configurable inputs, rendering, etc., is really confusing and poorly designed (it's so bad that it seems intentionally made to be difficult). I just don't understand what was being thought when this system was implemented. It seems so surreal to me that I really think it's me who doesn't understand this paradigm… I need to know if I'm going crazy.

[ad_2]
8 Comments
  1. It can be really confusing at times, and although documentation is getting better, it’s frequently all over the place, deprecated, incomplete, etc.

    One tip: maybe you will learn more by practicing and discovering how things work by doing, rather than by watching tutorials. Start with a really simple project and explore your way up. Play with the differences between static and dynamic blocks, add a simple toggle in the sidebar to change the markup, extend a core block to see which approach makes more sense, things like that. This way, you can advance step-by-step and absorb things progressively. The [wordpress/create-block](https://www.npmjs.com/package/@wordpress/create-block) package is your friend.

  2. I don’t think it’s *that* bad, but there is a steep learning curve. I do think the underlying system needs some more maturity, more so than the frontend. IMO the biggest hurdle is custom blocks need a core method to implement responsive settings. When I build Elementor or Beaver builder plugins, you literally just add a “responsive=>true” flag to the field, and the rest is handled. Every plugin uses the same breakpoints, consistent behavior, etc. The same should be true for block settings. We also need better support for 3rd party plugins to utilize theme.json settings, things like font sizes, spacing sizes, colors, etc. But back to the previous problem, responsiveness, is the primary reason these values can’t be used in a lot of cases. They aren’t responsive fields.

  3. You are not crazy. In my experience developing native blocks is a realm of WP superfans and/or agencies with budgets to burn.

    For anyone else creating blocks with ACF is extremely prevalent (which is a testament to how bad it is when everything-is-free WP crowd is that willing to throw in with a paid plugin :).

    Why? Well, worked out that way. An open source project with legacy code base and extreme backwards compatibility commitments went on an ego trip of adding a corporate JS framework. Bad fit, bad design, heavy handed governance on the premise that it shall happen, without care if it should.

  4. >I’ve seen courses (the few that exist), tried reading the documentation, and used tools that facilitate project creation, but I can’t get them to work.

    What specifically have you tried, and what worked/didn’t work? I learned to develop blocks back in 2020 when there was even less documentation and basically one course, so I feel like I’ve experienced all the possible hurdles one can encounter. I’d be interested to see if I can help in any way.

    Disclaimer, I’m sponsored by Automattic to create developer content for [Learn.WordPress.org](http://Learn.WordPress.org), so understanding your pain points will help me create better content for developers.

  5. There is. If I remember correctly, gutenberg appeared in worpress in 2018. But it still looks like a raw beta version, hastily bolted on. 6 years is a long time. So I don’t expect it to get better over time.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer