diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index cf723896a55a03..ff04e763de488d 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + /** * Internal dependencies */ @@ -10,6 +15,7 @@ import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; import { PanelBody } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; +import { withSelect } from '@wordpress/data'; import { RichText, BlockControls, @@ -17,26 +23,31 @@ import { AlignmentToolbar, } from '@wordpress/block-editor'; -export default function HeadingEdit( { +const DEFAULT_LEVEL_CHOICES = [ 1, 2, 3, 4, 5, 6 ]; + +function HeadingEdit( { attributes, setAttributes, mergeBlocks, insertBlocksAfter, onReplace, className, + levelChoices, } ) { const { align, content, level, placeholder } = attributes; const tagName = 'h' + level; - + const blockControlsLevelsRange = ( levelChoices.length <= 3 ) ? + levelChoices : + levelChoices.slice( 1, 4 ); return ( - setAttributes( { level: newLevel } ) } /> + setAttributes( { level: newLevel } ) } />

{ __( 'Level' ) }

- setAttributes( { level: newLevel } ) } /> + setAttributes( { level: newLevel } ) } />

{ __( 'Text Alignment' ) }

); } + +export default withSelect( ( select ) => { + // Parse the h1,h2,h3... choices to level numbers and pass it as a prop. + const levelChoices = get( + select( 'core/blocks' ).getBlockType( 'core/heading' ), + [ 'attributes', 'level', 'enum' ], + DEFAULT_LEVEL_CHOICES + ); + + return { + levelChoices, + }; +} )( HeadingEdit ); + diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js index b01ff2c1c202a4..d8c585e68e6677 100644 --- a/packages/block-library/src/heading/heading-toolbar.js +++ b/packages/block-library/src/heading/heading-toolbar.js @@ -23,9 +23,10 @@ class HeadingToolbar extends Component { } render() { - const { minLevel, maxLevel, selectedLevel, onChange } = this.props; + const { minLevel, maxLevel, selectedLevel, onChange, levelsRange = [] } = this.props; + const controls = ( levelsRange.length > 0 ) ? levelsRange : range( minLevel, maxLevel ); return ( - this.createLevelControl( index, selectedLevel, onChange ) ) } /> + this.createLevelControl( index, selectedLevel, onChange ) ) } /> ); } } diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 5a12b6e7a8cc0b..bbd6b57ec405c4 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -49,6 +49,7 @@ const schema = { level: { type: 'number', default: 2, + enum: [ 1, 2, 3, 4, 5, 6 ], }, align: { type: 'string',