feat: add tag labels support to Content Loop block

[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-plugin#4381

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-plugin topic branch, and the corresponding newspack-theme topic branch.
2. Create a post tag. Confirm that you see a 'Display as label' checkbox.
3. Check the 'Display as label' checkbox. Confirm the 'Label text' field is now visible.
4. Save the tag.
5. Tag a post with your new tag. This post should be one that shows up in a Content Loop block.
6. Confirm the post now shows a label with the tag name on it in the Content Loop block.
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 support for displaying selected tags as labels in the Content Loop block (Homepage Articles block). The feature allows tags to be designated as "labels" that appear above post headlines, with customizable text and colors.

Changes:

• Added backend methods to retrieve and format tag labels for posts
• Integrated tag labels into the REST API response for posts
• Updated the Content Loop block template and editor preview to display tag labels

Reviewed changes

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

File	Description
includes/class-newspack-blocks.php	Added three new methods: get_tag_labels(), generate_tag_labels(), and display_tag_labels() to retrieve and render tag labels
includes/class-newspack-blocks-api.php	Added newspack_blocks_get_tag_labels() method and integrated tag labels into the posts REST API endpoint
src/blocks/homepage-articles/templates/article.php	Updated template to retrieve and display tag labels for each post
src/blocks/homepage-articles/edit.tsx	Added rendering logic for tag labels in the block editor preview

---

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

[adekbadek]

Feature works well. A few inline notes, plus one scope suggestion: the Carousel block shares the same REST API data as Homepage Articles but does not render tag labels yet -- worth considering as a follow-up so the label experience is consistent across both content blocks.

[rbcorrales]

Swapping the labels since this seems to need some additional work.

[dkoo]

Echoing @adekbadek's comment that handling for tag labels is missing from the Carousel block. Aside from that, all is working as described.

[dkoo]

Whoops, hit the "Approved" button too eagerly. Latest changes for the "Show tag labels" attribute look good, but still need to add support for the Post Carousel block (or follow up in a separate PR).

[jason10lee]

Thanks, @dkoo! We'll tackle the Carousel in a separate PR to avoid scope creep.

[wil-gerken]

Tested the feature end-to-end in an isolated env with the feat/tag-labels branches for the plugin, blocks, and theme, plus seeded tags. Everything I checked works great: per-tag enable, custom vs. default label text, control tags correctly left off, the editor/REST data path, front-end rendering, the block toggle, and the customizer color with auto-contrast (light backgrounds get dark text, dark backgrounds get light text). The defensive class_exists() / method_exists() guards are spot-on, so this is safe to land ahead of the plugin and theme PRs — it renders nothing until they do. Nice work.

A few non-blocking notes below — none need to hold the merge; the first is a product call that's entirely yours to make.

[Copilot]

Pull request overview

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

[wil-gerken]

I re-checked the new commits, and all notes are handled: generate_tag_labels() dropped, the REST-shape tests added and passing (nice, you covered both the shape and the empty case), and the default-on toggle kept with a clear rationale. The perf gate is a great catch too. Thanks Jason!

Carousel block slated as a followup PR; otherwise, all requirements appear to be met.

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