Wordpress - Block Editor

Table of Contents

Quick Tour

Add Blocks

Create Different Columns

Customize Blocks

Old Posts

Code Editor

Rearranging Individual Blocks

Switching to Classic Editor

Creating Tables

Creating Buttons

Embedding Content

 

Quick Tour

The block editor allows you to create posts in a different way than the classic editor. It allows you to create more complex post layouts in WordPress. But first, lets 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

Return to Table of Contents

Add Blocks

In order 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.

 

Return to Table of Contents

Create Different Columns

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.

Return to Table of Contents

Customize Blocks

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.

 

Return to Table of Contents

Old Posts

 

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.

Code 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.

 

Return to Table of Contents

Rearranging Individual Blocks

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.

Return to Table of Contents

Switching to Classic Editor

If your WordPress editor is configured as a Block editor by default, you can switch it back to the old Classic editor. To do so, go to Dashboard, then hover over Settings and select Writing.

 

Switch to Classic Editor in the "Default editor for all users" section.

Click the Save Changes button.

 

Return to Table of Contents

Creating Tables

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.

 

Return to Table of Contents

Creating Buttons

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.

 

Return to Table of Contents

Embedding Content

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.

Return to Table of Contents

Details

Article ID: 146597
Created
Wed 9/14/22 11:48 AM
Modified
Mon 12/5/22 9:55 AM