Adding a block
The add block icon (circled plus sign) adds blocks to your page. Use a block anytime you want to add content to your page or post. All content will be in a block.
You can find this icon in two places:
- In the toolbar at the top of the editor.
- When hovering your mouse near the top of an existing block. Selecting ‘add block’ here will insert a block above the block you are in.
Sorting through block types
Click on the add block icon, a menu displays prompting you to select your block type.
- Most Used is where Gutenberg houses the blocks that you use the most.
- Common Blocks features blocks that most WordPress users use often.
- Formatting Blocks help you deal with content that has specific formatting.
- Layout Elements are to help you format the text or appearance of your page. There are blocks for Columns, Separators, Page Breaks, See-Mores, and Media & Texts.
- Widgets house some helpful blocks for specific use cases including Shortcode, Archives, Categories, and Latest Comments or Posts.
- Embeds allow you to import content from elsewhere on the internet such as Twitter, YouTube, Facebook, Instagram, Spotify, WordPress, etc.
- Reusable Blocks is where you can store your own created blocks. For example, if you nest a ‘recent posts’ block inside a ‘column’ block and you like the way it looks, you can store this combination as a reusable block to add it to another page of your site without having to manually create and combine the pieces.
More on Blocks: WordPress Block Documentation
Blocks are highly customizable, and there are a few different places to look for these options.
You can tell block type from the first icon on the toolbar above the block. When you hover over this, the icon changes to reveal a pair of arrows prompting the user to ‘Change block type’.
The toolbar for a paragraph block has icons for text alignment, bold, italics, strikethrough, and links.
- “Hide Block Settings” will hide or reveal a sidebar to the right of the editor with additional options.
- “Duplicate” will create an exact replica of the current block.
- “Insert Before” and “Insert After” will either create a block above or below the current block.
- “Edit as HTML” will allow you to directly edit the HTML code
- “Add to reusable blocks” will put the selected block into your reusable block menu.
- “Remove block” will remove the block from the page.
Document/Block Settings Sidebar
The document/block settings sidebar can be toggled in two ways. You can either select “hide/show block settings” in the “more options” menu available in the block toolbar, or you can select the big X in the upper right-hand corner of the sidebar. To retrieve the sidebar after clicking the big X, you must select the setting cog in the upper right-hand corner of the page.
The block section of the document/block sidebar will look different depending on what block you have selected. For text blocks, you can change the font size, text color, background color, and drop cap (the first letter of the text block is large). For image blocks
The advanced options will let you edit your block with custom CSS code.