WordPress is not just about visualizing a website. It also allows multiple features that make your website better and progressive. Gutenberg Blocks is one such feature that you can use to make your site better.
Gutenberg allows you to save content blocks and use them on other sites of WordPress. Whether you are a developer or not, you can import and export blocks and use them on different themes and websites.
The productivity of websites can be improved just by analyzing the possibilities of this brilliant function. This feature can be helpful to move blocks across the WordPress sites by just following a simple procedure. It will help you save a huge chunk of your time. Now, you don’t need to create new blocks for every website.
These reusable blocks make all of the website customization process easier. Our client switched from convention to these and they have had success. Why not give it a try?
Create a Reusable Block
The first step requires creating reusable blocks as you can not import or export blocks in natural form.
First, take a block, customize it, and then add it to reusable blocks. After you have customized and created it, you can add it to reusable blocks from the Toolbar menu.
Naming the Block
Add a name for the customized block before saving it in the reusable blocks. Your block can be anything like a quote, list, a banner ad, an image slider, or any post. Name the block as per its reference for later use.
Using the Block
Once you have saved the block, it can be used anywhere on the website. To add the block, click on the Add Block (+) icon, then go to Reusable block and then choose the block you want to add.
To view the block after adding it, click on ‘Preview/Publish’. It will show the results at the front end.
The good thing about reusable blocks is that you don’t need to create them again from scratch. You can add them anywhere in any post/page that supports Gutenberg blocks. You can edit or trash any of the reusable blocks.
Exporting The Blocks
First, access the screen where all reusable blocks are listed to be able to export a block. Click on ‘Manage All Reusable Blocks’ in the reusable blocks list.
You can also access all the reusable blocks from the toolbar menu in the ‘Show with more tools & options’.
Once you are in the block management page, you can export, delete, edit, or import your Gutenberg WordPress blocks. All the blocks you have added to the reusable blocks will appear here. Bring the mouse on the block you want to export, then click on ‘Export as JSON’ below the block. The JSON file will be saved on your computer.
Now, you can upload this JSON file in any other WordPress site to use it later.
JSON
JSON stands for JavaScript Object Notation. JavaScript is a programming language to improve the user interface of a website. It is interpreted by browsers to dynamize complex activities for the user. JSON is fast and easy to analyze text format for data exchange between a JavaScript-based Web application and the server.
Importing The Blocks
The next step is straightforward. You need to reverse the previous instructions in the place where you want to import the block.
The Reusable blocks tab appears in the blocks library only when you have created a block. First, access the ‘Manage All Reusable Blocks’ on the menu. You will find the list of reusable blocks empty initially.
Click on ‘Import from JSON’ and then select the block you want to open or probably the one you just exported for later use. Click Import after choosing the file. A message “Reusable Block Imported Successfully” will appear, but you might have to refresh the page.
And that’s it! You have imported a Gutenberg block in another WordPress site successfully. Afterward, you can use and reuse these blocks on the site you want.
Plugins to Export Gutenberg Blocks
Exporting via Plugin
After installing and activating the plugin, open the Gutenberg editor. Style your block as you want it to be and then click on the ‘Export JSON’. This step will download the JSON file into your computer.
Import Gutenberg Blocks using a Plugin
Again open the Gutenberg editor to import the block. Click on the ‘Add Block icon. Then click on the ‘Import From JSON button’. It will be under the widgets tab. Then click upload after choosing the file from your computer.
Limitations for Plugin
To save a block in your WordPress database, you have to use the manual method. The only problem with the plugin is that the blocks won’t be saved to the WordPress site.
Conclusion
With these simple steps, you can create a Gutenberg layout and use it, later on, to add Gutenberg blocks to your website. With those on your site, you can have a better website and better elements.