How To Make Your WordPress Plugins For Gutenberg Compliant?

By Mohit Surati WordPress 53 Views

19th November 2018 – The release date slated for WordPress 5.0 which is just a few weeks away and therefore, it becomes important for all the WordPress website owners to start preparing their website for Gutenberg.

The reason behind that is, with the release of WordPress 5.0, Gutenberg will replace TinyMCE as the default editor of WordPress platform.

In June 2018, when the WordCamp Europe 2018 (WCEU) took place in Belgrade, Serbia, the co-founder of WordPress, Matt Mullenweg announced the whole roadmap of how the launch of WordPress 5.0 will took place which also comprises of Gutenberg. From there onwards, people have started to take the necessary steps to make their site ready for Gutenberg.

In fact, if you search on the web about “How To Make My WordPress Site Ready For Gutenberg?” then thousands of blogs will appear in front of you.

According to the data of WordPress.org, there are more than 500,000 active installations of Gutenberg right now. This clearly shows that people have already started adopting Gutenberg.

So, it’s high time that you give due importance to this phenomenon which is going to take the whole world by storm. Now, one of the core feature that has made WordPress popular in the last 15 years or so is the plugins.

In this blog, we’re going to provide you with an in-depth guide on how to make your WordPress plugins Gutenberg compliant. So, let’s get the things moving.

1. How Gutenberg Works?

Before going into the details of how to make any plugin ready for Gutenberg, you need to have some basic idea about how Gutenberg works.

For those who don’t know, Gutenberg is a new-age editor that will change the whole scenario of WordPress.

In Gutenberg, every & element in the content is a block and therefore, as a plugin developer who is working in a Custom WordPress Development Company should keep this aspect in mind while developing a plugin for Gutenberg.

Even the meta boxes that you find in Core WordPress won’t be the same after the introduction of Gutenberg. Simple meta boxes may work with Gutenberg, but the complex ones such as in Yoast SEO Plugin won’t work at all.

There are mainly 4 types of plugins which won’t work with Gutenberg. They are as follows:

  • Plugins With Custom Post Types
  • Plugins With Complex meta boxes
  • Plugins With Shortcodes
  • Plugins With Editor Feature

2. How To Make WordPress Plugins Gutenberg Compliant?

There are basically 2 ways that you can follow as a plugin developer to make your WordPress plugins Gutenberg compliant.

  • Disable Gutenberg
  • Support Gutenberg

Let’s explore both the ways one-by-one in detail.

2.1 Disable Gutenberg

If you’ve decided that working with Gutenberg isn’t your cup of coffee, then you should think about disabling Gutenberg from your WordPress website.

You can either completely disable Gutenberg or only at the place where your plugin is being utilized.

To understand this concept in a better way, let us take a real-time example. We’re using a plugin called “Simple Giveaways” that comprises of custom post types as well as meta boxes. Now, if we want to disable Gutenberg for this plugin, then it can be done in 3 different manners.

  • Disabling Gutenberg Completely
  • Disabling Gutenberg Per Post Type
  • Disabling Gutenberg With Metaboxes
2.1.1 Disabling Gutenberg Completely

This is something that we do not recommend for any of your plugins. Instead of doing this, you can inform your plugin users that this plugin won’t work with Gutenberg so that they can revert back to the default editor of WordPress. For that purpose, you can use the Classic Editor plugin.

To disable Gutenberg completely, you can use the coding snippet shown below.

<?php
 
add_filter( 'gutenberg_can_edit_post_type', '__return_false' );

gutenberg_can_edit_post_type is a filter which is used to check if the Gutenberg can be activated on a particular post type or not. That’s why we have set the value of this filter false which means Gutenberg will be disabled completely.

2.1.2 Disabling Gutenberg Per Post Type

Now, if any of your plugins has a custom post type, then you can also disable Gutenberg for that particular post type. For that purpose, you need to make changes to the post type configuration.

Editor Support

As a thumb rule, Gutenberg won’t load any of your posts if it doesn’t support any editor. So, you can disable Gutenberg for particular post type by disabling the editor support as shown below in the coding snippet.

<?php
 
$args = array(
    'label'        => __( 'Simple Giveaways', 'giveasap' ),
    'labels'       => $labels,
    'supports'     => array( 
        'title', 
        //'editor', Disabling Gutenberg
        'thumbnail', 
        ),
    'hierarchical' => false,
    // ... 
);
register_post_type( 'giveasap', $args );

REST API Support

There are many situations where you need the editor, but not in the REST API. For that kind of scenarios, you need to make changes to post type configuration as shown below.

