Block Variations

[cynthianorman]

Details

• Content type: Lesson
• Content title: Block variations
• Topic description: Dive into extending registered blocks and create alternate versions of a block’s settings.
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

The learning objectives are to:

• Describe block variations
• Differentiate between block variations and block styles
• Add the JavaScript file to your theme
• Register the block variation

Relevant Links

• https://developer.wordpress.org/themes/features/block-variations/
• https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/
• How to register block variations with PHP
• WordPress Hallway Hangout: Let’s explore the power of block variations
• An introduction to block variations
• Builder Basics: Block Styles vs Block Variations

[github-actions]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• Lesson reviewed
• Lesson video submitted and published to WPTV
• Lesson created on Learn.WordPress.org
• Lesson video published to YouTube
• Lesson on Learn.WordPress.org updated with YouTube video
• Lesson published to Learn.WordPress.org

[cynthianorman]

@jonathanbossenger or someone who is available to assist, I have a summary for the description of a block variation. Could you please confirm its accuracy before I create the video.

• Alternative blocks you can add to your theme using the Block Variations API
• We are using the attributes already assigned to the block we are creating a variation from
• Note that we won’t be needing a build process as we are enqueuing your new custom JavaScript file and passing through a few dependencies
• For theme development, not meant for the WordPress theme directory, you can choose to place your block variations within a must-use plugin

[jonathanbossenger]

@cynthianorman, I'm going to reply with the same numbered points you have used to help with clarity

1. Huh, yes, I never really thought about it this way, but calling it an alternative block also applies. Essentially, it's creating an alternative to the block on which it's based.
2. Could you confirm what you mean here? A block variation does have an attributes object that can override the attributes of the block it's based on, so it seems to me that it is possible to create a variation that doesn't use a specific attribute from the original.
3. This gives me pause to ponder. If it were me, I'd showcase a variation that uses both a build process and without, but that's mostly because I know there is a build process lesson later on in this course. So yes, I'd agree to go with code that doesn't need a build step. If we decide to update the lesson later on with "buildable" code, we can do so.
4. Oh, I was not aware of this. In that case, the concept of must-use plugins has yet to be introduced. So maybe it's better to mention that, as you've pointed out, you can't use variations in themes hosted in the theme directory. If you are building a theme for the directory, you'd have to include the variation via a plugin that your users would install separately. This lesson could include a link to the introduction to plugins in the beginner learning pathway.

Lastly, if you need any help with testing code examples or reviewing things before you hit record, please do let me know. This does border on the block developer side of knowledge, which I do know you are learning 😁

[cynthianorman]

@jonathanbossenger thank you so much for your feedback

2. Could you confirm what you mean here? A block variation does have an attributes object that can override the attributes of the block it's based on, so it seems to me that it is possible to create a variation that doesn't use a specific attribute from the original.

This is what I got from the Hallway Hangout at 7:11

Also, in this blog post, the definition of attributes implies to me that we can't add new attributes.

3. This gives me pause to ponder. If it were me, I'd showcase a variation that uses both a build process and without, but that's mostly because I know there is a build process lesson later on in this course. So yes, I'd agree to go with code that doesn't need a build step. If we decide to update the lesson later on with "buildable" code, we can do so.

This is what I got from the Hallway Hangout at 10:39

Nick speaks about building a block variation which doesn't require a build process

4. Oh, I was not aware of this. In that case, the concept of must-use plugins has yet to be introduced. So maybe it's better to mention that, as you've pointed out, you can't use variations in themes hosted in the theme directory. If you are building a theme for the directory, you'd have to include the variation via a plugin that your users would install separately. This lesson could include a link to the introduction to plugins in the beginner learning pathway.

This is what I got from the Hallway Hangout at 15:55
You don't have to place a variation in a plugin, this was Nick's suggestion IF you were developing a theme that wasn't going to be submitted to the WP theme directory.

Lastly, if you need any help with testing code examples or reviewing things before you hit record, please do let me know. This does border on the block developer side of knowledge, which I do know you are learning 😁

Ok, awesome

My revised definition (so far unless you have anything else to add @jonathanbossenger):

1. A block variation is an alternative block you can add to your theme using the Block Variations API
2. You would use the attributes already assigned to the block you are creating a variation from
3. You wouldn’t require a build process as you can choose to enqueue your custom JavaScript file from functions.php along with passing through a few dependencies
4. You can choose to place your block variation within a plugin or within your theme files

[jonathanbossenger]

@cynthianorman that all looks great!

[cynthianorman]

https://youtu.be/7lKc-fYM_vU

This Intermediate Theme Developer Learning Pathway Lesson is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[cynthianorman]

https://youtu.be/7lKc-fYM_vU

This Intermediate Theme Developer Learning Pathway Lesson is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[jonathanbossenger]

https://youtu.be/Su5EIT-c_S4