Lesson Plan - Details Block

[courtneyr-dev]

Topic Description

Use the Details block in several scenarios

Related Resources

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

• Add Details/summary block gutenberg#45055

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

A short paragraph explaining what is covered in the lesson plan. This should be text that can be copied and used in a meetup or workshop description.

Lesson Plan: Using the Details Block to create an FAQ.

Description

This lesson plan will introduce participants to the new Details block in WordPress 6.3. Participants will learn how to use this block to add expandable content sections to their posts and pages. The lesson will cover the features and functionality of the Details block and provide practical examples of its usage.

Objectives

After completing this lesson, participants will be able to:

• Add and configure the Details block
• Customize the content within the expandable sections.
• Utilize the Details block to enhance their posts and pages' organization and user experience.

Target Audience

This lesson is intended for:

• Users / Content Writers
• Designers
• Developers
• Speakers
• Organizers
• Kids

Experience Level

Participants should have:

• Beginner
• Intermediate
• Advanced

Type of Instruction

The following strategies will be used for this lesson plan:

• Demonstration
• Discussion
• Exercises
• Feedback
• Lecture (Presentation)
• Slides
• Show & Tell
• Tutorial

Time Estimate (Duration)

This lesson will take approximately:

• 1 hour or less
• 2-4 hours (half-day)
• 5-8 hours (full-day)
• 2 days
• 3 days or more

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• HTML and CSS
• WordPress basics

Readiness Questions

• Do you have experience using the Gutenberg block editor in WordPress?
• Are you familiar with the concept of block-based content editing?

Slides

• Slides

Materials Needed

• Computer with internet access
• WordPress 6.3 or later installed

Notes for the Presenter

• Make sure to have a working installation of WordPress 6.3 or later for the demonstration.
• Encourage participants to follow along and try the exercises themselves.
• Provide additional resources for further exploration of the Details block.

Lesson Outline

1. Introduction to the Details block

   • What is the Details block?
   • Overview of its purpose and benefits

2. Adding and configuring the Details block

   • Accessing the block editor
   • Adding the Details block to a post or page
   • Customizing the block settings

3. Creating expandable sections of content

   • Adding the summary text
   • Inserting content within the expandable section
   • Formatting and styling the content

4. Enhancing the user experience with the Details block

   • Using the block in different contexts (posts, pages, sidebars)
   • Incorporating the block into existing content
   • Best practices for effective use

5. Examples and use cases

   • Showcasing real-world examples of the Details block in action
   • Discussing various use cases for the block

6. Exercises

   • Exercise 1: Create a post with an expandable FAQ section using the Details block
   • Exercise 2: Add the Details block to an existing page and customize the content

Assessment

Write out the question.

1. How can you add the Details block to a post or page in WordPress?

   A. By selecting it from the available blocks in the block editor.
   B. By installing a separate plugin.
   C. By modifying the theme's code directly.
   D. By using a shortcode.

Answer: A. By selecting it from the available blocks in the block editor.

Additional Resources

Example Lesson

Introduction to the Details Block

This lesson will explore using this block to create expandable content sections in your posts and pages. The Details block is a powerful tool that can enhance your WordPress site's organization and user experience. Let's dive in!

Adding and Configuring the Details Block

To begin, let's open the block editor in our WordPress installation. Once you're in the editor, you can add the Details block by selecting it from the available blocks. In the block settings, you'll find options to customize the summary text and other settings for the Details block.

Creating Expandable Sections of Content

With the Details block added, you can start creating expandable content sections. The summary text will serve as the clickable header for the expandable section. You can insert any content you want inside the block, such as text, images, or even other blocks. You can also apply formatting and styling to the content within the expandable section.

Enhancing the User Experience with the Details Block

The Details block can be used in various contexts, including posts, pages, and sidebars. It's a versatile block that can be incorporated into existing content seamlessly. We'll discuss best practices for using the Details block effectively and enhancing the user experience on your site.

Examples and Use Cases

To illustrate the power of the Details block, we'll showcase some real-world examples where it can be utilized. The Details block offers endless possibilities, from creating expandable FAQs to hiding lengthy content. We'll explore different use cases and discuss how the block can be applied creatively.

Exercises

Now it's time for some hands-on practice! In Exercise 1, you'll create a post with an expandable FAQ section using the Details block. Exercise 2 will involve adding the Details block to an existing page and customizing the content within the expandable section. Feel free to follow along and try these exercises on your WordPress site.

Lesson Wrap Up

Congratulations! You've learned how to use the Details block in WordPress 6.3 to create expandable content sections. Remember to refer back to the exercises and assessments to reinforce your knowledge. If you have any questions or need further assistance, please reach out. Explore and experiment with the Details block to make your WordPress site more engaging and user-friendly.

[Greennc]

WP 6.4 WordPress/gutenberg#53282 Add layout and block spacing to details block #53282 https://make.wordpress.org/core/2023/08/23/whats-new-in-gutenberg-16-5-23-august/#additional-block-supports-for-multiple-blocks-including-details-and-post-content