-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Font family preview in the font family picker #67118
Changes from 3 commits
d49960c
e271f4d
bc8c4a6
c39b0f1
1f94e6c
2d26658
135c33b
a10e2e9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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'; | ||||
|
||||
|
@@ -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 ) { | ||||
|
@@ -51,14 +53,14 @@ export default function FontFamilyControl( { | |||
} | ||||
|
||||
return ( | ||||
<SelectControl | ||||
<CustomSelectControl | ||||
__next40pxDefaultSize={ __next40pxDefaultSize } | ||||
__nextHasNoMarginBottom={ __nextHasNoMarginBottom } | ||||
label={ __( 'Font' ) } | ||||
options={ options } | ||||
value={ value } | ||||
onChange={ onChange } | ||||
matiasbenedetto marked this conversation as resolved.
Show resolved
Hide resolved
|
||||
labelPosition="top" | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this prop also should be removed. Aren't you getting some errors in the console when passing this prop? I think you should, since it will end up being wrongly passed down to the underlying DOM element. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks like we are passing the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't see console errors and it is used like that in other parts of the codebase. Example:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe you are referring something that is valid for the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. My comment is referring to the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. removed here: 1f94e6c |
||||
options={ options } | ||||
{ ...props } | ||||
/> | ||||
); | ||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you need to remove this prop.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure what prop are you pointing to.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you mean
__next40pxDefaultSize
, I see it used in other parts of the codebase where CustomSelectControl is rendered, too:gutenberg/packages/block-editor/src/components/font-appearance-control/index.js
Line 155 in bc8c4a6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My comment is referring to the
__nextHasNoMarginBottom
prop, actually.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, removed 1f94e6c