UNPKG

@wordpress/block-editor

Version:
53 lines (34 loc) 1.17 kB
# Heading Level Dropdown `<HeadingLevelDropdown>` Adds a dropdown for selecting H1-H6 and paragraph HTML tags from the block toolbar. Uses `<ToolbarDropdownMenu>`. ## Usage ```jsx import { BlockControls, HeadingLevelDropdown } from '@wordpress/block-editor'; const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ]; const MyHeadingLevelToolbar = () => ( <BlockControls group="block"> <HeadingLevelDropdown options={ HEADING_LEVELS } value={ tag } onChange={ ( newTag ) => setAttributes( { tag: newTag } ) } /> </BlockControls> ); ``` ### Props #### options The list of available heading levels, passed from the block. - Type: `Object` - Required: no #### value The chosen heading level. - Type: `number` - Required: no #### onChange Function called with the selected value changes. - Type: `() => number` - Required: yes ## 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.