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

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.

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

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.

• State of the Word – WordCamp US 2015: presentation by Matt Mullenweg during the 2015 WordCamp US where WordPress developers are asked for the first time to learn JavaScript deeply.
• Getting Started with JavaScript: official WordPress documentation to initiate developers to use and manage JavaScript.
• WordPress Block Editor Boilerplate: base plugin used to extend the WordPress block editor (Gutenberg) with additional blocks or plugins for the editor itself. It includes examples and is well documented.
• ESNext constructions for JavaScript: tutorial with examples of the modern JavaScript syntax, which you will find all over Gutenberg’s source code.
• JSX tutorial for creating user interfaces: tutorial with examples of the JSX syntax to learn how to create components in React.
• Gutenberg components: Gutenberg package with some of the reusable components that the block editor includes.
• Functions for the editor: functions that Gutenberg provides to access the editor’s data.
• Plugin functions: package that includes functions to extend Gutenberg with plugins.
• Subscribe function: function to listen to the changes that happen in the block editor.

Buzz and feedback

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

Featured image by Jaakko Kemppainen on Unsplash.