feat: add support for tag labels

[jason10lee]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR is one of a pair that adds the ability to display selected tags as labels. Changes live in the feat/tag-labels topic branch on the newspack-plugin and newspack-theme projects.

See also: Automattic/newspack-plugin#4381

1. In non-singular context (as part of a Content Loop block, for example), the tag label will show up in front of the headline.
2. In singular context (on the individual post page, for example), the tag label will show up with the category label.

By default, the text of the tag label will be the same as the tag name. Optionally, the label text can be customized (e.g., to something shorter and more suitable for use as a label).

Addresses NPPD-383: "Breaking News" or "Developing" Label.

Open questions:

1. Should we separate out the singular and non-singular behaviors? (I.e., via another option?)
2. Should we make this available on tag creation? At the moment, this is only on edit so's to keep clutter down, but I don't think there's anything technically stopping us from doing otherwise.
3. Aesthetics! Anything radically different we should be doing with these? (This feature should get a proper style review, too, before release.)
4. This isn't the cleanest patch, especially in newspack-theme--PHPCS decided that since I changed a couple lines in newspack-theme/functions.php, the whole file is now my problem. I've made tweaks to non-code bits, but have added phpcs:ignore directives with explanatory comments elsewhere.

How to test the changes in this Pull Request:

These instructions will be pretty much identical between these two PRs--if you've tested one, you've tested the other.

Basic operation:

1. Pull both this topic branch and the corresponding newspack-plugin topic branch.
2. Create a post tag. Name and description don't matter.
3. Edit the post tag. Confirm that you see both a 'Use as label' checkbox and a (disabled) 'Label flag' field below it.
4. Check the 'Use as label' checkbox. Confirm the 'Label flag' field is now enabled and that it has a placeholder value that matches the current tag name.
5. Save the tag.
6. Tag a post with your new tag. Ideally this would be something that shows up in a non-singular context (like in a Content Loop block on the home page) too.
7. Confirm the post now shows a label with the tag name on it. This should appear before the headline in non-singular contexts and before the category labels in singular contexts. Test the home page, individual post page, and category or tag archive, for example.
8. Edit the post tag again. Uncheck the 'Use as label' checkbox. Confirm the 'Label flag' field is disabled and save.
9. Confirm the label is no longer shown on the post.

Multiple labels:

1. Enable tag labels on your test tag, as above.
2. Tag your test post with another tag that doesn't have labels enabled. Confirm only the test tag with labels enabled displays a label on the post.
3. Enable labels on your second test tag. Confirm it also shows up on the post.

Custom label text (flag):

1. Edit one of your test post tags. Check the 'Use as label' field to enable the 'Label flag' field.
2. Add text of your choice (something different from the tag name!) to the 'Label flag' field and save.
3. Confirm the test post shows a label with your custom text in all contexts.
4. Edit the post tag and verify your custom text is still shown in the 'Label flag' field.
5. Clear the 'Label flag' field. Confirm the original tag name is again shown as a placeholder and save.
6. Confirm the test post shows a label with the original tag name.
7. Edit the post tag, uncheck the 'Use as label' field and save. Confirm the label's no longer shown.
8. Edit the post tag and add custom text to the 'Label flag' field again. Save. (Optionally: check your custom text still shows up!)
9. Edit the post tag and uncheck the 'Use as label' field. Confirm no label is shown on the test post.

Extra credit--plugin mismatch:

1. Roll back the newspack-plugin plugin to track trunk.
2. Confirm your site isn't now spitting critical errors.
3. Confirm the 'Use as label' and 'Label flag' fields are no longer shown when editing tags.
4. Update newspack-plugin to track the feat/tag-labels topic branch.
5. Roll back newspack-themes to track trunk.
6. Confirm the site still isn't erroring out.
7. Confirm 'Use as label' and 'Label flag' fields are now shown again.
8. Confirm those settings have no effect on your test post.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

This pull request adds support for displaying selected tags as labels on posts in the Newspack theme. Tag labels appear before headlines in non-singular contexts (like archive pages) and alongside category labels in singular contexts (individual post pages). The feature integrates with the corresponding newspack-plugin implementation and includes graceful degradation when the plugin is not available.

Key changes:

• Added tag label display logic to template files for singular and archive views
• Created new SCSS styling for tag labels with responsive design considerations
• Implemented PHP shim functions to integrate with the newspack-plugin Tag_Labels class

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
scripts/compile-scss.js	Added compilation entry for the new newspack-tag-labels.scss stylesheet
newspack-theme/template-parts/header/entry-header.php	Integrated tag label display in post headers for singular views
newspack-theme/template-parts/content/content-excerpt.php	Added tag labels to post excerpts in archive contexts
newspack-theme/template-parts/content/content-archive.php	Added tag labels to archived content displays
newspack-theme/sass/plugins/newspack-tag-labels.scss	Created stylesheet with tag label styling for various contexts
newspack-theme/inc/newspack-tag-labels.php	Implemented shim functions for tag label generation, display, and styling
newspack-theme/functions.php	Added phpcs ignore directives and loaded tag labels compatibility file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[thomasguillot]

There's a small issue with: --newspack-theme-color-highlight. Right now there isn't a way to control this. It's kind of tied to the Sponsors. But if you change the sponsors colour, then --newspack-theme-color-highlight isn't updated.

So what we could do is, introducing a new setting for this highlight color in Customizer > Colors > Colors [Custom] > Apply a highlight custom color.

And then for sponsors, instead of using --newspack-theme-color-highlight we could use --newspack-theme-color-sponsors and defaulting this to --newspack-theme-color-highlight and avoid hardcoding the hex if the setting in Customizer > Sponsored Content > Sponsored Content Label

Also you'll notice in the screenshot above the font-size is way off with the Content Loop block. That's because the tag is inside the <h2> so the font-size inherits the title's

[jason10lee]

So what we could do is, introducing a new setting for this highlight color in Customizer > Colors > Colors [Custom] > Apply a highlight custom color.

Thanks, @thomasguillot! That makes a lot of sense, and your and @laurelfulford's suggestion on using a contrast color for the text color would complement that perfectly. I'll work up those changes for these tag labels.

Also you'll notice in the screenshot above the font-size is way off with the Content Loop block. That's because the tag is inside the <h2> so the font-size inherits the title's

What are your thoughts on the positioning of this label? Should we put it on the same line as (say) the SPONSORED label above it? A separate line either above or below the SPONSORED label? Leave as is, but outside the <h2> so it's less bulky?

[thomasguillot]

What are your thoughts on the positioning of this label? Should we put it on the same line as (say) the SPONSORED label above it? A separate line either above or below the SPONSORED label? Leave as is, but outside the <h2> so it's less bulky?

I'd say same line as the SPONSORED label. It's unlikely a publisher will have a sponsored label AND a tag label.