Skip to content

feat(collections): add css classes to meta elements #4208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Sep 29, 2025
Merged

feat(collections): add css classes to meta elements #4208

merged 1 commit into from
Sep 29, 2025

Conversation

@rbcorrales
Copy link
Member

@rbcorrales rbcorrales commented Sep 26, 2025

All Submissions:

Changes proposed in this Pull Request:

Added semantic CSS classes to Collection block meta fields (period, volume, number) for granular styling control. Previously, these fields were rendered as plain text without individual classes, making them difficult to style separately.

Before:

<div class="wp-block-newspack-collections__meta">
    Sep 12-25, 2025<br>Vol. 23 / No. 50
</div>

After:

<div class="wp-block-newspack-collections__meta">
    <span class="wp-block-newspack-collections__period">Sep 12-25, 2025</span><br>
    <span class="wp-block-newspack-collections__volume">Vol. 23</span>
    <span class="wp-block-newspack-collections__divider">/</span>
    <span class="wp-block-newspack-collections__number">No. 50</span>
</div>

Bear in mind that, depending on the layout (grid or list), it might render another divider element instead of the <br>.

Changes maintain backward compatibility and consistency between editor preview (React) and frontend display (PHP).

Closes NPPD-877.

How to test the changes in this Pull Request:

  1. Create a Collection with period, volume, and number meta fields populated.
  2. Add a Collections block to a post/page and configure it to show meta fields.
  3. Verify the new CSS classes are present in both the editor preview and the frontend output.
  4. Test with different layouts (grid vs list) to ensure separators render correctly.
  5. Confirm existing styling remains intact while new classes enable granular control.
  6. Check that the archive and single collection pages don't have any visual changes. Only observable changes should be the HTML markup.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@rbcorrales rbcorrales requested a review from a team as a code owner September 26, 2025 22:15
@rbcorrales rbcorrales added the [Status] Needs Review The issue or pull request needs to be reviewed label Sep 26, 2025
@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Sep 29, 2025
@rbcorrales rbcorrales merged commit 2a13af6 into trunk Sep 29, 2025
10 checks passed
@rbcorrales rbcorrales deleted the feat/collections-meta-classes branch September 29, 2025 23:57
@github-actions
Copy link

github-actions bot commented Sep 29, 2025

Hey @rbcorrales, 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! ❤️

