[Resolved] Block content template display categories on top of each other

[dave]

Hello,

I’m using GPP & GBP and I am using the block content template with dynamic content to set up my blog and archive pages.
Right now the categories are displaying inline and breaking out of the grid with only one icon regardless of how many categories are displaying.
I’d like the categories to display one on top of the other and I would like each one to have an icon. Is this possible?

Thank you for your help,
Dave

ps. for visual reference this is the layout I am trying to replicate:
https://web.archive.org/web/20130923161441/http://www.strangenative.com/category/ideas/

[Fernando]

Hi Dave,

Try removing the icon you added to the Headline Block, and then add my-cat to the additional CSS classes of the block in its advanced section.

Then, add this PHP snippet:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-cat' ) !== false ) {
		$myreplace1 = '</span>';
		$myinsert1 = '</span><br>';
        $block_content1 = str_replace( $myreplace1, $myinsert1 , $block_content );
		$myreplace2 = '<span';
		$myinsert2 = '<span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg></span><span';
        $block_content = str_replace( $myreplace2, $myinsert2 , $block_content1 );
		
		
    }

    return $block_content;
}, 10, 2 );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Let us know how it goes.

[dave]

Woot! Success!

Thank you Fernando.

I’ve managed to change the color and spacing via css.
The only thing I can’t figure out is how to get the icon(s) and text to line up better. Right now the icons look too high, I’d like them to appear vertically centered with the text like the post date and comment number icons and text above the categories.
I’ve tried playing around with padding and margins but I am doing something wrong…
Are you able to help me get them lined up a little better with some css, please and thank you.

Dave

[Fernando]

I see.

Try replacing the PHP snippet we have with this:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-cat' ) !== false ) {
		$myreplace1 = '</span>';
		$myinsert1 = '</span></span>';
        $block_content1 = str_replace( $myreplace1, $myinsert1 , $block_content );
		$myreplace2 = '<span';
		$myinsert2 = '<span class="my-cat-div"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg></span><span';
        $block_content = str_replace( $myreplace2, $myinsert2 , $block_content1 );
		
		
    }

    return $block_content;
}, 10, 2 );

Then, add this CSS through Appearance > Customize > Additional CSS:

.my-cat-div {
    display: flex;
    align-items: center;
}

Let us know how it goes.

[dave]

Perfect, thank you Fernando 🙂

[Fernando]

You’re welcome Dave! 🙂

[Author]

Posts