h o w t o e d i t b l o c k s w i t h t h e t o o l b a r

Block editor training – Lesson 2.3

How to edit blocks with the toolbar

Table of contents

Learning objectives

1. How to edit blocks with the toolbar

Key takeaways

Learning objectives

After this lesson, you’ll be able to:

● choose and switch the position of the toolbar;

● edit blocks with the toolbar.

In the previous lesson, you learned about adding blocks and some other

options, such as moving, transforming, reusing, and grouping blocks. In this

lesson, we will explore the editing options contained in the toolbar.

1. How to edit blocks with the toolbar Where is the toolbar?

By default, you can find the toolbar in two locations: at the top of the screen

in the ribbon above the post (1 in Image 1), and above each block, you’ve

selected (2 in Image 1).

Yoast SEO academy 1 / 28

Image 1: The default toolbar positions

The top ribbon contains the document tools which remain the same for all

blocks. The tools you see above each block change, depending on the block

you are working on. However, it is possible to merge the two toolbars in the

top ribbon.

Merging the two toolbars

To merge the top toolbar with the blocks toolbar, follow these steps :

1. Click on the three dots in the top right corner of the screen.

A menu appears (Image 2).


Image 2: The menu with the Top Toolbar option

2. Select the Top Toolbar option by clicking on it.

A checkmark next to the option appears, and you can see the block

and document tools in the top ribbon (Image 3).

Image 3: The selected Top Toolbar option (right) and the merged tools in

the top ribbon (up)

Through this course, we are sticking with the default toolbar position, above

the block. Now that we got that sorted, it’s time to explore the toolbar

options. We begin with the document tools in the top ribbon.

The document tools

There are six document buttons in the top toolbar (Image 4). This is what

you can do with them.


Image 4: The document tools in the top toolbar

1. Plus button

Click this button to open the blocks library. When you access the

blocks library in this way, you can also see previews and short

explanations of the blocks when you hover over a block button

(Image 5).

Image 5: The blocks preview with the plus button in the top toolbar

2. Modes

This button lets you choose between two modes: select and edit. If

you enable select, you will only be able to select blocks, but there will

be no editing options available for them in the toolbar. The edit

option is the default one.

3. Undo button

Use this button when you want to undo an action.

4. Redo button

Use this button when you want to redo an action.


5. Content structure button

Click this button to open a menu with some useful information

(Image 6). You can see the number of characters, words, headings,

paragraphs, and blocks that a post contains in the top part of the

menu. Below is the Document Outline with clickable headings.

Clicking on a heading takes you to its place in the post.

Image 6: The menu of the content structure button

6. Block navigation button

This button reveals a menu with a list of all the blocks that you used

in the post (Image 7). Click on a block title in the menu to jump to it

within the post.


Image 7: The menu of the Block navigation button

The block tools

Buttons that appear in all blocks

Unlike the document tools, the block tools change depending on the block

you are working with. However, some buttons make their appearance in all

blocks. Let’s use the Paragraph block as an example. The first three buttons

in the toolbar (outlined in Image 8) and the last button with the three vertical

dots (outlined in Image 8) are part of the toolbar in every block.

Image 8: The paragraph block toolbar options

The Change block type or style button (the first button in Image 8) always

has the first position in the block toolbar. Depending on the block, the icon

of the button changes. This button allows you to transform the block. So, the

options that the button reveals are different per block. For example, Image 9


shows the transform options for the Paragraph block. All the listed blocks

have something to do with text, which makes sense. You would not expect to

transform a text into a video, for example.

Image 9: The transform options for the Paragraph block

The other two buttons (the four dots and the upward and downward

pointing arrows) allow you to move the block. With the four dots, you can

drag and drop the block to the desired position in the post. And, with the

arrows, you can move the block up and down.

The more options menu

Clicking the More options button (the three vertical dots at the end of the

toolbar) reveals a long menu (Image 10) that is worth exploring in detail.


Image 10: The More options menu

1. Hide More Settings

In the post editor, by default, you can see the sidebar that contains

the Post tab and the Block tab (Image 11). To hide it, click the Hide

More Settings button, and the sidebar will be gone.

Image 11: Post tab and Block tab in the Settings sidebar


2. Copy

If you click this button, your block will be copied to your clipboard.

You are now able to paste it in another post.

3. Duplicate

The Duplicate button will create a copy as well. However, it will not

be copied to your clipboard. Instead, the duplicate block will appear

right below the original block.

4. Insert before

Use this button when you want to add a new block before the one

you have selected.

5. Insert after

Use this button when you want to add a new block after the one you

have selected.

6. Move To

If you click this button, a blue line will appear. Use the arrows on

your keyboard to move this line up or down. If you press Enter, the

selected block will move to the position of the blue line.

7. Edit as HTML

If you know HTML and you want to add some custom code to your

post, you can use this option. Clicking the button changes the block,

which allows you to type in your code (Image 12).

Image 12: The paragraph block after clicking Edit as HTML

