Web CommunicationWeb TrainingWeb Design System (WDS) TrainingBlocks

Blocks

Use blocks to add content and build your webpages. The available blocks in the Web Design System (WDS) consist of standard WordPress blocks, custom WDS blocks, and plugin blocks.

Note: Some WordPress blocks may not have all or different options available as presented in the WordPress Block instruction pages.

Check back as we add new instructions and blocks.

(Beta)

Use this block at your own risk but do not use it in production.

Hands pouring two test tubes into a beaker.

(Experimental)

This means do not use. Submit a Web Support Ticket if you cannot live without this block.

(Deprecated)

This block is no longer in use. It is strongly encouraged that you replace it with another block.

Need Help with a Block?

Submit a web support ticket for general help.
Bring your questions to Open Lab on Fridays.
Ask our WordPress users on Slack.

Useful Classes & Customization

Text

Button, Paragraph, and Heading are demonstrated in the Web Design System (WDS) Training video.

Paragraph (Source: WordPress)
Heading (Source: WordPress)
List (Source: WordPress)
Quote (Source: WordPress)
Classic (Source: WordPress)
Shortcode (Source: WordPress)
Table (Source: WordPress)
People List (Custom WDS block)
Button (Custom WDS block)
Menu (Custom WDS block)
Stat (Custom WDS block)

Media

Image (Source: WordPress)
Gallery (Source: WordPress)
Video (Source: WordPress)

Design

Hero Banner, Columns, and Page Title are demonstrated in the Web Design System (WDS) Training video.

Separator (Source: WordPress)
Spacer (Source: WordPress)
Accordion (Custom WDS block)
Aside/Callout (Custom WDS block)
Note (Custom WDS block)
Card (Custom WDS block)
Card Group (Custom WDS block)
Carousel (Custom WDS block)
Generic Container (Custom WDS block)
Page Banner (Beta)
Decorator (Custom WDS block)
Hero Banner (Custom WDS block)
Hero Slider (Custom WDS block)
Columns (Source: WordPress)
Section (Custom WDS block)
Page Title (Custom WDS block)
(Experimental) Outline Header
Beta (Overlap Advanced) (Custom WDS block)
Overlap Spotlight (Custom WDS block)
Sticky Navigation (Custom WDS block)

Widgets

Breadcrumbs (Plugin block)

Embeds

Embed (Source: WordPress)
Twitter (Source: WordPress)
YouTube (Source: WordPress)
WordPress (Embed Block) (Source: WordPress)
Vimeo (Source: WordPress)
TED (Source: WordPress)
Gravity Forms (Plugin block)

Feeds

News (Deprecated) – Use New Cards.
News Card (Deprecated) – Use New Cards.
New Cards (Custom WDS block)
News List (Custom WDS block)

Advanced

Code (Source: WordPress)
Custom HTML (Source: WordPress)