feat(content-gate): add countdown block #4176

chickenn00dle · 2025-09-10T18:16:41Z

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:

Closes https://linear.app/a8c/issue/NPPM-2204/content-restriction-block-shows-countdown-before-you-hit-the-wall-you

This PR adds a new content gate countdown block that displays the remaining free metered views for a post or page:

How to test the changes in this Pull Request:

First create some memberships and have some readers that are members and non-members
Create some content gates for these memberships, making sure each has metering active
Add the content gate countdown block to several of the restricted posts/pages in which the block has been added
Test that the block

appears on the frontend when within the metered view limit
countsdown as the reader views more relevant content
appears on the frontend for posts that have already been viewed when the limit is reached
does not appear on the frontend for newly viewed posts whenever the limit is reached (gate should be displayed instead)
does not appear for members who have access
Be sure to also test the for logged in members, logged in non-members, and logged out readers

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?

src/blocks/content-gate-countdown/edit.jsx

chickenn00dle · 2025-09-16T17:43:44Z

includes/plugins/wc-memberships/class-memberships.php

+					$regex = "$category\/$name";
+				}
+				$content = preg_replace( "/<!-- wp:$regex {?.*?}? -->.*?<!-- \/wp:$regex -->/s", '', $content );
+			}


If we don't filter this, any inner paragraph blocks within the content gate block will appear in the excerpt despite us explicitly returning an empty string in the render callback.

chickenn00dle · 2025-09-16T17:45:41Z

src/blocks/content-gate-countdown/edit.jsx

