Blocks, Text Blocks

Blocks » Paragraph Block

The Paragraph block is the default block type for text added to the editor. It is probably the block you will use most.

Table of Contents

Add the Paragraph Block

To add a Paragraph block, start typing or pasting text and each paragraph will be turned into a Paragraph block automatically.

Adding or writing text automatically creates a Paragraph block.
Adding or writing text automatically creates a Paragraph block.

You can also click on the + Block Inserter icon and search for “paragraph”. Click it to add the block to the post or page.

Adding a Paragraph block using the + Block Inserter icon.
Adding a Paragraph block using the + Block Inserter icon.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

The Paragraph block parent toolbar.
The Paragraph block parent toolbar.

The Paragraph block has the following options in its toolbar:

  • Change to another type of block
  • Drag block handle to change the block position
  • Move the block up or down
  • Align the text to the left, center, or right
  • Make the highlighted text bold
  • Make the highlighted text italic
  • Insert hyperlink
  • More options
  • Block options

↑ Table of Contents ↑

Text Formatting

The More option for the Paragraph block includes:

  • Highlight
  • Inline code
  • Inline image
  • Justify
  • Keyboard input
  • Strikethrough
  • Subscript
  • Superscript
  • Underline

Use these options to apply formatting to your text or set of characters in a Paragraph block as below:

  1. In your Paragraph block highlight the words or characters you’d like to apply the formatting to.
  2. Select the desired option from the toolbar to apply it.

Inline image and Highlight will require additional steps to use as described below:

Highlight

Use the Highlight option to change the color of a few specific words or characters, or set a colored background behind specific words or characters in a Paragraph block.

  1. Select the text you’d like to format.
  2. Click the downward arrow in the block toolbar.
  3. Click Highlight.
  4. A small window with color options for Text and Background will pop up. This shows a set of predefined color options to choose from, as well as a color picker where you can choose the specific color you want.
Using the highlight option to change text colour and apply background color in Paragraph block.
Use the Highlight option to change text color and apply background color in the Paragraph block.
Inline Image

The Inline image option is great if you want to add a particular icon ⚙️ or even an emoji within the same line as the Paragraph block.

To add an inline image to your Paragraph block:

  1. Click the downward arrow in the block toolbar.
  2. Choose Inline image.
  3. Select the image you wish to use from the Media Library window.
  4. Click the Insert button to add the inline image.
Add an inline image to a Paragraph block.

To change the size of an inline image:

  1. Click on the image.
  2. Type or select a number for the image width.
  3. Use the curved arrow button to apply the changes.
Change the size of an inline image.
Keyboard Input

Using the Keyboard input option allows you to add the <kbd> HTML tag to selected text.

When you add the <kbd> tag, the content inside it is displayed in the browser’s default monospace font. It is typically used when writing a keyboard command, for example:

To copy the content, highlight it and press CTRL + C on your keyboard.

↑ Table of Contents ↑

New Line in an Existing Block

You can start a new line with single spacing instead of adding a new Paragraph block by pressing the Shift and Return/Enter keys on your keyboard at the same time.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ icon to open the block settings

The Paragraph block has the following settings:

Color Settings

The Color setting allows you to change the color of the text, background, and links for the entire Paragraph block. This can be used to call attention to your most important content.

Use color settings to change text, background, and link colors in an entire Paragraph block.
Use color settings to change text, background, and link colors in an entire Paragraph block.

Accessibility parameters are built into the editor to warn you when the text may become illegible for persons with reading impairments.

📌

If you want to change the color of only a few words within a Paragraph block, use the Highlight option instead.

Typography Settings

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Drop cap will make the first letter of the paragraph extra large.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

How to Indent Your Text

You can indent your text by first grouping the respective Paragraph blocks and then following the steps to add padding in a Group block. This will add empty space within the border of the Group block and around the text inside it. This option lets you add an indent to an entire section of text or pad a small amount of text for a big effect.

Not quite what you're looking for?

Get Help