Seramount Custom Blocks

This page was created to make QA testing for multiple Jira tickets easier by bringing several updates  together in one location.

Ticket SERR-78 includes a check list for all of the custom blocks listed below.  These blocks were originally built for Seramount and are here to confirm they display correctly in the new site design.

The goal is to maintain backward compatibility while determining if some of these components could be rebuilt using patterns, which would make it easier to manage and customize without additional coding.

• Callout Link
• Topic List
• Event 3 Card Block Filtered By Type
• Event 3 Card Block Showing One of Each Type
• Events
• Conference
• Heritage Month
• Featured Post
• Research and Insights Cards
• Research and Insights Contents
• Employees
• Stylized Content Group
• Call to Action
• Seramount Button
• Seramount H2

Callout Link custom block

QA NOTE: The below is a custom block called “Callout link” which you can see on an existing page here. I find this block difficult to use in the editor since you have to edit text fields and not inside the WYSIWYG and could be replaced with a pattern but it is used 6 times so we have updated it to make sure it looks good here.

Topic List custom block

QA NOTE: This is used on the R & I page and a few other places. You can choose topics in the editor if you want.

Event 3 Card Block Filtered By Type custom block

QA NOTE: This is clumsy to use in the editor but it gets the job done which you can see on the events page which is the only place it is being used.

Event 3 Card Block Showing One of Each Type custom block

QA NOTE: Helpful block with dividers to show one of each use on the events page.

Event list view custom block

QA NOTE: Helpful block used only on the R & I page at the bottom.

Conference Card custom block

QA NOTE: This block is used once on the R & I page and is also clunky to use in the editor, but it gets the job done.

Heritage Month custom block

QA NOTE: This is a clunky block to use in the editor and is only used on the Holiday Calendar page. But it get’s the job done and has been updated.

Featured Post custom block

QA NOTE: A very helpful block to pick content and show it well. We have updated the editor to allow for changing how the image is displayed to handle different ratios. We have also updated the editor to not query for media making it easier to use. You can see these being used on the R & I page.

Research and Insights Cards custom block

QA NOTE: This is a little clumsy to use in the editor since it’s a “tag” like selection to pick the contents.

Research and Insights Contents custom block

QA NOTE: This block makes it easy to pick content and display it as cards and is relatively easy to use.

Employee List View

QA NOTE: Helpful block to list Person’s used on the Meet the Team page and can be used (like below) to select specific people.

Christian Santillo

Director, Digital Marketing and Marketing Operations

Amy Bourne

Head of Marketing and Events

Abby Peterson

Director of Corporate Programs

Adrienne C. Trimble

Senior Vice President & Chief Inclusion Officer

Amy Trutor

Vice President

Brandon Kazen-Maddox

ASL Artist, Choreographer, Director, Dancer, Actor, Acrobat, and Activist

Stylized Content Group custom block

QA NOTE: This custom block is used quite a lot to enforce a width on the content inside it. Really this custom block can be done with a “Group” block and then styled to fit. But since this design is not really used in the new design, we have made this custom block fit with the rest of the page layout. Additionally, the editing experience is a little werid since it’s not clear whatyou can control with the stylized content group, which doesn’t have all the regular styling options as a regular block. You can see it being used at the top of this page where it should just look like regular content. Moving forward, this block should not be used in favor of patterns or regular blocks which avoids having to make coding changes if things don’t look right.

Call to Action custom block

QA NOTE: This block is also used a lot and is helpful. But this block could easily be built in a pattern which makes it easier to use and customize in the outlier case. However, since it is used a lot, we have made the custom block look like the new design, focusing on a dark and light option. You can see a page that has this custom block already on it with the new design implemented for it on this page. The reason I advocate for this as a pattern is mostly the editing experience.

Seramount Button custom block

QA NOTE: Used in a lot of places. Some in content added by an author, and others inside other blocks or templates that are behind the wscenes.

Seramount H2 custom block

QA NOTE: Another custom block that is used a lot. We have built this into a pattern to be used in the future, but this custom block should look the same. You can see it in use here. The reason I think this should be done as a pattern is the editing experience which is not really WYSIWYG.

Main Heading Would Be Here