Gutenberg corner: Listing people on Gutenberg pages

We have worked to identify suitable Gutenberg features to replace the capabilities of our aging Content Blocks system. Article lists, event lists, images, quotes, and other features can all be accommodated with Gutenberg blocks and our “post picker” shortcode. But what about the People List content block?

We have found a simple solution for this, and it involves our website‘s oembed feature.

The People content type

While websites can simply list people on a page using text and images, the website has a specific type of content avilable called People which allows for the creation of a record that can be re-used on the website. Updates to the People content will update the places where this content appears. More information about this people content type is available in our user guide.

The automated Directory feature

For websites that have large lists of people, the website offers an automated directory. By default this automated directory appears a web address ending with “/people/” such as the directory for University of Maine Cooperative Extension. If your site has made use of our People content type, this directory will display all of your published people, alphabetized by last name. We recommend reviewing this automated directory for accuracy— removing people from the People List Content Block does not remove them from this automated directory.

The automated directory can be customized to change its page location and title, and there are Department, Location, and Expertise areas that can be defined to enhance the directory’s use. For example, the “Orono” location in the Cooperative Extension’s directory lists all People with that location defined in their record.

Listing individual people on Gutenberg pages

If you do not want to rely on an automated directory, or need to list people in a specific order, the “People List Content Block” had been our solution— but this feature does not exist in the Gutenberg editor. Thankfully, it is easy to list individual people using the “oembed” feature of our website.

Step one: view the People item in your web browser

In the People content dashboard you will find a list of all the People that have been added. Published and Draft content appears in the dashboard, and only those People that are Published can be viewed by the public. Select the “View” link underneath the People item you want to embed. For example, this is the “View” link for Mike Kirby in Marketing and Communications: https://umaine.edu/marketingandcommunications/people/mike-kirby/

Step two: copy the web address of the People item

Once you are viewing the People record you want to embed, simply copy its web address (ctrl+c on Microsoft computers, option+c on Apple computers, or right-click the selected web address and choose “Copy”).

Step three: paste the web address of the People item in the page you want it to appear

On the page you want to list this person, use a Paragraph block in the Gutenberg editor and paste the web address on its own line. The URL will be replaced with an embedded version of the People listing!

Getting fancy: row layouts for listing several People items in a row

The Paragraph block can be used within many Gutenberg features such as the Row Layout, Accordion, or Tabbed Content blocks. To mimic the behavior of the older People List Content Boock, the Row Layout block can be set to two or three columns, and each column can contain an embedded People item.

If you would like to replace your older Content Blocks people list with a new version using the Gutenberg editor, give the above instructions a try! We are always available at um.weboffice@maine.edu to help you with this task.