• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Gutenberg: The Block Editor Basics / Common 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, …

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, see one of my other sites…

Live Site Using WordPress 5 And Gutenberg Blocks 

This is a screenshot of a Cover block

Screenshot of a Cover Image block in Gutenberg
Screenshot of a Cover Image block in Gutenberg

Cover block width settings

The cover block can be set to…

  • Full browser width
  • Wide width
  • Align centre

If your theme does not support full browser width, the block will not span from edge. Even if you select the full width option.

Only a few blocks have a width option

Most blocks only have the align centre option. Luckily you can use your own common sense to work out if a block will have the full width option.

Ask yourself, would this block look better if it spanned the whole browser window?

This is a screenshot of a pullquote. The styling depends on your theme.
This is a screenshot of a pullquote. The styling depends on your theme.

For instance…

  • Would a paragraph look better if it spanned the whole browser window?
  • No it would be difficult to read.

And no, paragraph blocks do not have the full width option.

Most of the time, using common sense, you can guess if wider width options are available.

This is a quote. Not a pull quote. Normal quotes do not have a width option.

This is a screenshot of an image gallery

This is a screenshot of an image gallery taken from a Gutenberg enabled page.
This is a screenshot of an image gallery taken from a Gutenberg enabled page.

The layout of a gallery block will change depending on the number of images in the gallery and the size of the device used to view the page.

This is a three column layout

You can put headline, paragraph, image, button and list blocks inside each column.

Screenshot of a three column layout taken from a Gutenberg enabled page.
Screenshot of a three column layout taken from a Gutenberg enabled page.

Media and text

The media and text block is a simple way to place an image to the left and text to the right on a single row. You can place the image on the right if you wish. You can also set the image to stack on mobiles. I can’t do that here, because I built this page using the classic editor.

Screenshot of a media and text block taken from a Gutenberg enabled page.
Screenshot of a media and text block taken from a Gutenberg enabled page.

More options in WordPress 5

The blocks I’ve demonstrated on this page are the most commonly used blocks. However, there are several other blocks built into WordPress 5.

And more blocks can be added

Blocks are a new addition to WordPress. But already theme and plugin developers are adding their own blocks to their new creations. For instance, the Atomic Blocks plugin adds several useful blocks to WordPress. Including a call to action block and a post grid block.

WordPress 5 and the new block editor is a new beginning for WordPress. And I’m exited to see where this takes us.

Where to find more blocks

The WordPress plugin repository is a great place to start looking for more blocks to add more power to your WordPress editor. One of my favorite block plugins is Atomic Blocks.

And don’t forget, you can see some live examples of pages I built using the block editor here.

Category: Gutenberg: The Block Editor BasicsTag: Gutenberg

About Philip Gledhill

Previous Post: « Business Pro Theme Setup Guide Business Pro Theme Setup Guide
Next Post: WordPress Block Editor Settings »

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top