Creating a RSS Blog Feed Page Using RSS Block

Note: This post is part 3 of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly.

In the previous learning post, I added a few custom patterns in my Labre block themes. While adding additional patterns, is some thing I will be doing for a while as my experimental site progresses or I notice some new pattern to get inspired.

Inspired by this Tammie Lister’s post and a more recent post by Jamie Marsland of PootlePress, I thought to learn to create my own BlogFeed template so that I could use in my personal sites as well.

Learning Goals
Part 1: Modifying Fonts & Basic Typography
Part 2: Adding Custom Block Patterns
Part 3: Creating a RSS Blog Feed page using RSS Block (this post)

The objective of this learning post is create a block template using RSS block as described by Tamie Lister and Jamie Marsland, and document the steps for future reference and/or sharing others as well. First let’s briefly overview what is RSS Feed Block.

Brief Overview of RSS Feed Block

The RSS Feed Block feature is available in the Block editor with WordPress 5.0 release.

As demonstrated in the following demo by Riad Benguella in Gutenberg release note demonstrating how users can set the number of items displayed and also toggle on/off the author, date, and excerpt.

RSS Feed Block (source: WP Tavern)

In the WP Tavern, Sarah Gooding writesRSS is still relevant today as one of the linchpins of the open web and Gutenberg makes it possible to easily place a feed inside a post or page“. Recently, I have become a fan of RSS block as well, as I could pull my latest posts from my project sites in one page using RSS block.

An Example Use Case

In my demo use case example below, I plan to create a page to display latest Blog Feed from some common WordPress sites that I too monitor to get informed and updated on all most daily basis.  Yet another use case of RSS Blog Feed is found in this Refined.blog ( a software engineering blog) and others production level sites.

Part 1: Creating Custom RSS Feed Block Pattern
Step 1: Creating RSS blocks using column

First, I created a simple two column RSS feed block using columns block. For styling purposes, I added additional CSS class so that I could target each items (title, publish date, border to each column etc.). Examples of styling RSS blog feed can be found in this guide.

How to use columns to create custom layout is described in this guide. Grouping blocks is demonstrated in this guide and this guide describes how to add additional CSS classes to blocks.

A similar two column RSS feed group block is being in one of website to display my latest writings  and create a all thing WordPress Blog Feed page.

Step 2: Converting the Blog feed block into a pattern

The RSS feed block (step 1) was converted into a pattern as described in the previous post. First, a two-column-rss-feed pattern was registered and

Next, we should add the .. file in /inc/patterns folder and paste the following HTML escaped source code of recently created pattern block in the $block_patterns = array ( ) statement as shown below, as described previously.

<?php
/**
 * Paragraph with quote.
 *
 * @package labreblocks
 */

return array(
	'title'      => __( 'Two Column RSS Feed', 'labreblocks' ),
	'categories' => array( 'labreblocks' ),
	'content'    => '<!-- wp:group {"className":"my-rssfeed"} -->
		<div class="wp-block-group my-rssfeed"><!-- wp:columns -->
		<div class="wp-block-columns"><!-- wp:column -->
		<div class="wp-block-column"><!-- wp:group -->
		<div class="wp-block-group"><!-- wp:heading {"level":4} -->
		<h4>' . esc_html__( 'WordPress News', 'labreblocks' ) . '</h4>
		<!-- /wp:heading -->

		<!-- wp:rss {"feedURL":"https://wordpress.org/news/feed","itemsToShow":4,"displayDate":true} /--></div>
		<!-- /wp:group --></div>
		<!-- /wp:column -->

		<!-- wp:column -->
		<div class="wp-block-column"><!-- wp:group -->
		<div class="wp-block-group"><!-- wp:heading {"level":4} -->
		<h4>' . esc_html__( 'WP Tavern', 'labreblocks' ) . '</h4>
		<!-- /wp:heading -->

		<!-- wp:rss {"feedURL":"https://wptavern.com/feed","itemsToShow":4,"displayDate":true} /--></div>
		<!-- /wp:group --></div>
		<!-- /wp:column --></div>
		<!-- /wp:columns --></div>
		<!-- /wp:group -->

		<!-- wp:separator {"className":"is-style-labreblocks-separator-thin"} -->
		<hr class="wp-block-separator is-style-labreblocks-separator-thin"/>
		<!-- /wp:separator -->',
);

As described in the previous post, if we look at the block patterns is visible in our block editor, the Two Column RSS Feed should be available for our use (see screenshot below).

Screenshot showing a custom two column RSS Feed block pattern.
Part 2: Adding the Custom RSS Feed block pattern in a page

In this post, I opted to split the creating a blog feed display page and RSS Blog Feed template. In this post I will describe I how I created a page displaying in my personal project site (screenshot below).

Screenshot showing a portion of Blog Feed page.

In the next learning post, I will document how I created RSS Blog Feed Template file using block editor.

Wrapping Up

In this learning note post, how to create a Blog Feed pattern using RSS block and columns block was was explored. Then the pattern was used in a page to display blog feeds from different sites for easier following.

NEXT: Creating a RSS Blog Feed Page Template

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.