How to Use Block Editor in WordPress: Simple Guide

The WordPress block editor lets you build pages and posts by adding and arranging blocks like paragraphs, images, and videos. You use the + button to add blocks, then customize each block’s content and style directly in the editor.

Syntax

The block editor uses blocks as building units for content. Each block represents a type of content like a paragraph, image, heading, or list.

• + Button: Adds a new block.
• Block Toolbar: Appears above each block for formatting options.
• Sidebar Settings: Shows block-specific settings like color or alignment.
• Drag Handle: Lets you move blocks up or down.

html

<!-- Example of block editor content structure -->
<!-- Paragraph Block -->
<p>This is a paragraph block.</p>

<!-- Image Block -->
<img src="image-url.jpg" alt="Description" />

<!-- Heading Block -->
<h2>This is a heading block</h2>

Output

This is a paragraph block.
[Image displayed]
This is a heading block

Example

This example shows how to add a paragraph and an image block in the WordPress block editor.

html

<!-- Step 1: Click the + button to add a block -->
<!-- Step 2: Select 'Paragraph' and type your text -->
<p>Hello, this is my first paragraph in the block editor.</p>

<!-- Step 3: Click + again and select 'Image' -->
<img src="https://example.com/photo.jpg" alt="Sample photo" />

Output

Hello, this is my first paragraph in the block editor.
[Sample photo displayed]

Common Pitfalls

Some common mistakes when using the block editor include:

• Trying to edit content outside blocks, which is not possible.
• Not using the + button to add blocks and instead trying to paste content directly.
• Forgetting to save or update the post after editing blocks.
• Using too many nested blocks, which can make editing confusing.

Always use the block toolbar and sidebar for formatting and settings.

html

<!-- Wrong: Trying to type outside blocks -->
<!-- No content appears because block editor requires blocks -->

<!-- Right: Add a paragraph block first -->
<p>Now you can type your content inside this block.</p>

Output

Now you can type your content inside this block.

Quick Reference

Action	How to Do It
Add a block	Click the + button and choose a block type
Move a block	Drag the block using the drag handle or use arrow buttons
Edit block content	Click inside the block and type or insert media
Format block	Use the block toolbar for bold, italic, alignment, etc.
Change block settings	Use the sidebar panel for colors, size, and other options
Save changes	Click 'Update' or 'Publish' button to save your post or page

Key Takeaways

Use the + button to add different types of blocks for your content.

Each block can be edited and styled individually using the toolbar and sidebar.

Always save or update your post after making changes in the block editor.

Avoid editing outside blocks; all content must be inside blocks.

Use drag handles or arrow buttons to reorder blocks easily.