Creating and Adding a Three Column Blogroll Pattern in Labre Blocks

Note: This post is part my 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 a recent learning note posts, I described how to create blogroll list cards using columns block and RSS Feed blog page for my personal sites. Both the items are being used in my personal site here.

Yet in my another learning post, I documented how to add Custom Blocks Patterns to Labre Blocks theme. In this learning post, I wanted to create a similar three-column-blogroll pattern (screenshot below) essentially by putting together blogroll list cards block and then adding to Labre blocks theme as described previously in this post.

Screenshot showing three column blogroll list pattern.

In the following sections, I will walkthrough the process of creating such a blogroll list.

Creating Blogroll List Blocks

Creating blogroll list is described in this previous post in detail. Following the exact same procedure, a three column blogroll list was created.

Adding Blogroll List block to Labre Blocks Pattern Library

The next steps, after creating a block pattern block was to convert it into a pattern and include the Labre Blocks theme.  Because we have already described in a previous post how to convert and add a block pattern to Labre theme library. Let’s look at briefly again, how to add the three column blogroll block to Labre Blocks pattern library.

Step 1: Add the Blogroll List File Name to Block Pattern Register Array

Next, the newly created three column blogroll list block (in previous step) is added to register as block pattern in the Labre Blocks’ block-pattern.php file (line 9).

/* block-pattern.php  */
  ...
  ....
  if ( function_exists( 'register_block_pattern' ) ) {
		$block_patterns = array(
			'headline-button',
			'rss-feed-pattern',
			'two-column-rss-feed',
			'three-column-blogroll',
			'offset-heading-with-two-column-text',
			'heading-image-text',
			'media-text-button',
			'paragraph-with-quote',
			);
  ...
  ...
add_action( 'init', 'labreblocks_register_block_patterns', 9 );
Step 2: Adding pattern file in /inc/patterns folder

In this step, we should add the HTML escaped three-column-blogroll.php file into Labre Blocks’ inc/pattern folder as described in this previous post.

/* three column of text pattern
* source: https://wordpress.org/patterns/pattern/three-columns-of-text/
* @package labreblocks
*/

return array(
	'title'      => __( 'Three Column Blogroll List', 'labreblocks' ),
	'categories' => array( 'labreblocks' ),
	'content'    => '<!-- wp:columns {"align":"wide","style":{"color":{"text":"#ffffff","background":"#1f2022"}}} -->
			<div class="wp-block-columns alignwide has-text-color has-background" style="background-color:#1f2022;color:#ffffff"><!-- wp:column {"className":"my-blogroll"} -->
			<div class="wp-block-column my-blogroll"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px","lineHeight":"1.3"}},"className":"blogroll-heading"} -->
			<h3 class="blogroll-heading" style="font-size:24px;line-height:1.3"><strong>' . esc_html__( 'WordPress News' ) . '</strong></h3>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"className":"blogroll-text"} -->
			<p class="blogroll-text">' . esc_html__( 'Get a virtual tour of the museum. Ideal for schools and events.', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph -->

			<!-- wp:paragraph {"className":"blogroll-link"} -->
			<p class="blogroll-link">' . esc_html__( 'Website | Twitter | GitHub', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph --></div>
			<!-- /wp:column -->

			<!-- wp:column {"className":"my-blogroll"} -->
			<div class="wp-block-column my-blogroll"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px","lineHeight":"1.3"}},"className":"blogroll-heading"} -->
			<h3 class="blogroll-heading" style="font-size:24px;line-height:1.3"><strong>' . esc_html__( 'WP Tavern' ) . '</strong></h3>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"className":"blogroll-text"} -->
			<p class="blogroll-text">' . esc_html__( 'Stay updated and see our current exhibitions here.', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph -->

			<!-- wp:paragraph {"className":"blogroll-link"} -->
			<p class="blogroll-link">' . esc_html__( 'Website | Twitter | GitHub', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph --></div>
			<!-- /wp:column -->

			<!-- wp:column {"className":"my-blogroll"} -->
			<div class="wp-block-column my-blogroll"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px","lineHeight":"1.3"}},"className":"blogroll-heading"} -->
			<h3 class="blogroll-heading" style="font-size:24px;line-height:1.3"><strong>' . esc_html__( 'Theme Shaper' ) . '</strong></h3>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"className":"blogroll-text"} -->
			<p class="blogroll-text">' . esc_html__( 'Get to know our opening times, ticket prices and discounts.', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph -->

			<!-- wp:paragraph {"className":"blogroll-link"} -->
			<p class="blogroll-link">' . esc_html__( 'Website | Twitter | GitHub', 'labreblocks' ) . '</p>
			<!-- /wp:paragraph --></div>
			<!-- /wp:column --></div>
			<!-- /wp:columns -->',
);

In the code snippets above, we added source code of three column blogroll into the $block_patterns = array ( ) statement (lines: 9-51) as string. Now, just like in the previous post, our three-column-block pattern should be displayed in our block editor under Labre category.

Step 3: Add Pattern Styling

Our blogroll list pattern is not yet styled, less add the following simple styling at the bottom of Labre Blocks’s /assets/theme.css file.

/* /assets/theme.css */
.wp-block-column.my-blogroll {
      border: 1px solid #595959;
      padding-left: 20px;
      border-radius: 7px;
}
h3.blogroll-heading {
     color: #d4ac6e;
     margin-bottom: 15px;
     margin-top: .8rem;
}
p.blogroll-text {
     font-size: 80%;
     font-style: italic;
     margin: -.85rem 0;
     margin-bottom: 1rem;
     line-height: 1rem;
}
p.blogroll-link {
    font-size: 110%;
    margin-top: -.8rem;
    margin-bottom: .8rem;
}
Wrapping Up

In this learning note post, a simple three column blogroll list block pattern was created and the pattern is being used here in this page to follow some inspiring developers and their recent works.

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.