Category: Building with Blocks

Last summer, I was on a pattern-creating bender. In two months, I had designed just shy of 100 block patterns. Outside of work and necessary household duties, I spent every waking moment building things with the block editor for fun. I had complete creative freedom, no need to roll out a commercial product, and no one to please but myself.

As an artist, I was living the dream. There was no pressure to do anything other than create whatever came to mind. Of course, I crashed after a while. The real world always catches up, but I built some neat patterns over the summer.

There was about a three-day stretch in mid-June where I focused solely on patterns for food bloggers and recipe sites. I distinctly remember my sister, who stayed over for the week, asking why I was on the computer instead of watching the movie on TV.

I angled my laptop in her direction and said, “Look at this. I’m building a way for food bloggers to insert recipe cards in their posts. You know, like that card you see after scrolling through 2,000+ words of someone’s life story when you’re just trying to find a recipe? Pretty cool, right?”

That may not be an exact quote, but it is close enough — this is my story, so I will tell it like I remember.

I had one of those pivotal moments during this stretch of building food-blogger patterns. If I can do this now, eventually, designers will be able to create and bundle any layout with themes, and users can insert them at the click of a button, I thought.

I was already on board the block bandwagon at that point. However, there are always those moments where things seem to come together. The lightbulb clicks on. The stars align. Whatever you want to call it.

Unfortunately, only a few patterns from the Summer of ’21 have seen anything beyond a folder on some obscure GitHub repository. For today’s entry into the Building with Blocks series, I pulled one out to share. It also provided an opportunity to rebuild it from scratch with newer block design tools.

Building a Recipe Card

For this Building with Blocks tutorial, I will walk you through each step for creating a simple recipe card. I recommend activating the Twenty Twenty-Two theme for the same results. However, I intentionally only used black and white for the text, background, and border colors so that it transfers across as many themes as possible.

When finished, your recipe card should look similar to the following:

While I encourage trying out each step for yourself, feel free to copy the pattern HTML from Gist and paste it directly into the editor.

The final step of this walkthrough requires the Social Sharing Block plugin by Nick Diego. If you prefer to stick with the core WordPress blocks, you can omit the last section.

Step 1: Card Group

Let us kick this walkthrough off with something simple. There is no need to complicate matters this early.

Open a new post or page in your WordPress admin and add a Group block. In the block options panel on the right, look for the “Dimensions” section and set the “Block spacing” option to 0. This is necessary to get the card design we are after. Then, add a border of your choosing.

Note: you can add a background color for the entire card during this step. However, if you do, WordPress will add some default padding. So, you will also need to set the “Padding” option to 0.

Step 2: Card Image Header

This is the first moment where you can really make a decision about your card. The two most obvious choices for a recipe card image are the Image and Cover blocks. I chose an Image and placed it into the Group block from Step #1.

The veggie pizza image is by Jennifer Bourn and is available in the WordPress Photo directory.

If you decide to add a Cover block, you can add the recipe title and description from Step #4 inside of it.

Step 3: Card Content Group

Let us continue keeping things simple for now. We need to group the “contents” of the recipe card together. Again, add a new Group block.

The only change you need for this block is to add some space around it. In the block options panel in the sidebar, set the “Padding” option to 2rem or your preferred value.

Step 4: Card Title and Description

Inside the Group block from Step #3, insert a Heading block. Use this for the title of your dish. Then, insert a Paragraph immediately after for a description.

This is more of a free-form step, so go crazy with as much or as little detail as you want to add.

Step 5: Card Meta

Thus far, everything should have been relatively straightforward. The previous four steps did not do anything complicated with the layout. This about to change.

You need to create a four-column section showing cooking times and other recipe metadata for this step. The best solution in WordPress for this is the Row block. If you want, you can try it with Columns. Both experiences can feel a bit janky in small spaces.

Add a new Row block inside the Group block you have been working in. I selected the “Space between items” option for the “Justification” control. This makes sure that everything is evenly spaced, but the choice is yours.

