By default, the Editable component within Gutenberg displays a toolbar with a number of formatting 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:
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={ [] }
5 comments
Niklas
Hmm…I’ve been searching all over for solutions to this.
But I’m not sure where to place the code you are showing above.
Also is this change something that will stick after an update of wordpress?
alexmansfield
The example files mentioned in the article all go into a single folder to create a WordPress plugin. Plugins will survive through WordPress updates. For more info on how to build a plugin, check out the WordPress handbook on plugin building: https://developer.wordpress.org/plugins/
sue brooks
I am a novice … I want to add a pay now bitton for a photo competition on my web site. I can create the html for the button( from paypal etc) but how do I copy/paste that onto the pay now button either in the tool bar or onto the media image.???
alexmansfield
Hi Sue, that isn’t really related to the topic of this post. However, in the instance you’re describing, I think you would want to use the “Custom HTML” block to add your Paypal button to the page.