+					'newspack-blocks/checkout-button',
+					{
+						text: __( 'Subscribe now', 'newspack-plugin' ),
+						align: 'center',


Note, alignment is broken in the editor right now and will be fixed in Automattic/newspack-blocks#2207

Copilot

Pull Request Overview

This PR introduces a new content gate countdown block that displays remaining free metered views for a post or page. The block allows readers to see how many free articles they have left before hitting their metering limit.

Adds a new WordPress block called "Content Gate Countdown" for the Newspack plugin
Implements frontend JavaScript functionality to dynamically update countdown for anonymous users
Integrates with existing metering system to display current usage against total allowed views

Reviewed Changes

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

Show a summary per file

File	Description
webpack.config.js	Adds build entry for the new countdown block's frontend view script
src/blocks/index.js	Registers the new countdown block with conditional loading based on membership availability
src/blocks/content-gate-countdown/view.js	Frontend JavaScript that updates countdown display for anonymous users
src/blocks/content-gate-countdown/style.scss	CSS styling for the countdown block's responsive layout
src/blocks/content-gate-countdown/index.js	Block registration with metadata, settings, and save function
src/blocks/content-gate-countdown/edit.jsx	Block editor component with inspector controls and preview functionality
src/blocks/content-gate-countdown/class-content-gate-countdown-block.php	PHP class handling block registration, rendering, and server-side logic
src/blocks/content-gate-countdown/block.json	Block metadata defining attributes and supported features
packages/icons/src/content-gate-countdown.js	SVG icon component for the countdown block
packages/icons/index.js	Exports the new countdown icon
includes/plugins/wc-memberships/class-metering.php	Adds utility methods for retrieving metering data
includes/plugins/wc-memberships/class-memberships.php	Excludes countdown block from post excerpts
includes/class-blocks.php	Includes countdown block class and provides metering data to editor

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/blocks/content-gate-countdown/view.js

includes/plugins/wc-memberships/class-memberships.php

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

includes/plugins/wc-memberships/class-memberships.php

miguelpeixe

It's working mostly well! I encountered a few issues and suggestions that I commented inline.

miguelpeixe · 2025-09-18T20:05:34Z

src/blocks/content-gate-countdown/edit.jsx

+			<Placeholder
+				icon={ caution }
+				label={ __(
+					'The content gate countdown block will only display in restricted content when metering is enabled.',
+					'newspack-plugin'
+				) }
+				className="no-metering"
+			/>


This should also have blockProps, otherwise the element won't interact well with the editor.

Added in c9ed5ab

miguelpeixe · 2025-09-18T20:08:50Z

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

+use Newspack;
+use Newspack\Memberships;
+use Newspack\Memberships\Metering;


Can we namespace this to Newspack instead?

Good call. Changed in c9ed5ab

miguelpeixe · 2025-09-18T20:10:04Z

includes/class-blocks.php

+use Newspack\Memberships;
+use Newspack\Memberships\Metering;


This is superfluous as we're already in the Newspack namespace.

We can keep Newspack\Memberships\Metering, but I don't think it's bad to use Memberships\Metering in the code.

It feels cleaner to use just Metering in the code imo, so I'll keep it as is. Happy to change it if you feel strongly about it though!

miguelpeixe · 2025-09-18T20:24:58Z

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

+		if ( ! Metering::is_metering() ) {
+			return '';
+		}


I think we also need to bail on ! Memberships::is_post_restricted(), otherwise the block will render for readers with access.

Ah. Good catch! I had removed this part of the check while working on styles and forgot to re-add it before submitting for review. Fixed in c9ed5ab

miguelpeixe · 2025-09-18T20:38:59Z

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

+		$countdown       = sprintf(
+			/* translators: 1: remaining metered views, 2: total metered views. */
+			__( '%1$d/%2$d', 'newspack-plugin' ),
+			max( 0, $total_views - $remaining_views ),


The amount was already calculated here. It's going full circle and returning the number of articles read 😄

Speaking of which, even though I'm aware that the block is called countdown, reading 4/5 on my first visit was a bit odd. Not sure if it's because of the way it's phrased, maybe it's just me. @thomasguillot can you confirm whether it should be the number of articles read or remaining?

The amount was already calculated here. It's going full circle and returning the number of articles read 😄

Ha. Yeah. I initially had this counting down using the remaining count. Then at the last second I thought it made more sense to show the number of articles read and made this change. I've gone back to remaining count here in c9ed5ab, but I'd like to get confirmation from @thomasguillot as well to know what this number should be.

It's meant to be 4 articles read out of 5. So the first visit should be 1/5

So you have read 1 article. And you have 5 free.

And not read 4 articles

Thanks @thomasguillot! Updated this to count up in 68df86c

miguelpeixe · 2025-09-18T20:41:06Z

src/blocks/content-gate-countdown/block.json

+      "default": ""
+    }
+  },
+  "supports": {


Looking at the design, it seems that the block should also support align, so it can also render wide and full width.

Good catch! Added in c9ed5ab

miguelpeixe · 2025-09-18T20:42:39Z

src/blocks/content-gate-countdown/edit.jsx

+					},
+				],
+				[
+					'newspack-blocks/checkout-button',


WDYT of adding "backgroundColor":"primary" to the template as well?

Sure thing! This requires setting textColor to secondary to avoid contrast issues. Added in c9ed5ab

miguelpeixe · 2025-09-18T21:00:59Z

src/blocks/content-gate-countdown/edit.jsx

+	// Admin is always logged in, so if no loggedin metered views are set, use the anonymous views instead.
+	const totalViews = loggedinViews > 0 ? loggedinViews : anonymousViews;


This is a bit confusing. Isn't this about whether the post gate has metering configured?

Something like:

Suggested change

// Admin is always logged in, so if no loggedin metered views are set, use the anonymous views instead.

const totalViews = loggedinViews > 0 ? loggedinViews : anonymousViews;

const hasMetering = loggedinViews || anonymousViews;

Still, this does not take into account whether metering is active (the metering meta)

The problem this is solving is in the editor, the user (admin) is always logged in, so if the post is metered for anonymous readers and not registered readers, then the views will always be 0 in the editor.

I named this variable totalViews because below we use it when displaying the countdown: https://github.com/Automattic/newspack-plugin/pull/4176/files/d116d5625454735dbf6c024e91b43626c93b6705#diff-da1ae48178cfb1fb24cf269739fc3d32517200fb0105cefdba1155dba8c45f9eR98

As for using the || operator instead of the ternary, I thought the ternary made it a bit clearer that we are falling back to anonymous views if loggedin views was 0. But both will have the same result, so happy to change it if you prefer!

Still, this does not take into account whether metering is active (the metering meta)

Yeah. I decided not to check the meta here because having both loggedinViews and anonymousViews be 0 is effectively the same as not having metering active.

miguelpeixe

Thank you for the revisions! It's working great, but I found a couple of issues:

miguelpeixe · 2025-09-24T19:02:46Z

src/blocks/content-gate-countdown/view.js

+		// Replace countdown for anonymous users.
+		const countdown = sprintf(
+			/* translators: 1: current number of metered views, 2: total metered views. */ __( '%1$d/%2$d', 'newspack-plugin' ),
+			content.length,
+			count
+		);
+		countdownEl.textContent = countdown;


When accessing an article for the first time with anonymous metering, I'm getting 0 reads:

We may need to listen to the metering_restricted activity dispatch for an accurate number here

Strange, on my end the metering script is always run before the countdown script, and the value is correctly updated:

I checked in multiple browsers to confirm this isn't some browser loading order quirk. In any case, I added the metering script handle as a dependency when enqueuing the countdown script to ensure this is always the case in 4202b80

miguelpeixe · 2025-09-24T19:14:38Z

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

+		}
+		wp_enqueue_style(
+			'newspack-content-gate-countdown-block',
+			\Newspack\Newspack::plugin_url() . '/dist/content-gate-countdown-block.css',


Not sure why, but I'm getting 404 for this asset.

Looks like the styles for this are being bundled into commons by webpack. Not sure if this is what you are seeing. On my end, there is no content-gate-countdown-block.css being fetched. Instead the styles live in commons.css

It's getting added to the markup and throwing 404:

Ah sorry! Seeing it now. I guess we don't need to enqueue the styles here 🤷‍♂️

github-actions · 2025-09-25T15:43:47Z

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

# [6.20.0-alpha.1](v6.19.0...v6.20.0-alpha.1) (2025-09-25) ### Bug Fixes * Improve help text for Guest Contributor checkbox ([#4187](#4187)) ([5790f3d](5790f3d)) * newspack-plugin delay ([#4184](#4184)) ([22e8dc2](22e8dc2)) * update download URL for db.php ([#4193](#4193)) ([4d363db](4d363db)) ### Features * **collections:** add Collections block ([#4166](#4166)) ([1185157](1185157)) * **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 · 2025-09-25T18:34:55Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

This reverts commit f8fe757.

# [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 · 2025-10-06T13:53:23Z

🎉 This PR is included in version 6.20.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

chickenn00dle force-pushed the feat/add-content-gate-countdown-block branch 3 times, most recently from c4c29f2 to d4b8352 Compare September 11, 2025 22:11

chickenn00dle mentioned this pull request Sep 12, 2025

feat(checkout-button): add justification support Automattic/newspack-blocks#2206

Closed

6 tasks

chickenn00dle commented Sep 12, 2025

View reviewed changes

src/blocks/content-gate-countdown/edit.jsx Outdated Show resolved Hide resolved

chickenn00dle force-pushed the feat/add-content-gate-countdown-block branch 3 times, most recently from 0ce4d23 to 61ec477 Compare September 15, 2025 23:44

chickenn00dle marked this pull request as ready for review September 15, 2025 23:45

chickenn00dle requested a review from a team as a code owner September 15, 2025 23:45

chickenn00dle added [Status] Needs Review The issue or pull request needs to be reviewed and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Sep 15, 2025

chickenn00dle force-pushed the feat/add-content-gate-countdown-block branch from 28ca464 to c28dd18 Compare September 16, 2025 17:37

chickenn00dle commented Sep 16, 2025

View reviewed changes

chickenn00dle added the [Status] Needs Review The issue or pull request needs to be reviewed label Sep 16, 2025

chickenn00dle requested a review from Copilot September 16, 2025 17:46

Copilot AI reviewed Sep 16, 2025

View reviewed changes

miguelpeixe requested changes Sep 18, 2025

View reviewed changes

github-actions bot added the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Sep 18, 2025

chickenn00dle added 10 commits September 19, 2025 10:36

feat(content-gate): add countdown block

bcbaa98

feat: add checkout button and clean up block

66abff5

fix: only register when content gate active

716f5fa

fix: update styles

64565b4

fix: update styles

50c2267

fix: account for anonymous readers

68e9bbd

fix: adjust spacing

5b19478

fix: anonymous meter in editor

618127d

fix: use useInnerBlocksProps hook

fdd706f

fix: omit content gate block from restricted excerpts

88445ce

fix: address PR feedback

009cbde

chickenn00dle force-pushed the feat/add-content-gate-countdown-block branch from c9ed5ab to 009cbde Compare September 19, 2025 14:36

chickenn00dle requested a review from miguelpeixe September 19, 2025 14:37

chickenn00dle removed the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Sep 23, 2025

fix: count up

68df86c

miguelpeixe requested changes Sep 24, 2025

View reviewed changes

github-actions bot added the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Sep 24, 2025

fix: add script dependency

4202b80

chickenn00dle requested a review from miguelpeixe September 24, 2025 21:38

fix: remove style enqueuing

492e931

miguelpeixe approved these changes Sep 25, 2025

View reviewed changes

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 [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Sep 25, 2025

chickenn00dle merged commit f8fe757 into trunk Sep 25, 2025
11 checks passed

chickenn00dle deleted the feat/add-content-gate-countdown-block branch September 25, 2025 15:43

github-actions bot added the needs-changelog label Sep 25, 2025

chickenn00dle removed the needs-changelog label Sep 25, 2025

matticbot added the released on @alpha label Sep 25, 2025

chickenn00dle added a commit that referenced this pull request Sep 29, 2025

Revert "feat(content-gate): add countdown block (#4176)"

da9edea

This reverts commit f8fe757.

chickenn00dle mentioned this pull request Sep 30, 2025

fix(content-gate-countdown-block): block updates #4217

Merged

6 tasks

matticbot added the released label Oct 6, 2025

miguelpeixe mentioned this pull request Oct 8, 2025

fix(metering): get current user metered views #4227

Merged

6 tasks

This was referenced Nov 12, 2025

fix: content gate metadata methods and params #4306

Merged

feat: metered content countdown banner #4315

Open

		// Admin is always logged in, so if no loggedin metered views are set, use the anonymous views instead.
		const totalViews = loggedinViews > 0 ? loggedinViews : anonymousViews;

	// Admin is always logged in, so if no loggedin metered views are set, use the anonymous views instead.
	const totalViews = loggedinViews > 0 ? loggedinViews : anonymousViews;
	const hasMetering = loggedinViews \|\| anonymousViews;

feat(content-gate): add countdown block #4176

feat(content-gate): add countdown block #4176

Uh oh!

Conversation

chickenn00dle commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miguelpeixe Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chickenn00dle Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

chickenn00dle commented Sep 10, 2025 •

edited

Loading

miguelpeixe Sep 18, 2025 •

edited

Loading

chickenn00dle Sep 24, 2025 •

edited

Loading