search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
257 stars 88 forks source link

Tutorial - Details block #1729

Open courtneyr-dev opened 1 year ago

courtneyr-dev commented 1 year ago

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

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

bsanevans commented 1 year ago
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
bsanevans commented 11 months ago

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 commented 10 months ago

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 commented 1 month ago

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

westnz commented 1 month ago

No, we have not covered the Details block.