Button Block Alignment fix

[karthick-murugan]

What?

Fixes #61085

This PR resolves an issue with the Button Block alignment and justification options, where the default styles for "Justify items left" and "Align top" were not correctly applied. The fix ensures that the selected options are consistently applied and displayed as expected.

Why?

This PR is necessary to ensure that users can properly align and justify Button blocks within Gutenberg. The existing issue prevented the correct display of the button alignment and justification styles. When the "Justify items left" and "Align top" options were selected, the expected visual changes were not reflected. This fix improves the user experience by ensuring these options work as intended.

How?

The issue was fixed by adding custom CSS to target the active state of menu items in the dropdown, specifically for the Button block alignment and justification styles. The is-active class now correctly applies the styles, ensuring that "Justify items left" and "Align top" options are visually reflected in the Button block.

Testing Instructions

Test the Button Block Alignment and Justification:

• Open a post or page in the Gutenberg editor.
• Add a Button block to the page.
• Change the button’s justification to "Justify items left" and the alignment to "Align Top."
• Ensure that the Button block now displays the selected justification and alignment options correctly.

Check for Visual Changes:

• Confirm that the button is aligned to the left and aligned to the top as selected in the block settings.
• Verify that the styles for both alignment and justification are applied as expected.

Screenshots or screencast

REC-20241210204828.mp4

[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.

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

Co-authored-by: karthick-murugan <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: murshed <[email protected]>

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