Block Catalog

This section covers the various components you can use to structure your web pages. Keep in mind that your page may look different on various devices when adding content to a website. What might look good on your desktop in the office may appear completely differently–and may even be difficult to read–on a phone. This is especially important for large detailed images.

What is a block?

A block is a reusable design pattern that, with other types of blocks, can be used to create a web page. Similar to how newspapers organize their content for publications, a block contains content that shares a common look and feel throughout a website whenever a type of block is used. Examples of blocks include a paragraph, heading, news, and highlight, just to name a few.

Why is it useful to design in blocks?

Designing in blocks is a form of modular design. Modular design has been used in other fields of work. The practice has been used in print publications, architecture, and in the automotive business. For the web, the benefits of thinking modular are:

Adding and Editing Blocks

When creating a new page or post, there will be a default paragraph block in the editor that says, “Type / to choose a block”. To add a new block, you can either click on the “+” in the upper left-hand corner of the page, or the “+” to the right of the default paragraph block in the editor. From there, you can choose from a variety of blocks to add to your page.

View of Gutenberg editor with red outlines around the "add block" button and the block search menu.

You can also hover on blocks you have already created to make additional blocks. If you hover on a block you’ve already created, a “+” will appear, allowing you to add a new block.

Each block has its own edit options. For more information on how to edit specific blocks, explore our block catalog.

Deleting Blocks

To delete a block, click on the block you wish to delete in the editor. From there, click on the “More Options” button, which looks like three vertical ellipses. Select the “Remove Block” option to delete your block.

View of the WordPress editor with the block options open. The remove block option is highlighted in a red box.