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.