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
28
Embed
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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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).
Yoast SEO academy 2 / 28
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.
Yoast SEO academy 3 / 28
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.
Yoast SEO academy 4 / 28
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.
Yoast SEO academy 5 / 28
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
Yoast SEO academy 6 / 28
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.
Yoast SEO academy 7 / 28
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
Yoast SEO academy 8 / 28
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).
Yoast SEO academy 9 / 28
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