[Enhancement] Making the focus state of button text in Button block m…

…ore visible (#15058)

* Reduce placeholder opacity on focus to make cursor visible

* Make placeholder disappear on focus to make focus-state visible

* Align cursor to left when text input is focused and placeholder is active

* Left align text input when placeholder is active at all times, not just on focus

* Added focus outline on focus state

packages/block-library/src/button/editor.scss

@@ -26,11 +26,30 @@
 		color: $white;
 	}
 
+	// Add outline to button on focus to indicate focus-state
+	.block-editor-rich-text__editable:focus {
+		box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
+
+		// Windows' High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: -2px;
+	}
+
 	// Increase placeholder opacity to meet contrast ratios.
 	.block-editor-rich-text__editable[data-is-placeholder-visible="true"] + .block-editor-rich-text__editable {
 		opacity: 0.8;
 	}
 
+	// Make placeholder disappear on focus to make focus-state visible.
+	.block-editor-rich-text__editable[data-is-placeholder-visible="true"]:focus + .block-editor-rich-text__editable {
+		opacity: 0;
+	}
+
+	// Align cursor to left when placeholder is active.
+	.block-editor-rich-text__editable[data-is-placeholder-visible="true"] {
+		text-align: left;
+	}
+
 	// Don't let the placeholder text wrap in the variation preview.
 	.block-editor-block-preview__content & {
 		max-width: 100%;
@@ -66,6 +85,9 @@
 	$blocks-button__link-input-width: 300px + 2px + 2 * $icon-button-size;
 	width: $blocks-button__link-input-width;
 
+	// Move it down by 2px so that it doesn't overlap the button focus outline.
+	margin-top: 2px;
+
 	.block-editor-url-input {
 		width: auto;
 	}