Gutenberg Best Practices For WordPress Developers That Had No Time to Learn JavaScript Deeply

Published in WordPress.

The new WordPress block editor (also known as Gutenberg) is a radical change for developers used to working with PHP.

If you have to learn JavaScript deeply to update your plugins and keep everything up and running, you might feel a bit overwhelmed.

The development of blocks represents a great challenge for all those who do not master JavaScript. In this talk I presented in the last WordCamp Nordic I was able to show a series of good practices for WordPress developers working with Gutenberg, as well as some of the typical errors that you should avoid so that your code does not break anything.

Key points

The most important arguments discussed in the presentation are the following:

  • In 2015 WordPress developers were challenged with the mission of learning JavaScript deeply. New changes were coming and it was necessary to have this type of knowledge and skills.
  • In December 2018, with the final announcement of the release date of WordPress 5.0 and the new block editor (also known as Gutenberg), plugin developers had to adapt their plugins to the new editor. It was at this moment when learning JavaScript deeply became a priority.
  • Learning JavaScript deeply means mastering an amount of technologies in addition to the language itself. Transpilers, compilers, packers … All this is complex and can be scary to PHP developers.
  • We have developed a boilerplate to facilitate the adaptation process to WordPress developers. This plugin establishes a foundation for the programming on the block editor including a complete initial configuration for the modern build process.
  • The first thing that surprised us when opening Gutenberg’s JavaScript files was that we weren’t able to understand them because of their modern syntax. If you are not able to understand the modern constructions of ESNext, it becomes difficult to understand Gutenberg’s source code. Therefore, the recommendation is to understand the syntax of JavaScript ESNext constructs.
  • Once you understand the JavaScript syntax, the next step should be to learn React. However, WordPress encapsulates and hides React under its own functions. Therefore, instead of learning React it is much more interesting to learn the JSX syntax for creating user interfaces.
  • Gutenberg provides a lot of reusable components to create user interfaces in JSX. A good practice is to use existing components, instead of programming them from scratch and reinventing the wheel.
  • The registerBlockType function is the most popular one in Gutenberg. It provides the ability to create new blocks in the editor. But there are many more functions that are worth exploring.
  • The registerPlugin function allows you to add a plugin that extends the editor with a sidebar in which to add the components you want.
  • The subscribe function allows you to listen to the changes that happen in the block editor and add your own functions that are executed every time a change occurs. You have to be careful and avoid unconditional code with this function to avoid affecting the final performance of the editor.
  • Be careful when writing your JavaScript code. You’re not alone. Your code can break things if you’re careless.
  • Instead of learning JavaScript deeply, learn Gutenberg shallowly and start developing faster. Then you may focus on expanding and deepening your knowledge in those areas you need.
  • Don’t be afraid of the new block editor or of JavaScript.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on Twitter:

Featured image by Jaakko Kemppainen on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.