Update the widths of the variations in the block placeholder so that …

…spacing is consistent and alignment when the block is narrow is visually appealing. (WordPress#27255)
rafaelgallani · Nov 25, 2020 · d3ded78 · d3ded78
1 parent 2d2bfcf
commit d3ded78
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss
@@ -31,7 +31,7 @@
 		list-style: none;
 		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
 		flex-shrink: 1;
-		max-width: 100px;
+		width: 75px;
 		text-align: center;
 
 		button {
@@ -48,6 +48,7 @@
 		font-family: $default-font;
 		font-size: 12px;
 		display: block;
+		line-height: 1.4;
 	}
 }
 

diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js
@@ -41,7 +41,7 @@ const variations = [
 	},
 	{
 		name: 'title-date',
-		title: __( 'Title and Date' ),
+		title: __( 'Title & Date' ),
 		icon: titleDate,
 		innerBlocks: [
 			[
@@ -54,7 +54,7 @@ const variations = [
 	},
 	{
 		name: 'title-excerpt',
-		title: __( 'Title and Excerpt' ),
+		title: __( 'Title & Excerpt' ),
 		icon: titleExcerpt,
 		innerBlocks: [
 			[
@@ -67,7 +67,7 @@ const variations = [
 	},
 	{
 		name: 'title-date-excerpt',
-		title: __( 'Title, Date and Excerpt' ),
+		title: __( 'Title, Date, & Excerpt' ),
 		icon: titleDateExcerpt,
 		innerBlocks: [
 			[
@@ -84,7 +84,7 @@ const variations = [
 	},
 	{
 		name: 'image-date-title',
-		title: __( 'Image, Date and Title ' ),
+		title: __( 'Image, Date, & Title' ),
 		icon: imageDateTitle,
 		innerBlocks: [
 			[