Gutenberg corner: August patterns

July 23, 2024 Content Blocks removal project, Gutenberg

Our Digital teams are working with UMS:IT to publish several new patterns for our Aug. 19 website update.

New pattern category: News and Calendar

To replace our old Article List and Event List content blocks we have a new “Post Picker” feature that works using the Shortcode block. Shortcodes are text commands surrounded by [square brackets] in the editor which WordPress dynamically renders into content based on the shortcode commands.

New patterns to display news and calendar items:

  • 4 News Display: Will show news feed from UMaine News in a 2 x 2 grid, only displaying stories with featured images
  • 6 News Display: Will show news feed from UMaine News in a 3 x 2 grid, only displaying stories with featured images
  • Small News Display: Will show news feed from UMaine News in a 4 column row, only displaying stories with featured images
  • List News Display: Will show news feed from UMaine News in a text list
  • Academic Calendar Events Display: Will show event feed from UMaine Calendar’s Academic Calendar category in a stacked list.

These patterns can be used for layout purposes, reach out to the Digital team at um.weboffice@maine.edu to change the shortcode settings to display news and calendar items from your specific website and category.

New Pattern category: People

As mentioned in an earlier newsletter, the People List content block does not have a Gutenberg block at this time. These patterns are provided to create a consistently formatted people listing on your pages as needed.

  • People Single: A pattern that provides a space for a portrait photo with the name and contact information to its right
  • People Group: A pattern that provides two of the above people patterns in a row

New Patterns in Header category

  • Full Width Alert Banner: A full width banner to display a heading and “Learn more” button, useful for important temporary messages/alerts.
  • Full Width UM Photo Header: A header for web pages that allows for the display of an image with a centered website/page title heading
  • Full Width UM Photo Header with text: A header for web pages that allows for the display of an image with left-aligned website/page title heading and smaller text underneath

New pattern in the Full Page Templates category

A home page pattern has been added to the Full Page Templates category.