Lesson Plan - Block Hooks

[courtneyr-dev]

Topic Description

Write a description of the topic here.

Related Resources

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

• Introducing Block Hooks for Dynamic Blocks
• Block Hooks work with Dynamic blocks, not Static blocks. Refer to this article on the difference between the two.
• tracking issue

Guidelines

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

Development Checklist:

• Gather links to Support and Developer Docs
• Consider any MarComms (marketing communications) resources and link to those
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Create an outline of the example lesson walk-through
• Draft lesson plan
• Copy edit
• Style guide review
• Instructional Review
• Final review
• Publish
• Announce to the Training team
• Announce to lesson plan creator
• Announce to marketing
• Gather feedback from lesson plan users about the quality

Repo Structure and Lesson Plan Template

Please remove all blockquote comments such as this before publishing.

Description

Explore the ingenuity of Block Hooks in WordPress 6.4, employing a real-world plugin to comprehend and manipulate block placements, thereby enhancing theme customization.

Objectives

After completing this lesson, participants will be able to:

• Explain the functionality of Block Hooks in WordPress.
• Utilize Block Hooks to automate the placement of a "Like" block within a theme using a practical plugin.

Target Audience

• Developers

Experience Level

• Intermediate

Type of Instruction

• Demonstration
• Exercises

Time Estimate (Duration)

• 1 hour or less

Prerequisite Skills

• Familiarity with PHP and JavaScript.
• Basic understanding of WordPress Block Themes.
• Static vs Dynamic Blocks Lesson Plan - Static vs Dynamic Blocks #1947

Readiness Questions

• Are you comfortable with PHP and JavaScript coding?
• Have you experimented with WordPress Block Themes before?

Slides

• Slides

Materials Needed

• A local install of WordPress 6.4 or later
• Text editor
• Like Button Plugin installed

Notes for the Presenter

• Highlight the significance of Block Hooks through the practical application of the "Like Button" Plugin.
• Encourage participants to explore and experiment with Block Hook placements.

Lesson Outline

• Introduction to Block Hooks
• Exploration of the "Like Button" Plugin
  • Demonstrating how the plugin utilizes Block Hooks for automatic block placement.
  • Delving into the code that orchestrates the block placement.
• Hands-on Exercise: Adjusting the "Like" Block Placement
  • Participants modify the Block Hook within the plugin to alter the "Like" block's position.

Exercises

Manipulating Block Placement

Experiment with the "Like Button" Plugin to adjust the "Like" block's placement.

• Analyze the plugin's Block Hook implementation.
• Modify the Block Hook to alter the "Like" block position.

Assessment

Identify the true statement:

1. Block Hooks enable automatic block placement within templates.
2. The "Like Button" Plugin requires manual block placement.
3. Block Hooks function only with static blocks.
4. The plugin code cannot be altered to change block placement.

Answer: 1. Block Hooks enable automatic block placement within templates.

Additional Resources

• Block Hooks Introduction
• WordPress Block Developer Documentation

Example Lesson

Unpacking Block Hooks

Alright, let's dive into the world of Block Hooks. They're a new feature in WordPress 6.4, allowing us to place blocks within our themes automatically. This game changer adds a layer of dynamism to how we manage content on our sites.

Delving into the "Like Button" Plugin

Now, let's explore the "Like Button" Plugin. I'll share my screen to show you how this plugin utilizes Block Hooks to auto-place a "Like" block. Pay attention to the code orchestrating this - it's a practical example of Block Hooks in action.

Hands-on Adjustment of "Like" Block Placement

Great, now it's your turn! Please open your WordPress environment, and let's tweak the "Like-Button" Plugin together. Modify the Block Hook in the plugin to change the position of the "Like" block. Feel free to ask questions if you run into any challenges.

Lesson Wrap Up

Fantastic work, everyone! Today we delved into Block Hooks, explored a real-world plugin, and got our hands dirty with some code. Keep experimenting with Block Hooks and discover how they can enhance your WordPress development journey. Reach out if you have any further questions or need assistance. Until our next session, happy coding!

Follow with the Exercises and Assessment outlined above.

[courtneyr-dev]

Related: (#53987),