Since Gutenberg is going to be added to the WordPress core soon, a few weeks ago I researched its API, reviewed a few Gutenberg block examples, and decided to create a plugin called Gutenberg RSS feed.
I hope it will be useful for people who need to pull articles from external blogs to their WordPress website.
In this post, I’m going to describe how the plugin works.
The only thing you should consider is to make sure the Gutenberg plugin is installed on your WordPress website before using this plugin.
How to install and configure the plugin
You’ll need first to download the plugin from https://wordpress.org/plugins/rss-feed-block/, and activate it on your site.
Once the plugin is installed, you’ll need to enter the URL of your feed and validate it using the Validate button.
The block supports the following helpful options:
- How many posts to be shown on the front-end;
- Whether the description of the feed articles to be shown on the page;
- Whether the articles’ dates to be visible.
In this section, I will show you the key pieces of the Gutenberg related code. You can find the full code on https://github.com/aatanasovdev/gutenberg-rss-feed
Register the Gutenberg Feed block
By following the documentation of the Gutenberg block API, I registered a dynamic block.
The Gutenberg documentation doesn’t cover everything related to the new editor yet, and while building the block, I had to look into the Gutenberg core blocks to find out how to use the Gutenberg features like form fields, block panels, etc. If you’re going to create own blocks, I encourage you to check out the core blocks on https://github.com/WordPress/gutenberg/tree/master/core-blocks/ too.
Here is the important information about the above code:
- registerBlockType — this is a function that is responsible for rendering the edit options of the block and saving their values. In our case, we have a dynamic block, and a callback function displays the output on the front-end. If you create a static block, you’ll need to add the front-end output to the save method of the register function. For dynamic blocks the save method does nothing, it just returns null.
- wp.components — it includes many useful components that will save you time while preparing your edit UI. For example, if you need to add a text field to the edit screen of your block, you can use the TextControl component.
- wp.editor — it provides helpful editor components that are used for layout styling. The most common editor component is InspectorControls; it creates a side panel where you can put your settings.
You can’t edit an attribute directly. In such cases, you’ll have to use the setAttributes method:
You’ll notice the set attribute method
I tried different options on how to organize the code in the return statement of the edit method, and I think using JSX is the most sufficient and cleanest way for that. As an example, here is a piece of code:
A demo version of the plugin can be found on https://aatanasov.net/example-rss-feed/
It shows the latest 5 posts from my WordPress site.
The code is completely free and you can find it on https://github.com/aatanasovdev/gutenberg-rss-feed
Please feel free to use it for building your own Gutenberg blocks.