{"id":15643421,"date":"2022-05-13T16:33:54","date_gmt":"2022-05-13T16:33:54","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=15643421"},"modified":"2024-04-16T15:42:11","modified_gmt":"2024-04-16T15:42:11","slug":"work-with-blocks","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/work-with-blocks\/","title":{"rendered":"Work with blocks"},"content":{"rendered":"\n

Each content in the WordPress Block Editor<\/a> is a block. They are the building blocks of your post or page. <\/p>\n\n\n\n

The WordPress Block Editor<\/a> offers an array of blocks<\/a> that can be used to create media-rich pages and posts. You can control the layout of the blocks with ease, to build visually appealing web pages. <\/p>\n\n\n\n

You can add blocks<\/a> for paragraphs, images, headings, lists, videos, galleries, and more<\/a>. WordPress has blocks for all common content elements, and more can be added by WordPress plugins<\/a>.<\/p>\n\n\n\n

The anatomy of a block <\/h2>\n\n\n\n

Each block consists of a Block Toolbar, a Block Settings Sidebar, and the Block Content. <\/p>\n\n\n\n

\"Anatomy
Anatomy of a block<\/figcaption><\/figure>\n\n\n\n

You can edit, customize or move each block independent of the other blocks on the post or page. <\/p>\n\n\n\n

The editing options in the Block Toolbar will vary based on the block you are currently editing. <\/p>\n\n\n\n

Each of the blocks comes with its own formatting settings in the Block Sidebar settings panel which gives greater control over the layout and the look and feel of the block.<\/p>\n\n\n\n

How to add a block<\/h2>\n\n\n\n

There are different ways to add blocks<\/a> to your post or page. You can add a block anywhere on the post or page using the + button (called the\u00a0Block Inserter)<\/strong>. You can also use the search feature to quickly find the block you want and add it to the post or page.<\/p>\n\n\n\n

Details on how to add a block to your post or page can be found here<\/a>.<\/p>\n\n\n\n

How to configure a block<\/h2>\n\n\n\n

Each block has its own set of tools to customize the layout and appearance of the block. <\/p>\n\n\n\n

Block toolbar<\/h3>\n\n\n\n

Select a block to reveal the Block Toolbar<\/strong> at the top of the block. <\/p>\n\n\n\n

\"Block
Block Toolbar for the image block<\/figcaption><\/figure>\n\n\n\n

The Block Toolbar includes the formatting options for the selected block. These options in the Block Toolbar will vary based on the block that is being inserted. <\/em><\/strong><\/p>\n\n\n\n

Some of the most common options in the Block Toolbar are as follows:<\/p>\n\n\n\n

Transform<\/strong>: Usually, the first option in the Block Toolbar is Transform (marked 1<\/strong> in the screenshot<\/a> below). This allows you to change the selected block into a list of other supported block types. <\/p>\n\n\n\n

\"Block
Block Toolbar options<\/figcaption><\/figure>\n\n\n\n

For example, if you add a Paragraph block and want to change it to a Quote block, Heading block, List block, or Pullquote block, clicking this icon will give you the options from the drop-down menu. <\/p>\n\n\n\n

The transform options will vary based on the selected block.<\/p>\n\n\n\n

<\/div>\n\n\n\n

When a block is transformed, the existing block styles are preserved after the block transformation.<\/p>\n\n\n\n

<\/div>\n\n\n\n

When a block is transformed, the additional classes added in the Additional CSS class(es) section under Advanced in the Block Settings sidebar are also preserved after the block transformation.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Drag<\/strong>: Click and hold the icon that looks like six dots (marked 2<\/strong> in the screenshot<\/a> above) to drag the block to another section of the page.<\/p>\n\n\n\n

Move up\/down<\/strong>: Click the up or down arrow(marked 3<\/strong> in the screenshot<\/a> above) to move the block up\/down one position on the page. Read more about moving the blocks<\/a>.<\/p>\n\n\n\n

More Options:<\/strong> The three vertical dots(marked 4<\/strong> in the screenshot<\/a> above) open a menu with additional settings that help to further customize the block. Read more about the More options<\/a>.<\/p>\n\n\n\n

\n

NOTE<\/strong>: When you click the three dots to the right of the Settings icon in the upper right corner and enable the View<\/strong> > Top toolbar<\/strong> option, the block toolbar is combined to the top of the WordPress block editor instead of appearing directly above the block.<\/p>\n\n\n\n

\"Block
Block toolbar combined to the top toolbar<\/figcaption><\/figure>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

Block settings<\/h3>\n\n\n\n

When you select a block, you will find additional settings in the sidebar to the right of the WordPress block editor. <\/p>\n\n\n\n

In the sidebar, you can switch between settings for the current post or page (marked 1<\/strong> in the screenshot<\/a> below) and settings for the selected block (marked 2<\/strong> in the screenshot<\/a> below).<\/p>\n\n\n\n

To show or hide the sidebar settings, click the icon at the top right of the editor (marked 3<\/strong> in the screenshot<\/a> below).<\/p>\n\n\n\n

\"Block
Block and Post\/Page settings in the sidebar<\/figcaption><\/figure>\n\n\n\n

The Post\/Page Settings<\/a> is where you can add tags and categories, choose a featured image, and more \u2014 these are settings that apply to the entire post or page.<\/p>\n\n\n\n

The Block Settings in the sidebar contain more advanced customization options for the specific block you\u2019re working on. Each block has its own settings that you can explore here. The settings will vary based on the block you are working.<\/em><\/strong><\/p>\n\n\n\n

\"Block
Block sidebar setting for Paragraph block<\/figcaption><\/figure>\n\n\n\n