Then, click the “+” icon in the Row and add a Paragraph block inside it. For my first Paragraph block, I added the text “Prep Time” first. Then, I hit Shift + Enter on my keyboard to create a line break and added “2 Hours.” For fun, I popped in an emoji.

The trick to making the rest of this easy is to get the first Paragraph block styled just like you want, duplicate it three times, and customize the text.

Step 6: Card Ingredients and Directions

The hard part is out of the way. I promise. This next step is as simple as adding Heading and List blocks for an Ingredients section and doing the same for a Directions section. These should still be placed in the same Group that the previous blocks were in.

For the Heading blocks, I set the level to H3. The only other settings change I made was to select the “Convert to ordered list” button in the toolbar for the list under Directions.

Step 7: Card Social Sharing

You cannot have a modern recipe card without a social section, right? You will need the Social Sharing Block plugin installed for this. Or, you can stop now with your completed card.

For this section, insert a new Group after (not inside) the Group used to house the recipe content. Change the text color to white and add a dark background color. You can also tinker with the padding (I set it to 2rem) or use a Spacer block if you want extra breathing room.

For the “Like This Recipe?” text, add a Heading block with the H3 level. Then, insert the Social Sharing block below it. Feel free to play with the design. I used centered justification and enabled the “Show labels” option.

That is a wrap!

Notes and Other Thoughts

I wanted to use core WordPress blocks for everything in this recipe card. The social sharing section was the obvious roadblock, so I needed to rely on a third-party plugin.

Compared to many modern recipe cards that I have seen around the web, this solution still lacks two features:

• Task-style checkboxes or radio inputs for crossing out ingredients or steps.
• A “print this recipe” button.

For the task list, the Todo Block plugin by David Towoju works as a great alternative to the List block. It is lightweight and will allow site visitors to cross out items as they work through the recipe.

For a print button, I do not have a recommended solution. It would not be particularly tough to do via code, and I would love to see a theme author take this pattern idea and run with it.

As I was looking over the latest releases from the WordPress theme directory this week, I came across one that caught my eye. Onia was clean and minimal while reserving its flourishes to bring attention to just a few elements across the page.

Could this be one of those diamonds in the rough I am always looking for in the free theme directory?

It had the potential, but it fell short. As I explored the theme, it felt like the author had spent 90% of their time designing an eye-catching front page. Diving into inner pages showed no attention to typography as the character count per line was pushing 150 and beyond, more than twice what it should be for comfortable reading.

That is the sort of thing that is easy to address. I was more disappointed that Onia was not a block theme. All the elements were there. It did not do anything particularly complex, and there was no evident reason for it to be a classic theme.

Yesterday evening, I sat down and recreated Onia as a block theme. Technically, I built its homepage directly from the editor on top of a base theme project I already had on hand. There were a couple of challenges, but I did the bulk of the work in roughly an hour. The other pieces took a little longer as I ran through possible solutions.

The following is a comparison of the two front pages (Onia is first, followed by my recreation):

I obviously took a few liberties with spacing, sizing, and coloring. I was not attempting an exact replica. Instead, it was a bit of a reboot with a few spins on the original.

Some Quick Notes

One of the things that often frustrates me with themes is that they show off these beautiful logos in the demo but offer no way for the user to work with the same font. I was unsure of what the original font family was used in the logo, but I added Sacramento as a cursive handwriting option:

These features can make a difference for the average user. Not everyone can load up Photoshop and create their own specialized logo. However, they can type their site’s name and select a font option for the plain text version.

Technically, there are two features currently in Gutenberg but not in WordPress 5.9 that I used. The first is the Read More block. Onia had this in its post grid. As a theme author, I would have simply waited for this feature if it was a holdup. Considering that both the featured image and post title link to the single post page, it was not a make-or-break element.

The second missing feature is the “show labels” option for the Social Icons block. A workaround for the original design would have been to use a Navigation block instead since the links were just plain text. Another option would have been a custom block style for Social Icons. Either way, this was not a blocker for this theme being released as a block theme.

Every other design element of the theme is possible through the block system.

Brushstroke Block Style