rbcorrales added a commit that referenced this pull request Sep 30, 2025
@rbcorrales
feat(collections): add css classes to meta elements (#4208)
7fbf7e9
matticbot pushed a commit that referenced this pull request Sep 30, 2025
@semantic-release-bot
chore(release): 6.20.0-alpha.4 [skip ci]
f78bcaa 
# [6.20.0-alpha.4](v6.20.0-alpha.3...v6.20.0-alpha.4) (2025-09-30)

### Features

* **collections:** add archive link in settings page ([#4203](#4203)) ([42694ec](42694ec))
* **collections:** add css classes to meta elements ([#4208](#4208)) ([7fbf7e9](7fbf7e9))
matticbot pushed a commit that referenced this pull request Oct 6, 2025
@semantic-release-bot
chore(release): 6.20.0 [skip ci]
0c811ee 
# [6.20.0](v6.19.0...v6.20.0) (2025-10-06)

### Bug Fixes

* ga4 events for gate interactions and tiered modal ([#4209](#4209)) ([2d35768](2d35768))
* Improve help text for Guest Contributor checkbox ([#4187](#4187)) ([5790f3d](5790f3d))
* newspack-plugin delay ([#4184](#4184)) ([22e8dc2](22e8dc2))
* remove content gate countdown block ([0204e58](0204e58))
* update download URL for db.php ([#4193](#4193)) ([4d363db](4d363db))

### Features

* **collections:** add archive link in settings page ([#4203](#4203)) ([42694ec](42694ec))
* **collections:** add Collections block ([#4166](#4166)) ([1185157](1185157))
* **collections:** add css classes to meta elements ([#4208](#4208)) ([7fbf7e9](7fbf7e9))
* **collections:** add logic for opening links in new tabs ([#4174](#4174)) ([07a5545](07a5545))
* **collections:** collections block feedback ([#4185](#4185)) ([0d0210c](0d0210c))
* **collections:** remove feature flag ([#4195](#4195)) ([b1619ef](b1619ef))
* **collections:** replace archive grid with collections block ([#4178](#4178)) ([d0cbadd](d0cbadd))
* **content-gate:** add countdown block ([#4176](#4176)) ([f8fe757](f8fe757))
* **my-account:** subscription switch modal ([#4177](#4177)) ([28c26e7](28c26e7))
* subscription tier modal ([#4164](#4164)) ([4d6ebe2](4d6ebe2))
matticbot pushed a commit that referenced this pull request Oct 17, 2025
@semantic-release-bot
chore(release): 6.22.0-alpha.1 [skip ci]
5e4107a 
# [6.22.0-alpha.1](v6.21.2...v6.22.0-alpha.1) (2025-10-17)

### Bug Fixes

* **collections:** remove collection-related taxonomies from quick edit ([#4222](#4222)) ([e327230](e327230))
* **content-gate-countdown-block:** update block design ([fda287c](fda287c))
* ga4 events for gate interactions and tiered modal ([#4209](#4209)) ([162f34a](162f34a))
* keep prevent one and two col Collections block grid from being increased on smaller screens ([#4224](#4224)) ([482eef6](482eef6))
* **lite-site:** allow line breaks ([#4221](#4221)) ([ead3283](ead3283))
* **metering:** get current user metered views ([#4227](#4227)) ([ebc32b7](ebc32b7))
* **my-account:** new payment method style tweaks ([#4220](#4220)) ([88a638c](88a638c))
* **subscription-switch:** unhook direction text from checkout ([#4229](#4229)) ([69915ef](69915ef))

### Features

* **audience:** primary subscription product ([#4191](#4191)) ([1137770](1137770))
* **collections:** add archive link in settings page ([#4203](#4203)) ([8aad8ca](8aad8ca))
* **collections:** add css classes to meta elements ([#4208](#4208)) ([2a13af6](2a13af6))
* **collections:** implement design feedback for archive link ([#4219](#4219)) ([da35672](da35672))
* **InDesign:** inline image caption, horizontal rule, headings and blockquotes ([#4201](#4201)) ([c39b9f9](c39b9f9))
* **my-account:** add delete payment method modal confirmation ([#4216](#4216)) ([3220af2](3220af2))
* **my-account:** addresses ([#4206](#4206)) ([d57b1c9](d57b1c9))
* **newspack-icons:** add ai and ai-text to npm package ([#4235](#4235)) ([06789a9](06789a9))
* **newspack-icons:** add typescript support; add new icons ([#4088](#4088)) ([bb2cb82](bb2cb82))
* validate donation products ([#4163](#4163)) ([de24ff4](de24ff4))
* **woocommerce:** enable block emails ([#4218](#4218)) ([0643158](0643158))
@matticbot
Copy link
Contributor

matticbot commented Oct 17, 2025

🎉 This PR is included in version 6.22.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Oct 30, 2025
@semantic-release-bot
chore(release): 6.22.0 [skip ci]
1b9bd6a 
# [6.22.0](v6.21.4...v6.22.0) (2025-10-30)

### Bug Fixes

* add feature flag to countdown block and email enhancements ([#4262](#4262)) ([b8691d8](b8691d8))
* **collections:** remove collection-related taxonomies from quick edit ([#4222](#4222)) ([e327230](e327230))
* **content-gate-countdown-block:** update block design ([fda287c](fda287c))
* ga4 events for gate interactions and tiered modal ([#4209](#4209)) ([162f34a](162f34a))
* keep prevent one and two col Collections block grid from being increased on smaller screens ([#4224](#4224)) ([482eef6](482eef6))
* **lite-site:** allow line breaks ([#4221](#4221)) ([ead3283](ead3283))
* **metering:** get current user metered views ([#4227](#4227)) ([ebc32b7](ebc32b7))
* **my-account:** new payment method style tweaks ([#4220](#4220)) ([88a638c](88a638c))
* **subscription-switch:** unhook direction text from checkout ([#4229](#4229)) ([69915ef](69915ef))
* **subscriptions-tiers:** standardize product input name ([#4261](#4261)) ([4194267](4194267))
* tweak configuration labels for the primary subscription product ([#4260](#4260)) ([ab5a5c7](ab5a5c7))
* **upgrade-subscription-link:** remove query arg onload ([#4263](#4263)) ([87fe3d4](87fe3d4))

### Features

* **audience:** primary subscription product ([#4191](#4191)) ([1137770](1137770))
* **collections:** add archive link in settings page ([#4203](#4203)) ([8aad8ca](8aad8ca))
* **collections:** add css classes to meta elements ([#4208](#4208)) ([2a13af6](2a13af6))
* **collections:** implement design feedback for archive link ([#4219](#4219)) ([da35672](da35672))
* **InDesign:** inline image caption, horizontal rule, headings and blockquotes ([#4201](#4201)) ([c39b9f9](c39b9f9))
* **my-account:** add delete payment method modal confirmation ([#4216](#4216)) ([3220af2](3220af2))
* **my-account:** addresses ([#4206](#4206)) ([d57b1c9](d57b1c9))
* **my-account:** edit donation amount ([#4200](#4200)) ([f84d121](f84d121))
* **newspack-icons:** add ai and ai-text to npm package ([#4235](#4235)) ([06789a9](06789a9))
* **newspack-icons:** add typescript support; add new icons ([#4088](#4088)) ([bb2cb82](bb2cb82))
* validate donation products ([#4163](#4163)) ([de24ff4](de24ff4))
* **woocommerce:** enable block emails ([#4218](#4218)) ([0643158](0643158))
@matticbot
Copy link
Contributor

matticbot commented Oct 30, 2025

🎉 This PR is included in version 6.22.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dkoo dkoo dkoo approved these changes

Assignees

No one assigned

Labels

released on @alpha released [Status] Approved The pull request has been reviewed and is ready to merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rbcorrales @matticbot @dkoo