{"id":4849,"date":"2018-08-06T11:30:24","date_gmt":"2018-08-06T06:30:24","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=4849"},"modified":"2018-08-06T11:30:30","modified_gmt":"2018-08-06T06:30:30","slug":"wordpress-plugins-adopting-gutenberg-a-case-study-featuring-gravity-forms","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/wordpress-plugins-adopting-gutenberg-a-case-study-featuring-gravity-forms\/","title":{"rendered":"WordPress Plugins Adopting Gutenberg \u2014 A Case Study Featuring Gravity Forms!"},"content":{"rendered":"<p>Ever since Matt Mullenweg&#8217;s announcement about the new WordPress editor at <a href=\"https:\/\/ma.tt\/2017\/12\/state-of-the-word-2017\/\" rel=\"nofollow noopener\" target=\"_blank\">State of the Word 2017<\/a>, the community has been trying to <strong>assimilate the Gutenberg blocks<\/strong>. Till now people have shared different views \u2014 be it in the form of&nbsp;<a href=\"https:\/\/thedevcouple.com\/a-visit-from-st-gutenberg\/\"><em>A Visit From St. Gutenberg<\/em><\/a>&nbsp;or some long-form articles featuring the perks &amp; pains of Gutenberg.<\/p>\n<p>Such reaction from the community is kind of natural. When <strong>WordPress means way more than just a piece of software<\/strong> to you then having such concerns is normal. But considering the competition which other CMSs offer, <strong>major updates to WordPress are crucial<\/strong>.<\/p>\n<p>Long story short, you love it or hate it, <em><strong>Gutenberg is coming!<\/strong><\/em>&nbsp;I believe this is what the <em><strong>Next WordPress<\/strong><\/em> will look like and as soon as it gets merged with the core, a lot of things in the WordPress community will start changing.&nbsp;Or will it be wrong if I say that the change is already there?<\/p>\n<p>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.<\/p>\n<p>Today, I will be reviewing how WordPress plugins are adopting Gutenberg and where it is leading!?<\/p>\n<div class=\"eckosc eckosc_full_width_block\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-4872 size-full\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1.jpg\" alt=\"Wordpress Plugins Adopting Gutenberg Main Image\" width=\"1440\" height=\"810\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1.jpg 1440w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-768x432.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-1024x576.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-500x281.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Main-Image-1-50x28.jpg 50w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/a><\/div>\n<p>For a case study, I will be talking about the development and compatibility of Gravity Forms with Gutenberg. Reason being, <a href=\"https:\/\/twitter.com\/carlhancock\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Carl Hancock<\/strong><\/a>&nbsp;\u2014 Co-founder of Gravity Forms \u2014 has been a keen <strong>advocate of Gutenberg&nbsp;<\/strong>in the right for the right reasons. As a result, <a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Gravity Forms<\/strong><\/a> became <strong>one of the early adopters of Gutenberg<\/strong>.<\/p>\n<p>Currently, the Gutenberg version of Gravity Forms&nbsp;exists as an optional add-on. Their recent update is <a href=\"https:\/\/www.gravityforms.com\/gutenberg-add-v1-0-beta-3-released\/\" rel=\"nofollow noopener\" target=\"_blank\">Gravity Forms&nbsp;Gutenberg&nbsp;v1.0 Beta 3<\/a> which is now available on the Downloads&nbsp;page. It will live as an add-on until WordPress 5.0 and we might see more changes and releases till then.<\/p>\n<h2>\ud83c\udfa9&nbsp;Gutenberg Plugins Compatibility Database<\/h2>\n<p><a href=\"https:\/\/github.com\/danielbachhuber\" rel=\"nofollow noopener\" target=\"_blank\">Daniel Bachhuber<\/a> has created a <strong>database of top 5,000 WordPress plugins<\/strong> from WordPress.org repository to <strong>test<\/strong> <strong>their compatibility with Gutenberg<\/strong>. For this purpose, he has also curated a&nbsp;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 <a href=\"https:\/\/danielbachhuber.com\/2018\/04\/25\/summary-of-gutenberg-plugin-compatibility-database-results-to-date\/\" rel=\"nofollow noopener\" target=\"_blank\">report<\/a>:<\/p>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\">\n<h2 style=\"text-align: center;\">&nbsp;\u26a1<\/h2>\n<p>Since the announcement of the database on March 1st, 2018, 70 people have been granted testing status. However, out of 5000 plugins, we\u2019re still at 4139 untested plugins. No companies have stepped up to contribute a significant amount of person-hours. Of the 861 tested plugins:<\/p>\n<ul>\n<li>\u2705 219 (25.44%) are compatible.<\/li>\n<li>\u26a1\ufe0f 518 (60.16%) are likely compatible.<\/li>\n<li>\ud83d\udca5 25 (2.9%) are likely not compatible.<\/li>\n<li>\u274c 39 (4.53%) are not compatible.<\/li>\n<li>\ud83d\udd25 60 (6.97%) are in \u201ctesting\u201d, which means someone started a test and abandoned the process.<\/li>\n<\/ul>\n<\/div><\/div>\n<p>Looking at the <strong>results are pretty promising<\/strong> and it&#8217;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.<\/p>\n<p>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.&nbsp;\ud83d\udcaf<\/p>\n<p>However, check out the awesome&nbsp;<a href=\"https:\/\/plugincompat.danielbachhuber.com\" rel=\"nofollow noopener\" target=\"_blank\">Gutenberg Compatibility Project<\/a> by Daniel Bachhuber. He&#8217;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.<\/p>\n<h2>\ud83d\udd25&nbsp;Gravity Forms &amp; Gutenberg<\/h2>\n<p>As mentioned earlier, <a href=\"https:\/\/twitter.com\/carlhancock\" rel=\"nofollow noopener\" target=\"_blank\">Carl Hancock<\/a> has been an advocate of Gutenberg since its early days. I have seen him evangelizing Gutenberg through his <a href=\"https:\/\/twitter.com\/carlhancock\" rel=\"nofollow noopener\" target=\"_blank\">Twitter<\/a> profile as well as other public platforms. Talking about the adoption of Gutenberg he says:<\/p>\n<blockquote class=\"eckosc eckosc_quote eckosc_quote_blockquote\"><p>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. <\/p> <a href=\"https:\/\/givewp.com\/playing-with-blocks-gives-gutenberg-story\/\" rel=\"nofollow noopener\" target=\"_blank\"><cite>\u2014 Carl Hancock \u2014 Co-founder Gravity Forms<\/cite><\/a><\/blockquote>\n<p>In early February 2018, they <a href=\"https:\/\/www.gravityforms.com\/gutenberg-add-on-v1-0-beta-1\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\">launched the first beta version<\/a> of Gravity Forms <strong>as an add-on<\/strong> to their current stable release. At the time of writing this article, they&#8217;ve released the <a href=\"https:\/\/www.gravityforms.com\/user-registration-add-on-v1-0-beta-4\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>4th beta version<\/strong> of their Gutenberg add-on<\/a> which shows the commitment and passion of Gravity Forms team towards Gutenberg.<\/p>\n<p>The first release was kind of a major overhaul of Gravity Forms. It included support from <strong>Gravity Forms blocks<\/strong>, <strong>conditional logic<\/strong>,&nbsp;<strong>legacy shortcodes support<\/strong>,&nbsp;and&nbsp;<strong>reusable blocks<\/strong>. Till then they&#8217;ve merged a number of pull requests, solved issues, and improved on their work. Right now, it supports <strong>MailChimp add-on<\/strong>&nbsp;and support for other add-ons is coming soon.<\/p>\n<p>\ud83d\udc49\ud83c\udffb&nbsp;Looking at the development pace of Gravity Forms, we can expect a <strong>full-fledged plugin by the time Gutenberg gets ready<\/strong>. Other developers can follow the suit of Gravity Forms to get their products ready and improve with time. Also, Gravity Forms has <a href=\"https:\/\/github.com\/gravityforms\/gravityblocks\" rel=\"nofollow noopener\" target=\"_blank\">open sourced their add-ons blocks on GitHub<\/a>, so that other folks can also learn the development of complex blocks. That&#8217;s a lot of interesting stuff going on from Gravity Forms folks!&nbsp;\ud83d\udc4f<\/p>\n<p>Like Gutenberg, team Gravity Forms plans to merge Gravity Forms blocks into Gravity Forms core after the release of WordPress 5.0:<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">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. <a href=\"https:\/\/t.co\/G82Lnv6Wld\" rel=\"nofollow\" target=\"_blank\">https:\/\/t.co\/G82Lnv6Wld<\/a><\/p>\n<p>&mdash; Carl Hancock \ud83d\ude80 (@carlhancock) <a href=\"https:\/\/twitter.com\/carlhancock\/status\/961347658467151873?ref_src=twsrc%5Etfw\" rel=\"nofollow noopener\" target=\"_blank\">February 7, 2018<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Now, let us jump in and see how Gravity Forms work with Gutenberg. We&#8217;ll also take a look at the MailChimp integration of Gravity Forms in Gutenberg.<\/p>\n<h2>\ud83d\ude80&nbsp;Gravity Forms Gutenberg Add-on Beta Release<\/h2>\n<p>Make sure you&#8217;ve got the Gravity Forms license before you actually try to check it out. Also, check out our <a href=\"https:\/\/thedevcouple.com\/graviry-forms-review\/\">extensive review of Gravity Forms<\/a> to get started with add-ons. Now, make sure that you have the <strong>latest version of Gravity Forms<\/strong> installed.<\/p>\n<p>After that, follow the simple steps below to get started:<\/p>\n<h3>\u2192 Step #1<\/h3>\n<p>The very first step is to download and install the Gutenberg add-on for Gravity Forms. Let me save you from inconvenience since currently,<strong>&nbsp;it&#8217;s not available in the add-ons section<\/strong>. Rather you can find it in the<strong> downloads section<\/strong> of your account. Alternatively, hit <a href=\"https:\/\/www.gravityforms.com\/my-account\/downloads\/\" rel=\"nofollow noopener\" target=\"_blank\">this downloads page link<\/a> to grab your copy.<\/p>\n<p>After downloading the plugin, go to the plugins section from your WordPress dashboard, install, and activate it.<\/p>\n<div class=\"eckosc eckosc_full_width_block\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-4863\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on.jpg\" alt=\"Gravity Forms Gutenberg Add On\" width=\"1440\" height=\"811\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on.jpg 1440w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-768x433.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-1024x577.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-500x282.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Gutenberg-Add-on-50x28.jpg 50w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/a><\/div>\n<h3>\u2192 Step #2<\/h3>\n<p>Make sure you&#8217;ve installed and activated the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" rel=\"nofollow noopener\" target=\"_blank\">Gutenberg plugin for WordPress<\/a>. 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.<\/p>\n<p><em>Wait! Let our extensive review at WPCouple help you create your form with Gravity Forms plugin. <a href=\"https:\/\/thedevcouple.com\/graviry-forms-review\/\">Read here \u2192<\/a><\/em><\/p>\n<div class=\"eckosc eckosc_full_width_block\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-4864\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD.jpg\" alt=\"Gravity Forms Instances\" width=\"1440\" height=\"811\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD.jpg 1440w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-768x433.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-1024x577.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-500x282.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Images-PSD-50x28.jpg 50w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/a><\/div>\n<h3>\u2192 Step #3<\/h3>\n<p>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&#8217;re good to go!<\/p>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/i.imgur.com\/L4y3l4K.gif\" alt=\"\"><\/a><\/div><\/div>\n<h3>\ud83d\udea7&nbsp;Conditional Logic<\/h3>\n<p>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 <strong>conditional logic on the form itself<\/strong>. That is, show or hide form depending upon some conditions. Pretty amazing!&nbsp;\ud83d\udd25<\/p>\n<div class=\"eckosc eckosc_full_width_block\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-4865\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic.jpg\" alt=\"Gravity Forms Blocks Conditional Logic\" width=\"1440\" height=\"811\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic.jpg 1440w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-768x433.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-1024x577.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-500x282.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Gravity-Forms-Blocks-Conditional-Logic-50x28.jpg 50w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/a><\/div>\n<p>So, you can create kind of <strong>dynamic blocks<\/strong>&nbsp;this way. Which may show up for some users and hide from others. That&#8217;s probably how the next generation websites might shape up. And probably that&#8217;s what <strong>Chris Lema<\/strong> says when he <a href=\"http:\/\/chrislema.com\/talking-gutenberg-wordpress\/\" rel=\"nofollow noopener\" target=\"_blank\">talks about Gutenberg &amp; WordPress<\/a>.<\/p>\n<h3>\ud83c\udf6d&nbsp;Shortcode Support<\/h3>\n<p>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, <strong>Gravity Forms blocks support those shortcodes<\/strong>. You can simply paste the code in the paragraph block and it will be converted into a Gravity Forms block.<\/p>\n<p>So, for those folks, who are used to Gravity Forms shortcodes that&#8217;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! \ud83c\udf96<\/p>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/i.imgur.com\/kBzh8TU.gif\" alt=\"\"><\/a><\/div><\/div>\n<h3>\ud83d\udc35&nbsp;MailChimp Add-on<\/h3>\n<p>In the 3rd beta release of Gravity Forms blocks, they introduced their first add-on block \u2014 MailChimp + Gravity Forms block. All you need to do is to <strong>create a campaign on MailChimp<\/strong>, <strong>install MailChimp add-on<\/strong> on Gravity Forms, and you&#8217;re done! It will <strong>add a block<\/strong> namely \u2014&nbsp;<em>Mail Chimp \u2014&nbsp;<\/em>in the blocks list where you can use it easily.<\/p>\n<p>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! \ud83c\udf1f<\/p>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/i.imgur.com\/FmjBmN8.gif\" alt=\"\"><\/a><\/div><\/div>\n<h2>\ud83c\udf96&nbsp;Gutenberg vs Classic Editor And Plugins<\/h2>\n<p>Now, if we compare the <strong>experience of adding a Gravity Form in Gutenberg vs classic editor<\/strong>, I would definitely go for the Gutenberg one. There are a couple of reasons for it and they&#8217;re not just limited to the Gravity Forms.<\/p>\n<p><strong>\ud83d\udc49\ud83c\udffb<\/strong>&nbsp;The very first one is, when I will have a couple of plugins installed, they won&#8217;t simply stack up on the editor. Instead, <strong>they&#8217;ll be organized into their block sections<\/strong> and I can easily pick up the desired one. It will result in a <strong>consistent UI<\/strong> and <strong>user experience<\/strong>. Also, the search box in the blocks section would further help improve the experience.<\/p>\n<p>\ud83d\udd30&nbsp;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, <strong>simply put a forward slash<\/strong> (<code>\/<\/code>),&nbsp;<strong>write the block name<\/strong>, and it is already there. Isn&#8217;t it a <strong>huge plus<\/strong> and <strong>productivity boost<\/strong> as compared to the classic editor?&nbsp;\ud83e\udd42<\/p>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/i.imgur.com\/OAlGIN8.gif\" alt=\"\"><\/a><\/div><\/div>\n<p>\ud83d\udc4c&nbsp;The second thing is, while dealing with shortcodes in the classic editor, you had to <strong>select a shortcode<\/strong>, <strong>add some custom fields<\/strong>, and insert it. And&nbsp;<strong>to change some options<\/strong>, you had to do it manually<strong>.<\/strong>&nbsp;Also, you <strong>didn&#8217;t always have the preview<\/strong>. Now, consider just selecting the <strong>item from the block<\/strong>, with <strong>preview<\/strong>, and <strong>managing<\/strong> all those <strong>options<\/strong> <strong>from the sidebar<\/strong>!?<\/p>\n<p>\ud83d\udcab&nbsp;That&#8217;s definitely going to <strong>help the<\/strong> <strong>developers<\/strong> 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.&nbsp;\ud83d\udcaf<\/p>\n<div class=\"eckosc eckosc_full_width_block\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=WPCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-4866\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes.jpg\" alt=\"Classic Editor Vs Gutenberg In Shortcodes\" width=\"1440\" height=\"811\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes.jpg 1440w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-768x433.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-1024x577.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-500x282.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/Classic-Editor-Vs-Gutenberg-in-Shortcodes-50x28.jpg 50w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/a><\/div>\n<p>\ud83c\udf96&nbsp;Last but not least, is the concept of <strong>reusable blocks<\/strong>. It&#8217;s kind of inserting a block, let&#8217;s say from a shortcode, then changing its settings and saving it for re-use. I mean, <strong>blocks out of blocks<\/strong>. And who knows how much more possibilities Gutenberg might bring when it finally comes out.<\/p>\n<h2>\ud83d\udce6&nbsp;Final Thoughts<\/h2>\n<p>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.<\/p>\n<p>\ud83d\udc8e&nbsp;<a href=\"http:\/\/twitter.com\/MrAhmadAwais\" rel=\"nofollow noopener\" target=\"_blank\">Ahmad Awais<\/a>&nbsp;has been a Gutenberg evangelist since its early days. First, he developed Gutenberg Boilerplate for WordPress Plugins and now his zero-config <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">Create Guten Block toolkit<\/a> is a gem. It allows you to<strong> create Gutenberg plugins without worrying about configuration<\/strong> or anything else. If you&#8217;ve not tried it yet, you must check it out.<\/p>\n<p>Apart from this, there&#8217;s a lot of interesting stuff going on regarding Gutenberg in the WordPress community. <strong>Yoast<\/strong> has also published their <a href=\"https:\/\/github.com\/Yoast\/wordpress-seo\/issues\/9189\" rel=\"nofollow noopener\" target=\"_blank\">roadmap for Gutenberg integration<\/a>. <strong>GiveWP<\/strong> is already on <a href=\"https:\/\/github.com\/WordImpress\/Give\/issues\/2456#issuecomment-351317017\" rel=\"nofollow noopener\" target=\"_blank\">the way to Gutenberg adoption<\/a>. We are seeing more and more plugins jumping into this ecosystem with the development of Gutenberg. That&#8217;s all pretty much awesome to see \u2014 WordPress community embracing Gutenberg.<\/p>\n<p><em>What are your thoughts on Gutenberg? What&#8217;s your plan for moving on to Gutenberg or how you plan to cope up with this update? Let&#8217;s know your thoughts in the comments below!<\/em><\/p>\n<p>Peace!&nbsp;\u270c<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For a case study, I will be talking about the development and compatibility of Gravity Forms with Gutenberg. Reason being, Carl Hancock\u00a0\u2014 Co-founder of Gravity Forms \u2014 has been a keen advocate of Gutenberg. As a result, Gravity Forms became one of the early adopters of Gutenberg.<\/p>\n","protected":false},"author":3,"featured_media":4869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[18],"tags":[126,28,124,125,101],"coauthors":[81],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/04\/WordPress-Plugins-Adopting-Gutenberg-Featured-Image.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/4849"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=4849"}],"version-history":[{"count":5,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/4849\/revisions"}],"predecessor-version":[{"id":5688,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/4849\/revisions\/5688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/4869"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=4849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=4849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=4849"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=4849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}