Adjust UI for Block Variation Picker labels

WordPress · Mar 12, 2020 · 66bc158 · 66bc158
1 parent 944a6ef
commit 66bc158
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -47,9 +47,14 @@ function BlockVariationPicker( {
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"
+							label={ variation.description || variation.title }
+						/>
+						<span
+							className="block-editor-block-variation-picker__variation-label"
+							role="presentation"
 						>
 							{ variation.title }
-						</Button>
+						</span>
 					</li>
 				) ) }
 			</ul>

diff --git a/packages/block-editor/src/components/block-variation-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss
@@ -32,11 +32,23 @@
 		margin: $grid-unit-10 $grid-unit-10 0 0;
 		flex-shrink: 1;
 		max-width: 100px;
+
+		button {
+			display: flex;
+		}
 	}
 
 	.block-editor-block-variation-picker__variation {
 		padding: $grid-unit-10;
 	}
+
+	.block-editor-block-variation-picker__variation-label {
+		font-family: $default-font;
+		font-size: 12px;
+		display: block;
+		margin-right: $grid-unit-15;
+		text-align: center;
+	}
 }
 
 .block-editor-block-variation-picker__variation {

diff --git a/packages/block-library/src/columns/variations.js b/packages/block-library/src/columns/variations.js
@@ -14,7 +14,8 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'two-columns-equal',
-		title: __( 'Two columns; equal split' ),
+		title: __( '50 / 50' ),
+		description: __( 'Two columns; equal split' ),
 		icon: (
 			<SVG
 				width="48"
@@ -35,7 +36,8 @@ const variations = [
 	},
 	{
 		name: 'two-columns-one-third-two-thirds',
-		title: __( 'Two columns; one-third, two-thirds split' ),
+		title: __( '30 / 70' ),
+		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
 				width="48"
@@ -58,7 +60,8 @@ const variations = [
 	},
 	{
 		name: 'two-columns-two-thirds-one-third',
-		title: __( 'Two columns; two-thirds, one-third split' ),
+		title: __( '70 / 30' ),
+		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG
 				width="48"
@@ -81,7 +84,8 @@ const variations = [
 	},
 	{
 		name: 'three-columns-equal',
-		title: __( 'Three columns; equal split' ),
+		title: __( '33 / 33 / 33' ),
+		description: __( 'Three columns; equal split' ),
 		icon: (
 			<SVG
 				width="48"
@@ -104,7 +108,8 @@ const variations = [
 	},
 	{
 		name: 'three-columns-wider-center',
-		title: __( 'Three columns; wide center column' ),
+		title: __( '25 / 50 / 25' ),
+		description: __( 'Three columns; wide center column' ),
 		icon: (
 			<SVG
 				width="48"

diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js
@@ -16,7 +16,7 @@ describe( 'Columns', () => {
 
 	it( 'restricts all blocks inside the columns block', async () => {
 		await insertBlock( 'Columns' );
-		await page.click( 'button[text()="Two columns; equal split"]' );
+		await page.click( '[aria-label="Two columns; equal split"]' );
 		await page.click( '[aria-label="Block navigation"]' );
 		const columnBlockMenuItem = (
 			await page.$x(

diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -23,7 +23,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 	it( 'should navigate using the block hierarchy dropdown menu', async () => {
 		await insertBlock( 'Columns' );
-		await page.click( 'button[text()="Two columns; equal split"]' );
+		await page.click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'Tab' ); // Tab to inserter.
@@ -73,7 +73,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 	it( 'should navigate block hierarchy using only the keyboard', async () => {
 		await insertBlock( 'Columns' );
-		await page.click( 'button[text()="Two columns; equal split"]' );
+		await page.click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'Tab' ); // Tab to inserter.

diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js
@@ -37,7 +37,7 @@ describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '/columns' );
 		await page.keyboard.press( 'Enter' );
-		await page.click( ':focus button[text()="Two columns; equal split"]' );
+		await page.click( ':focus [aria-label="Two columns; equal split"]' );
 		await page.click( ':focus .block-editor-button-block-appender' );
 		await page.waitForSelector( ':focus.block-editor-inserter__search' );
 		await page.keyboard.type( 'Paragraph' );