Skip to content

fix: add fallback selector for the content gate in block theme#4431

Open
laurelfulford wants to merge 1 commit intotrunkfrom
fix/add-gate-fallback-for-block-theme
Open

fix: add fallback selector for the content gate in block theme#4431
laurelfulford wants to merge 1 commit intotrunkfrom
fix/add-gate-fallback-for-block-theme

Conversation

@laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

Both styles of content gate seem to work well out of the box with the block theme. So far, the only thing I've noticed is missing is some kind of fallback for the entry selector.

The Post Content block (part of the Query Block) also uses .entry-content as a CSS class, so the main selector is available.

The #content ID that's used as a fallback isn't part of the block theme. Instead of trying to add it, I added a second fallback using #wp--skip-link--target, which is added to the <main> element by some JS in WordPress, at roughly the same level as #content.

See NPPD-1126

How to test the changes in this Pull Request:

  1. Apply this PR & run npm run build.
  2. Test on a site running our block theme.
  3. Set up a Content Gate (either using Memberships or Newspack gates), and set the gate to be an overlay.
  4. Test in an incognito window, and confirm the gate is triggered.
  5. Edit line 246 in the src/content-gate/gate.js file to modify the initial let entry definition, to make sure it doesn't match any CSS classes, so the fallback will need to be used (eg. let entry = document.querySelector( '.entry-content-not-a-real-class' );
  6. Rerun npm run build, and retest the gate in the incognito window. The skip link ID is fairly high so the gate will trigger before scolling, but this is also the case with the Classic theme and #content (it contains the post header, whereas .entry-content only contains the post body).

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?

@laurelfulford laurelfulford requested a review from a team as a code owner January 27, 2026 19:56
@laurelfulford laurelfulford added the [Status] Needs Review The issue or pull request needs to be reviewed label Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Needs Review The issue or pull request needs to be reviewed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant