Featured Content as a selection in the Content Blocks page editor:

The dialog box for Featured Content:

If your Featured Content block is used as the heading of your page, use the pattern “BH Header with text left (white bg)” or “BH Header with text right (white bg)”

• 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 “Headers” option to display the different patterns for headers
• Select “BH Header with text left (white bg)” or “BH Header with text right (white bg)” and it will appear in the editor
• NOTE: To use this pattern with the new Blue Horizons branded fonts, contact um.weboffice@maine.edu before using these options.

If your Featured Content block is used after the headline (in the body content of the page), use the pattern “BH Feature Left Text w/image” or “BH Feature Right Text w/image”

• 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 “Features” option to display the different patterns for features
• Select “BH Feature Left Text w/image” or “BH Feature Right Text w/image” and it will appear in the editor
• NOTE: To use this pattern with the new Blue Horizons branded fonts, contact um.weboffice@maine.edu before using these options.

Image as a selection in the Content Blocks page editor:

The dialog box for Image:

There are multiple new blocks available for images:

If your image content block had been used to place an image on a page, we recommend the . Some of its features include:

• A maximum image width setting to control the overall image size
• The ability to set a fixed ratio to the image which will crop the image if necessary (this setting is recommended when lining up several images on a page)
  • Note: when selecting a fixed ratio, you can set the center point of the image to control where the cropping occurs
• Mask settings: the image can adopt different shapes (triangular, circular, etc)
• For images with captions, the text can be transformed in color, size, font, etc.
• Image filters and overlays, to add a tint or desaturation to your image
• Border settings, including box shadows and drop shadows
• Animate on scroll is a feature that allows the image to appear on the page as the reader scrolls the page. Options include fade, flip, slide, and zoom.

If your image content block had text superimposed, we recommend the . Some of its features include:

• Title and subtitle settings, allowing you to control heading settings— and override the default heading size and style with your own preferred font, size, and color
• Color overlay with opacity controls, allowing you to control the color contrast between the overlay text and the image for web accessibility compliance. “Hover” options allow the image to react when the mouse/cursor passes over the image.
• Animate on scroll is a feature that allows the image to appear on the page as the reader scrolls the page. Options include fade, flip, slide, and zoom.

Slider as a selection in the Content Blocks page editor:

The dialog box for Slider:

How are you using the slider block?

The slider block has several common uses:

• A full-page spash image at the top of a page
• A slideshow of several images
• A carousel of featured links designed to capture attention

Replacing a slider used as a full-page splash image at the top of a page

A common use of the slider has been to add a full width image to the top of a page but below your site navigation:

Use the pattern “Full Width UM Photo Header” for a full-page splash image at the top of your page

• 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 “Headers” option to display the different patterns for headers
• Select “Full Width UM Photo Header” and it will appear in the editor

Once placed on your page, you can update the “Website Title” text as appropriate, and select a photo from your media library in the photo area:

• In the editing options sidebar, select the “Style” set of options
• The “Edit image” button will allow you to select an image from your media library or upload a new image for this header.

Replacing a slider used for a slideshow

A slider content block could also be used for a slideshow:

Use the Gallery (Adv) block for slideshows

• 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
• The “Blocks” heading displays the list of blocks available
• Select the “Gallery (Adv)” option

There are multiple display options for this gallery block, and we recommend reviewing the different layouts listed under “Gallery Type” as some may be better suited for your content. The “Slider” layout option is closest in functionality to the old Slider Content Block.

Replacing a slider used to feature several items

The Slider Content Block was also used to display multiple features on a page to allow multiple items to be featured in the same location:

The Gutenberg editor and the blocks now available offer many new options to choose from. We recommend contacting 91���� Digital to discuss what layout options would be best suited to replace this content on your page.

Quote as a selection in the Content Blocks editor:

The dialog box for Quote:

Replace this block with the Info Box block

• 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
• The “Blocks” heading displays the list of blocks available
• Select the “Info Box” option

Once added, the text area of the info box may be edited to add the text for your quote.

Update the icon to a quote icon

By default the info box will display a camera shutter icon. To update this:

• Select the style settings in the info box editing options
• The “Media settings” section offers options for adding an image or selecting an icon
• Click inside the box displaying the default icon
• Type “quote” to display the quote icons available. We recommend the “close quote” icon (fourth in the search results)

An info box can be made into a link

The old Quote block had a field for a link, which would allow for linking the quote to a different page. The new info box block can be set to link to a location as well. Set the link location in the info box settings:

If you change the “Link content” option from “Entire Box” to “Only learn more text” the link must be set up in the text editor itself:

Separator as a selection in the Content Blocks page editor:

The dialog box for Separator:

Replace this block with the “Spacer/divider” block

• 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
• The “Blocks” heading displays the list of blocks available
• Type “spacer” in the search box or select it from the full list

Spacer/Divider block options

By default the spacer will span the full width of the content area, and has a 60 pixel height. Similar to the old Separator block, the Spacer/Divider block can be made invisible by toggling the “enable divider” off in divider settings.

Divider settings offer many display options:

• Divider style (solid, dashed, dotted, stripe)
• Divider color (light grey by default)

These divider options can be set separately for desktop, mobile, and tablet displays:

• Alignment (left, center, right)
• Divider height
• Divider width

Finally, the Spacer/Divider advanced options allow it to be shown or hidden altogether for desktop, mobile, and tablet displays.

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

The dialog box for People List:

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

• 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):

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

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:

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:

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

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):

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.

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. By default this is set to “Entire Box” which makes the entire listing a single clickable link.

• 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

If you change the “Link content” option from “Entire Box” to “Only learn more text” multiple links can be set up in the text editor itself:

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:

Explore Links as a selection in the Content Blocks page editor:

The dialog box for Explore Links:

Replace this block with the Icons pattern “UM Blue Icon Set”

• 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 “Icons” option to display the different patterns that use the icon circles
• Select “UM Blue Icon Set” and it will appear in the editor

How to increase the number of icon links

The UM Blue Icon Set will create three placeholders for your links. Increasing the number of icons is straightforward.

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

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

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 icon blocks you need to replace your Explore Links block:

Setting the number of icons-per-row

By default the UM Blue Icon Set uses a Row Layout block set to three column display. You can easily adjust this within the Layout options for the Row Layout block. In this example we set this to 5 columns:

Select an image for a circle

The Icon Set pattern uses the “Info Box” block. Click on a circle’s “Insert your icon here” image, and select the Info Box “Style” tab (in the settings panel to the right) to replace the placeholder with an image:

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

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

Setting the text and link

Update the text underneath the image by selecting the “Title” text and typing your new title.

The link for this info box is found in its General settings. Paste the web link in the link field, and click the “Submit” symbol to apply it:

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 91���� News in a 2 x 2 grid, only displaying stories with featured images
• 6 News Display: Will show news feed from 91���� News in a 3 x 2 grid, only displaying stories with featured images
• Small News Display: Will show news feed from 91���� News in a 4 column row, only displaying stories with featured images
• List News Display: Will show news feed from 91���� News in a text list
• Academic Calendar Events Display: Will show event feed from 91���� 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.

Unpublished Content Blocks pages removed

In order to focus efforts on current published content, any unpublished web page using the Content Blocks feature that had not been updated in 12 months was deleted. While recently created draft pages using Content Blocks were retained, we encourage everyone to create a page using Gutenberg editor features as a replacement before publishing.

Inventory of Content Blocks pages updated

The helpful team with UMS IT’s Web Technologies group has generated reports to support the Content Blocks removal project. These reports detail all pages on sites that use Content Blocks, when they were last modified, and their publish status. These links will be refreshed periodically to help us all monitor progress:

• University of Maine sites
• Cooperative Extension sites
• University of Maine at Machias sites

We encourage all our website administrators to review the appropriate report — search the page using ctrl/cmd+F to find your website’s name, and expand the helpful list of pages using Content Blocks. Please delete any page that is no longer needed.

Migration timeline

With hundreds of websites and thousands of web pages, the effort to migrate content from Content Blocks into the Gutenberg editor is daunting. Below are some general milestones that will help us meet our June 30 completion date:

• August 2024: We will identify websites that have the most work to do and reach out to plan a kick-off meeting to discuss content migration needs.
• September 2024: A “Migration guide” will be available with advice on migrating.
• October 2024: Websites maintained by Marketing & Communications will be completed (news, calendar, campus map, campaign landing pages)
• December 2024: Small sites (under 10 pages) will be completed by Digital Communications, and inactive sites will be identified for follow up with site owners
• January 2025: Discussion/review of inactive sites with site owners
• February 2025: Inactive sites will be deleted if no longer needed
• March 2025: All college websites will be migrated (this does not include individual department/school websites)
• April – June 2025: Final push to migrate remaining websites.

We encourage site owners to contact us at um.weboffice@maine.edu if there is a specific time of year when your website work may be prioritized.

What you should look out for

As you review your website to address old content and remove Content Blocks, it is important to look for the following situations:

• Images that do not have alt text
• Links that display the web address as the clickable link text
• Link text that is vague, or repeated use of the same link text for different links
• Images of flyers or posters

Images that do not have alt text

It is particularly important that all images used on a web page have descriptive text alternatives (alt text), as this allows visitors who use a screen reader to understand the content you are publishing. This alt text should be brief and convey the context of the image in your content. Read more about the importance of alt text.
Tip: You can quickly review your images using the “Media Library” section of the dashboard. Updating or adding alt text for each image in this location will make it available to you when you next use the image on a page.

Links that display the web address as the clickable link text

If you find a link in your content that displays the URL on screen as the clickable text, replace that address text with descriptive information about the web page the link references. For example, a link to the 91���� homepage should not display nor even umaine.edu. Instead, describe where the link will go: 91���� website���ǰ���visit the 91���� homepage.

Link text that is vague, or repeated use of the same link text for different links

When a visitor uses a screen reader, links are read aloud in a list. Vague link text such as “PDF” or “here” are not clear to the visitor, and when a link text is used multiple times on a page it is difficult to understand which link should be selected.
Read more about accessibility with link text.

Images of flyers or posters

It is tempting to save time when putting content on your website when you have already created a flyer or poster that already features the information. Adding such an image without repeating the content as text on the web page gives a poor experience— both for visitors using screen readers as well as visitors who may be using their mobile device and its smaller screen.
Tip: Consider removing flyers or posters altogether on older content, as this may be out of date information. If the content is still important, re-type the information and format the text using the many options available in the newer Gutenberg editor.
Read more about accessibility with event flyers and posters.