Adding Post Format Aside Support in Block Themes

Notes: This post is part of leaning blocks using full site editing (FSE) features to create child block themes. This learning post is still in active development and updated regularly.

This learning post was inspired by Kjell’s proposal (GitHub ticket #5732) to add Aside post format in block themes (eg. Livro). I am a big fan of post formats have been using in my classic themes including on this site.

I thought to give it try using Twenty Twenty-Two theme and made following modification and tested whether it works.

Step 1: Add the “Aside” support in functions.php

Modified the Twenty Twenty-two functions.php file as shown below:

// functions.php
if ( ! function_exists( 'twentytwentytwo_support' ) ) :

/**
 Sets up theme defaults and registers support for various WordPress features.
 */
function twentytwentytwo_support() {

    // Add support for block styles.
    add_theme_support( 'wp-block-styles' );

    // Support the "Aside" post format.
		add_theme_support( 'post-formats', array( 'aside' ) );

    // Enqueue editor styles.
    add_editor_style( 'style.css' );

}

endif;

Step 2: Add the following style rules to styles.css

Added the following css snippets from the GitHub ticket in Twenty Twenty-two style.css.

 * Aside post format.
 */

.single-format-aside h1.wp-block-post-title,
.single-format-aside h1.wp-block-post-title + .wp-block-post-date,
.home .post_format-post-format-aside .wp-block-post-title,
.archive .post_format-post-format-aside .wp-block-post-title,
.blog .post_format-post-format-aside .wp-block-post-title {
	display: none;
}

 

Step 3: Viewing in site editor and front end display in a browser

This is displays in the Site Editor as shown below

The Aside post is displays on the front end as advertised (see below)

Next Step

I plan to design aside post format pattern for in the home / index page and use in one of my theme.

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.

• Try adding support for the aside post format. #5732