As 2018 neared its end, WordPress announced the release of its latest version which included one of the biggest changes in its history. The open-source CMS finally discarded the classic editor in favor of the new block-based modifier which is called Gutenberg. Before it became the new default editing tool, Gutenberg was available in the form of a plugin. This was done to get input from other developers about the solution as well as help people get used to it. However, it is not only the way you write and modify content which was affected by the introduction of the tool. It has also affected other areas like plugin and theme development. Professionals have had to make WordPress plugins Gutenberg-ready so that they can be used efficiently. Tools like landing page plugins made changes so that they can be used in the new editor.
It has been more than six months since the default editor was changed but some users are still not comfortable with it. The classic editor is available in the form of a plugin and such users are disabling Gutenberg in favor of the old tool. However, this is not the ideal approach as the plugin will be discontinued in or after 2022. The new modification system is here to stay and everyone must get used to it.
Here are some tips to make a plugin compatible with the new editor.
1. Know The Type Of Plugins Which Will Be Affected By Gutenberg
It is essential to know what kind of plugins are being affected by the editor. This will help in understanding whether you need to make changes to your product or not. There are some specific functionality areas which are affected by Gutenberg. Any tool which deals with custom post types and custom meta boxes will need to be adjusted. Similarly, plugins that possess TinyMCE integration or include the buttons of the WYSIWYG editor, will also be modified. It does not mean that a solution will stop working at all when used with Gutenberg. For instance, if a plugin adds a meta box, then it will perform its function but the overall user experience will not be satisfactory. This means that a tool that has not been re-aligned for use with the modifier will slowly slip down the popularity charts. Users will replace it with another software which is compatible with the editor.
2. Test Plugins To Remove Doubt
Did you just build a plugin to convert HTML to WordPress theme and are now wondering whether you need to check its compatibility with the new editing solution or not? The best way to resolve this kind of confusion is to test your product. The testing must be done on a staging site or a local development environment. You will need a WordPress website with the new modification solution. You have the option of either installing the latest version of the CMS or using the Gutenberg plugin to create the testing environment. Now activate your plugin on the interface. In case, custom meta boxes are a part of your product, then you could see some issues. The editor considers all meta boxes as compatible which means they are loaded instantly even if they are not ready. The best way is to convert the meta box into a block or if it is not possible, then disable it.
3. Get Basic Understanding Of JavaScript
People desiring to make WordPress plugins Gutenberg-ready must possess a basic understanding of JavaScript. The tool is built on React which is a JavaScript library. The plugins created specifically for the default modification system are also written in JavaScript. Even if you do not have in-depth knowledge of React but are familiar with JS, you can conduct the modifications. However, if you do not know the programming language, then things will be difficult for you. It will also be pertinent to go through the official handbook of the block editor provided by WordPress. The document contains information about how developers can extend the tool or enhance its functionality.
4. Create Static And Dynamic Blocks
Creating static or dynamic blocks will solve most of the issues that you may face while checking a plugin’s compatibility with the editor. As mentioned before, meta boxes are considered to be compatible but it would be better to include them in blocks. Similarly, shortcodes will also work but they must be placed inside blocks too. Both static and dynamic blocks are written in JavaScript but the latter also includes a PHP function that is required for displaying the content.
Conclusion
Gutenberg is now an integral part of the WordPress ecosystem and it is essential that every component is synchronized with the editor. You can also hire WordPress experts to test and find out whether your themes and plugins are ready for the new default editing tool or not.
