From d49960ccdd1797cfecec97349dc0215592605099 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Tue, 19 Nov 2024 11:27:22 -0300 Subject: [PATCH 1/7] style font family option --- .../src/components/font-family/index.js | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index c87a52b4c676d2..53a8ad3fa32b13 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -29,15 +29,20 @@ export default function FontFamilyControl( { return null; } - const options = [ - { value: '', label: __( 'Default' ) }, - ...fontFamilies.map( ( { fontFamily, name } ) => { - return { - value: fontFamily, - label: name || fontFamily, - }; - } ), - ]; + const options = ( + <> + + { fontFamilies.map( ( { fontFamily, name, slug } ) => ( + + ) ) } + + ); if ( ! __nextHasNoMarginBottom ) { deprecated( @@ -55,11 +60,12 @@ export default function FontFamilyControl( { __next40pxDefaultSize={ __next40pxDefaultSize } __nextHasNoMarginBottom={ __nextHasNoMarginBottom } label={ __( 'Font' ) } - options={ options } value={ value } onChange={ onChange } labelPosition="top" { ...props } - /> + > + { options } + ); } From e271f4d17f61760fa837bf6318dd61d391a23319 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Wed, 20 Nov 2024 16:05:17 -0300 Subject: [PATCH 2/7] use CustomSelectControl instead of Select --- .../src/components/font-family/index.js | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 53a8ad3fa32b13..8d34ca683dd254 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { SelectControl } from '@wordpress/components'; +import { CustomSelectControl } from '@wordpress/components'; import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; @@ -29,20 +29,17 @@ export default function FontFamilyControl( { return null; } - const options = ( - <> - - { fontFamilies.map( ( { fontFamily, name, slug } ) => ( - - ) ) } - - ); + const options = [ + { + key: '', + name: __( 'Default' ), + }, + ...fontFamilies.map( ( { fontFamily, name } ) => ( { + key: fontFamily, + name: name || fontFamily, + style: { fontFamily }, + } ) ), + ]; if ( ! __nextHasNoMarginBottom ) { deprecated( @@ -56,16 +53,15 @@ export default function FontFamilyControl( { } return ( - - { options } - + /> ); } From c39b0f1051a88f8298fba281e1d5877246973904 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 21 Nov 2024 08:42:21 -0300 Subject: [PATCH 3/7] fix onchange callback --- packages/block-editor/src/components/font-family/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 8d34ca683dd254..bd8eb2d59b9449 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -58,7 +58,7 @@ export default function FontFamilyControl( { __nextHasNoMarginBottom={ __nextHasNoMarginBottom } label={ __( 'Font' ) } value={ value } - onChange={ onChange } + onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) } labelPosition="top" options={ options } { ...props } From 1f94e6cc43af38933ce5810f30e617db26143210 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 21 Nov 2024 09:06:06 -0300 Subject: [PATCH 4/7] removing unwanted props --- packages/block-editor/src/components/font-family/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index bd8eb2d59b9449..1e6c137daedb0f 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -55,11 +55,9 @@ export default function FontFamilyControl( { return ( onChange( selectedItem.key ) } - labelPosition="top" options={ options } { ...props } /> From 2d26658177ae7f3948c2fc3e310d505b709fadad Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 21 Nov 2024 14:52:00 -0300 Subject: [PATCH 5/7] try e2e test fix to work with CustomSelectControl component --- test/e2e/specs/site-editor/font-library.spec.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index 7928ef8f71c534..03620aa66747f0 100644 --- a/test/e2e/specs/site-editor/font-library.spec.js +++ b/test/e2e/specs/site-editor/font-library.spec.js @@ -186,7 +186,8 @@ test.describe( 'Font Library', () => { await page .getByRole( 'button', { name: 'Headings', exact: true } ) .click(); - await page.getByLabel( 'Font' ).selectOption( 'Exo 2' ); + await page.getByRole( 'button', { name: 'Font' } ).click(); + await page.getByRole( 'option', { name: 'Exo 2' } ).click(); await expect( editor.canvas.locator( '.is-root-container h1' ) ).toHaveCSS( 'font-family', '"Exo 2"' ); From 135c33bee832b2eebae149234fb34a2375c609c3 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Thu, 21 Nov 2024 15:55:38 -0300 Subject: [PATCH 6/7] try fix e2e test --- test/e2e/specs/site-editor/font-library.spec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index 03620aa66747f0..302ac934f72c8f 100644 --- a/test/e2e/specs/site-editor/font-library.spec.js +++ b/test/e2e/specs/site-editor/font-library.spec.js @@ -186,8 +186,9 @@ test.describe( 'Font Library', () => { await page .getByRole( 'button', { name: 'Headings', exact: true } ) .click(); - await page.getByRole( 'button', { name: 'Font' } ).click(); - await page.getByRole( 'option', { name: 'Exo 2' } ).click(); + await page + .getByRole( 'combobox', { name: 'Font' } ) + .selectOption( 'Exo 2' ); await expect( editor.canvas.locator( '.is-root-container h1' ) ).toHaveCSS( 'font-family', '"Exo 2"' ); From a10e2e9bb970b73e946bb9155d5b74dbd994ab2a Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 21 Nov 2024 14:32:23 -0600 Subject: [PATCH 7/7] Fix test for font family combobox --- test/e2e/specs/site-editor/font-library.spec.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index 302ac934f72c8f..1824257df12fd3 100644 --- a/test/e2e/specs/site-editor/font-library.spec.js +++ b/test/e2e/specs/site-editor/font-library.spec.js @@ -186,9 +186,8 @@ test.describe( 'Font Library', () => { await page .getByRole( 'button', { name: 'Headings', exact: true } ) .click(); - await page - .getByRole( 'combobox', { name: 'Font' } ) - .selectOption( 'Exo 2' ); + await page.getByRole( 'combobox', { name: 'Font' } ).click(); + await page.getByRole( 'option', { name: 'Exo 2' } ).click(); await expect( editor.canvas.locator( '.is-root-container h1' ) ).toHaveCSS( 'font-family', '"Exo 2"' );