Tutorial - Details block

[courtneyr-dev]

Tutorial: Using the Details Block

Topic Description

This tutorial will guide users through using the Details block. Participants will learn how to create expandable content sections using this block, allowing them to enhance the organization and user experience of their WordPress posts and pages.

Related Resources

https://github.com/WordPress/gutenberg/pull/45055

Guidelines

Review the team guidelines for developing tutorials.

Tutorial Outline

1. Introduction

   • Briefly explain the purpose and benefits of the Details block in WordPress 6.3.

2. Adding the Details Block

   • Open the block editor in WordPress.
   • Select the Details block from the available blocks.
   • Explore the different options and settings for the Details block.

3. Configuring the Details Block

   • Customize the summary text for the expandable section.
   • Adjust the block settings, such as the toggle arrow icon and open/closed state.

4. Inserting Content in the Expandable Section

   • Add content within the expandable section, such as text, images, or other blocks.
   • Apply formatting and styling to the content as desired.

5. Using the Details Block in Different Contexts

   • Discuss the versatility of the Details block for posts, pages, and sidebars.
   • Demonstrate how to incorporate the block into existing content seamlessly.

6. Best Practices for Effective Use

   • Provide tips and recommendations for using the Details block effectively.
   • Emphasize the importance of user experience and organization when utilizing expandable sections.

7. Examples and Use Cases

   • Showcase real-world examples of the Details block in action.
   • Explore various use cases, such as creating FAQs, hiding lengthy content, or revealing additional details.

8. Conclusion

   • Summarize the tutorial and encourage users to experiment with the Details block in their WordPress sites.
   • Provide additional resources for further exploration.

SEO Keywords

• Details block in WordPress
• Expandable sections in WordPress
• Using the Details block effectively
• WordPress 6.3 Details block tutorial

Tutorial Development Process

1. Vetted by instructional designers for content idea.
2. Provide feedback on the idea.
3. Gather links to Support and Developer Docs.
4. Review any related material on Learn.
5. Define several SEO keywords to use in the article and where they should be prominently used.
6. Finalize description and objectives.
7. Create the tutorial and announce it to the team for Q/A review.
8. Review the tutorial and ensure it is ready to publish.
9. Submit the tutorial and publish it to WPTV.
10. Publish the tutorial on WPTV.
11. Caption the tutorial.
12. Create the tutorial on Learn.WordPress.org.
13. Review the tutorial post for grammar, spelling, etc.
14. Publish the tutorial on Learn.WordPress.org.
15. Announce the tutorial to the Marketing Team for promotion.

For your reference, today's date is 2023-07-19.

Tutorial Development Checklist

• [x] Vetted by instructional designers for content idea
• [ ] Provide feedback of the idea
• [ ] Gather links to Support and Developer Docs
• [ ] 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
• [ ] Tutorial created and announced to the team for Q/A review
• [ ] Tutorial reviewed and ready to publish
• [ ] Tutorial submitted and published to WPTV
• [ ] Tutorial published on WPTV
• [ ] Tutorial captioned
• [ ] Tutorial created on Learn.WordPress.org
• [ ] Tutorial post reviewed for grammar, spelling, etc.
• [ ] Tutorial published on Learn.WordPress.org
• [ ] Tutorial announced to Marketing Team for promotion

[kaitohm]

<Learning objectives> User's will be able to:

• Add the details block to their post or page
• Configure the settings of the block to meet their needs

[kaitohm]

I will need to step away from this for over a month, so I'm releasing it back for anyone else to work on.

For the record, this is how far I got with writing a script. Feel free to use this, or start fresh:

---

Script

WordPress 6.3 introduced a few new blocks into the editor. One of those was the Details Block. The Details block displays a text summary and an arrow button: When you click on the text or the button, the block opens and reveals additional content on the page. This block provides a way to show or hide content on your site. This can be useful on faq pages, showing /hiding detailed event information etc.

To add a Details block to your content, click on the Block Inserter (+) and select the Details block. You can also type /details and hit enter in a new paragraph block to add one quickly.

Once added, you'll first want to add some summary text. This can be added to the area highlighted directly below the arrow. This text will be shown even when the details are hidden.

Below that, you can add

The Details block comes with a few settings you can change to meet your needs. In the block toolbar, you'll find alignment settings. In the right sidebar, you'll find a setting to open the details by default or not. The styles tab in the sidebar will show additional settings, such as color, typography, and dimensions.

[Greennc]

WP 6.4 https://github.com/WordPress/gutenberg/pull/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

[Piyopiyo-Kitsune]

@westnz Is this going to be part of a Learning Pathway lesson?

[westnz]

No, we have not covered the Details block.