Add Transformation from Separator to Spacer

[rudrakshi-gupta]

What?

This PR introduces a transform for converting Separator blocks into Spacer blocks, providing better control over white space in content.

Why?

This PR addresses the issue of outdated content that contains excessive use of hr elements, which are being converted into Separator blocks during migration to the Block Editor. Many users relied on hr for spacing, but transitioning to Spacer blocks gives more control and helps achieve a cleaner, modern design with better-managed whitespace.

How?

A transform has been added to convert Separator blocks into Spacer blocks. Specifically, the transform generates a Spacer block with a default height of 50px, replacing the Separator block and offering more flexibility in controlling spacing between content sections

Testing Instructions

1. Open the Block Editor: Start by opening a post or page in the Block Editor.
2. Insert a Separator Block:
   • Use the block inserter (the + icon) to search for and add a Separator block to your content.
3. Transform the Block:
   • With the Separator block selected, look at the block toolbar (just above the block).
   • Click on the "Transform" button (usually represented by two arrows or the option to change block type).
   • From the dropdown, select Spacer to transform the Separator block into a Spacer block.
4. Verify the Transformation:
   • Check that the Spacer block is correctly added and that the default height is set to 50px. You can view this in the block settings on the right-hand panel.

Feel free to explore further by adjusting the height in the block inspector to ensure everything works as expected!

Testing Instructions for Keyboard

1. Open the Block Editor: Navigate to a post or page using the Tab key to reach the post/page listing, then press Enter to open the editor.
2. Insert a Separator Block:
   • Press Tab to focus on the block inserter button (+ icon).
   • Press Enter to open the block inserter.
   • Use the arrow keys to navigate to the Separator block.
   • Press Enter to insert the Separator block.
3. Focus on Block Controls:
   • Press Tab to navigate to the block toolbar (above the block).
   • Use the Tab key to focus on the "Transform" button (it usually appears as a block change option).
   • Press Enter to open the transform options.
4. Transform to Spacer Block:
   • Use the arrow keys to navigate to the Spacer block option.
   • Press Enter to transform the Separator block into a Spacer block.
5. Check Spacer Properties:
   • Press Tab to focus on the block inspector panel (right sidebar).
   • Use the arrow keys to navigate through the Spacer block settings and verify that the height has been set to 50px.

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @[email protected].

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: [email protected].

Co-authored-by: talldan <[email protected]>
Co-authored-by: rudrakshi-gupta <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @rudrakshi-gupta! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[talldan]

Thanks for your contribution and the very well written PR description.

I think the one thing missing that would be good to add is a transform the other way from spacer to separator. Usually as a rule of thumb blocks can be transformed both ways.

[rudrakshi-gupta]

Thanks for your contribution and the very well written PR description.

I think the one thing missing that would be good to add is a transform the other way from spacer to separator. Usually as a rule of thumb blocks can be transformed both ways.

Thanks for the feedback! I agree, it makes sense to include a transformation from spacer to separator as well. I'll work on adding that functionality to ensure the blocks can be transformed both ways.

[talldan]

Thanks for making those changes. This is looking good to me, except it looks like there are unit tests failing (https://github.com/WordPress/gutenberg/actions/runs/11434042367/job/31806942028?pr=66230).

It should hopefully only be a matter of adding the block titles of the new transform options to these places and then this PR will be good to merge:

• gutenberg/packages/block-library/src/spacer/test/transforms.native.js

  Line 18 in 2fe909b

  const transformsWithInnerBlocks = [ 'Columns', 'Group' ];

• gutenberg/packages/block-library/src/separator/test/transforms.native.js

  Line 18 in 2fe909b

  const transformsWithInnerBlocks = [ 'Columns', 'Group' ];

[rudrakshi-gupta]

@talldan Thanks for the feedback!

I’ve added the new block titles to both transforms.native.js files for the Spacer and Separator blocks, including the necessary updates to the transformsWithInnerBlocks arrays. All tests are now passing after the updates.

Please let me know if there’s anything else needed!

[talldan]

Thanks for all your work here!

(Congrats on your first PR contribution!)