Using Block Patterns - Tutorial

[courtneyr-dev]

https://learn.wordpress.org/workshop/using-block-patterns/

Topic Description

Write a description of the topic here.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• [ ]

Guidelines

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

Workshop Development Checklist

• [x] Vetted by instructional designers for content idea
• [x] Provide feedback of the idea
• [x] Gather links to Support and Developer Docs
• [x] Consider any MarComms (marketing communications) resources and link to those
• [x] Review any related material on Learn
• [x] Define several SEO keywords to use in the article and where they should be prominently used
• [x] Description and Objectives finalized
• [x] Create an outline of the workshop
• [x] Workshop submitted to the team for Q/A review https://blog.wordpress.tv/submission-guidelines/ & https://make.wordpress.org/training/2021/08/17/proposal-brand-guidelines-for-learn-wordpress-content/
• [x] Workshop submitted to WPTV https://wordpress.tv/submit-video/
• [x] Workshop published on WPTV
• [x] Workshop is captioned https://learn.wordpress.org/handbook/handbook/workshop-captions-and-transcripts/
• [x] Workshop created on Learn.WordPress.org
• [x] Workshop post is reviewed for grammar, spelling, etc.
• [x] Workshop published on Learn.WordPress.org
• [x] Workshop announced to training team
• [x] Workshop announced to creator
• [x] Workshop announced to Marketing Team for promotion
• [x] Gather feedback from workshop viewers/participants

[azhiya]

Workshop: https://learn.wordpress.org/workshop/using-block-patterns/

[courtneyr-dev]

Update to include header/footer patterns: https://make.wordpress.org/core/2022/09/30/whats-new-in-gutenberg-14-2-28-september/

[westnz]

Release content: 6.2

https://user-images.githubusercontent.com/89751452/220647054-08538ec7-dbef-4139-9a11-4fb121f41695.mp4

[westnz]

Note to self - header and footer patterns are part of Core.

[nomad-skateboarding-dev]

Well done, Wes! Very easy to follow!

Specific Feedback

• 2:22 The voice over says, "query loops are used to display posts". Possibly add that pages and other content can be displayed as well with the query block?
• Using the Block Directory and your examples were clear and easy to follow/duplicate. Going over the users ability to modify the newly inserted patterns is great.

[westnz]

Thank you for the feedback @nomad-skateboarding-dev

[courtneyr-dev]

Similar to the other videos, it'd be helpful to zoom way in when showing sidebars of any sort to help the user see exactly what you are clicking on. However, I'd still say publishing this makes sense. Just a thought for future videos.

[westnz]

Thank you very much @courtneyr-dev

[westnz]

Published: https://learn.wordpress.org/tutorial/using-block-patterns/

[courtneyr-dev]

6.3 adds synced patterns and removes reusable blocks. https://make.wordpress.org/core/2023/04/05/whats-new-in-gutenberg-15-5-05-april/#patterns-as-template-starters

[courtneyr-dev]

https://make.wordpress.org/core/2023/06/29/whats-new-in-gutenberg-16-1-29-june/#your-templates-and-patterns-your-library

[courtneyr-dev]

Reusable blocks: Rename to 'Patterns' and add the option to also add a non-synced Pattern (51144) Patterns: Add renaming, duplication, and deletion options (52270)

[courtneyr-dev]

49958, 49894)

Fullscreen fixed cover within another cover Cover Poster on Left, Paragraph on Right Centered image with two-tone background color Fullwidth Dark Banner with Heading Top Left Fullwidth cover with repeating gradient text Fullwidth, vertically aligned headline on right with description on left Fullwidth headline with links and gradient offset background Heading, Paragraph, Button with Two Images Bold sale banner with geometric background Offset bold paragraph text with varying opacity Offset text with a brutalist design vibe Fullscreen image with right content area Cover Image with Bold Heading and Button, Left Cover Image with Bold Heading and Button Fullscreen cover image gallery

curated vs. community filter image

[westnz]

I will start updating this tutorial next and aim to have it out for review by late next week.

[westnz]

I think I should create a separate tutorial about synced and unsynced patterns.

[westnz]

https://github.com/WordPress/Learn/assets/89751452/b490af35-772e-4abc-b7e2-db94d029cfdb

[github-actions[bot]]

This content is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! :sparkles:

[courtneyr-dev]

6.4 https://make.wordpress.org/core/2023/07/14/whats-new-in-gutenberg-16-2-12-july/#consolidating-patterns

[akshaya-rane]

Tutorial Review Checklist

Please tick all items you've confirmed:

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [x] Media assets are all in the public domain (CC0).

The content is up to date with WordPress version 6.3.1.

The video is apt for beginners per the objectives mentioned. The demo of the Sync & async pattern here or in a separate video will be helpful.

[westnz]

Thank you @akshaya-rane

[westnz]

Updated and published: https://learn.wordpress.org/tutorial/using-block-patterns/

[westnz]

Here is the separate tutorial about synced/unsynced patterns: https://learn.wordpress.org/tutorial/creating-your-own-custom-synced-or-non-synced-patterns/

[courtneyr-dev]

wp 6.4 https://github.com/WordPress/gutenberg/pull/52427

[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

[westnz]

Updated and published in Sensei as part of the draft Beginner User learning pathway.