Skip to content

Conversation

@daledupreez
Copy link

What?

This PR refactors the control used by the block variations transforms section in the block editor to use the ToggleGroupControl component instead of the custom components it is using at present.

Why?

As suggested in #43415, this update should reduce code duplication and make the component more accessible by default.

How?

I refactored the code to rely on a ToggleGroupControl inside a wrapper div that uses the existing block-editor-block-variation-transforms class. If we have unique icons for each variation, we insert ToggleGroupControlOptionIcon children, but if we don't we insert ToggleGroupControlOption children.

Testing Instructions

  1. Open a Post or Page.
  2. Insert a Group block (or any other block that includes variations)
  3. Ensure that the Block controls are visible.
  4. Verify that the block variation transforms control is visible and shows all the variations for the current block. If you have a Group, Row, or Stack block, you should see icons for the Group, Row, and Stack blocks, with the current block variation shown as selected
  5. Verify that you see "Transform to " tooltips when you hover over the icons for the alternate block variations (i.e. not the current variation
  6. Verify that you see the current block type as the tooltip (e.g. Row) when you hover over the selected block type
  7. Select the other variations, and verify that the block type is correctly updated

Screenshots or screencast

block-variation-transforms-toggle-group-control.mov

@daledupreez daledupreez requested a review from ellatrix as a code owner November 9, 2022 23:14
@codesandbox
Copy link

codesandbox bot commented Nov 9, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 9, 2022
@github-actions
Copy link

github-actions bot commented Nov 9, 2022

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @daledupreez! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

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

);
}

function VariationsDropdown( {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question/concern I have is around whether we want to keep the existing UI for cases where we don't have unique icons. I would be happy to reduce the scope of the PR and reinstate the VariationsDropdown logic if we decide that would be a better UX.

@andrewserong
Copy link
Contributor

Thanks for opening this PR @daledupreez! Unfortunately there's also another PR that implements the same feature over in #45654

@github-actions github-actions bot added the Stale label May 9, 2023
@daledupreez
Copy link
Author

Closing this in favour of the more advanced work in #45654.

@daledupreez daledupreez deleted the update/block-variation-transforms-to-toggle-group-control branch May 10, 2023 07:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants