How to Show Gutenberg Blocks in Elementor

Both the Gutenberg Editor and Elementor are excellent ways to build a WordPress website. We recently checked the numbers and found that these are the two fastest growing options for WordPress sites.

However, in most situations, you need to choose either Gutenberg or Elementor. The two systems are not very compatible with each other.

So we considered it a challenge this week when a PublishPress customer asked us if they could use the PublishPress Blocks plugin inside pages built with Elementor. After some research, we found that this is possible. I'm going to show you how to insert any Gutenberg block into Elementor layouts.

The example I'll use in this tutorial is inserting the Login / Register Form block.

• Start with both the Elementor and PublishPress Blocks plugins on your site.
• Install the “Reusable Blocks Extended” plugin.

Now that we have the plugins ready, our next step is save the Login / Register Form block as a reusable block.

• Go to “Blocks” then “Add New” in your WordPress admin menu.

• Give a name to your reusable block. In this image below, my title is “Login Block”.
• Add the block that you want to use inside Elementor. In this case, I'm choosing the Login/Register Form.

• On this screen, make any changes you want to your block. Change the settings, colors, and other block options:

• Click “Publish” and return to the “All Reusable blocks” screen.
• Find your new reusable block and copy the new shortcode.

• Go to edit a post or page that is built with Elementor.
• Find the “Shortcode” element and add to your layout.
• Enter the shortcode you copied a few moments ago. Your Gutenberg block will appear inside the content. Don't worry if the appearance isn't 100% perfect.
• Click the green “Apply” button.

Click “Publish” and view your content. You'll see that your Gutenberg block is displayed inside Elementor!