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.