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 set that adds the ability to display selected tags as labels. Changes live in the feat/tag-labels topic branch on the newspack-blocks, newspack-plugin, and newspack-theme projects.

See also: Automattic/newspack-plugin#4381
See also: Automattic/newspack-blocks#2282

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

Labels will appear above the headline, after any category or sponsorship labels.

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). Additionally, the label color can be customized in the Newspack Theme customizer.

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

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. Confirm that you see a 'Display as label' checkbox below the Add Tag form.
3. Check the 'Display as label' checkbox. Confirm a 'Label text' field appears below the 'Display as Label' checkbox.
4. Save the tag.
5. Tag a post with your new tag.
6. View the post and confirm the post now shows a label with the tag name on it just above the headline.
7. Edit the post tag again. Uncheck the 'Display as label' checkbox. Confirm the 'Label text' field is disabled and save.
8. 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 'Display as label' field to enable the 'Label text' field.
2. Add text of your choice (something different from the tag name!) to the 'Label text' 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 text' field.
5. Clear the 'Label text' 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 'Display as label' field and save. Confirm the label's no longer shown.
8. Edit the post tag and add custom text to the 'Label text' field again. Save. (Optionally: check your custom text still shows up!)
9. Edit the post tag and uncheck the 'Display as label' field. Confirm no label is shown on the test post.

Custom label color:

1. Add a tag with labels enabled to a test post.
2. Ensure you're using a Newspack theme, and open the theme customizer (Appearance > Customize).
3. Select Tag Labels from the menu.
4. Click on 'Select color' to select a color for the label. If a post tagged with that label is visible in the preview pane on the right, you should see it change! The text color may change as well to better contrast with the new label color.
5. Hit the 'Publish' button at the top and check your test post. It should show the new color scheme.

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.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

---

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

[adekbadek]

The theme integration works well -- labels render correctly on single posts, archives, and the homepage, with proper customizer color support. One inline note on the HTML generation duplication.

[jason10lee]

Heads-up--PHPCS is snippy and trunk has the fix. I've rebased the branch to incorporate that, so folks with a checkout of it may need to git fetch origin && git reset --hard origin/feat/tag-labels

[dkoo]

Almost there! I'm still seeing a lack of padding for the tag label when displayed in a Content Loop block, as screenshotted earlier. All other areas seem to be styled correctly.

[wil-gerken]

I tested the full feature end-to-end on a live env with all three feat/tag-labels branches, and it's looking great. I also verified each previous comment thread, and they all look resolved (except one-ish): the custom color doesn't apply on single-post and archive pages. I think this one needs to be addressed before merge.

Prior review threads (shared status):

Thread	Status
@dkoo — padding lost in the Content Loop block	✅ Fixed — non-zero padding confirmed on home, archive, and single. The changes-requested review appears to predate the 5/27 specificity fix.
@adekbadek — newspack_generate_tag_labels / display duplicate the plugin's methods	✅ Fixed — both now delegate to \Newspack\Tag_Labels.
@thomasguillot — label font-size inheriting the h2	✅ Fixed — the label renders outside the title at the expected size.
@thomasguillot — label color tied to the sponsor highlight	⚠️ Partially fixed — the customizer control was added, but the custom color doesn't apply on single/archive, so those still use the sponsor-tied color. This is the one (see inline).

Once the color override is fixed, this should be ready to merge. @dkoo may also want to re-review the padding thread, since that request now appears satisfied.

[jason10lee]

Thanks, @wil-gerken ! Please have another look when you get a chance.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

[wil-gerken]

Thanks Jason! I re-tested the new commits on a live env. The custom-color fix holds in all three contexts now: home, archive, and single all honor a custom color (single/archive were falling back to the highlight color before). Padding's intact and the markup-order CSS round looks great. Thanks for the quick turnaround!

Note: The PR still shows changes requested in Derrick's earlier padding review, which has also been fixed. I think @dkoo will need to re-review to clear the block.

[dkoo]

Sorry!

[github-actions]

Hey @jason10lee, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️