feat: add support for displaying tags as 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-theme#2613

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 issues:

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-theme 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 PR adds functionality to display selected post tags as labels, similar to how categories are displayed. The feature includes an admin interface for enabling tags as labels with optional custom label text, and works in conjunction with a companion PR in the newspack-theme repository.

• Added a new Tag_Labels class that manages tag label settings via term meta
• Created admin UI fields to enable tags as labels and customize label text
• Added helper methods for themes to retrieve tag labels for display

Reviewed changes

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

File	Description
src/other-scripts/tag-labels/index.js	Adds jQuery-based client-side logic to enable/disable the label flag input based on checkbox state
includes/tag-labels/class-tag-labels.php	Implements the core Tag_Labels class with admin UI, data storage, and helper methods for retrieving tag labels
includes/class-newspack.php	Includes the new tag-labels class file to integrate it into the plugin

---

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

[leogermani]

This is looking good Jason, thanks for the work! I left some minor comments in the code.

I'll tag @thomasguillot and add a needs-design review for him to have a look and answer your questions around presentation. I think it should follow what Sponsors do as much as possible (which is to display the label above the title). Thomas, please also share your thought on how we name and present this feature in the UI. Is "Labels" a good name?

I also have an existencial question I'll copy for @laurelfulford : Since this is very tied to the theme, should this whole thing live in the theme instead? WDYT?

[leogermani]

would has_tag_label (or even just has_label) be a better name here? I was confused

[jason10lee]

Yeah, named this expecting a tag would be of a type 'label', but has may be better. I'm leaning toward _tag_label over just _label because 'label' is a bit of a generic term on its own.

Seeing as you asked whether 'labels' is even appropriate, let's see what folks say about it.

[thomasguillot]

Create a post tag. Name and description don't matter.
Edit the post tag. Confirm that you see both a 'Use as label' checkbox and a (disabled) 'Label flag' field below it.

How come we don't have the checkbox and the label flag field when first creating? I must admit I thought I hadn't switched branch and it wasn't working at first.

[jason10lee]

Create a post tag. Name and description don't matter.
Edit the post tag. Confirm that you see both a 'Use as label' checkbox and a (disabled) 'Label flag' field below it.

How come we don't have the checkbox and the label flag field when first creating? I must admit I thought I hadn't switched branch and it wasn't working at first.

Thanks, @thomasguillot! That was a potential issue I flagged, and based on your and @leogermani's comments, I think it'll be worth making those options visible on creation.

[thomasguillot]

"Labels" works well. It's intuitive, distinct from the existing "Tags" terminology, and commonly understood in editorial contexts I think.

For the fields, I'd suggest: (ae531b4)

Checkbox: "Display as label" with help text: Show this tag as a highlighted label wherever posts are displayed.
Text input: "Label text" with help text: Custom text to display instead of the tag name.

[jason10lee]

For the fields, I'd suggest: (ae531b4)
All good, and I'll be using the tweaks you made to the dependent field toggles for the add_form_fields side of things, too!