Group everything again!

This probably won’t happen until after the content is built, but all the content “sections” should be grouped together. In fact, just like the parent block’s HTML element was an <article>, each content section’s group block should be set to a <section> element.

The one exception may be the group that holds the Profile Swiper block, as one could make an argument for the block being set as an <aside> element. For now, leave it as a <section> or a <div>; accessibility is an art, not a science.

Columns and the Flex Reverse Toggle

A rule of the site’s mobile design is that images always follow text. Thus, when you’re building content with the Columns block, you’ll want to make use of the “Flex Direction” toggle.

In the List View, the second Column should always be the Image block, which would typically mean that the image appears on the right. However, the “Flex Direction” toggle flips the order of the columns visually (it doesn’t do anything to the underlying HTML) so that images can appear on the left.

The Profile Swiper Block

The Profile Swiper block is a custom block built specifically for this site. It automatically loads in all the placeholder structure you need, so you can focus on updating the content. It also only allows one instance of itself per post, so in that way, it’s just like the old ACF flexible content field, but a little more visual.

It doesn’t look exactly like it gets rendered on the frontend in the Editor, and this is by design. It specifically doesn’t mock the slider layout to make editing content a simpler task.

Understanding the Slides

To switch slides, click the slide you want to edit in the List View. Slides 1, 4 and 5 are pretty straightforward: they just have nested Image blocks. Slide 2 contains a nested Quote block, which itself contains a nested Paragraph block. All you need to do is click on Slide 2 and start typing—the rest of the settings have been pre-configured for you.

Slide 3, the “Video” slide, is a little more complex, so let’s dig into that:

Slide 3’s Container

You’ll notice the icon for the containing “slide” block looks different. That’s a special type of Group block, but it’s still just a group block.

Profile Swiper Video Slide block

This is a second custom block that can only be used within the context of the Profile Swiper block. It has 1 control on it, which is a text field to add the video’s caption. It is only allowed to have one type of block inside of it, the CNO Lite Vimeo block.

CNO Lite Vimeo Block

This is a third custom block that can be used on any site and in any context. It provides a way to load in a Vimeo player in a super lightweight manner. It’s got a number of controls on it, so let’s dig in to the only ones that matter.

1. Video ID: pretty straightforward, this is the part of the vimeo url that comes after the vimeo.com/. If the video is unlisted, it will have a second / with some characters: be sure to include that bit!
2. “Unlisted” toggle: This is automatically triggered when the Video ID field detects a / character. It unlocks some extra settings below for Custom Thumbnails (required since the Vimeo API doesn’t let us grab auto-generated thumbnails).
   • If this is toggled on, you’ll notice the “Custom Thumbnail Settings” Panel. It contains a few controls that do exactly what you’d expect—you can set/update/remove a custom thumbnail.
3. “Disable Tracking” toggle: Ignore for this site
4. “Loop” toggle: loops a video. Ignore for this site
5. “Advanced Lite Vimeo Settings” Panel: Ignore for this site