My first Gutenberg block(RSS feed)

Introduction

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.

Plugin Dependencies

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.

An example of validating a feed

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.

Code

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

Load the JavaScript code

The below code snippet registers a JavaScript file that includes all the JavaScript code necessary for the block, bundled and minified using webpack and babel. It follows the ESNext/JSX syntax, that is also preferable by the developers of the Gutenberg core blocks.

Register the Gutenberg Feed block

By following the documentation of the Gutenberg block API, I registered a dynamic block.

Block JavaScript code

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.

Dependencies

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.
  • wp.i18n — it allows you to internationalize the static text in your JavaScript code. 

Attributes

If you look into the JavaScript code in the Register the Gutenberg Feed block section, you’ll see several attributes registered. The data of these attributes can be easily utilized in the edit area of your block by using the attributes property of the edit’s method first parameter:

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 is used inside an arrow function. This is because a text component executes the arrow function to update the value of the particular attribute as shown here:

State

Specific output in the edit method might depend on the value of variables (e.g. show an error message if a variable X is true). In that case, you can’t use a standard JavaScript variable because it isn’t reactive. You’ll need to use the setState function to update the edit output when an event is executed.

Ajax

Any JavaScript Ajax tool can be used for performing Ajax requests but I see most developers use the WordPress API Request jQuery wrapper. I also chose it for this block.

JSX

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:

Demo

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. 

Plugin Repository

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.