Learning to Create Header Pattern for Archive Templates

Written by Tinjure WP Posted on

Note: This post is part-1 leaning note series towards understanding creating additional template types using full site editing (FSE) interface. This learning post is still in active development and updated regularly.

In the previous introductory post of this learning-note post series, a creating a cover block for the author archive template was outlined. In this part-1 series, how the cover block was build and converted to pattern will be discussed.

Learning Goals
Part 1: Learning to create header block pattern for page or post template (this post)
Part 2: Exploring No Result Query Block
Part 3: Building Author template for block theme

First, some background on author block. The new release also introduced splitting the author block into split the Author block into its components and other blocks like Post Author Biography block which provides the authors’ description (Source code), if any.

The avatar name block also allows to ” split the Post Author block into separate blocks to allow for even more layout options, (with) the Author Name block .” This provides theme authors extra options to customize the author name as desired.

Here in this short demo video, Carlos shows how user’s avatar can be customized between the site authors using the Avatar block .

This header block is inspired by this WP Tavern post, where Justin’s walk-through to create author template header is very helpful. The following is screenshot of my final header block.

Screenshot showing front-end display of author template header.

In the following section, let’s start building a cover header block.

Step 1: Create site header in using block editor

Using FSE interface, lets start a new file called header-with-cover file and start building block structure as shown on the right panel.

Screenshot showing author archive header template created using cover block.

The preview on the right panel shows how the header cover block might look like.

Step 2: Add short biographical statement

To display, biography on the author block, a biographical statement must be added to user profile, or else a blank space will be displaced.

Step 2: Header cover block markup

The markup code of the header-with-cover block can be copied by toggle the code editor button and copy in our code editor (see below), which we will use in next step to create header-with-cover pattern.

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":246,"minHeightUnit":"px","isDark":false,"align":"full"} -->
  <div class="wp-block-cover alignfull is-light" style="min-height:246px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
  <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
  <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
  
  <!-- wp:group -->
  <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
  <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"background","fontSize":"large"} -->
  <p class="has-background-color has-text-color has-large-font-size">Published by:</p>
  <!-- /wp:paragraph -->
  
  <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"}},"textColor":"background"} /--></div>
  <!-- /wp:group -->
  
  <!-- wp:post-author-biography {"textColor":"background","fontSize":"small"} /--></div>
  <!-- /wp:group --></div>
  <!-- /wp:group --></div>
  <!-- /wp:group --></div></div>
  <!-- /wp:cover --></div>
  <!-- /wp:group -->
Step 3: Create header-with-cover pattern

Using the simplified methods, described in the previous post, required pattern header was added. Then the code from the previous step (with slight modification) was appended below as shown below in entirety.

<?php
/**
 * Title: Header with cover 
 * Slug: emptytheme/header-with-cover
 * Categories: emptytheme-header
 * Block Types: core/parts/header
 * Inserter: yes
 */
?>

<!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":246,"minHeightUnit":"px","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:246px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->

<!-- wp:group -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
<div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"background","fontSize":"large"} -->
<p class="has-background-color has-text-color has-large-font-size">Published by:</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"}},"textColor":"background"} /--></div>
<!-- /wp:group -->

<!-- wp:post-author-biography {"textColor":"background","fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Now, if we view our header cover pattern in the patter inserter, we can see as shown below.

Screenshot showing Header with cover pattern in the inserter (left panel) and a preview (right panel).

And that’s it! This serves as one of the building blocks of our Author archive template, to be used later.

Wrapping Up

In this short learning-note section, how to create author template header section using cover block, avatar block and author biography block was explored.

Resources

Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.