Button component: Fix RTL alignment when containing icon and text

[jornp]

What?

This fixes the RTL alignment inside the Button component for buttons with both an icon and text.

Why?

The .components-button.has-icon.has-text style had a justify-content: left, because of which the button contents were always left-aligned, even in RTL languages.

This effect normally isn't visible because the buttons aren't wide enough. But it became apparent in Calypso: when opening the block editor's sidebar, the "View Posts" button is actually a wider one:

For this button, the problem with the alignment for RTL languages is visible:

How?

This PR changes the justify-content from left to start, which works for both LTR and RTL languages.

Testing Instructions

1. Replace the content of any block's edit.js with the following — some extra width has been added to the button to be able to see the effect of the alignment:

/**
 * WordPress dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { plusCircle } from '@wordpress/icons';

export default function CodeEdit( { attributes, setAttributes, onRemove } ) {
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<Button variant="primary" icon={ plusCircle } style={{ width: 200 }}>
				Hello
			</Button>
		</div>
	);
}

2. Switch to an RTL language, edit a post, add the block you replaced, and confirm that the button contents are now right-aligned.
3. Switch to an LTR language, edit a post, add the block you replaced, and confirm that the button contents are still left-aligned.

Screenshots

RTL before & after:

LTR before & after (should be unchanged):

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jornp! 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.

[chad1008]

The change looks good, and it's testing well for me. 🎉 Thanks for the fix @jornp!

[chad1008]

Actually, I almost forgot... @jornp, can you add a quick CHANGELOG entry before merging? 🙂

[ciampo]

Just leaving this link here for more details and for anyone looking back at this PR:

What's the difference between the alignment values of start, flex-start, and self-start?

[jornp]

Thanks for the review, @chad1008! I've added a changelog entry. 🙂

Since this is my first contribution here, I'm not authorized to merge the PR. Would you be able to merge it, or is there a way for me to do it? Thanks!

[ciampo]

That's correct, you won't be able to merge it! I can do that for you :)

(React Native e2e test failures don't seem related to the changes in this PR)

[github-actions]

Congratulations on your first merged pull request, @jornp! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!