<?php
 
$args = array(
    'label'        => __( 'Simple Giveaways', 'giveasap' ),
    // ...
    'show_in_rest' => false, // Disable Gutenberg
    // ...
);
register_post_type( 'giveasap', $args );

By setting the value of show_in_rest to false, you’re ensuring that Gutenberg editor remains to disable for a particular post type.

Post Type Support

To disable Gutenberg for custom post type Post Type Support, we can use the gutenberg_can_edit_post_type filter as shown below.

<?php
 
add_filter( 'gutenberg_can_edit_post_type', function( $can_edit, $post_type ){
    if ( $can_edit && 'giveasap' === $post_type ) {
        return false;
    }
    return $can_edit;
}, 20, 2 );
2.1.3 Disabling Gutenberg With Metaboxes

If your plugin comprises complex meta boxes, then it would be very difficult for you to create a version of your plugin that can align with Gutenberg. For that scenario, you should disable Gutenberg and to do that, you should set the value of __block_editor_compatible_meta_box filter false as shown below.

<?php
 
add_meta_box( 
    'giveasap_users', 
    __( 'Users', 'giveasap' ), 
    'giveasap_metabox_users', 
    array( 'giveasap' ), 
    'side', 
    'high', 
    array(
        // Not Compatible. Disable Gutenberg.
        '__block_editor_compatible_meta_box' => false,
    )
);

2.2 Support Gutenberg

The second way to make your WordPress plugins Gutenberg compliant is by accepting Gutenberg as the default editor of WordPress and then work according to that. In fact, this is a much better and feasible option compared to the first one.

When you’re working with Gutenberg, you mostly have to create a new block for each of the shortcodes as well as the widgets. Shortcodes can work out of the box however, you should also create a block from them, as it helps you to provide better User-Experience (UX).

Now, there are basically two types of blocks that you can create in Gutenberg to support the WordPress plugins – Static Block & Dynamic Block.

Static Block is written completely in JavaScript and output in HTML format will be saved in your content, while with Dynamic Block, the methodology is bit different. Here, you have to create JavaScript part in such a manner that it works well with the Gutenberg editor.

In addition to that, you also have to define and call the PHP function to render the JavaScript which will help you to display the content on the front-end side.

Now, in order to understand the concept of Static & Dynamic block, let us take an example of the simple alert block and implement it in both the manner.

2.2.1 Register The Block

First of all, we need to register any block and for that purpose, you need to define it in PHP and then in JavaScript as well.

The PHP File

<?php
function guten_tuts_block() {
    wp_register_script(
        'guten-tuts',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n' )
    );
 
    register_block_type( 'guten-tuts/alert', array(
        'editor_script' => 'guten-tuts',
    ) );
    // Our Dynamic block.
    register_block_type( 'guten-tuts/alertdynamic', array(
        'render_callback' => 'guten_tuts_dynamic_alert'
    ) );
}
add_action( 'init', 'guten_tuts_block' );

Always remember one thing that, when you’re registering a script you need to define all the dependencies. For creating a block, you need to resolve wp-block & wp-element dependencies.

JavaScript Block File

The JavaScript block file – block.js will look as shown below.

var el = wp.element.createElement,
    __ = wp.i18n.__,
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.blocks.RichText,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };
2.2.2 Static Block

So far, we have completed the registration process for our block. Now, it’s time to proceed further and create a static block for the simple alert. As we all know that, the alert will be in text format and therefore, we will only need one attribute: text.

For creating a Static Block, you need to follow the coding snippet as shown below.

registerBlockType( 'guten-tuts/alert', {
    title: __( 'Guten Tuts - Alert' ),
 
    icon: 'megaphone',
 
    category: 'layout',
 
    attributes: {
        text : {
            type: 'array',
            source: 'children',
            selector: 'div',
        }
    },
 
    edit: function( props ) {
        var content = props.attributes.text;
 
        function onChangeText( newText ) {
            props.setAttributes( { text: newText } );
        }
 
        return el(
            RichText,
            {
                tagName: 'div',
                className: props.className,
                onChange: onChangeText,
                value: content,
                isSelected: props.isSelected,
                style: blockStyle
            }
        );
    },
 
    save: function( props ) {
        var text = props.attributes.text;
 
        return el( 'div', { style: blockStyle, className: props.className }, text );
    },
} );

Output

Here, our edit function will have a RichText block which allows us to insert the text, style and other related things. The definition of our attribute text will convey the Gutenberg editor strip the text inside <div>. We’re also telling Gutenberg that this will be an array of the child elements.
For example,