I said there were challenges, but I use that term to mean “the fun stuff.” These are the pieces where designers and developers can dive into a problem and attempt to innovate, and they are the solutions that I want to share.

One of my favorite design elements of the theme was its use of an SVG to create a brushstroke behind the intro heading:

The theme used an old-school method of wrapping a <span> element inside an <h1>. This applies the brush background to the last few words of the text. However, that implementation is problematic with smaller devices, not keeping up with the natural flow of text-breaks as the screen changes. There was also no way for users to control the color of the brushstroke or text.

I wanted to know if there was a better way of doing this while offering ultimate flexibility to users.

Fortunately, WordPress News recently relaunched with a brand-new design that leaned heavily on brushstrokes. Plus, the theme is licensed under the GPL, so its assets are freely available.

Honestly, I wish I had looked at its source code before reading over various CSS help and support sites. Our community’s designers had already solved the problems I was hitting. All I had to do was adjust their solutions to fit my needs.

After a bit of wrangling, I managed to create a customizable brushstroke background for Headings:

Users can adjust the text color as always. However, modifying the background color changes the brushstroke color. The stroke always aligns with the last line of text, so it will work regardless of the screen size. That may not always be desirable. However, other solutions exist for use cases like highlighting specific text.

The following screenshot is an editor view as I change the color:

To create the brushstroke background for Heading blocks, I added the following code to my theme’s functions.php file:

add_action( 'init', 'tavern_register_block_styles' );

function tavern_register_block_styles() {
        register_block_style( 'core/heading', [
            'name' => 'brush',
            'label' => __( 'Brush', 'tavern' )
        ] );
}

Then, I downloaded the brush-stroke-big.svg file from the WordPress News repo and added it to an /assets/svg folder in my theme.

The final step was adding custom CSS to my theme’s stylesheet. I covered adding styles in more depth in my previous Building with Blocks tutorial for those who need a refresher.

/* Cancel out WP's padding on headings with backgrounds. */
:is( h1, h2, h3, h4, h5, h6 ).is-style-brush.has-background {
    padding: 0;
}

