Interstitial Block

The Interstitial theme block is intended to add a large image and engaging text between other blocks on a page.

Interstitial Block Guidelines

• Use the Interstitial block between other blocks on a page.
• The Interstitial block should not be used as the first block on a page. The block consists of a large image with no text above it and can make it difficult for users to determine what the page is about when used as the first block on a page. For a better user experience, use the Interstitial block between other panels or at the bottom of the page.
• Follow all Image and Media Requirements and Best Practices.
• Review the Recommendations for Accessible Theme Blocks page to learn more about requirements for headings, images, links, and media published in this block.
• Use of this block for an undocumented purpose or in a non-standard way is discouraged and may not be supported.

How to Configure the Interstitial Block

• In the block editor, click on the blue box with the plus sign located at the top left of the page. The alternative text for this link is called “toggle block inserter”. This will open a menu of available blocks to select from.

• A list of blocks sorted into 6 groups will be displayed. Scroll down to the group called THEME and click on the block called Interstitial. This will add the block to your page.
• A list of blocks sorted into 6 groups will be displayed. Scroll down to the group called THEME and click on the block called Interstitial. This will add the block to your page.
• Each block comes with its own toolbar that appears above the block. The buttons change depending on the block you are editing. This is what the Interstitial toolbar looks like:

• Note: To move your block text fields from the narrow right column to the middle of your editor, go to the block’s toolbar and click on the pencil icon. This will move the fields to the middle of the page. If you want to preview the page as you are building it, click on the monitor icon and the text fields will move back to the right side of the editor. You can toggle between these two options.

Content Fields

Title: This is a text field. Content entered here will appear as the Interstitial block header text.Description: This content should be kept brief for design purposes.

Background Image: Select image for the block background. Optimal image size is 1600px x 826px.

Image Caption: This is an optional text input field. This content appears on the bottom left third of the image. Content should be kept brief for design purposes.

Call to Action Link: If you want to include a call to action link, click the “Select Link” button. A window will pop open displaying fields where you can enter the URL, Link Text, a checkbox if you want the link to open in a new tab, and an option to search for and select an existing page to link to. If you add Link Text, this link must be unique to meet accessibility requirements (avoid generic link texts like “Click me” and “Here”). When you have filled out the fields, click the “Add Link” button to complete the process.

Settings Fields

• Custom Language: The default language is English. Language options that will generate markup signifying that content as being in the selected language.
• Layout: The default selection is one-column. Choices include one column or two columns, and placing the title and text above or below the image.
• Title Size: Test the page using different screen sizes (desktop, laptop, phone, etc.) and select Large or Normal title size as appropriate for your title content.
• Background: Default selection is white. The choices are white, orange, blue, or gray. This selection extends the full screen width behind all block content.
• Heading Size: The block title will appear on the page as an H2 heading. Do not change this to an H1 heading unless otherwise directed.
• Add Top Padding: Defaults to Yes with the standard empty space above the block. You can change the padding to No if you want less empty space, but the recommendation is to leave it set to Yes as it’s better for accessibility.
• Add Bottom Padding: Defaults to Yes with the standard empty space below the block. You can change the padding to No if you want less empty space, but the recommendation is to leave it set to Yes as it’s better for accessibility.

Two Examples of Interstitial Blocks