-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Editor: Add README for FontFamilyControl component (#52118)
* Block Editor: Add README for FontFamilyControl component * Add a screenshot of the component
- Loading branch information
Showing
1 changed file
with
71 additions
and
0 deletions.
There are no files selected for viewing
71 changes: 71 additions & 0 deletions
71
packages/block-editor/src/components/font-family/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
# FontFamilyControl | ||
|
||
FontFamilyControl is a React component that renders a UI that allows users to select a font family. | ||
The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets. | ||
Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families. | ||
|
||
![FontFamilyControl component preview](https://i.imgur.com/blS5iA3.png) | ||
|
||
## Usage | ||
|
||
```jsx | ||
import { FontFamilyControl } from '@wordpress/block-editor'; | ||
import { useState } from '@wordpress/element'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
// ... | ||
|
||
const MyFontFamilyControl = () => { | ||
const [ fontFamily, setFontFamily ] = useState( '' ); | ||
|
||
return ( | ||
<FontFamilyControl | ||
value={ fontFamily } | ||
onChange={ ( newFontFamily ) => { | ||
setFontFamily( newFontFamily ); | ||
} } | ||
/> | ||
); | ||
}; | ||
|
||
/// ... | ||
|
||
<MyFontFamilyControl /> | ||
``` | ||
|
||
## Props | ||
|
||
The component accepts the following props: | ||
|
||
### onChange | ||
|
||
A function that receives the new font family value. | ||
If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font family to undefined or set the font family a starting value. | ||
|
||
- Type: `function` | ||
- Required: Yes | ||
|
||
### fontFamilies | ||
|
||
A user-provided set of font families. | ||
Optional, used in case we want to override the predefined ones coming from presets. | ||
|
||
- Type: `Array` | ||
- Required: No | ||
|
||
The font families are provided as an array of objects with the following schema: | ||
|
||
| Property | Description | Type | | ||
| ---------- | ----------------------------------------- | ------ | | ||
| fontFamily | Font family, as used in CSS. | string | | ||
| name | Optional display name of the font family. | string | | ||
|
||
### value | ||
|
||
The current font family value. | ||
|
||
- Type: `String` | ||
- Required: No | ||
- Default: '' | ||
|
||
The rest of the props are passed down to the underlying `<SelectControl />` instance. |
099ea67
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.
Flaky tests detected in 099ea67.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5422829261
📝 Reported issues:
specs/editor/various/autosave.test.js