/* Add default background to headings. Clip it to the text. */
:where( h1, h2, h3, h4, h5, h6 ).is-style-brush {
    position: relative;
    z-index: 1;
    background-color: #b5b5b5;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

/* Adds the brushstroke to ::before. Using ::after can conflict with editor. */
:where( h1, h2, h3, h4, h5, h6 ).is-style-brush::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -1rem;
    left: -1rem;
    height: calc( 1.25em + 1rem );
    width: 100%;
    background-color: inherit;
    -webkit-mask-image: url('assets/svg/brush-stroke-big.svg');
    mask-image: url('assets/svg/brush-stroke-big.svg');
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

Most of those rules can be adjusted on a case-by-case basis. Some may need a bit of fudging, depending on the theme.

This solution could work for other blocks. I encourage theme authors to experiment and use other SVGs to see what they come up with.

Note: the Onia theme links to a CDN for its SVG background image, which is not supposed to be allowed on WordPress.org. I also could not find any licensing info on it. Being unsure if it was compatible with the GPL, I did not use the asset from the theme.

In today’s post, Tavern readers are in for something a little different than our regular stream of news and opinion. Welcome to the Building with Blocks series. It is a new type of post we are trying out to show people some of the fun, unique, or creative things they can do with WordPress blocks.

Our team decided to split the series into both developer and user-centric tracks. Posts may cover creating an “about me” page, coding custom block styles, piecing together a pattern, or something else entirely.

Since I am kicking off this series, I wanted to answer a question we already received from one of our readers. I had previously shared a custom block style with a “Scotch tape” look in my coverage of the FSE Outreach Program’s call for media testing:

Devendra Meena asked in the comments:

Hey man, how to get the “tape” custom block image?

This felt like a natural starting point with my first post in the series.

The design shows a piece of tape holding a Polaroid-style, framed image. Technically, I also had an alternate style with two pieces of tape at the corners. However, this tutorial will focus on the former. The two-corner design requires overwriting some editor-specific CSS, technically breaking functionality, and is not something I should encourage.

I also wanted to begin with block styles because they are underutilized. Most variations I have seen have been simple changes like adding borders and removing margins. These are often best left to block design tools. Of course, themers are adding these styles because WordPress currently lacks or has previously lacked the UI controls for handling them. It is also one of the reasons so many have asked to mix and match multiple block styles — themes are doing the work that core should be doing. More tools are continually being added, but we still have a long way to go.

When I think of block styles, I want to create designs that are unlikely to be available via the standard design tools. I want to serve something unique to theme users. That is where we are starting today.

As a bonus, custom block styles work in classic and block themes.

Despite having written hundreds of tutorials in my life, this exercise turned out to be a little tougher than I had anticipated. It is easy to forget that everything I code starts with a base of “fixing” the things that I find odd about the default block library styles. This makes my life easier. However, many theme authors will lean on core’s defaults, so I needed to make this general enough to work for them.

Therefore, I opted to start from the default Twenty Twenty-Two theme. In testing, I suggest working with it. The CSS code in the following section may need slight alterations for others.

Creating the “Scotch Tape” Block Style

The first step is to register a custom block style via the theme. WordPress has both server-side and JavaScript APIs for this feature. Using PHP is easier to set up if you do not already have an editor script file to drop the code into.

To register the custom block style, add the following code to your theme’s functions.php file:

// Register block styles on the init hook.
add_action( 'init', 'tavern_register_block_styles' );

// Wrapper function for registering all block styles.
function tavern_register_block_styles() {

        register_block_style( 'core/image', [
        	'name' => 'scotch-tape',
        	'label' => __( 'Scotch Tape', 'tavern' )
        ] );
}

Doing so will register the style in the editor. You can test this by adding an Image block on the post-editing screen. “Scotch Tape” should be selectable under the styles tab.

Registering a style is the easy part. Writing the code is where things can get dicey. WordPress has so many methods of loading CSS styles that you might not know where to start.

The register_block_style() function used earlier allows developers to add a style_handle, a reference to a registered stylesheet. Themers can also add an inline style directly via the inline_style argument. For just a few lines of CSS, this works well.

In my own themes, I register block-specific stylesheets via the wp_enqueue_block_style() function — yes, the function names are terribly confusing. This was officially added in WordPress 5.9. It will only output the CSS when a block is used on the page. For example, I add a core-image.css file to house all Image block CSS. This is the method I recommend.

However, for the sake of simplicity, I added the following code to the end of Twenty Twenty-Two’s style.css file:

/* Design for the <figure> wrapper. */
.wp-block-image.is-style-scotch-tape {
	position:         relative;
	overflow:         visible;
	padding:          1rem;
	background-color: #fff;
	box-shadow:       0 4px 10px 0 rgba( 0, 0, 0, 0.3 ),
	                  0 0 4rem rgba( 255, 255, 235, 0.5 ) inset;
}

/* Design for the "tape". */
.wp-block-image.is-style-scotch-tape::before {
	content:    "";
	display:    block;
	position:   absolute;
	width:      7rem;
	height:     2rem;
	margin:     auto auto auto -3.5rem;
	z-index:    1;
	left:       50%;
	top:        -0.5rem;
	background: rgba( 255, 255, 235, 0.5 );
	box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
}

/* Remove TT2's image shadow. */
.wp-block-image.is-style-scotch-tape img {
	box-shadow: none;
}

/* Adjustments for the caption. */
.wp-block-image.is-style-scotch-tape figcaption {
	display:     block;
	margin:      1rem 0 0;
	line-height: 1;
	font-size:   1rem;
	font-family: 'Fuzzy Bubbles', sans-serif;
}

With the CSS in place, it is merely a matter of finding an image to test with. I chose Marcus Burnette’s whale shark from WordPress Photos.

If you want to add a bit of flair to your captions, load up Fuzzy Bubbles or another handwriting font from Google Fonts.

This style does not necessarily need to be tied to the Image block. There is no reason it could not apply to Paragraphs, Groups, and more with some adjustments.

For now, I hope you all have fun with it. Also, feel free to share in the comments where you would like to see the new “Building with Blocks” series head in the future.