Replacing People List Content Block

September 13, 2024 Content Blocks, Content Blocks removal project, Gutenberg, Updates

While there is an automated directory to list the People content on your website, the “People List” Content Block offered the ability to put people in a specific order. To replace this functionality, we have created a People pattern.

People List as a selection in the Content Blocks page editor:

A screenshot detailing the People List content block selected.

The dialog box for People List:

A screenshot of the dialog box for the people list content block.

Replace this block with the People pattern “UM People Group”

A screenshot of the Gutenberg editor displaying the UM People Group pattern.
  • Select the + icon in the upper left corner of the editor. The blue box will change to a black box with an X icon, and the block selection window will open
  • Select the “Patterns” heading to display the list of patterns
  • Select the “People” option to display the different patterns for listing people
  • Select “UM People Group” and it will appear in the editor

How to increase the number of people listed

The UM People Group will create two placeholders for your people. Increasing the number of people is straightforward.

Select the Document Overview icon (fifth icon in upper left):

A screenshot depicting the document overview selection

Expand the Row Layout by clicking the > symbol next to it:

A screenshot depicting the row layout expanded.

Highlight one of the “Section” items, either by clicking or hovering over with your cursor. A 3-dot “Kabob menu” icon appears to the right of the item. Click that to display a menu of options, and select “Duplicate” to make more copies of the section:

Duplicate the block until you have the number of people blocks you need to replace your People List block:

A screenshot showing the six people sections created.

Select an image for a person

The People Group pattern uses the “Info Box” block. Click on a rectangular “Photo Here” image, and select the Info Box “Style” tab (in the settings panel to the right) to replace the placeholder with an image:

A screenshot showing the info box settings
Selecting an Info Box and opening its Style options.
An info box settings panel with the Media section selected.
Scroll down to the Media options in those Style settings.

Click the “Edit Image” box to select the appropriate image from your media gallery. In this example, the image is a portrait:

A screenshot of a media gallery displaying portrait images.
Important: check the “Alt Text” on the image you are selecting for accessibility.

This Info Box image works best when it is cropped to a portrait aspect ratio (2:3). Select this option from the Image Ratio drop-down (scroll further down in the settings panel to find this):

Selecting the aspect ratio of an image

Setting the text and optional link

Update the text to the side of the image as needed to display the name, title, email address, and other information in the info box.

A screenshot of an info box showing how to set a link destination in its options.

The text to the right of the image is formatted for the most common information listed for a person. You may adjust this to fit your particular formatting needs.

The “Link” field in General Info Box settings in the right settings panel may be used to link this person to content of your choice. Some examples:

  • Link to their email address by entering “mailto:” followed by their email address
  • Link to a page with more information about the person by entering that page’s URL
  • An external link to their Google Scholar or LinkedIn profile

Adjusting the columns of people

If you would like to display your people listing in three or more columns, you may adjust this within the Row Layout settings:

A screenshot displaying the row layout increased to 3 column display.