Close Menu
  1. Yearbook

Yearbook

Yearbook Block

Yearbook on the frontend.

Display a directory of people in a grid.

Usage

If you need to display a directory of people, but don’t need the full functionality of the people plugin, the Yearbook plugin gives you an easy way to do that. While you can approximate this pattern with the core Columns block, our Yearbook block removes the guesswork.

The Yearbook block will seamlessly reformat itself as the viewport size changes and has a variety of display options.

Parent Block

This block contains both a parent wrapper block and as many children blocks as you would like. You’ll only be able to control block-wide styles from the parent block.

In general, the parent block will handle styling and block options that all the child blocks will inherit. While editing a child block, you’ll be able to change block setting and content related to that child block only. For example, while editing a card in a Grid block, you’ll be able to change the headline and button link, but you’ll need to select the parent Grid block in order to change the number of cards in each row.

For this reason, you’ll often find yourself selecting the parent block of a child block. There are a couple really simple ways to do this.

While a child block is selected, the parent block will show up in the block control bar above it to the far left. Click it to quickly select the parent.

You can quickly traverse up the block tree by clicking on the path bar at the bottom of the page.

Open list view by clicking its icon in the toolbar to the top left of your page. From there, you can more easily navigate blocks on your page.

Show More Show Less

Parent Settings

The parent block (named Yearbook in the editor) has the following settings. To access these settings, you must have the parent block selected.

Text Style

Both the Headline and Subheadline text styles can be changed.

The Text Style (sometimes called Headline Style) option controls the display of your link titles. It defaults to h4, style but can be changed to any of the other available options. These styles are defined in your Customizer under Styles. For more information on changing your styles visit Customizing Styles.

Show More Show Less

Columns

The Columns field determines the maximum amount of cards allowed per row.

Most blocks that support columns can be set anywhere from two cards per row to five. You’ll find the columns control in the block sidebar, and you’ll need the parent block selected in order to access this setting.

No matter how many items per row you have your Grid block capped at, it will seamlessly break cards to the next row depending on viewport size until it reaches the maximum allowed.

On mobile, the cards will automatically adjust and re-layout to show fewer cards per row, so you won’t have to worry about your content being too small.

Show More Show Less

Text Size

Toggle the size of the paragraph text from normal to small.

You’ll find this setting in the block control toolbar that displays above the block when the parent block is selected.

Enabling this setting will toggle between normal and small paragraph text size. You can set size you’d like your small text to be in the Customizer under the Paragraph style settings.

Show More Show Less

Text Alignment

Change the alignment of all the text in this block.

You’ll find this setting in the block control toolbar that displays above the block when the parent block is selected.

Show More Show Less

Block Width

Blocks can be set to one of three widths in the editor: Default, Wide, or Full. Blocks will interact with adjacent blocks differently depending on their width.

Adjusting Block Width

The block width setting is found in your block context bar, which will show up above the current block that you have selected. A block that supports the block widths will show its current width icon in the context bar, and clicking it will allow you to change the width.

If you have the Top Toolbar setting selected, the block context bar will always show at the top of your page, not at the top of your block.

Default Width

The default width of your content is determined by the value set in your Customizer. You can find this setting under Styles » Widths » Content Width. This is the default width of most text-based content and most blog pages. We recommend keeping this set so that your content retains maximum readability, which most studies agree is around 50-60 characters per line.

Wide Width

Wide width content will take up 75% of the available width on the page or the default content width set on your site—whichever is larger. In effect, this makes content take up more of the available screen real estate. When used in conjunction with other wide width blocks, you can shape your webpages in many different ways.

Full Width

Full width content will always take up 100% of the available width on the page. When placed next to default or wide with content, margin will be applied to the full width block to give it some room to breath. When two full width blocks are placed next to each other, however, they will suction together and form a cohesive unit with no margin in between them.

Show More Show Less

Image Style

You can check the style used to display images. The style selected here will change the appearance of every card within the Yearbook. This setting is in the block sidebar.

Square

Rounded
This style respects the site-wide border radius setting.

Headshot

Thumbnail
This is the same as headshot, just smaller.

Hidden
Get those images outta here!

Child Settings

The Yearbook contains child cards, and you can add as many as you like. Each card supports an Image, Headline, Title, and Body that can be edited inline. Simply click into where you’d like to edit and start typing!

Image Focal Point

After selecting an image, you can set its focal point in the block sidebar by clicking and dragging the focal point to the most important part of the image.

Changing the Image

After selecting an image, you can change it by either using the image swap button in the toolbar or by removing it in the sidebar.

Adding Cards

To add a card, click on the prompt in the editor.

Yearbook