Close Menu
  1. YouTube And Text

YouTube And Text

Youtube and Text block on the frontend.

Display YouTube video using the Dirigible Blocks format.

Usage

The YouTube and Text block is a parent container that uses the Dirigible Blocks UX pattern. The first block, however, is a WordPress core YouTube block rather than a standard Dirigible Blocks child. For more information about either of these blocks, refer to their respective documentation.

To access the parent level controls listed on this page, make sure you have the parent block selected. If you need help selected the parent block, we’ve got you covered.

YouTube only, huh?

Think again! This block was originally created with only YouTube in mind. The Gutenberg team has since consolidated all of the embed blocks into one embed block, and made the YouTube Embed block simply a Block Pattern of the global embed block.

What does this mean for you? It means you can put any type of embed URL in here and it should work.

Block Size

Change the size of your blocks.

Adjusting the size of your Dirigible Blocks

The sizing option will change the size of blocks on desktop. This is independent from the Swap Blocks setting, which means that even if you toggle the Swap Blocks option, if the left block is set to be larger, the leftmost block will always be the larger one regardless of which one is being presented on the left.

The default setting makes each block evenly sized (50%). With either of the other two options selected, the sizes are based on the golden ratio, with the larger block set to 61.8% and the smaller block set to 38.2%.

Show More Show Less

Swap Blocks

Change the order of the blocks on desktop.

The Swap Blocks setting is used to change the order of the blocks on desktop.

This is an important distinction and can be used to control the flow of your website on mobile, giving your users the best mobile experience possible.

For example, if you’d like to alternate blocks with photo backgrounds on desktop but want the accompanying content to be displayed under the photo on mobile, you would create the blocks in the editor with the leftmost block as the photo background and the rightmost block as the content block. This way, they will stack on mobile, left first then right. Then, selecting Swap Blocks on every other Dirigible Blocks group.

Mobile swap blocks example.

Example mobile stacking.

The same blocks viewed on desktop. In this example, the second Dirigible Blocks group has Swap Blocks enabled.

Show More Show Less

YouTube And Text