Gutenberg Archives - Philip Gledhill

CSS basics for Gutenberg and Atomic Blocks

Gutenberg and Atomic Blocks are styled differently on different themes. I used the Revolution Pro theme by StudioPress in my demo. The blocks will probably look different in your theme, especially if you have an older theme that is not specifically built for WordPress 5. CSS basics for Gutenberg and Atomic Blocks: A video tutorial … Read more

Revolution Pro theme by StudioPress

Revolution Pro is the first StudioPress theme to automatically set up the front page for you . You click a big blue button and WordPress sets up the front page just like the demo site. If you’ve watched the video you’ll already know how easy it is. Revolution Pro theme auto set up needs Gutenberg … Read more

Build a Simple Homepage with Atomic Blocks and Gutenberg

There are six videos on this page… Video 1: The Header Section Video 2: The Logos Video 3: Headline and Paragraph Video 4: The Case Studies section Video 5 : The Call to Action block Video 6: Width Settings To build this homepage we’ll be using both Gutenberg blocks which are built into WordPress 5 … Read more

Gutenberg Post Editor | The Basics

With WordPress 5 you now have the choice to use the new Gutenberg post editor. In this video I explain briefly how to use this new post editor.

Your first 5 minutes with the new block editor

This is important! Please read carefully!

/ use the forward slash

Access commonly used blocks by typing a forward slash as the first character in the block editor.

Moving to the new WordPress post editor

In the old post editor you could see the toolbar above the text you were editing. This was like a using word processor.

In the new block editor the toolbar is hidden.

Blocks available in the WordPress block editor

In WordPress 4 the post editor looked like a word processor.

You typed your text and then highlighted a section to apply formatting. For instance, you could make the text bold or display your text as list items etc.

When you type into the new block editor you see plain text. You do not see any formatting options until you hover your cursor over the specific block you’re editing.

WordPress Block Editor Settings

First we’ll look at the settings for the Cover block. The settings are similar to many other blocks.

Common Blocks

The best way to understand how a block looks is to see for yourself. So I’ve included some screenshots of the most commonly used blocks on this page. However! when I wrote this post, I was using the classic editor on this site, so to see some live examples of the block editor in use, … Read more

Gutenberg

CSS basics for Gutenberg and Atomic Blocks

Revolution Pro theme by StudioPress

Build a Simple Homepage with Atomic Blocks and Gutenberg

Gutenberg Post Editor | The Basics

Your first 5 minutes with the new block editor

/ use the forward slash

Moving to the new WordPress post editor

Blocks available in the WordPress block editor

WordPress Block Editor Settings

Common Blocks

About

Useful links

Site Search