Block Types

Block Types

Sections

Adding Blocks to your Page

  1. To add a new block, Type ’/’ in the text area or click on the blue ‘+’ icon in the upper left corner.

    image-20250103-155712.png

    *There are a few other ways to add blocks that will be mentioned in the next section

  2. When you click on the blue ‘+’ icon, a menu from the left side opens. From here, you can search for and add blocks and media from your media library.

  3. You can either click the block you want to add, or drag and drop it to your preferred location.

Gutenberg-Blocks-AddingBlocks.mp4

 


Images

  1. When adding an image block, have the option to either ’Upload’ an image, ’Insert an Image’s URL’, or choose one from the ’Media Library’.
    *You should add ’Alt text’ to all of your images to meet web accessibility standards.

  2. Once your image is added, you can modify its properties(such as Aspect Ratio, dimensions, and resolution) by using the block settings menu that appears on the right side.

  3. You can edit other settings, such as the alignment, cropping and hyperlink by selecting the image and using the sub-menu that appears above it

  • Tip 1: You can also add new blocks by hovering your mouse above or below existing blocks and selecting the blue ’+’ icon that appears:

  • Tip 2: You can use the slanted hamburger menu to re-arrange blocks via drag-and-drop

    image-20250103-160015.png
  • Tip 3: Another way to add new blocks is to click on the black and white ‘+’ that appears on the right side of an existing block

    image-20250103-160027.png

 

Gutenberg-Blocks-Images.mp4


Columns

  1. When adding columns, you can choose between [100], [50/50], [33/66], [66/33], [33/33/33], and [25/50/25].

  2. Once your columns are added, you can enter into each column by clicking on the box with the ’+’ icon within it, and adding blocks into them.

  • Tip 1: You can nest columns within each other to create more complex layouts.

Gutenberg-Blocks-Columns.mp4


Tables

  1. The ’Table’ block allows you to generate basic tables.
    *For more customized tables, see info on the ’WP Data Tables’ plugin.

Gutenberg-Blocks-Tables.mp4


Lists

  1. The ’List’ block allows you to add unordered and ordered lists. To add an unordered list (with dot points), type your first item within the list component and press the ’enter/return’ key to jump to the next item.

  2. To add an ordered list item(numbered list), open a ’Paragraph’ block and type ’1.’, add your item, and press the ’enter/return’ key to jump to the ordered item.

Gutenberg-Blocks-Lists.mp4


Buttons

  1. Buttons allow your links to stand out. The ’Button’ block allows you to add multiple buttons, by clicking on the black and white ‘+’ icon, that appears on the right side of the block.

  2. You can modify the width of your buttons to a percentage of the screen width within the settings side menu, and set the button’s link within the sub-menu that appears above the selected button.

    image-20250103-160309.png
Gutenberg-Blocks-Buttons.mp4


Separator

  1. The Separator block allows you to add a page divider to horizontally divide different sections of content. You can choose a solid line or three dots.

Gutenberg-Blocks-Separator.mp4


Accordion

  1. When adding an accordion block, the black and white ‘+’ icon will appear on the left side of the component. Click on it to add the initial accordions.

    image-20250103-160453.png
  2. Once you insert an accordion, an outline containing fields for the accordion’s title and content will appear. After the initial accordion is added, the following accordions can be added using the black and white ‘+’ icon that appears on the lower-right side of the component.

  3. You can format your text content and add links within the accordion, but not the HTML.
    *Anchor tags can be added to accordions through the left-hand settings panel

Gutenberg-Blocks-Accordion.mp4


Callout

  1. Callouts allow you to create an attention grabbing block of text with a call to action.

  2. You have the option to use a button in your callout, via the settings panel.

Gutenberg-Blocks-Callout.mp4


Posts

  1. To create a post, go to your admin dashboard, click on the ’Content’ menu item on the left navigation bar, hover over ’Posts’ and select ’Add New Post’

  2. Posts only allow use of the Paragraph, List, Image, and Button blocks.

  3. Within the right side settings menu, you can assign posts to specific categories via the check boxes and create new or nested categories by clicking on the ’Add New Category’ button

  4. You can then add your posts to your page by inserting the ’Latest Posts’ block. You can specify the look of your posts and filter them by category by using the right hand settings menu.

Gutenberg-Blocks-Posts.mp4


Shortcodes

  1. Shortcodes can be added by either selecting the ’Shortcode’ block, or by typing the shortcode into a paragraph element.
    *You can enter a variety of shortcodes via the shortcode plugin including Gravity Forms, Events, WP Data Tables, and documents.

  2. When adding a shortcode to list your ’Events’ use this reference page for ways on how to customize what’s displayed.

Gutenberg-Blocks-Shortcodes.mp4