By default, the Editable component within Gutenberg displays a toolbar with a number of formatting buttons:

Gutenberg editable component toolbar with all buttons

However, in certain circumstances we may want to hide some of these buttons, or even hide the entire toolbar. The Editable component has a built in parameter for setting which toolbar buttons are displayed. Here is an example of a basic Editable component with the default toolbar:

<Editable
	tagName='p'
	value='This is an example.'
	focus={ focus }
	onFocus={ setFocus }
/>

To control which toolbar buttons are displayed, we can use the formattingControls parameter like this:

<Editable
	tagName='p'
	value='This is an example.'
	formattingControls={ [ 'bold', 'link' ] }
	focus={ focus }
	onFocus={ setFocus }
/>

This will limit the buttons in the toolbar to only the bold and link buttons. With this code in place, our toolbar should look like this:

Gutenberg editable component toolbar with limited buttons

The default toolbar buttons are bold, italic, strikethrough, and link. To disable the toolbar entirely, we can simply set the formattingControls parameter to an empty array:

formattingControls={ [] }
Category:
Gutenberg

Join the conversation! 1 Comment

  1. […] Disable Default Toolbar Buttons in the Gutenberg Editable Component¬† (Jan 25, 2018) […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *