What’s changed in UT Drupal Kit 3?

On the surface, version 3 of the UT Drupal Kit may not seem like a monumental departure from version 2. Much appears the same: content entered in a version 2 site is migrated directly to version 3, user management feels familiar, and components like Google Tag Manager and Google Custom Search are still present.

That said, version 3 is a rebuild from Drupal 7 to (at the time of version 3’s initial release) Drupal 9. This means that much of the underlying infrastructure has changed and there are new and better content building tools available.

Contents

Drupal APIs

Since version 3 is based on the latest major version of Drupal, much of the internal logic for development has changed. Starting with version 8, Drupal embraces object-oriented programming and dependency injection, and uses the Symfony framework, Composer for dependency management, and Twig for its theme engine. Developers can leverage more APIs for predictable ways to plug in to Drupal functionality, and the site itself can function as an API through the “JSON API” module. Developers not yet familiar with these changes should read Drupal 8 vs Drupal 7.

Page building

Page building has been completely redesigned in version 3. A summary follows:

Comparison of page building between version 2 and 3

Category

Version 2

Version 3

Page types

There were two main page types: “Standard Page” and “Landing Page.”

“Standard Page” and “Landing Page” have coalesced into the single “Flex Page.”

Page content

Content was added and edited through an administrative interface (the “node edit” form).

On the Flex Page, the “node edit” form is only responsible for page basics, like title and page display options. All content creation happens while viewing the actual page, via the new “Layout” tab.

Layout

Once content had been created through the node edit form, fields were then added to the page layout through the “Layout Editor” tab.

On the Flex Page, all content layout happens in the same interface as content editing, through the new “Layout” tab.

Layout

The Standard Page and Landing Page had a limited set of layouts, referred to as “templates.”

The Flex Page allows site builders to build their own unique layouts for each page by adding “sections” (rows) and choosing from 1, 2, 3, and 4-column combinations for each section.

Layout

On certain templates, some fields were “locked” to a specific region (e.g. Featured Highlight).

When using the Flex Page content type, there are no constraints on the placement of components.

Fields

Pages limited the number of fields available (e.g., Flex Content Area A and B, but not C).

There is no limit on the number and type of content blocks. For more information, see Creating and managing content.

Fields

Certain fields allowed content editors to choose the number of items to display on a single row, while others were fixed to a certain number. The interface for making these choices was not consistent from field-to-field.

Most components have an option for selecting the number of items-per-row to display, between one and four. The user interface for selecting this option is consistent across all components.

Fields

Some Flex Content Area images (those with a height below 300 pixels) displayed with no cropping, rather than the intended 3:2 aspect ratio.

All Flex Content Area images display with a 3:2 aspect ratio, regardless of original upload size. Uploaded images with other dimensions will be cropped.

Block types

Version 2 had a specific content component called the “Contact Info” block for displaying contact information on one or more pages.

The “Contact Info” block has been retired in favor of a more flexible block type called the “Flex List.”

Block types

Version 2 had a content component called “Resources” consisting of a title, image, headline and list of links. Resource components would automatically change displays from horizontal to vertical depending on the size of the region.

A new view mode called “Stacked” (vertical) has been added alongside “Default ” (side-by-side).

Styling

Some styling of components, like the border and background on Quick Links, or the margins on a layout section, were hard-coded to those components.

Many of these styles have become settings that can be applied on an individual basis to many components (see Theme changes, below).

Breadcrumbs

For pages more than two levels deep in the main menu hierarchy, version 2 would render the breadcrumb trail at the top of the page with some pages concatenated together with a colon as a single link, making it impossible to reach all parent pages via the breadcrumb links.

Each page in the main menu hierarchy is represented as an individual link in the breadcrumb trail.

Menus

Menu links for unpublished pages are not visible, even to logged-in users.

Menu links for unpublished pages are visible to authorized logged-in users, with special visual styling to indicate that the link is to an unpublished page.

Menus

The mobile version of the main menu, seen at tablet/mobile screen widths, pushed the entire contents of the page to the left when opened.

The “Header menu” is rendered below the main menu navigation in the mobile menu.

Menus

Theme settings allowed a site manager to set the footer menu to render in two columns.

This option has been removed.

Additional Content types

The content type for adding profiles was called “Team Member.”

This content type has been re-named “Profile.”