8. Add to Reusable blocks

Use this button to add a block to the Reusable blocks (discussed in

the previous lesson).


9. Group

Use this button to add a block to a Group (discussed in the previous

lesson).

10. Remove block

Use this button when you want to remove a block.

Other common block toolbar buttons

Many block toolbar buttons reappear in multiple blocks. Let’s explore what

those buttons do and what blocks contain them.

Change alignment

A lot of blocks have the Change alignment button in their toolbar. Use the

options contained in this button, when you want to align the content left,

center, or right; or when you want to change the width of the content (Table

1).

Table 1: The Change alignment button

Text alignment

Some text-based blocks have the text alignment button in their toolbar. Use

the button to align text left, center, and right.


Change alignment button Blocks

● Archives ● Audio ● Calendar ● Categories ● Columns ● Cover ● Embeds ● File ● Gallery ● Image ● Latest comments ● Latest posts ● Media & text ● Pullquote ● RSS ● Search ● Tag cloud ● Video

Table 2: The text alignment button

Bold and italic

If you’ve ever worked in Microsoft Word or Google Docs, these two buttons

must be very familiar to you. The B stands for bold, and it allows you to

bolden selected parts of your text. The I stands for italic, and you use it to

make parts of your text italic.

Table 3: The bold and italic buttons

Link button

In some blocks (Table 4), you can add links to parts of your text, or to an

image. There are some differences in how you add text to a link and how

you add it to an image. That is why we explore them separately.


Text alignment button Blocks

● Heading ● Quote ● Paragraph ● Verse

Bold and Italic buttons Block

● Buttons ● Heading ● List ● Preformatted ● Pullquote ● Quote ● Search ● Table

Table 4: The link button

How to add links to text

Let’s explore how you can add links to a text.

1. Select the text you want to add a link to.

2. Click on the link button in the toolbar (2 in Image 13).

3. Add the URL you want to link to in the input field (3 in image 13).

4. Click the Submit button. / Click the URL that appears below the

input field. / Press Enter (4 in Image 13).

5. Optional: Click to the toggle if you want the link to open in a

new tab (5 in Image 13).

Image 13: Adding a link to a text


Link button Blocks

Linking text ● Heading ● List ● Preformatted ● Pullquote ● Quote ● Table

Linking an image

● Image

Adding a link to an image

Adding a link to an image works slightly differently. When you click on the

Link button in the Image block toolbar, you see three options (Image 14).

Image 14: The Link options for the Image block

1. In the input field, you can add a URL to link the image to.

2. Linking to Media File makes an image clickable. When visitors click

on it, the image opens in full screen in the same tab. If you want the

image to open in a different tab, you can select the Open in New Tab

toggle. It is advisable to use this setting only when necessary. For

example, link to a media file when you have a detailed image in your

post, the details of which cannot be clearly seen unless the image is

enlarged.

3. When you upload something to WordPress, it automatically creates

an Attachment Page for that upload. For images, an attachment

page contains the title of the image, the image itself, as well as any

additional information you have added, such as a description or a

caption (Image 15).


Image 15: An example of the content on an attachment page

So, when should you link to the attachment page? Actually, you should not

do it very often. It can be confusing for visitors to land on a separate page

for the image, and they may even stop reading your post or page. In some

cases, for example, for professional photographers, it might be meaningful

to share details about the image. It is up to you to assess if it is necessary for

your visitors to access this page.

Note: You can only add a link to an attachment page if the theme you are

using allows it. Secondly, if you are using Yoast SEO, you might not see the

Attachment page screen. That is because the Attachment Page will

automatically be redirected to the Media File. As a result, you will see the

same screen that you get when you link to Media File.

Rich text controls button

The rich text button appears in blocks containing text. Click on it to reveal a

menu with six options (Table 5).


Table 5: The rich text controls button

1. Inline Code

If you want to reference bits of code in your text, you can do that

with the inline Code option.

Image 16: An example of inline code

For example, Image 16 shows a snippet of a post where the author

first shares a piece of code. Then, below the code, in the text, there is

a reference to the code. The inline code option makes the referenced

code stand out and be more legible.


Rich text options button Blocks

● Buttons ● Heading ● List ● Preformatted ● Pullquote ● Quote ● Search ● Table

2. Inline image

Use the inline image option to add images within a paragraph (Image

17).

Image 17: Example of an inline image

3. Keyboard input

With this option you can add inline text that indicates user input

from a keyboard, voice input, or another text entry device.

4. Strikethrough

Use this option when you want to show bits of text that are no

longer valid (Image 18). For example, you might have changed your

mind about something, or the situation changed. Strikethrough

comes in handy in such situations.

Image 18: An example of a strikethrough

5. Subscript

Click this option to add subscript characters.

6. Superscript

Click this option to add superscript characters.

7. Text Color

Use this option to easily change the color of the text within a block.


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

Blocks with multiple toolbars

