Blocks

Blocks are the custom user interface (UI) components we’ve developed for use on your pages. Blocks can be dragged, dropped, or rearranged within the Blocks tab of a page or post.  

Each block represents a different combination of copy text and media. They also vary in how they list, group, and grid their information. For most blocks, the text is typically minimal, reserved for headlines or subheadlines, with the Rich Text Block as an exception. That’s because most blocks focus on delivering dynamic, fundamental conventions for delivering web content—all with a design flourish to match your brand. 🎨

Blocks are only displayed by their properties and any additional sub-elements (card, assets) within the WordPress backend; they’ll look very different on the live site. We encourage you to preview often when customizing your blocks. Consider having one window with the WordPress backend on one side of the screen, and a preview window on the other side, to quickly see how your changes affect the appearance of your blocks.

Note: Feeling adventurous? Want to see every block all at once? You can preview an assembled page of all blocks by navigating to Pages > 00-Components.

Blocks User Interface and Common Elements

Each block also has the following options in the editor:

• Add layout: Used to add a new block directly above the current one. Click this to open the block picklist, then choose the block you wish to add.
• Duplicate layout: Creates an exact duplicate of the block and places that duplicate directly beneath the current block.
• Remove layout: Removes the block from the page. This is a destructive action that can’t be undone, so you’ll need to confirm the removal by clicking Remove.
• Click to toggle: Minimizes the block, visually hiding it within the Blocks tab. This does not remove the block from the page. Useful for navigating a page with many blocks.

Buttons

Buttons can be added to several blocks to navigate a user to an entry or to a URL. They are the primary driver for user interaction, so you’ll see them on various blocks.

Entries are the pages and posts that make up your site. URLs are arbitrary web addresses, so while they can point to pages or posts within your site, they are more typically used to link to an outside web domain. 

If your posts and pages use element IDs/Anchor blocks, you may also consider using a URL instead—as URLs can contain the hash anchor needed to navigate to those sections.

Properties

• Action: Determines whether the button navigates the user to an entry within the site or to an arbitrary URL.
• Entry/URL: The entry or URL to navigate to.
• Label: Determines the text that displays on the button element.
• New Window: Determines whether or not the entry/URL will open in the current window or in a new window.

• Style: Determines the visual appearance of the button. The following button styles have been designed by Whiteboard for your site:

• Primary

• Secondary
• Link
• Simple

Cards and Panels

Some blocks can have content nested within them, often appearing as cards or panels. Each card or panel typically has some text and media. While these elements are all nested within their block, they can each have unique content.

While the properties available for each card of the panel vary from block to block, they all can be added or removed similarly:

To add cards or panels:

• Click the Add card or Add panel button (Sometimes also displayed as Add Row)
• Click + Add row in the top right of an existing panel

To remove cards or panels:

1. Click - Remove Row, in the middle of the panel's right edge.
2. Confirm the removal by clicking Remove.

Element IDs aka Anchors

Several blocks have an ID property, which codes a specific and unique identifier to the block’s position on the page. When blocks have IDs, readers can be linked directly to a particular panel, even in the middle of the page. This is done by appending a hash symbol (#) and the panel’s ID to the end of a page’s URL.

As an example, an Anchor block could be used to create a linkable leadership section on the about page:

• yfc.net/about#leaders
• The anchor block, in the above case, would have the ID "leaders" and the block below the anchor would contain the relevant content.

These IDs can only contain letters and numbers—no spaces. If an ID should have multiple words use hyphens (-).

For example, if you have a page at this URL:

• example.com/example-page/
• And then use a 50-50 Panel block, with a panel’s ID set to “introduction video,” then this link:
• example.com/example-page/#introduction-video

would take readers directly to the 50-50 panel.

Media assets

Many blocks, or the cards/panels within them, have spaces to display media assets. These assets are sourced from your site’s Media Library, which is the primary place to upload and edit your images and videos—though many blocks allow you to upload images without navigating away from the page you’re working on. If you cannot select an asset you just uploaded, try closing the media library modal and re-opening it.

Note: Images and videos cannot be dynamically adjusted within WordPress. You’ll need to make sure all of your images are properly cropped, rotated, and resized before using them within a block. These adjustments can be made locally or from within the Media Library.

Using media assets in blocks typically begins by selecting a Media Type, which can be either an Image or background video or a Video player type.

Image or background video

Intended for more decorative media, this asset type displays either a static image image or a muted video that automatically plays without user interaction or control.

If Image is selected, you can click Add Image to open the media library modal. From there you can upload a new image or select an existing one. When hovering over a selected image, the Pencil icon opens a modal to edit the chosen image. To replace a selected image, hover over it and click the X icon.

If Video is selected, you can upload an MP4 video file, WEBM video file, or poster image file. If you add one of each of these asset types only one will display in the following order of priority: MP4, WEBM, poster.

Because videos play automatically, the user may not see the entire video as they navigate your page. While videos can be a dynamic way to add motion to your page, be sure to select videos that don’t need to be viewed in their entirety.

Video Player

This asset type displays a video player interface that requires the reader to press the play button. 

• Video Title: A freeform text field used to write a descriptive title of the video. This field does not need to exactly match the actual title of the video you select, but it should be used to give the user an idea of what they're about to watch.
• Video Watch Time: A freeform text field used to inform the user how long the video should last. Giving the user accurate watch times makes them more likely to view your content.
• Cover: Determines what's displayed before the user clicks the play button within the player. This can be any image or video within your media library, but try to use either a relevant screenshot from the video or consider using the video itself (which will play the video without audio as the user browses the page).

• Video Type: Determines where the video is sourced from:

• Local: Use a video from the site's media library.

  • Upload file: Opens the media library modal, allowing you to select an already uploaded video or upload a video from your local machine.
  • Youtube: Use a video from Youtube, which requires entering the full URL of the video in the Video ID field.
  • Vimeo: Use a video from Vimeo, which requires entering the full URL of the video in the Video ID field.

Theming

Most block properties deal with content instead of styling. This is because the appearance of your blocks, and your site as a whole, is determined the theme selected within the Globals page. For more information, see the Managing Globals topic.