WordPress: Using Patterns and Blocks

Learn when to use Patterns from the Pattern Library and when to use basic blocks in the WordPress editing environment for the University of Southern Maine's public website .

Table of contents

• Definitions
• Overview
• Add a pattern
• Approved basic blocks
• Pattern Library list
• Special request patterns

Definitions

• Basic blocks: Default pieces of content that may require customizations to meet branding and accessibility compliance; find out which basic blocks are approved to use without a pattern 
• Block Inserter: Button used to find a new pattern or block and then add it to a page
• Greeked text: Nonsense text that often includes "lorem ipsum" or other Latin words as a placeholder; read the Wikipedia entry 
• List view panel: A nested, structural view of all blocks on the current page (formerly called the "Page tree")
• Pattern: A customized display of one block or a group of blocks with placeholder images and greeked text
• Pattern Library: An approved group of Patterns available for page content display — except the "Admin Only" categories, which are strictly for use by the Marketing team
• Placeholder: Text or images used to hold space in a Pattern and provide an example of the ideal word or character count and image size for that specific Pattern
• Row Layout: A top-level block that uses Sections to provide structure for page content
• Section: A block that helps provide structure for page content
• Settings panel: Displays available settings for either the overall page or one selected block (check the "List view" panel to verify your selection)

Back to top 

Overview

Basic blocks are the smallest pieces of content on your page. Think of blocks like the individual parts of a new piece of flat-pack furniture you need to assemble yourself (i.e., IKEA or Wayfair). You have a general idea of what you're supposed to do, but when you look at the instructions, you realize it takes a lot of work to make the parts into a usable structure.

Patterns are pre-designed blocks with placeholder content. Think of patterns like the professional assembly option for flat-pack furniture (at no extra charge!), where someone else takes the time to ensure all the pieces are put together correctly, providing you with a ready-to-use piece of furniture.

Of course, there are times when you can use some of the basic blocks on their own , but this is where the flat-pack furniture metaphor falls apart. Blocks are most often used alone when adding paragraph content to a page that only requires headings and maybe a simple image or two (like a News Post). When you start adding lists, tables, accordions, calls to action, etc., you need to use the Pattern Library .

The Pattern Library is a collection of categorized Patterns — built by either US:IT or the Marketing team at USM — with instructional or greeked text and placeholder images you will need to replace with your own content. In some cases, Patterns have an optional heading or paragraph/text block that can be removed at the Section or Column level.

Patterns are maintained by the Marketing team and updated as needed, so make sure to always pull new Patterns from the Pattern Library instead of duplicating elements already on your pages.

Back to top 

How-to: Add a new Pattern

Step 1: Use the block Inserter

If you don't have an empty paragraph block, add one and make sure it's selected. Then click on the block Inserter, which is the blue button with a plus sign in the top left corner of the page.

Step 2: Open the Pattern Library

By default, the block Inserter displays the "Blocks" tab. Click on the 'Patterns" tab to display a list of categories. This is the Pattern Library.

Step 3: Select a category and a pattern

Browse through the categories to find the pattern that best fits your content needs.

Click on a category and hover over the thumbnail images to see the Pattern titles. Click once on a Pattern to insert it into your page or post.

In the pictured example, we're selecting the accordion Pattern (click on the image thumbnail to see the full-sized version).

Step 4: Add your content to the Pattern

After placing a pattern, you can add your content. By default, each pattern includes greeked text to help you understand where to add your content and the ideal word or character count to use for the space. All placeholder or greeked text needs to be replaced or removed. Depending on the pattern, there may also be a placeholder image that will need to be replaced with one of yours.

If you are copying and pasting from another application — Word, Google Docs, email, etc. — make sure to use the "Paste and Match Style" option (language may vary slightly by browser) to paste your text into WordPress. If you don't use this specific paste option, hidden code may be carried over, changing how the content displays or even breaking the Pattern. 

In some cases, you can remove parts of a Pattern that don't serve your content needs. For example, you may not need a text block or a heading block above your accordion set.

It's not enough to delete the text within a "Section" or "Column" block; you need to remove the entire "Section" or "Column". Patterns are fully labeled in the List View panel, as shown in the example (click the image thumbnail to see the full-sized version), to help you identify what to remove.

Step 5: Delete the optional intro text

In some patterns, you can remove the introductory heading and paragraph text, or just the paragraph text, depending on your needs. However, you must delete these blocks at the Column or Section level to maintain the Pattern's integrity.

Do not delete the heading and keep the paragraph text; use the heading to introduce the contents of your accordion.

Back to top 

Approved basic blocks