Tutorial- How to use the spacer block

[ghost]

Topic Description

Learn how to use the spacer block and how to use the different resizing and styling tools available in the site editor.

Related Resources

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

• https://wordpress.org/documentation/article/spacer-block/
• Template Parts- https://learn.wordpress.org/lesson-plan/template-parts/
• Uncovering the Cover block- https://learn.wordpress.org/tutorial/uncovering-the-cover-block/

Guidelines

Review the team guidelines

Tutorial Development Checklist

• 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#

Vetting Checklist for SMEs
Please follow the team handbook: Vetting topic ideas.

• Set a Priority label
• Assess topic details, and provide feedback as necessary.
• Move issue to "Vetted Topics" status

[jonathanbossenger]

I think this is a great idea. I look forward to seeing this tutorial created! Thank you @lada7042 for your contributions.

[courtneyr-dev]

https://make.wordpress.org/core/2023/04/19/whats-new-in-gutenberg-15-6-19-april/#spacer-block-gets-spacing-presets

Calling out the new spacing presets

[ghost]

@courtneyr-dev I haven't finished this tutorial but I have been using the Gutenberg plugin. I will make sure to have the 6.3 updates. I am going to delete the 6.2 from this tutorial.

[ghost]

I used the Descript free version recording/editing software. The free version leaves a watermark. Here is the information from the site. Videos exported from projects stored on a Free drive, or exported by basic members of a Creator or Pro drive, will include a Descript watermark in the bottom right-hand corner. Upgrading to a paid Creator or Pro subscription will remove the watermark from any future exports. Is this ok to leave?

[jonathanbossenger]

@lada7042 I'm not sure if this is helpful, but I'm also trying out Descript, and I noticed that there is an option to remove the watermark, but only once, when you publish the video. The toggle is towards the bottom of the settings when publishing a video.

What I don't know if this is once per project, or one time only, but either way it might be useful to keep this for when the final version of this tutorial is ready.

[ghost]

@jonathanbossenger Thank you. I think it is once per project. I clicked on that toggle for the main video, but when I made the intro. that was not an option. I am going to try and just add the image and may need to re-record. I was able to just add an image layer over the video part so no more watermark.

[ghost]

Updated video with no watermark at the beginning

Spacer.block.tutorial.update.mp4

[github-actions]

This content is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[westnz]

Great work @lada7042 💥

I think you have clearly explained how to use the Spacer block and used appropriate examples. Adding a spacer to a group to change the colour was a clever idea! You maintain a steady pace and speak very clearly! I like how you kept the list view open to help viewers see exactly where you edited content.

One suggestion is to improve the transitions between the different scenes at the start: 0:00 - 1:00min. You might also consider adding the objectives to the beginning of the tutorial.

[ghost]

@westnz thank you for taking the time to do a review. Yes, I agree with moving the objectives to the front. Moving it should also help with the transitions in the beginning.

[wparasae]

Laura, you've done such a good job of implementing the changes I suggested when we worked together! Well done, and thank you so much for your time!

I know you've heard this from me before, but I want to reiterate how much I appreciate the way you describe the way you've set up the page and the way you describe what you're seeing on the page. Bravo! You speak very clearly and at a wonderful pace, which will be excellent for people who don't speak English as a first language.

Options for Change

1. I second Wes' suggestion -- right after your introduction, adding a screen with the objectives you list at 6:18 would be super helpful! If it would be helpful, I can add this in pretty quickly using iMovie or another program -- it would take me probably ~5 minutes, so if that is a better use of your time, please let me know!

2. MAYBE a helpful tip: To improve some transitions, if you notice any cursor jumps, the "Cross Fade" transition might work. I THINK it can be applied to all clips, which MIGHT give a smoothing effect in a quick sweep. I use this a lot in another program, so I hope this helps! Here's a guide: https://help.descript.com/hc/en-us/articles/10255989387661-Transitions-overview

If that doesn't work (don't spend more than 10 minutes on it), I'm happy to help, just DM me this week. :)

3. You do a good job of using your cursor to show what you're describing as you describe it. I'm not sure how to add annotations with descript, but a few red boxes over what you're describing may make this even clearer. Again, consider it an option for change, but not necessary.

This is an extremely helpful and clear tutorial -- people are going to benefit from this. I love what you've done here, and I hope you are feeling a strong sense of accomplishment.

[annezazu]

Offering a third review! Great job showing the various tools, keeping it contained, and guiding folks in a calm kind voice. My biggest point of feedback is that I'm not sure how this relates to block themes specifically. For example, you aren't editing a template but a page! I wonder if we can have more block theme specific examples -- like changing the spacing in a Query Loop block or between a header template part and the rest of the template. I also think it would be beneficial if we can include some of the thoughts of the spacer block being easier to use and apply for folks than something like margin in this discussion: WordPress/gutenberg#37344 (comment)

[ghost]

@annezazu Thank you so much for taking the time out of your busy schedule to write a review. I agree with using the wording block themes. I hesitated when naming the tutorial and will update the title. I love the suggestions for future tutorials on spacer block focused on the templates. The query loop has always confused me but with added styling tools it is better to work with. Good luck with the release!

[annezazu]

Of course! Thanks so much for all your efforts here :)

[itsjustdj]

Very well done. Your voice is clear and calm, yet still engaging. The workflow you outline is practical for anyone to use right away.

One small point of feedback is at 4:50 where you go over putting the spacer in a group. You could explain the reasoning a bit more before getting into the settings, mentioning that the Group gives you more style options than using the spacer block on its own.

[ghost]

@itsjustdj Thank you for reviewing the tutorial.

[ghost]

Published- https://learn.wordpress.org/tutorial/how-to-use-the-spacer-block/