Toolbar

General

The Gutenberg Toolbar is visible at the top of the Gutenberg component when selected.

Not all toolbar options are available for each component. At every option the linked components are show in a label.

Text alignment

  core/heading   core/paragraph

Using the alignment drop-down from the toolbar, you are able to align the whole paragraph text to the left, make it center-aligned or orient it to the right.

Options:

  • Align text left
  • Align text center
  • Align text right

Examples:

Left aligned text (default).

Center aligned text.

Right aligned text.

Bold

  core/heading   core/paragraph

Used quite frequently, Bold formatting has their own buttons on the Toolbar. The shortcuts are CTRL + b (or CMD + b) for bold.

Example:

This a paragraph with bold text.

Italic

  core/heading   core/paragraph

Used quite frequently, Italics formatting has their own buttons on the Toolbar. The shortcuts are CTRL + i (or CMD + i) for italics.

Example:

This a paragraph with italic text.

  core/heading   core/paragraph

Use the chain link icon to insert a hyperlink to your highlighted text. Or use the CTRL + k (or Command+k) keyboard shortcut.

Example:

This a paragraph with a link.

Highlight

  core/heading   core/paragraph

Using the “Highlight” option allows you to change the color for selected text and its background.

 

Check the color contrast when creating a highlight!

Example:

This a paragraph with highlighted text.

Inline code

  core/heading   core/paragraph

Use the inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Example:

This a paragraph with inline code.

Inline image

  core/heading   core/paragraph

The inline image feature allows you to add an image to your paragraph. It has one option: enter the desired pixel width for your image.

Example:

This a paragraph with an inline image.

Keyboard input

  core/heading   core/paragraph

Using the “Keyboard Input” option allows you to add the <kbd> tag to selected text.

Example:

This is a paragraph with a keyboard tag.

Strikethrough

  core/heading   core/paragraph

Using the “Strikethrough” option adds a line through your highlighted text.

Example:

This is a paragraph with strikethrough text.

Subscript

  core/heading   core/paragraph

The “Subscript” option allows you to add subscript to your highlighted text.

Example:

This is a paragraph with subscript text.

Superscript

  core/heading   core/paragraph

The “Superscript” option allows you to add superscript to your highlighted text.

Example:

This is a paragraph with superscript text.

Navigation