<div><em>em text</em> other text <strong>bold text</strong></div>

would be converted into an array of 3 elements: “em text”, “other text” and “bold text”. The save method will have the output of all the attribute conversion.

Read also: All You Need To Know About WordPress Gutenberg

3.2.3 Dynamic Block

Like Static Block, the Dynamic Block also consists of an edit method, but the save method will return a null value. The reason behind that is, we won’t utilize the ‘save’ method in Dynamic Block. Instead of that, we will define a PHP function which can render the Dynamic Block on front-end.

First of all, you need to register the callback function guten_tuts_dynamic_alert. For that purpose, you can utilize the coding snippet as shown below

<?php
 
register_block_type( 'guten-tuts/alertdynamic', array(
    'render_callback' => 'guten_tuts_dynamic_alert'
) );

The guten_tuts_dynamic_alert function will look as shown below.

function guten_tuts_dynamic_alert( $attributes ) {
    if ( ! isset( $attributes['text'] ) || ! $attributes['text'] ) { return; }
    ob_start();
    ?>
    <div style="background:red;color:white;padding:1em;"><?php echo esc_html( $attributes['text'] ); ?></div>
    <?php
    return ob_get_clean();
}

The output of this code will be a <div> element with some text. For Dynamic Blocks, you can’t use the RichText, as the attributes can’t be updated with this concept. Instead of using that, we will use the regular input to enter the alert box’s text.

As discussed earlier that save method can’t be used in Dynamic Block and therefore, we have defined the attribute text as a simple string. So, to create a Dynamic Block, you need to follow the coding snippet as shown below.

registerBlockType( 'guten-tuts/alertdynamic', {
    title: __( 'Guten Tuts - Dynamic Alert' ),
 
    icon: 'megaphone',
 
    category: 'layout',
 
    attributes: {
        text : {
            type: 'string', 
            selector: 'div',
        },
    },
 
    edit: function( props ) {
        var content = props.attributes.text;
        blockStyle['width'] = '100%';
        function onChangeText( e ) {
            var newText = e.target.value;
        
            props.setAttributes( { text: newText } );
        }
 
        return el(
            'input',
            {
                className: props.className + ' widefat',
                onChange: onChangeText,
                value: content,
                isSelected: props.isSelected,
                style: blockStyle
            }
        );
    },
 
    save: function( props ) {
        return null;
    },
} );

Output

For achieving this output for the Dynamic Block, we have used regular input attribute with different background color & styling than RichText, which is used for Static Block.

3. Conclusion

Gutenberg is new age editor which will become the default editor of WordPress very soon. Therefore, as an owner of a Custom WordPress Plugin Development Company, it becomes extremely vital to prepare your site for Gutenberg. Now, one of the most utilized features of the WordPress is its plugins.

Taking this scenario into consideration, we have tried to provide you with an in-depth guide on how to make your WordPress plugins Gutenberg compliant which will help you in long run.

We believe in supporting the Gutenberg and that’s why we’re setting up our site as per the second option discussed in this blog. Which steps you’ve taken to prepare your WordPress site for Gutenberg? Do let us know in the comment section.

If you still have any query or suggestion regarding our blog, then feel free to ask them in our comment box. We will try to respond to each of your queries as per our knowledge. Thank You.!

hire-wordpress-plugin-development

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Mohit Surati

Mohit Surati

A post-graduate in Computer Engineering. Passionate about innovative writing & Content Marketing. A rich vein of experience in writing articles related to WordPress right from plugins, themes, customization, security, WooCommerce & Gutenberg. Pens down his thoughts for eSparkBiz @Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.

Related Post

10 Reasons To Stop Usage Of Nulled WordPress Themes & Plugins

10 Reasons To Stop Usage Of Nulled WordPress Themes & Plugins

Are you someone who has been working as a WordPress Developer for a long time? Then, you must have heard about the WordPress Nulled Plugins &…

Step-By-Step Guide On Bulk Upload Files To WordPress Website

Step-By-Step Guide On Bulk Upload Files To WordPress Website

Are you someone who is working as a WordPress Developer for a long time? OR Are you someone who is an owner of an IT…

12 Innovative Ways To Utilize Forms On WordPress Website

12 Innovative Ways To Utilize Forms On WordPress Website

It is perhaps one of the best ways to utilize the forms on your WordPress website. Many of you would be using the form feature…

get in touch image

Growth Is Just One Click Away

Don’t feel like calling? Just share some project details & our company representative will get in touch. Schedule A Meeting with our Director of New Business

How long would you like the meeting to be?
Get In Touch