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 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-theme#2613
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:

Basic operation:

1. Pull this topic branch, the newspack-blocks topic branch, and the corresponding newspack-theme 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. You should see this on the home page (i.e., Content Loop block) and on the individual post page.
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 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?

[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!

[Copilot]

Pull request overview

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

---

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

[leogermani]

Hi @jason10lee finally got back to these PRs to give it another go. It's looking good.

On the content loop, when I hover the label, the background color doesn't change. In the single, it changes. I don't know which is the correct behavior.

I had the impression that there is too much code duplication on the newspack blocks plugin. Especially when it comes to build the HTML, which is basically the same HTML used in other places. It would be awesome if this would live in one single place - ideally the plugin itself.

(Idea for the future - not this PR - we could have an api/hooks in the block and the themes to add labels on the top of posts title. and then both sponsors and tag labels could do things the same way... but just an idea for now)

[jason10lee]

On the content loop, when I hover the label, the background color doesn't change. In the single, it changes. I don't know which is the correct behavior.

Thanks, @leogermani! Good question as to which is right. I'll see what sponsors does here and standardize on that (if there is a standard!).

I had the impression that there is too much code duplication on the newspack blocks plugin. Especially when it comes to build the HTML, which is basically the same HTML used in other places. It would be awesome if this would live in one single place - ideally the plugin itself.

Yeah, I started out with an idea like that--the HTML generation code would live in one place, and I'd just have thin accessor functions elsewhere to just reuse it. The HTML needed for single-post display wound up being different from that required for Content Loop, so I scrapped the idea.

Still, the idea of a factory function for things like labels and badges is really appealing. I think that'll become super doable once Block Theme is out in the wild, so let's revisit that soon!

[leogermani]

Yeah, I started out with an idea like that--the HTML generation code would live in one place, and I'd just have thin accessor functions elsewhere to just reuse it. The HTML needed for single-post display wound up being different from that required for Content Loop, so I scrapped the idea.

Maybe I'm not seeing it, but the only difference I see is that one is wrapped around a div and another one around a span. If that's the only difference, I think we can still have one single function with a param to inform the desired wrapper element.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 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 Tag_Labels class works correctly -- admin UI, meta persistence, and the data contract all look good. A few inline notes.

[jason10lee]

The Tag_Labels class works correctly -- admin UI, meta persistence, and the data contract all look good. A few inline notes.

Hey, @adekbadek! Thanks for the reviews on this and its siblings! Leo made a similar note about reducing the maintenance surface (and you've probably guessed I had similar plans from the parameterization in the canonical HTML generation) so I think we've got a solid direction here. Will be landing patches on these three topic branches later today to address that, and will dig into the other feedback.

[jason10lee]

the only difference I see is that one is wrapped around a div and another one around a span.

Yep! That was me having second thoughts about splitting this up like we do with sponsors (that's also the reason the class attributes are parameterized). Updated this and related projects to centralize in b8b0e0f.