Understanding WordPress Gutenberg Blocks

This article explains how to use WordPress Gutenberg blocks to add and arrange content on your website.

What Are Gutenberg Blocks

Gutenberg blocks are individual pieces of content in WordPress. Each paragraph, image, button, or heading is a separate block. Think of blocks like building bricks - you stack them together to create your page.

When you edit a page in WordPress, you're working with the block editor. Each time you press Enter, WordPress creates a new block.

Adding Your First Block

1. Open your WordPress admin dashboard and go to Pages or Posts
2. Click "Add New" or edit an existing page
3. Click anywhere in the main content area
4. Start typing to create a paragraph block, or click the "+" button to see all available blocks
5. Choose your block from the list (Paragraph, Heading, Image, etc.)

Common Block Types You'll Use

Paragraph Block: For regular text. This appears automatically when you start typing.

Heading Block: For titles and section headers. Choose from Heading 1 (largest) to Heading 6 (smallest).

Image Block: To add photos. Click "Upload" to add images from your computer or "Media Library" for existing images.

Button Block: Creates clickable buttons that link to other pages or websites.

List Block: For bullet points or numbered lists.

Spacer Block: Adds empty space between other blocks.

Moving and Arranging Blocks

1. Click on any block to select it
2. Use the up and down arrows that appear to move the block
3. Or click and drag the six-dot handle to drag blocks to new positions
4. Click the three-dot menu on each block for more options like duplicate or delete

Customising Block Settings

When you select a block, you'll see options in the right sidebar:

• Block settings: Change colours, alignment, and spacing
• Typography: Adjust text size and font weight for text blocks
• Dimensions: Set width and height for images and other blocks

Each block type has different settings available.

Grouping Blocks Together

1. Hold Shift and click to select multiple blocks
2. Click the "Group" button that appears
3. This creates a container around your blocks so they move together
4. Useful for keeping related content (like an image and caption) in one section

Saving Your Changes

Click "Update" (for existing pages) or "Publish" (for new pages) in the top right corner. Your changes won't appear on your live website until you save.

For more detailed guidance on editing your pages, see our guide on using the WordPress block editor.

If you're still stuck, contact Web60 support through your account dashboard and we'll help you get your content looking exactly how you want it.

FAQ

Q: How do I delete a block I don't want?

A: Click on the block to select it, then press the Delete key on your keyboard. Or click the three-dot menu on the block and choose "Remove Block".

Q: Can I change a paragraph into a heading?

A: Yes. Select the block and click the block type button (usually shows "Paragraph") in the toolbar. Choose "Heading" from the dropdown menu.

Q: Why can't I see the block settings sidebar?

A: Click the settings gear icon in the top right corner of the editor. This toggles the sidebar on and off.

Q: How do I add two columns of text side by side?

A: Add a "Columns" block from the block menu. Choose how many columns you want, then add your content blocks inside each column.

Q: Can I copy blocks from one page to another?

A: Yes. Select the block, click the three-dot menu, and choose "Copy". Go to your other page and paste it where you want it.

Q: What's the difference between saving as draft and publishing?

A: Draft saves your work but doesn't make it live on your website. Publish makes the page visible to your website visitors.