Add/transform button to buttons

[Ringish]

Description

Fixes #19919.

Adds possibility to transform single button blocks to buttons as described in #19919.

How has this been tested?

• Created "old" single button(s)
• Selected the block(s) and transformed them (as seen in the screenshot below)

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[Ringish]

This is my first pull request. @talldan instructed me to open a pull request. I'm not sure if i should add any developer documentation, and if that's the case, where should it be placed? And this doesn't affect any React Native files, right?

[marekhrabe]

This is working well for me. I have tested with three button blocks and tried transforming a single one, two and all three. Works well every time, keeping all attributes of individual buttons.

Regarding docs or native, I believe they are not needed here as this is no change in public APIs that other components use.

Testing snippet I have used:

<!-- wp:button {"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background has-very-dark-gray-background-color" href="http://wordpress.org">Button 1</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"very-light-gray","textColor":"pale-pink"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-pale-pink-color has-background has-very-light-gray-background-color" href="http://wp.org">Button 2</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"vivid-cyan-blue","textColor":"very-light-gray"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background has-vivid-cyan-blue-background-color" href="http://github.com">Button 3</a></div>
<!-- /wp:button -->

[talldan]

@Ringish congrats on your first merged pull request! It looks like there are no failing tests, so I was wrong about that. I think the test I referred to on slack must have been removed.

I noticed you've also been looking at fixes for some other issues, thanks for your work on those. I'd recommend also creating pull requests for those if you can, that's generally the easiest way to get feedback on your code.

One other little bit of feedback is that I added Fixes #19919 to the description. That ensures the issue is closed when the pull request is merged. It's great if you can add this to pull requests as it makes managing the issues a lot easier. There are also a few other keywords you can use, and github also recently added a Linked issues section to the sidebar, which is another way to achieve the same thing. More info here:
https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue