WordPress Plugins Adopting Gutenberg — A Case Study Featuring Gravity Forms!

Ever since Matt Mullenweg’s announcement about the new WordPress editor at State of the Word 2017, the community has been trying to assimilate the Gutenberg blocks. Till now people have shared different views — be it in the form of A Visit From St. Gutenberg or some long-form articles featuring the perks & pains of Gutenberg.

Such reaction from the community is kind of natural. When WordPress means way more than just a piece of software to you then having such concerns is normal. But considering the competition which other CMSs offer, major updates to WordPress are crucial.

Long story short, you love it or hate it, Gutenberg is coming! I believe this is what the Next WordPress will look like and as soon as it gets merged with the core, a lot of things in the WordPress community will start changing. Or will it be wrong if I say that the change is already there?

WordPress developers/agencies have geared their products towards Gutenberg compatibility and have started building a new niche which will feature a completely different set of WordPress themes, plugins, interaction, automation tools, site building, etc.

Today, I will be reviewing how WordPress plugins are adopting Gutenberg and where it is leading!?

For a case study, I will be talking about the development and compatibility of Gravity Forms with Gutenberg. Reason being, Carl Hancock — Co-founder of Gravity Forms — has been a keen advocate of Gutenberg in the right for the right reasons. As a result, Gravity Forms became one of the early adopters of Gutenberg.

Currently, the Gutenberg version of Gravity Forms exists as an optional add-on. Their recent update is Gravity Forms Gutenberg v1.0 Beta 3 which is now available on the Downloads page. It will live as an add-on until WordPress 5.0 and we might see more changes and releases till then.

🎩 Gutenberg Plugins Compatibility Database

Daniel Bachhuber has created a database of top 5,000 WordPress plugins from WordPress.org repository to test their compatibility with Gutenberg. For this purpose, he has also curated a process to create a new WordPress site on the fly and test each plugin separately. He published a report on his initiative on April 25, 2018. Below is an excerpt from his report:

Looking at the results are pretty promising and it’s good to see how the community is adopting change. However, the plugins might undergo major changes and releases as Gutenberg gets future updates. This could be the reason why other plugins are still waiting for Gutenberg beta release before they finally join the league.

Personally, I believe adopting Gutenberg early and changing with time would be way more beneficial for the teams. This way, developers will get time to work on their skill set and get used to the new react blocks. And making changes, later on, would be much easier. 💯

However, check out the awesome Gutenberg Compatibility Project by Daniel Bachhuber. He’s looking for volunteers to test the plugins and help him out. So, if you have got some time maybe go help him test a few plugins.

🔥 Gravity Forms & Gutenberg

As mentioned earlier, Carl Hancock has been an advocate of Gutenberg since its early days. I have seen him evangelizing Gutenberg through his Twitter profile as well as other public platforms. Talking about the adoption of Gutenberg he says:

As the developer of a major WordPress plugin, Gravity Forms, we intend on fully embracing Gutenberg. We will be introducing all kinds of new features and functionality as a result.

— Carl Hancock — Co-founder Gravity Forms

In early February 2018, they launched the first beta version of Gravity Forms as an add-on to their current stable release. At the time of writing this article, they’ve released the 4th beta version of their Gutenberg add-on which shows the commitment and passion of Gravity Forms team towards Gutenberg.

The first release was kind of a major overhaul of Gravity Forms. It included support from Gravity Forms blocks, conditional logic, legacy shortcodes support, and reusable blocks. Till then they’ve merged a number of pull requests, solved issues, and improved on their work. Right now, it supports MailChimp add-on and support for other add-ons is coming soon.

👉🏻 Looking at the development pace of Gravity Forms, we can expect a full-fledged plugin by the time Gutenberg gets ready. Other developers can follow the suit of Gravity Forms to get their products ready and improve with time. Also, Gravity Forms has open sourced their add-ons blocks on GitHub, so that other folks can also learn the development of complex blocks. That’s a lot of interesting stuff going on from Gravity Forms folks! 👏

Like Gutenberg, team Gravity Forms plans to merge Gravity Forms blocks into Gravity Forms core after the release of WordPress 5.0:

The Gravity Forms blocks we develop for Gutenberg will reside in their own Gravity Forms Add-On for development purposes until WordPress v5.0 is ready for public release. We will then merge all of our Gutenberg blocks into Gravity Forms core. https://t.co/G82Lnv6Wld

— Carl Hancock 🚀 (@carlhancock) February 7, 2018

Now, let us jump in and see how Gravity Forms work with Gutenberg. We’ll also take a look at the MailChimp integration of Gravity Forms in Gutenberg.

🚀 Gravity Forms Gutenberg Add-on Beta Release

Make sure you’ve got the Gravity Forms license before you actually try to check it out. Also, check out our extensive review of Gravity Forms to get started with add-ons. Now, make sure that you have the latest version of Gravity Forms installed.

After that, follow the simple steps below to get started:

→ Step #1

The very first step is to download and install the Gutenberg add-on for Gravity Forms. Let me save you from inconvenience since currently, it’s not available in the add-ons section. Rather you can find it in the downloads section of your account. Alternatively, hit this downloads page link to grab your copy.

After downloading the plugin, go to the plugins section from your WordPress dashboard, install, and activate it.

→ Step #2

Make sure you’ve installed and activated the Gutenberg plugin for WordPress. Now, in order to display the forms in the Gutenberg editor, you first have to create them. So, go ahead and make some forms using Gravity Forms.

Wait! Let our extensive review at WPCouple help you create your form with Gravity Forms plugin. Read here →

→ Step #3

Next step is to actually start embedding the Gravity Forms blocks. Create a new page or post, go to the embed section, and select Gravity Forms. Then from the block, select the form that you want to display. And you’re good to go!

🚧 Conditional Logic

Gravity Forms allows conditional logic for fields that is, you can show/hide fields depending upon some logic. With Gutenberg, Gravity Forms allows you to put conditional logic on the form itself. That is, show or hide form depending upon some conditions. Pretty amazing! 🔥

So, you can create kind of dynamic blocks this way. Which may show up for some users and hide from others. That’s probably how the next generation websites might shape up. And probably that’s what Chris Lema says when he talks about Gutenberg & WordPress.

🍭 Shortcode Support

Primitively, Gravity Forms generates a shortcode based on the form ID. When you insert a form in the editor, you actually insert a shortcode of the form. And the best part is, Gravity Forms blocks support those shortcodes. You can simply paste the code in the paragraph block and it will be converted into a Gravity Forms block.

So, for those folks, who are used to Gravity Forms shortcodes that’s a great thing. They can continue using Gravity Forms the way they used to but now with added perks of Gutenberg. Check out the GIF below where I am pasting a shortcode and it gets converted into a Gravity Forms block. Pretty dope! 🎖

🐵 MailChimp Add-on

In the 3rd beta release of Gravity Forms blocks, they introduced their first add-on block — MailChimp + Gravity Forms block. All you need to do is to create a campaign on MailChimp, install MailChimp add-on on Gravity Forms, and you’re done! It will add a block namely — Mail Chimp — in the blocks list where you can use it easily.

For example, I have created a demo campaign named personal blog. When I insert the MailChimp block and authenticate it using my API Key, it shows up the campaign, and I am ready to insert the form. As simple as it can get! 🌟

🎖 Gutenberg vs Classic Editor And Plugins

Now, if we compare the experience of adding a Gravity Form in Gutenberg vs classic editor, I would definitely go for the Gutenberg one. There are a couple of reasons for it and they’re not just limited to the Gravity Forms.

👉🏻 The very first one is, when I will have a couple of plugins installed, they won’t simply stack up on the editor. Instead, they’ll be organized into their block sections and I can easily pick up the desired one. It will result in a consistent UI and user experience. Also, the search box in the blocks section would further help improve the experience.

🔰 I read a concern regarding this experience of adding blocks that it would be highly unproductive to shift from typing to search blocks and add the things. Which is definitely not the case. While writing in the Gutenberg editor, simply put a forward slash (/), write the block name, and it is already there. Isn’t it a huge plus and productivity boost as compared to the classic editor? 🥂

👌 The second thing is, while dealing with shortcodes in the classic editor, you had to select a shortcode, add some custom fields, and insert it. And to change some options, you had to do it manually. Also, you didn’t always have the preview. Now, consider just selecting the item from the block, with preview, and managing all those options from the sidebar!?

💫 That’s definitely going to help the developers in the long run. Better user experience and easy approach will definitely result in more adoption. As it will be more and more easy for the end user to understand and use the things. 💯

🎖 Last but not least, is the concept of reusable blocks. It’s kind of inserting a block, let’s say from a shortcode, then changing its settings and saving it for re-use. I mean, blocks out of blocks. And who knows how much more possibilities Gutenberg might bring when it finally comes out.

📦 Final Thoughts

I believe Gutenberg will prove to be a great decision for the betterment of WordPress as a CMS and its community as a whole. On one hand, it will help WordPress maintain its status and grow, while on the other hand, it comes as an opportunity for WordPress Developers to diversify their skill set. It might result in more adoption of WordPress and better job prospectives for the developers.

💎 Ahmad Awais has been a Gutenberg evangelist since its early days. First, he developed Gutenberg Boilerplate for WordPress Plugins and now his zero-config Create Guten Block toolkit is a gem. It allows you to create Gutenberg plugins without worrying about configuration or anything else. If you’ve not tried it yet, you must check it out.

Apart from this, there’s a lot of interesting stuff going on regarding Gutenberg in the WordPress community. Yoast has also published their roadmap for Gutenberg integration. GiveWP is already on the way to Gutenberg adoption. We are seeing more and more plugins jumping into this ecosystem with the development of Gutenberg. That’s all pretty much awesome to see — WordPress community embracing Gutenberg.

What are your thoughts on Gutenberg? What’s your plan for moving on to Gutenberg or how you plan to cope up with this update? Let’s know your thoughts in the comments below!

Peace! ✌