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 …
Gutenberg Tutorials for StudioPress users
Gutenberg is a new and exiting post editor. My advice is, if you have a new website, or if your theme is fully compatible with Gutenberg, then consider using the Gutenberg editor.
If you have a well established website with a lot of pages or posts, test using Gutenberg on a back up of your site before switching from the classic editor to Gutenberg.
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 …
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 …
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 …
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, …