Helsinki

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.

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.

Person writing a new WordPress post on a MacBook

Looking for popups?

We have the best plugin to create popups for WordPress in minutes.

Request Customized Enterprise Pricing

10
200000

With your express consent, we handle the information provided for the purpose of contacting you and until you ask us to delete it.

70% OF YOUR VISITORS DO EXACTLY WHAT
YOU JUST DID AND NEVER COME BACK!

KEEP THEM
ON YOUR SITE
LONGER WITH
NELIO POPUPS

Claim Your Discount Now

Image with a 10%-off coupon

WAIT! BEFORE YOU GO...

Get this awesome discount now!

No, I don't want to save money

Image with a 10%-off coupon

WAIT! BEFORE YOU GO...

Get this awesome discount now!

No, I don't want to save money

YOUR COOKIE SETTINGS


This site uses proprietary operational cookies that have a purely functional purpose and third-party cookies that help us understand how visitors interact with the site by collecting and presenting information anonymously. To get more information about these cookies and the processing of your personal data, check our Privacy & Cookie Policy. Do you accept these cookies and the processing of personal data involved?


If you don’t, you can reject non-operational cookies and continue browsing this site by clicking here.