Tip: Click the links below to jump to the different sections.
The block editor allows you to create posts differently. It allows you to create more complex post layouts in WordPress. But first, let's go over a quick tour of the interface:
- (A) - Add new blocks
- (B) - Undo/Redo Buttons
- (C) - Document settings
- (D) - Block settings specific to that block
- (E) - Preview/Publish your posts
To add new blocks to your post, click the +Plus icon and select the type of block you wish to add. Blocks will be divided into sections, at the top you will find the Most Used blocks:
If you scroll down, you will see the different sections in which blocks are categorized:
- Inline Elements - Inline image
- Common blocks - Paragraph, Cover, Image, Heading, Gallery, Audio, List, Quote, FIle, Video.
- Formatting - Code, Classic Editor, Custom HTML, Preformatted, Pullquote, Table, Verse.
- Layout Elements - Button, Columns, Media & Text, Page Break, Separator, Spacer, More.
- Widgets - Short Code, Archives, Categories, Latest Comments, Latest Posts.
- Embeds - Embed content from Youtube, Spotify, Facebook, Twitter, Instagram, etc.
The block editor includes a feature that allows you to create different columns. All you need to do is to add the Columns block from the Layout Elements category.
You can also insert other blocks inside it.
You can increase or reduce the number of columns by changing the number in the Block settings tab
Once you're finished, click the Publish button.
You can control the content in the body editor. You can also control the styling of the text by using the menu bar that appears when you hover over a block.
For more advanced styling, you can use the Block settings tab to change the font size, text and background color.
You can also make the first letter of the text a large initial letter by activating the Drop Cap feature in the Block settings tab.
Once you're finished, click the Publish button.
Your old content will not disappear! However, the experience is a little bit different. The block editor will put all the old content into a single Classic Block. The Classic block is basically the old TinyMCE editor, but embedded inside the new editor.
To work with your old content you can:
- Leave it as a Classic block and edit it like in the old editor
- Use the Three dots icon and select Convert to Blocks. This will break it into individual blocks and you'll be able to edit it with the new block editor.
You can edit the source code for a post by clicking on the Three dots icon in the top-right and then select Code Editor
Once you're finished, click the Publish button.
To rearrange blocks you can use the Up or Down arrows when hovering over a block.
Or, you can also drag and drop blocks. To activate the drag and drop functionality, you'll need to hover over the Six dots between the arrows and click, then drag and drop.
Once you're finished, click the Publish button.
You can create tables using the block editor. Click on the + icon to add a new block. Choose Tableunder the Formatting category.
Choose the number of rows and columns for your table, then click the Create button.
If you wish to delete or add more rows/columns, click the Edit tableicon and select to add or delete rows/columns.
You can add buttons to your posts and pages. Click on the + icon to add a new block and select Button from the Layout Elements category.
Add text and enter the URL to link your button to another page, post or website.
You can also change the background color and text color in the Block settings tab.
Also, you can change its shape by clicking the Change block typeicon, and selecting your preferred shape.
You can embed content from other websites. To do so, simply click the + icon to add a new block, then select any from the Embeds category.
Once you have selected the type of content you want to embed, enter the URL and click the Embed button.
Once you're finished, click the Publish button.