Improve button block styles and wrap. (#12205)

This PR fixes #7843, and also simplifies the styles a bit. It also fixes an overflow issue with long text in variations. Finally, it makes a single line button have a proper pillshape.

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

@@ -1,5 +1,3 @@
-$blocks-button__line-height: $big-font-size + 6px;
-
 .editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
@@ -18,7 +16,6 @@ $blocks-button__line-height: $big-font-size + 6px;
 
 	.editor-rich-text__tinymce.mce-content-body {
 		cursor: text;
-		line-height: $blocks-button__line-height;
 	}
 
 	// Make placeholder text white unless custom colors or outline versions are chosen.
@@ -31,15 +28,15 @@ $blocks-button__line-height: $big-font-size + 6px;
 		opacity: 0.8;
 	}
 
-	// Polish the empty placeholder text for the button in variation previews.
-	.editor-rich-text__tinymce[data-is-placeholder-visible="true"] {
-		height: auto;
-	}
-
 	// Don't let the placeholder text wrap in the variation preview.
 	.editor-block-preview__content & {
 		max-width: 100%;
 
+		// Polish the empty placeholder text for the button in variation previews.
+		.editor-rich-text__tinymce[data-is-placeholder-visible="true"] {
+			height: auto;
+		}
+
 		.wp-block-button__link {
 			max-width: 100%;
 			overflow: hidden;
@@ -58,7 +55,7 @@ $blocks-button__line-height: $big-font-size + 6px;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 
-	// the width of input box plus padding plus two icon buttons.
+	// The width of input box plus padding plus two icon buttons.
 	$blocks-button__link-input-width: 300px + 2px + 2 * $icon-button-size;
 	width: $blocks-button__link-input-width;
 

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

@@ -1,5 +1,4 @@
-$blocks-button__height: 46px;
-$blocks-button__line-height: $big-font-size + 6px;
+$blocks-button__height: 56px;
 
 .wp-block-button {
 	color: $white;
@@ -24,13 +23,12 @@ $blocks-button__line-height: $big-font-size + 6px;
 	cursor: pointer;
 	display: inline-block;
 	font-size: $big-font-size;
-	line-height: $blocks-button__line-height;
 	margin: 0;
-	padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px;
+	padding: 12px 24px;
 	text-align: center;
 	text-decoration: none;
 	white-space: normal;
-	word-break: break-all;
+	overflow-wrap: break-word;
 
 	&:hover,
 	&:focus,

packages/editor/src/components/block-switcher/style.scss

@@ -74,7 +74,8 @@
 }
 
 .components-popover:not(.is-mobile).editor-block-switcher__popover .components-popover__content {
-	min-width: 320px;
+	min-width: 300px;
+	max-width: 340px;
 }
 
 .editor-block-switcher__popover .components-popover__content {