Building blocks

Custom Blocks

Breadcrumb

Overview

blocks to build a site

Custom blocks are pieces of content that are created independently of a page. Think of them as building block components, or elements, that enhance the pages of a website. Once created, custom blocks will reside in the Custom Block Library. A single custom block can be placed on multiple pages. All custom blocks can be edited after creation. When an editor of the site updates a custom block, it updates on all pages the block is placed.

Why are custom blocks created separately from a page?
These blocks are typically more dynamic in function and have a unique design. A simple editing toolbar (WYSIWYG editor) would not cover the complexity of adding things like accordions or tabs. Many of these blocks have multiple form fields or the ability to add additional items that then transform using code into a nice "block" of content. Keeping these components as blocks allows editors to reuse this content on multiple pages and give them the ability to move the content around on a basic page.
Where do I find my custom blocks?
All custom blocks are located in a site's Custom Block Library. Editors and builders can navigate to Structure -> Block Layout -> Custom Block Library. This is where blocks can be edited and new custom blocks can be created. 
How do I add a custom block to a page?
On a Basic Page, within the Layout tab, clicking any of the "Add block" options will reveal a sidebar. This sidebar will list all custom blocks by their block description name. Additionally, builders have permissions to utilize Block Layout (under Structure) to add blocks to multiple pages at once and in different regions of the site. 

Creating Custom Blocks

To create a custom block, editors will use the admin toolbar to navigate to the custom block library. Once the custom block is created, it will be located in the site's Custom Block Library and will be available to place on any page.

  1. Navigate to Structure -> Block Layout -> Custom block library
    Screenshot of custom block library lab
  2. Click on the "Add custom block" button
    add custom block button
  3. Select the custom block type you would like to create

*When hovering over Block Layout, editors may also see the option to "Add custom block" within the dropdown. This should only be utilized by Site Builders if the block that will be created needs to reside on many pages and will not be in the primary content area of the site. For more information please see Using the Block Layout. 

Custom Block Types

For more information on each Custom Block type available, and exactly how to create one, select the Custom Block you are interested in creating from the list below. 

Button Bar

Need multiple buttons to display horizontally and be equal in width? A Button Bar displays links as buttons in a grid format. 

Dynamic Columns

Align content in up to 12 columns. The number of columns displayed can be varied based on viewport. 

Topics List

A block that displays a list of Categories or Tags from the Article Content Type.