Remove heading settings (levels) from core/heading

[ghost]

Hey,

I need to remove the heading settings for a project, I assume that is best done using filters?

Using this guide here: https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blockedit it's clear how to add panels to the existing settings, however, it doesn't say anything about removing an existing panel from the inspector.

I have tried something like that to see if existing settings can be changed:

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;

const withInspectorControls = createHigherOrderComponent( ( BlockEdit, HeadingToolbar ) => {
	return ( level, setAttributes, props ) => {
		return (
			<Fragment>
				<BlockEdit { ...props }>
					<HeadingToolbar
						minLevel={ 1 }
						maxLevel={ 1 }
						selectedLevel={ level }
						onChange={ ( newLevel ) =>
							setAttributes( { level: newLevel } )
						} />
				</BlockEdit>
			</Fragment>
		);
	};
}, 'withInspectorControl' );

wp.hooks.addFilter( 'editor.BlockEdit', 'core/heading', withInspectorControls );

However, this just gives me a blank block.

I would really appreciate some help with this.

Thanks!

[mkaz]

I don't recommend that approach. It might be possible to modify the core heading block, but not advisable.I would combine two approaches:

1. First disable the core header using the wp.blocks.unregisterBlockType( 'core/heading' ); See this block filters documentation

2. Second, create your own heading block that inserts just an H1 tag. See the block tutorial it explains how to create a rich text block, switch the P tag with an H1 tag and it should do what are looking for.

I created a rough example to try it out. See this branch of my test-block: https://github.com/mkaz/test-block/tree/remove-heading

[ghost]

Hey @mkaz,

Thanks for your comment and example. Creating my own block was indeed on my mind, however, for this use case it wasn't viable. The block I am developing is going to be used as a block for my clients, who shouldn't have a choice on heading levels. However, I am also planning to publish the same block on the WP directory, where I want to keep that option open for the end user to choose.

For now, I went with a hack to hide the heading options for the sidebar and toolbar using this code:

JS

if (document.body.classList.contains( 'block-editor-page' )) { document.body.addEventListener( 'click', function() { let selectedBlock = wp.data.select( 'core/block-editor' ).getSelectedBlock(); if (selectedBlock && selectedBlock.name === 'core/heading') { document.body.classList.add( 'remove-heading' ); } else if (selectedBlock && selectedBlock.name !== 'core/heading') { document.body.classList.remove( 'remove-heading' ); } } ); }

CSS

.remove-heading { #editor > div > div > div.components-navigate-regions > div > div.block-editor-editor-skeleton__body > div.block-editor-editor-skeleton__sidebar > div > div > div.components-panel > div > div:nth-child(2) > div.components-panel__body:not(.block-editor-panel-color-gradient-settings), #editor > div > div > div.components-navigate-regions > div > div.block-editor-editor-skeleton__header > div > div.edit-post-header__toolbar > div.edit-post-header-toolbar > div.edit-post-header-toolbar__block-toolbar > div > div:nth-child(2) > div:nth-child(1) { display: none !important; } }

This works for now, however I wish a native options to disable heading levels will get implemented in the future.

[urlund]

+1 for option to disable heading levels ;)

[tdapper]

Yea, this would be great. Also perhaps allow renaming? A scenario that we are hitting and I am having a hard time imagining to be uncommon, is that h1 is actually used for the page title, so there should really only be a single h1. Then everything below that would just be regular headers that can show up any number of times. Most wikis and rich text editors appear to have adopted a style where there is a page title and then header 1, header 2, etc. Sinc there is no real concept of the title in HTML, the title should be represented as h1 and Header 1 should actually be h2 to everything makes sense semantically. Or am I barking up the wrong tree here?

[wwdes]

+1

[steveangstrom]

This is required.
I only want the editors of the site to be able to set H2, H3, and H4.
If there is a way to limit the H block to a subselection can someone illuminate me?

[pwkip]

I achieve this with some CSS included in the backend:

[aria-label="Heading 1"], [aria-label="Heading 5"], [aria-label="Heading 6"] { display: none; }

Technically you could still add h1, h5 and h6 in the code editor, but for my use case this is sufficient.

[skorasaurus]

Copying @michaelMcAndrew's description of this issue at who wrote his issue at #42634

Currently the heading block allows users to insert any heading level from 1 to 6. This is nice and flexible but in some instances, it would be good to be able to restrict this, for example, only allow 2-6 or 2-3 (in the same way that we can restrict spacing, colours, remove blocks etc.).

In the current implementation, the list of headings is hard coded here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/heading/heading-level-dropdown.js#L12 and cannot be adjusted.
What is your proposed solution?

One solution would be to use the theme.json settings mechanism to implement a new setting (maybe under typography?) called headingLevels, which would be an array that would some or all of the numbers between 1 and 6.

We can then use this array (if it exists) instead of the hard coded array in block-library/src/heading/heading-level-dropdown.js.

The only thing that gives me pause about this approach is that core/heading is the only block that this setting would get applied to. This struck me as odd at first, but on reflection, I don't think it is a big deal. After all there is no rule that says settings need to apply to multiple blocks and AFAIK, there is not a method for defining a setting for a particular block.

Thinking about alternative approaches, I wondered if a block hook (e.g. editor.BlockEdit might be able to help. Perhaps in conjunction with adding an extra prop to the component. Not sure if this is a good approach or there is a precedent for doing it this way in Gutenberg.

And maybe there is another approach I am not thinking of. How have we solved similar problems in the past?

PS. see https://wordpress.org/support/topic/gutenberg-headings-block-remove-h1-h3-etc-as-options/ and https://wordpress.stackexchange.com/questions/405558/restrict-heading-level-in-gutenberg-block-core-heading #15160 #13565 for some other people trying to do the same thing.

[paaljoachim]

This PR by @carolinan
Add a tag selection component to replace HeadinglevelDropdown
#46003
Can use some feedback from anyone who has commented in this issue.

[datgausaigon]

Hi all,
Is there any way we can do this now? I tried the following code but it doesn't work.

function modify_heading_levels($settings, $post) {
    if (isset($settings['core/heading'])) {
        $settings['core/heading']['attributes']['level']['enum'] = [2, 3, 4, 5, 6];
    }
    return $settings;
}
add_filter('block_editor_settings_all', 'modify_heading_levels', 10, 2);

function my_custom_block_type_args( $args, $name ) {
  if ( $name === 'core/heading' ) {
	  if ( isset( $args['attributes']['content']['selector'] ) ) {
		  $args['attributes']['content']['selector'] = 'h2,h3,h4,h5,h6';
	  }
  }
  
  return $args;
}
add_filter( 'register_block_type_args', 'my_custom_block_type_args' , 10, 2 );

Thanks ❤️

[ndiego]

A proposed solution is available in #63535