CSS basics for Gutenberg and Atomic Blocks

Before you start this CSS basics for Gutenberg tutorial, visit my demo page that goes with this tutorial. 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 … 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. I like Revolution Pro theme so much that … 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.

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.

Read more

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