Some blocks contain multiple elements. In such cases, each of the elements

has its own toolbar. Let’s see what those blocks are.

Buttons block

The Buttons block lets you edit each button separately with a separate

toolbar (Image 19). In addition, there is a general toolbar for the whole block

(Image 20).

Image 19: The toolbar for a single button in the buttons block

Image 20: The general toolbar for the whole Buttons block

The Columns block

The Columns block consists of various blocks arranged in columns. When

you first add this block, you are asked to select a variation (Image 21).


Image 21: Selecting a Columns variation

When you add the block, you’ll notice the toolbar has a button we haven’t

seen previously (Image 22). With it, you can change the alignment of the

columns.

Image 22: The vertical alignment button in the columns block toolbar

Then, you start adding blocks. For example, we’ve added an Image block and

a Quote block. When we click on each of the blocks, a separate block-specific

toolbar is revealed (Images 23 and 24).


Image 23: The Image block toolbar within the Columns block

Image 24: The Quote block toolbar within the Columns block

Cover block

The Cover block has a separate toolbar for the image (Image 25) and the

text overlay (Image 26).


Image 25: The toolbar for the image in the Cover block

Image 26: The toolbar for the text overlay in the Cover block

You can change the position of the text within the cover image. All you have

to do is click on the content position button and choose one of the positions

(Image 27).


Image 27: The Change content position button in the Cover block’s toolbar

Group block You can add any block in the group block. There is one main toolbar for the

whole block (Image 28). And, clicking on the separate blocks within the

Group reveals the block-specific toolbars (Image 29).

Image 28: The Group block toolbar


Image 29: The List block toolbar within the Group block

Media & Text block

In this block, you find media (image or video) next to a Paragraph block.

Unlike the previous blocks we saw, this one does not have a separate toolbar

for the media section but instead has the general Media & Text block toolbar

(Image 30). There are two options in this toolbar we haven’t encountered

before: Show media on the left, and Show media on the right (Image 30)

which lets you switch the position of the media in the block. Of course, you

can edit the text with its own Paragraph toolbar (Image 31).


Image 30: The Media & Text block toolbar

Image 31: The Paragraph block toolbar within the Media & Text block

Social Icons block

When you add the Social icons block, you’ll find the toolbar for the whole

block (Image 32), where you can change the alignment and the size of the

icons.

Image 32: The Social Icons block toolbar

And, when you click on an individual icon, you’ll see the toolbar that allows

you to move the icon.


Image 33: The toolbar for an individual social media icon

Some more blocks with unique toolbar buttons

Let’s explore some more blocks with unique toolbar buttons, like the Custom

HTML block, Heading block, List block, Latest posts block, and Table block.

Custom HTML

In this block, which allows you to write custom HTML, there are two

block-specific buttons. Click the HTML button to add the custom HTML code

(Image 34).

Image 34: The HTML button in the Custom HTML block

Click the Preview button to preview the code (Image 35).


Image 35: The Preview button in the Custom HTML block

Heading

In the Heading block toolbar, you will find much of the text related buttons.

One button we haven’t seen so far is the heading level button (Image 36).

Use it to change the level of the heading (it can go up to level ).

Image 36: The heading level button in the Heading block toolbar

List

The List block contains four unique options (Image 37). With the first two,

you can choose between an ordered or an unordered list. And, with the

other two, you can indent or outdent list items.

Image 37: The unique List block options

Latest posts

In the Latest posts block toolbar, two block-specific buttons allow you to

display the posts in a list (Image 38) or a grid format (Image 39).


Image 38: The list view button

Image 39: The grid view button

Table block

The table block also has one block-specific button: Edit table (Image 40).

Click on it to reveal the menu that allows you to add and delete rows and

columns.


Image 40: The Table block

Image block

In the image block toolbar, you can crop and edit the image right in

the post. To do so, click on the Crop button in the toolbar (Image

41).

Image 41: The crop button in the Image toolbar

After you click the button, you will see some additional options

(Image 42). You can zoom the image (1 in Image 42); adjust the

aspect ratio (2 in Image 42), and rotate the image (3 in Image 42).

After you are done with the editing, you can click Apply. Or, if you

do not want to save the changes, click Cancel.


Image 42: The options of the Crop button

The A button (on the left of the zoom button, Image 42) lets you add text

over the image, which essentially transforms the image into a cover block.

Now you have an idea of the things you can do with the toolbar. In the next

lesson, we’ll explore the options in the sidebar!

Key takeaways

● By default, the toolbar is located in the top ribbon, as well as above

each block.

● The top ribbon toolbar contains the document settings, and in the

toolbar above each block, there are block settings. You can choose

to have all the settings in the top toolbar or have each block-specific

toolbar appear above each block you select.

● Generally speaking, the buttons in the toolbar allow you to make

edits to the position of the text and media, transform blocks,

remove blocks, create reusable blocks, etc.


h o w t o e d i t b l o c k s w i t h t h e t o o l b a r

Documents