Skip to content

Commit

Permalink
Font family preview in the font family picker (#67118)
Browse files Browse the repository at this point in the history
* style font family option

* use CustomSelectControl instead of Select

* fix onchange callback

* removing unwanted props

* try e2e test fix to work with CustomSelectControl component

* try fix e2e test

* Fix test for font family combobox

---------

Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: mtias <[email protected]>
Co-authored-by: mikachan <[email protected]>
Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
9 people authored Nov 22, 2024
1 parent 02611cb commit cbbb848
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 14 deletions.
26 changes: 13 additions & 13 deletions packages/block-editor/src/components/font-family/index.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -30,13 +30,15 @@ export default function FontFamilyControl( {
}

const options = [
{ value: '', label: __( 'Default' ) },
...fontFamilies.map( ( { fontFamily, name } ) => {
return {
value: fontFamily,
label: name || fontFamily,
};
} ),
{
key: '',
name: __( 'Default' ),
},
...fontFamilies.map( ( { fontFamily, name } ) => ( {
key: fontFamily,
name: name || fontFamily,
style: { fontFamily },
} ) ),
];

if ( ! __nextHasNoMarginBottom ) {
Expand All @@ -51,14 +53,12 @@ export default function FontFamilyControl( {
}

return (
<SelectControl
<CustomSelectControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
label={ __( 'Font' ) }
options={ options }
value={ value }
onChange={ onChange }
labelPosition="top"
onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
options={ options }
{ ...props }
/>
);
Expand Down
3 changes: 2 additions & 1 deletion test/e2e/specs/site-editor/font-library.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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( '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"' );
Expand Down

0 comments on commit cbbb848

Please sign in to comment.