Creating Blogroll List Cards Using Columns Block

Note: This post of 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 the previous post, how to create a page using RSS block was described (screenshot below) which I am using in one of my personal sites.

Screenshot showing blog feed using column & RSS blocks.

In this learning post, I wanted create similar blog feed using Columns block to list web developers  that I follow on regular basis, where I get updated on their current work and learn from them and get inspired in my learning down times.

Creating Blog Roll List Block

For creating my Blogroll list I followed the similar approach and used Column block as described in my previous post. First I selected a three column block ( 33/33/33) and added required text.

Screenshot showing three column blogroll block.

Because, I wanted to style each column, and each line of the text (name, short description, and links), I added additional CSS class(es) as shown in the screenshot below.

Screenshot source : WordPress Support Doc

More detailed instructions for adding extra customized classes in a block is found in this Adding Additional CSS Classes to Blocks document.

Block Roll Markup for Three Column Display

Full markup of my three column Blogroll list block is shown below.

<!-- For three column layout -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"my-blogroll"} -->
<div class="wp-block-column my-blogroll"><!-- wp:paragraph {"className":"blogroll-heading"} -->
<p class="blogroll-heading">Chris Coyier</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-text"} -->
<p class="blogroll-text"><em>Runs CSS Tricks</em>. It is a long established fact that a reader will be distracted.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-link"} -->
<p class="blogroll-link">Website | Twitter | GitHub</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"my-blogroll"} -->
<div class="wp-block-column my-blogroll"><!-- wp:paragraph {"className":"blogroll-heading"} -->
<p class="blogroll-heading">Sarah Drasner</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-text"} -->
<p class="blogroll-text"><em>Tech writer and Web developer</em>. It is a long established fact that a reader will be distracted.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-link"} -->
<p class="blogroll-link"><a href="https://sarah.dev/">Website</a> | <a href="https://twitter.com/sarah_edo">Twitter</a> | <a href="https://github.com/sdras/" target="_blank" rel="noreferrer noopener">GitHub</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"my-blogroll"} -->
<div class="wp-block-column my-blogroll"><!-- wp:paragraph {"className":"blogroll-heading"} -->
<p class="blogroll-heading">Geoff Graham</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-text"} -->
<p class="blogroll-text"><em>Technical editor</em>. It is a long established fact that a reader will be distracted.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"blogroll-link"} -->
<p class="blogroll-link">Website | Twitter | GitHub</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
How I styled?

As described in previous steps, I added CSS class(es) for heading, description text and links and gave simple styling (see below).

/* Blogroll list */
p.blogroll-heading {
    font-size: 115%;
    margin-bottom: 0;
    color: orange;
 }
p.blogroll-text  {
   margin-top: 0em;
   font-size: 80%;
}
p.blogroll-link {
   margin-top: -.8em;
   font-size: 85%;
}
.my-blogroll {
    border: 1px solid #c3c3c3;
    border-radius: 7px;
    padding-left: 10px;
}

There you have it!

Wrapping Up

In this learning note post, how to create simple cards using Column block was explored. I have been using this blog roll list group block in my other site to display my own blog roll that I often visit to learn and get inspired from them.

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.