Blocks are chosen based on the content needs while also considering flow and varied visual design throughout the page. The goal is to present information clearly and cleanly – making it easy for the user to learn what they need, while also having a delightful experience.


General Block Design Standards

There may be additional options or limitations depending on the specific block. The MarComm team reserves the right to make exceptions to these standards if necessary.

  • Buttons (all Blocks): up to 2
  • Carousel: 10 images max
  • Content Blurbs (all Blocks, except Paragraphs & Accordions): 1-3 sentences, 250 characters max
  • Headings (all Blocks): 3-5 words max
  • Secondary Navigation Panel: 8 links max
  • Tabs: 2 min, 3 max
  • Testimonials: 10-15 words
  • Visual Routers: 6 images or videos max


WSU Custom Blocks

Webpages are built primarily using WSU Custom Blocks. Many Custom Blocks have additional design choices such as

  • Background and Text Colors
  • Icons or Line Art
  • Images or Videos
  • Links


Several Custom Blocks have sub-variants that serve specific types of content, such as testimonials or story features. 


The most frequently used block is the Panel because it provides a container for other block types. Without a Panel, these blocks will not display the proper formatting styles.


 A Panel can have a white or a purple background, and this will dictate design choices for the nested blocks. 


For a Full-Width layout, blocks must be nested within a Panel—unless otherwise noted as standalone blocks. For a Two-Column layout, it is optional to nest blocks within a Panel—unless it is noted that a Panel is required.


Custom Block

Sub-Variants

Panel Required

Page Layout Options

Accordion

None

Yes, if Full-Width

Optional, if Two-Column

Full-Width

Two-Column

Block Grid

Feature Grid 

Click-to-Action Grid

Yes

Full-Width

Contact Card

None

Yes

Full-Width

Two-Column

CTA Button

None

Yes, if Full-Width

Optional, if Two-Column

Typically added within another Block type as well

Full-Width

Two-Column

CTA Panel

Standard

Inset Mode

No

Full-Width

Feature Block

Feature

Testimonial

Event

Contact (retired)

No

Two-Column

Hero Panel

None

No

Full-Width

Juicer Panel

This is a specialized block to provide a social media feed from the Juicer plugin with limited use-case across the site 

No

Full-Width

Justified Feature / CTA Grid

CTA Blocks

Feature Blocks – Standard

Feature Blocks – Flip Grid

Yes

Full-Width

Panel

None

No

Full-Width

Two-Column

Pin Slider

This is a specialized block to display images, quotes, text and links in a vertical slider. This is used on the Homepage with limited use-case across the site.

No

Full-Width

Ninja Tables

This is a specialized block to provide a data table sources from the Ninja Tables plugin. This is the standard method to build tables. 

Yes, if Full-Width

Optional, if Two-Column

Full-Width

Two-Column

Secondary Navigation

None

No

Full-Width

Single Feature

None 

Yes

Full-Width

Tabs/Carousel

Tabs

Carousel

Yes

Full-Width

Two-Column

Testimonial Slider Panel

None

No

Full-Width

Visual Router

None

Yes

Full-Width


Wordpress Blocks


There are some basic Wordpress Blocks used for content formatting in addition to WSU Custom Blocks. These blocks can be nested within Custom Blocks or used independently:

  • Heading
  • List
  • Paragraph
  • Spacer


Though available in the editor, the other Wordpress Blocks and Patterns are not formatted to fit within the site theme template. 


Reusable Blocks


All types of blocks—individually or as a group— can be designated as Reusable Blocks. It is recommended to leverage Reusable Blocks when appropriate, such as when you want to:

  • Share a specific block with specific content across multiple pages (e.g. an announcement or contact section)
  • Save a specific block with specific content to be published again later (e.g. annual event or promotion)
  • Speed up page building with a block group with generic content (e.g. an event listing or feature story)


Making an update to the content or layout within a Reusable Block means those changes are reflected everywhere that block is placed now and in the future. 


If used as a quick start layout, you should convert the Reusable Block back to regular blocks to prevent overwriting a generic block group or accidentally modifying real content in a page.