Contents
Learn how to create a custom button to the Rich Text Editor used by Gutenberg. By default, it has alignments, bold, italic and link buttons. Learn how to add a text highlighter button (and similarly any other option) to the rich text toolbar.
What can you do with rich text editor?
The rich text editor enables you to add rich formatting of text content, including common structural treatments such as lists; formatting treatments such as bold, underline, and italic text; drag-and-drop inclusion; paste-as-text; and sizing of images.
How to change HTML definition in rich text editor?
To use the new configuration, open the Long Edit Box Page Field Properties dialog box; select the Options tab; click the Configuration Settings Id drop-down list box; and then select the HTML definition name from the list of values that appear. See Setting Page Field Properties for Controls.
How do you add a button in Gutenberg?
This field is for validation purposes and should be left unchanged. Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Select Blocks. Then scroll to Layout Elements. Under that section you will see Button. Select Button.
Hint: There are other methods of customizing buttons through Guttenberg. When you click on the 3 dots located on the right hand side of the button section will open mini menu. You can see the HTML text of the button, duplicate the button, and hide the block settings (the color options on the right hand side will be hidden).
Is there a toolbar for text alignment in WordPress?
WordPress has a component to output the text alignment toolbar however no automatic handling of adding the correct classes for actually making the content aligned – both inside the editor and the frontend (as far as I’ve found at least!). We need to manually add and update an attribute for the text alignment.