Redesigned "Spotlight" posts to use similar styling to new design system Alerts / SuggestionPanels

[djanelle-mit]

Developer

On some child sites we have "Spotlight" posts, which act as gray featured posts.

UXWS was interested in redesigning these to be more visually engaging and align closer with how we're taking the design system.

This work introduces a new fork of the alert styling for spotlights which is based on the design for the suggestion panel. It introduces the new core and semantic colors we'll need to implement this.

This work did not change the functionality of the spotlight posts (which uses the Wordpress "Sticky" post feature), just the appearance and markup.

Stylesheets

• Any theme or plugin whose stylesheets have changed has had its version
  string incremented.

Secrets

• All new secrets have been added to Pantheon tiers
• Relevant secrets have been updated in Github Actions
• All new secrets documented in README

Documentation

• Project documentation has been updated
• No documentation changes are needed

Accessibility

• ANDI or Wave has been run in accordance to
  our guide and
  all issues introduced by these changes have been resolved or opened as new
  issues (link to those issues in the Pull Request details above)

Stakeholder approval

• Stakeholder approval has been confirmed
• Stakeholder approval is not needed

Dependencies

YES | NO dependencies are updated

Code Reviewer

• The commit message is clear and follows our guidelines
  (not just this pull request message)
• The changes have been verified
• The documentation has been updated or is unnecessary
• New dependencies are appropriate or there were no changes

[matt-bernhardt]

It looks like refactoring this template to remove the classes excerpt-post__fig and excerpt-post__body will orphan some styles in the stylesheet. It may also orphan the entire excerpt-post class, but that isn't as clear to me. It isn't entirely clean, as some rules are also applied to a section-hilite class (that seems to be already abandoned, or at least I don't see it referenced in any of our templates - maybe it's produced by WordPress itself somehow).

Is it worth cleaning out references to these classes from the stylesheet (lines 722, 738-772, and 1375-1885) along with this change? Or would it be better to keep those in place just in case something references them from plugins or whatnot?

I do see a pair of templates from the news theme which still use excerpt-post as a class name, but IIRC the news theme and child themes are siblings - neither of them inherits from the other.

[djanelle-mit]

@matt-bernhardt It looks like the .excerpt-post and their respective __ classes aren't used anywhere now. I tried removing the hilite related classes but it seems to affect the Image + Link pairings below the spotlight on the Scholarly page, so left those rules completely to avoid any effects downstream. Tagging you for re-review just to double-check this!

[matt-bernhardt]

Ah... we're using those classes in hand-crafted HTML on a page like that. Huh... that's going to make the determination of whether a class is abandoned or not a little harder to determine. We might be able to search an exported database for instances of those class names, but IIRC WordPress keeps some prior versions of content around depending on the retention settings of each site, so even if we find content that uses those class values we'd need to dig deeper to see if we're finding current content or former versions of pages and articles.

There's probably a way to write a SQL query that will restrict only to current versions of site content, but I write the query off the top of my head.

In terms of this PR, this all looks fine to me now. Thanks for digging in on this.

[matt-bernhardt]

I'm fine with this merging as-is, but would like to ask that we consider cleaning out some CSS rules that will no longer be referenced when we remove some of these class names. I suspect that one of the reasons why our stylesheets are as messy as they are is that we've not been as good at removing deprecated styles as we should have been.

That said, this is hardly a new problem introduced by this change, and its possible that I've missed somewhere that uses these classes as I've only done a few minutes searching through the themes directory for the class names.

if you'd like - if you end up removing anything from the stylesheets, I'm happy to re-review those changes too.

[matt-bernhardt]

This looks good to merge from my perspective - thanks for doing the digging into these other classes and finding that some of them are still in use.

[matt-bernhardt]

Ah... we're using those classes in hand-crafted HTML on a page like that. Huh... that's going to make the determination of whether a class is abandoned or not a little harder to determine. We might be able to search an exported database for instances of those class names, but IIRC WordPress keeps some prior versions of content around depending on the retention settings of each site, so even if we find content that uses those class values we'd need to dig deeper to see if we're finding current content or former versions of pages and articles.

There's probably a way to write a SQL query that will restrict only to current versions of site content, but I write the query off the top of my head.

In terms of this PR, this all looks fine to me now. Thanks for digging in on this.