Additional Content Types

The Team Member content type had a single “field” for the main content.

The Profile content type’s main content section allows editors to create multiple tabs of content.

User Roles

In addition to a base “Site Builder” role which was necessary for any content editor, there were separate user roles which granted access to different content features of the site:

  • Standard Page Editor

  • Landing Page Editor

  • Team Member Editor

  • Events Editor

  • News Editor

  • Announcements Editor

Content editor privileges are all granted through a single “Content Editor” role.

Development workflow

Version 2 introduces a fundamentally different way of building the components that make up a Drupal site: Composer. This new workflow is described in depth in the Installation and Updating a site sections. For a better understanding of this workflow change, read Using Drupal with Composer.

“Widgets” are now “Components”

Version 2’s documentation referred to things like the Promo Unit, Hero field, and Flex Content Area as “widgets.” Version 3 calls these same things “components,” for consistency with modern web design system terminology.

Theme changes

Forty Acres theme

The default theme, Forty Acres, still includes the same general elements: brand bar, header regions, main page content, and footer regions. There are typography changes that follow the specifications of the University brand guidelines.

Some visual differences between version 2 and version 3 include:

  • Wider screen widths (greater than 1600 pixels) now leverage a wider overall “container” to display more content. This means that on larger monitors, a version 3 site will look wider than a version 2 site.

  • The mobile version of the main menu has been completely redesigned.

  • Burnt orange is used more consistently for the color of linked text throughout the site, including links in the footer.

  • Right-pointing “Chevron” icons (e.g. “>”) have been removed from most call-to-action links and buttons as a default.

Tip

Developers: in version 3, Forty Acres now handles much less of the display logic of overall pages (see Creating and managing content). This means that it should be easier to sub-theme. For more information, see The Forty Acres theme.

Hero component

Version 2 and version 3 both provide display variations for the Hero component, but the styles are slightly different. These changes were based on evolution of the University brand guidelines and feedback from the Digital Strategy team in University Communications. For a side-by-side comparison, see below.

Comparison of Hero styles between version 2 and 3

Style

Version 2

Version 3

Style 1

Image with white heading & burnt orange call to action

Image with burnt orange heading & white call to action

Style 2

Image with dark gray heading & burnt orange call to action

Image with burnt orange heading & burnt orange call to action

Style 3

Image with dark blue heading & white call to action

Image with white heading & burnt orange call to action

Style 4

Windowed image with right-aligned text box

Image with black gradient heading & burnt orange call to action

Style 5

Windowed image with left-aligned text box

Image with white heading & burnt orange call to action

Flex Content Area

In version 2, some Flex Content Area images (those with a height below 300 pixels) displayed with no cropping, rather than the intended 3:2 aspect ratio. In version 3, all Flex Content Area images display with a 3:2 aspect ratio, regardless of original upload size. Uploaded images with other dimensions will be cropped.

Promo List

In version 2, each individual Promo List instance could be set to display with different column behavior. In version 3, that setting applies globally to the entire Promo List group. Since there is no limit on the number of Promo List instances, you can still create individual Promo Lists with different displays, if necessary, by creating multiple, separate instances.

Promo Unit

In version 2, each individual Promo Unit item could be set to display with square, portrait, or landscape image. In version 3, that setting applies globally to the entire Promo Unit instance. Since there is no limit on the number of Promo Unit instances, you can still create individual Promo Units with different displays, if necessary, by creating multiple, separate instances.

In version 2, if a Promo Unit had a link but no link text was provided, the link displayed with the boilerplate text “Read story.” This is not best practice for user experience or accessibility, as the “Read story” text is too generic to provide meaningful information about where the link is directing to. In version 3, if no link text is provided by content builders, the URL of the link itself will display. Note: content migrated from version 2 will retain the “Read story” text.

“Team Members” are now “Profiles”

The Team Member add-on from version 2 has an equivalent in version 3, rebranded as the Profile add-on. This reflects its capability to display not just people, but broader persona-based content such as fellowships or endowed chairs. ITS provides a migration path for version 2 Team Member content to version 3 Profiles.

The “Contact Info” blocks from version 2 have been replaced by the Flex List component.

Administrative interface

Version 3 uses a new administrative theme called “Claro.” The Drupal administrative interface, however, is largely the same as in version 2.