• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    Beginner’s Guide to Gutenberg Blocks

    July 5, 2022 by ProfK 2 Comments

    WordPress replaced the classic editor a few years ago with the Gutenberg block editor. I encourage you to start using it! The original classic editor behaved similarly to a word-processing program: the words and images got placed inside one, long, continuous edit field. With Gutenberg, each type of content has its own block: heads, paragraphs, images, quotes, lists, etc. It’s a more modular system, very flexible and easy to style. In this tutorial, I’ll introduce you to the basic Gutenberg blocks so that you’ll be able to edit existing pages and posts, and create new documents.

    The Lay of the Land

    Let’s get a sense of where everything is and how to find Gutenberg block-related features and options. At the very top of a post or page (moving from right to left), you’ll find icons for Options (set of 3 vertical dots), Settings (gear), and List View (set of 3 horizontal bars). Getting familiar with each of these will help you feel more comfortable using Gutenberg.

    Lay of the Land - Top of Page
     

    Options (set of 3 vertical dots)

    3 dots options

    There are 2 important sections: VIEW and EDITOR.

    VIEW

    The VIEW section is all about your preferred layout while writing and editing. You can choose where to position the block and document toolbar. Explore all of the options! You can select none, one or multiple combinations. You can change your selection at any time.

    • Nothing selected – toolbar sits at the top of the block you are working on
    • Top toolbar – sits at the top of the editing area
    • Spotlight mode – highlights the block you are working on
    • Fullscreen mode – hides the left sidebar (site navigation area)
    EDITOR

    The EDITOR section lets you edit the entire post or page visually (default) or with code. It’s perfectly fine to just stay with the Visual editor, which displays the content somewhat accurately in terms of size and colors. But, if you are more adventurous, you can switch to the Code editor and change things there. You’ll learn a lot!

    Remember, the EDITOR section is for the entire post or page. If you want to view the code for one block only, there’s an option for that in the toolbar called Edit as HTML. We’ll talk more about that later in the tutorial.

     

    Settings (gear)

    The Settings gear offers you the choice of displaying or hiding the right sidebar. The gear toggles “on” and “off”: click once to display, click again to hide. Very simple. There are two tabs in the right sidebar: Post (or Page) and Block.

    Gear Settings for Post
    Gutenberg sidebar – Post (or Page) tab
    Right Sidebar: Post (or Page)

    The Post/Page tab provides options that pertain to the entire post or page: status and visibility, publishing date, author, permalink, metadata (categories and tags), etc. In addition, plugin areas are displayed in this sidebar.

    Right Sidebar: Block

    The Block tab is where you find the settings for the specific block you’re working on. So, these settings vary depending on the block that is selected. But, they’re mostly related to styling (color, size, font). HTML anchors and CSS classes can be used in the Advanced section at the bottom of the Settings sidebar.

    Gear Settings for Gutenberg Block
    Gutenberg sidebar – Block tab
     

    List View (set of 3 horizontal bars)

    The List View is an outline of the content and a super helpful navigational tool. It’s a visual representation of the parent / child / grandchild relationship of the Gutenberg blocks. I’ve found it particularly useful when I need to find a specific block that’s embedded inside another block. Like the Settings (gear) icon, the List View icon is a toggle “on” and “off” switch.

    3 bars list view of Gutenberg blocks
     

    Add Blocks

    • Hitting the Enter (Return) key will end the current block and generate a new, empty Paragraph block with the prompt “Type / to choose a block“. If you want to stay in the current block, hit Shift/Enter (Return).
    • Hovering below an active block will activate the “Add block” plus icon. Clicking on the plus icon opens a menu showing a pared-down set of common blocks.
      • Select one of the options or
      • Type a keyword inside the “Search” field or
      • Click on “Browse all” to see the full list of blocks

        Add Block - click on plus sign
    • The “Add block” plus icon resides at the top, left side of all document windows. You can always go directly to that symbol, click on it, and see the entire list of blocks. The plus symbol changes to an “x” when the list is displayed, then reverts back to a plus symbol when the list is closed.
    Top of window Add Block Plus Sign
    “Add block” plus icon at top of each document window
    List of Gutenberg blocks
    Full list of blocks

    Insert Blocks

    This is pretty similar to Add Block, yet a bit more flexible. This tool is accessed via the block Toolbar. Click on the 3 vertical dots and scroll down to “Insert before” or “Insert after“. The new block will be inserted either above or below the current, active block. Sometimes, it’s a little easier to Insert rather than Add.

     

    Common Gutenberg Blocks

    Default Gutenberg Block – Paragraph

    The Paragraph Block is the default. When you start typing, without designating any kind of block, you’ll be using the Paragraph block. The toolbar offers a standard set of formatting gizmos described later in this tutorial, in the Basic Ways to Use Gutenberg Blocks > Style section.

    The attributes that can be changed in Gutenberg’s right sidebar (Settings > Block tab) are more advanced and include color (for both text and background) and typography (size, weight, lettercase, letterspacing, and Drop caps). Additional modifications can be applied in the Advanced section > Additional CSS class(es).

    Heading

    There are 6 levels of heads. The H1 head is the largest and should only be used for the main heading (title of the page). The heads gradually decrease in size as their tag numbers increase, so that H2 is the second largest, H3 is the third largest, etc. H6 is the smallest. Usually, headings are bold, but the styling depends on the theme.

    H2 Heading Example

    H3 Heading Example

    H6 Heading Example

    List

    Once you select the List block, there are 2 kinds of lists to choose from: unordered (bullets) or ordered (numbers). The style of the bullet is theme-dependent (the default is a black circle). You can switch from one kind of list to the other.

    • Bullet list item number 1
    • Bullet list item number 2
    • Bullet list item number 3
    1. Ordered list item number 1
    2. Ordered list item number 2
    3. Ordered list item number 3

    Quote

    I thank you God for this most amazing day, for the leaping greenly spirits of trees, and for the blue dream of sky and for everything which is natural, which is infinite, which is yes.

    e. e. cummings

    Pullquote

    I thank you God for this most amazing day, for the leaping greenly spirits of trees, and for the blue dream of sky and for everything which is natural, which is infinite, which is yes.

    e. e. cummings

    Image

    The Gutenberg Image block presents 3 ways to insert an image: Upload, Media Library, and Insert from URL. The default alignment is None, which can cause some problems. So, I advise that you choose Align left, Align center, or Align right. Lastly, there is a styling feature for duotones (2-colors). The original image stays intact for use elsewhere. Some very attractive results can be achieved; an example is shown below.

    Gutenberg block for Image - insert options
    Image insert options
    Gutenberg Image block - alignment options
    Alignment options
    Gutenberg Image block - duotone
    Apply duotone filter
    Azaleas and Cypress at Auburn Lake
    Azaleas and Cypress at Auburn Lake
    Azaleas and Cypress at Auburn Lake
    Azaleas and Cypress at Auburn Lake

    Buttons

    Once you choose from one of the 2 styles for buttons (fill and outline), the toolbar offers the standard formatting gizmos (see Basic Ways to Use Gutenberg Blocks > Style). There is also an assortment of advanced options in Gutenberg’s right sidebar (Settings > block tab).

    Button with Fill
    Button with Outline

    Columns

    I like this block a lot, because it makes easy work of page layout and is very adjustable. There are a variety of ways to divide the page width. You could even build columns inside other columns. Mobile responsiveness is built into the code, so the column widths change when necessary on smaller devices.

    Columns options
    Columns options

    Spacer

    The spacer block is especially useful when you want to add space above or below a block. Spacing is generally controlled by the theme and the stylesheet. You could, of course, modify the stylesheet. But, the spacer block is a fast way to accomplish what you need without any fuss. The default height is 100px. You can readily adjust the height by dragging the bottom of the spacer block or inputting a new number into the sidebar’s height field.

    Spacer block
    Spacer block
     

    Basic Ways to Use Gutenberg Blocks

    All of the scenarios described below make use of the block toolbar. Select a block to display the toolbar for quick access to the most common options for that block.

    Style

    For more advanced styling, go to the Settings > block tab area we discussed earlier. Basic styling of individual blocks is available in the tool bar:

    • Alignment
    • Bold, Italic, and Bold Italic
    • Hyperlinks
    • Dropdown menu for highlight, inline code, inline image, keyboard input, strikethrough, superscript and subscript
    Toolbar - text alignment
    Toolbar – style options
    Toolbar - more tools
    Toolbar – more block tools

    Move Gutenberg Blocks

    Moving blocks is really easy with Gutenberg. Use one of 4 methods:

    • Press the up or down arrow icon
    • Click and drag on the set of 6 dots
    • Click on the set of 3 vertical dots and select “Move to“. A bar will appear above the block. Use the up/down arrows ON YOUR KEYBOARD to move that bar. When you arrive at the new position for the block, hit “Enter” key. You can also use “Move to” to active the click and drag technique.
    • In List View, click an item and drag to a new location
    Toolbar - drag and move
    Toolbar – drag and move

    Copy / Duplicate Gutenberg Blocks

    These 2 features are accessed via the set of 3 vertical dots. They are similar yet different.

    • Copy – copies the block into the clipboard. You then paste (CNTRL-V / CMMD-V) it anywhere you want, in the current document or another page.
    • Duplicate – makes an exact copy of the selected block and places it directly underneath the original block.
    Toolbar - 3 dots dropdown
    Toolbar – 3dots – more settings

    Edit as HTML

    There are a LOT of blocks, but sometimes you just need to use HTML code to tweak something and/or get the right results. You should be familiar with code to use this correctly. If you make a mistake, WordPress will prompt you to “Attempt Block Recovery“. This tool is found under the toolbar’s 3 vertical dots. Situations where you would use the Edit as HTML feature:

    • Style a block with multiple classes and/or IDs
    • Embed a block within another highly-stylized block
    • Use code provided to you by a vendor or developer

    Removing Blocks

    You could remove a block the old-fashioned way, by selecting its contents and hitting “Delete”. Or you could, instead, select the block you want to remove, click on the 3 vertical dots at the end of the toolbar, scroll down to and click “Remove xyz (name of block)“.

    Change Block Type or Style

    This is a limited feature and works only with a few blocks. To transform a block into a different kind of block, click on identifier symbol on the left side of the toolbar. The dropdown list of items you can transform to varies, depending on the current block. You may need to just add or insert a new block, then copy and paste what you want to clone.

    Transform block to...
    Toolbar – Transform To
     

    Publish Your Post (or Page)

    When you are finished creating your post (or page), it’s time to publish! It’s a 3-step process:

    • Click the “Publish” button on the top-right of the screen
    • A checklist will pop in from the side of the screen. Make your selections.
      • Visibility: Public, Private, Password Protected
      • Publish: Immediately (default) or schedule a date
    • Click the “Publish” button on the pop-in checklist
     

    Great Block Plugins!

    Plugins that I really like:

    • Kadence Blocks – block library with advanced styling settings for std. blocks (space, buttons, rows), design library.
    • Genesis Blocks (formerly Atomic Blocks) – block library with page-building (section, layout, container), full-width, advanced columns, dropcap.
    • MetaSlider – single-purpose: responsive sliders; easy configuration.
    • Modula – single-purpose: highly customizable lightbox image galleries.

    Any plugins that you recommend?

    Tell us about plugins that you’ve used and would recommend in the Comments section below. Thanks!

     

    Video Tutorial

    If you prefer, you can watch the video tutorial I made that shows all of the features and tools discussed in this blog post:

    VIEW VIDEO!
     

    Upcoming and Current Events

    Beginner’s Guide to Gutenberg Blocks

    Jan. 19, 2023 • 7–9 PM EST
    Anne is presenting this topic at the Philadelphia WordPress Meetup

    —–

    RSVP and details are on the MeetUp site:

    Beginner’s Guide to Gutenberg Blocks
     

    Related Posts

    Changing the Text Color in WordPress
    Wrapping Text Around an Image in WordPress Gutenberg
    4 Ways to Create Columns in WordPress
    How Can I Change the Typeface in WordPress?

    Filed Under: WordPress Tagged With: block editor, Gutenberg, Gutenberg blocks

    Reader Interactions

    Comments

    1. Beverly says

      September 26, 2022 at 1:54 am

      Great Job. I have been trying to understand the Block Editor in WordPress for years!
      Your article was so concise and clear, I finally feel confident that I can create a new website with Gutenberg Blocks on WordPress. Thank you so much!

    2. ProfK says

      September 27, 2022 at 8:06 pm

      You are quite welcome, Beverly. Thanks for taking the time to provide feedback, I appreciate it!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    WP Engine
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Built on the WordPress Genesis Framework · Customization and design by ASK Design