How to Edit a Paragraph Block in the WordPress Block Editor

The paragraph block in the WordPress block editor is a content block that allows you to add text to your post or page. It is the most basic block in the editor and is used to create the main body of your content.

How to create bold text

1

Select the paragraph block you want to edit

2

Select the text that you want to bold. You can do this by clicking and dragging your mouse over the text.

3

Click the “B” icon in the block top toolbar. This will make the selected text bold.

4

Alternatively, you can use the keyboard shortcut “Ctrl + B” (Windows) or “Command + B” (Mac). This will make the selected text bold.

How to italicize text

5

Highlight the text you want to italicize by clicking and dragging your mouse over it.

6

Click the “I” icon in the editor toolbar. To apply italic formatting to the selected text.

7

You can also use the keyboard shortcut “Ctrl + I” (Windows) or “Command + I” (Mac). This will make the selected text italic.

How to underline text

8

You can use the keyboard shortcut “Ctrl+ U” to underline text on a Window. You can use the keyboard shortcut “Command+ U” to underline text on a Mac.

More options for the paragraph block

Tip

There are more options in the top toolbar of the paragraph block accessed via the dropdown menu that typically contains additional formatting and styling options for the text within the paragraph block.

9

Select the paragraph block that you want to edit. This will typically highlight the block and display the top toolbar above it.

10

Click on the More button or dropdown menu in the top toolbar. This will display a list of additional formatting and styling options.

How to highlight text with color

11

Select the text that you want to highlight. And click on the “More” options (it looks like a down arrow) from the top toolbar.

12

Click on the “Highlight” option (this icon looks like an “A”).

13

A Popup window will open with two options for “Text & background.” Choose the one that you want to set a color for.

14

Choose the desired color using the color picker, or enter the hex code for the custom color you want.

15

The selected text or background will now be displayed in the chosen color.

How to add inline code

Tip

Inline code is a feature that allows you to insert small pieces of code within a paragraph of text. Inline code is useful for technical writers and programmers who need to include code examples. It helps to make the code more easily readable and clarifies its purpose within the context of the surrounding text.

16

Select the text that you want to display as inline code.

17

Click the “More options” button in the top toolbar. This will open a menu of additional formatting options.

18

In the menu, click the “Inline code” option. This will apply the formatting to the selected text, displaying it in a monospace font and possibly adding other visual indicators to distinguish it from the surrounding text.

How to add an inline image

Tip

The “Inline Image” option in the top toolbar allows you to insert an image directly into the middle of a paragraph within the paragraph block.

19

Place your cursor at the point within the paragraph where you want to insert the image.

20

Access the “More” options by clicking on the icon in the top toolbar of the block, which is represented by a downward-facing arrow.

21

A menu will appear. From the menu, select the “Inline Image” option.

22

A media library modal will appear. Click an image and then click the “Select” button to choose an image from your media library, or drag and drop an image into the modal.

23

Once you have selected an image, you can adjust the image size using the options in the modal.

How to strike through the selected text

24

Select the text that you want to add a strikethrough to.

25

To access the “More” options, click on the icon in the top toolbar of the block, which is represented by a downward-facing arrow.

26

A menu will appear. Click the “Strikethrough” option.

27

The selected text will now have a strikethrough applied to it.

How to set text alignment

28

Click the block containing the paragraph that you want to align.

29

In the block toolbar, click on the “Align” button.

30

From the dropdown menu, select the desired alignment option: “Left,” “Center,” and “Right.” The paragraph will now be aligned according to your selection.

31

Select the text that you want to turn into a link.

32

Click the “Link” button in the toolbar. This will open the “Insert Link” modal.

33

In the “Insert Link” modal, enter the URL of the webpage you want to link to in the “Link” field.

34

(Optional) If you want the link to open in a new tab, check the “Open in new tab” toggle.

You may also join our Gutenberg Facebook Community where we all learn and help each other.


Leave a Reply

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

Subscribe and Get Updates Weekly

Latest articles, blocks, templates, tools, news every week