@wordpress/block-editor
Version:
55 lines (33 loc) • 1.83 kB
Markdown
# Line Height Control
The `LineHeightControl` component adds a lineHeight attribute to the core Paragraph and Heading blocks. This allows to update a paragraph line height directly from the block editor interface.

_Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available.
## Table of contents
1. [Development guidelines](#development-guidelines)
2. [Related components](#related-components)
## Development guidelines
### Usage
Renders the markup for the line height setting option in the block inspector.
```jsx
import { LineHeightControl } from '@wordpress/block-editor';
const MyLineHeightControl = () => (
<LineHeightControl
value={ lineHeight }
onChange={ onChange }
__nextHasNoMarginBottom={ true }
/>
);
```
### Props
#### `value`
- **Type:** `String` or `Number` or `Undefined`
The value of the line height.
#### `onChange`
- **Type:** `Function`
A callback function that handles the application of the line height value.
#### `__nextHasNoMarginBottom`
- **Type:** `boolean`
- **Default:** `false`
Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
## Related components
Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.