Creating Block Patterns - Lesson

[jonathanbossenger]

IMPORTANT

This lesson plan belongs to part of a greater course, Extend a Low Code Block Theme which depends on the completion of Create a Custom Block Theme #1

Please reach out to @jonathanbossenger (Jonathan Bossenger) in the #training team Slack if you would like to help with this lesson plan.

Topic Description

The goal of this lesson is to introduce the concept of block patterns in building block themes

Objectives

After completing this lesson, participants will be able to:

• Understand what a block pattern is
• Create a block pattern
• Register a block pattern for the theme

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

[jonathanbossenger]

Documentation: https://developer.wordpress.org/themes/advanced-topics/block-patterns/

Function docs:

1. https://developer.wordpress.org/reference/functions/register_block_pattern/
2. https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/#register_block_pattern_category

[jonathanbossenger]

Block pattern registered in the patterns directory (available since 6.0)

<?php
/**
 * Title: Footer with text, social links, and an image.
 * Slug: block-course-theme/footer-default
 * Categories: text, site-footer
 * Block Types: block-course-theme/template-part/footer
 * Viewport Width: 1280
 */

?>

<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull">
    <!-- wp:group {"align":"wide","layout":{"type":"flex","allowOrientation":false,"justifyContent":"space-between"}} -->
    <div class="wp-block-group alignwide">
        <!-- wp:paragraph -->
        <p>&copy; <?php echo esc_html( gmdate( 'Y' ) ); ?> <?php esc_html_e( 'Your Company LLC', 'theme-slug' ); ?> · <a href="#"><?php esc_html_e( 'Contact Us', 'theme-slug' ); ?></a></p>
        <!-- /wp:paragraph -->

        <!-- wp:image {"width":100,"height":100,"sizeSlug":"full","linkDestination":"none"} -->
        <figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/water-1.jpeg" alt="Water Background" width="100" height="100"/></figure>
        <!-- /wp:image -->

        <!-- wp:social-links {"className":"is-style-logos-only"} -->
        <ul class="wp-block-social-links has-icon-color is-style-logos-only">
            <!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
        </ul>
        <!-- /wp:social-links -->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->

[jonathanbossenger]

Block pattern registered in functions.php

add_action( 'init', 'block_course_theme_two_button_pattern' );

function block_course_theme_two_button_pattern() {
    register_block_pattern(
        'block-course-theme/two-buttons',
        array(
            'title'       => __( 'Two buttons', 'block-course-theme' ),
            'description' => _x( 'Two horizontal buttons.', 'Block pattern description', 'block-course-theme' ),
            'categories'  => array( 'block-course-theme-custom-category' ),
            'content'     => '<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">' . __( 'Go home', 'theme-slug' ) . '</a></div><!-- /wp:button --><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">' . __( 'Go shopping', 'theme-slug' ) . '</a></div><!-- /wp:button --></div><!-- /wp:buttons -->',
        )
    );
}

[jonathanbossenger]

Deregister core block patterns

remove_theme_support( 'core-block-patterns' );

[courtneyr-dev]

Consider including https://make.wordpress.org/core/2022/07/07/whats-new-in-gutenberg-13-6-6-july/#post-type-patterns

[justintadlock]

@jonathanbossenger Assign this to me. I've got the initial outline here: https://github.com/justintadlock/block-theme-course/tree/main/module-06

[jonathanbossenger]

@justintadlock awesome. I took a look at the outline, and I think it's great. 🎉

I ran a twitch stream on patterns today in preparation for my online workshop on Thursday, you can see the outline I'm planning for the workshop here, there is a lot of overlap with your lesson outline.

The only thing I might do differently (which I will be doing in the workshop) is to teach the PHP registration first, if only because it's sort of complicated mixing block markup and PHP in a string, and I'd probably recommend folks go the "file in the patterns directory" as a recommended practice. However, I don't think it really matters which way around it works for the lesson.

[justintadlock]

The draft for the Theme Patterns module is here: https://github.com/justintadlock/block-theme-course/tree/main/module-06

I have finished code review but not quite done with copyediting yet.

[jonathanbossenger]

@justintadlock I'm in the process of reviewing, but I had one realization I wanted to share with you.

One of the things I noticed @wparasae doing in her block theme course was using the different callout blocks on Learn WordPress, for example, the tutorial callout block to indicate steps for the course learner to follow. So I started implementing the same callouts in my course lessons. You can see the info and tutorial callouts used on the first lesson in my block theme course.

I see these callouts as similar to the types of callouts you would use in a technical book, which I'm sure you used working on a certain plugin development book we all know and love. 😁

The four different possible callouts in Learn are:

• info (useful for links to further reading)
• tip
• alert (call out to be aware of something)
• tutorial (used to indicate action steps)

I realize that I am only raising this now after you've already submitted your fonts module, so my apologies, but for these newer modules, could I ask that you try and isolate any items that might benefit from using these callouts, for example, any "action" steps that we'd like to try and get the learner to perform, further reading resources or tips.

To indicate these in markdown, you can look at some of my lessons from the first 4 modules, but I used a combination of the quote markdown formatting, and an action word highlighted in bold text. For example, this is how I formatted a tutorial callout in markdown.

> **Do** 
> 1. Download the font file
> 2. Install it in your theme

You're welcome to use the same title as the name of the callouts above to make it easier (for example Tutorial instead of Do)

When I add the lesson to Learn, I'll convert the markdown to the relevant blocks.

I'll do a sweep of the font module and implement this when I add it to learn, but I could I ask you to update your other modules in this way, as you know the content best.

[jonathanbossenger]

@justintadlock just did a review of your lessons. Great stuff 🎉 I have no change requests (besides that which I added above) and I'm excited to see the PR to add this to the final course, when you are ready.

[jonathanbossenger]

@justintadlock just leaving a note here (nothing to change) that there is a separate module on Internationalization, so when I create the course content in Sensei, I'll move your Block Patterns section on Internationalizing text in patterns to that module/lesson. This will actually be good, as it will give the course learner two examples to work with in that lesson.

[westnz]

Review:

Patterns are beautifully explained.

I have seen some words in bold here for emphasis, but also elsewhere in the course so far.

I completely get it, but as far as I remember, it is not helpful for screen readers. Just thought I will point that out: https://help.siteimprove.com/support/solutions/articles/80000448460-accessibility-the-use-of-emphasis-in-text.

Something else I picked up in this call-out is that one sentence has a full stop, and the others don't.

Also, point 4, add 'a' before 'add Buttons block'. Change to: "Add a Buttons block".

[jonathanbossenger]

I completely get it, but as far as I remember, it is not helpful for screen readers. Just thought I will point that out: https://help.siteimprove.com/support/solutions/articles/80000448460-accessibility-the-use-of-emphasis-in-text.

Thanks for pointing this out. Fortunately for us, the block editor uses the <strong> to mark bold text, not the <b>, which according to the article you linked is considered acceptable.

[jonathanbossenger]

Something else I picked up in this call-out is that one sentence has a full stop, and the others don't.

I never know if lists of instructions should have full stops or not... removed the one full stop for now.

[westnz]

You can leave out full stops for lists 👍

[courtneyr-dev]

WP 6.4 https://github.com/WordPress/gutenberg/pull/52270 please review for revisions

[courtneyr-dev]

WP 6.4 https://github.com/WordPress/gutenberg/pull/54337 https://make.wordpress.org/core/2023/09/28/whats-new-in-gutenberg-16-7-27-september/#import-export-of-patterns