ToolbarButton: Fix text centering for short labels (#59117)

* Center toolbar button content

* Changelog

* Move style to toolbar group

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

packages/components/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   `CustomSelectControl`: Remove deprecated `__nextUnconstrainedWidth` prop and promote to default behavior ([#58974](https://github.com/WordPress/gutenberg/pull/58974)).
 
+### Bug Fix
+
+-   `ToolbarButton`: Center text for short labels ([#59117](https://github.com/WordPress/gutenberg/pull/59117)).
+
 ### Internal
 
 -   `ColorPicker`: Style without accessing internal `InputControl` classes ([#59069](https://github.com/WordPress/gutenberg/pull/59069)).

packages/components/src/toolbar/toolbar-group/style.scss

@@ -20,6 +20,7 @@
 	// Icons are 36px, as set by a 24px icon and 12px padding.
 	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
 	.components-button.has-icon.has-icon {
+		justify-content: center;
 		min-width: $block-toolbar-height - $grid-unit-15;
 		padding-left: $grid-unit-15 * 0.5; // 6px.
 		padding-right: $grid-unit-15 * 0.5;