feat(memberships): overlay style for content gate #2377

miguelpeixe · 2023-03-27T20:39:18Z

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:

Implements overlay style options for the content gate page:

When selected, the overlay appears once the beginning of the post content reaches half the viewport. The settings for the number of visible paragraphs/more block do not change:

Gravacao.de.Tela.2023-03-29.as.16.47.12.mov

Overlay options are:

Placement: center or bottom
Size (width): small (400px) , medium (600px), large (800px)

On mobile, the overlay will always be placed at the bottom and full-width.

For later discussions: some ads are rendered behind this overlay and we should probably have a way around this. One possibility, for a separate PR, is to allow the publisher to tweak visible ad placements in gated content, just like it's done for regular pages/posts:

How to test the changes in this Pull Request:

Check out this branch and confirm you have the latest newspack-blocks (for this)
Edit the gate and change to "Overlay" and use the presented default settings
Place a donate block in the gate
Visit any restricted content, scroll down and confirm the gate appears as described above, in the center and 800px wide
Visit on mobile, scroll down, and confirm the gate is positioned at the bottom and full-width
Change the placement to "bottom", visit the page, and confirm the change on desktop
Tweak the size and confirm the editor changes as well,save, and confirm the change on the frontend
Click to donate and confirm the checkout takes over the overlay
Close the checkout and confirm the gate is back
Complete the membership flow and confirm the page is refreshed, the content is unlocked and the gate no longer appears

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?

dkoo

This is working great! I ran into one JS error in the editor, and have a few questions below. I also wanted to mention that on a larger screen it's very easy to read the content under the overlay. Wonder if there's anything we can do to mitigate that beyond adding a "full-width" option for the gate and a configurable overlay opacity (both suggested below)?

Could we somehow set the CSS height of html so that the page won't scroll past a certain point beyond where the gate is triggered? Or truncate the content under the overlay like we do with the inline gate?

assets/memberships-gate/editor.js

dkoo · 2023-03-31T18:23:45Z

assets/memberships-gate/editor.js

+const overlaySizes = [
+	{ value: 'small', label: __( 'Small', 'newspack' ) },
+	{ value: 'medium', label: __( 'Medium', 'newspack' ) },
+	{ value: 'large', label: __( 'Large', 'newspack' ) },


What about a full-width option here, too? On a large screen the "large" size still seems quite small.

Maybe within the full-width container we can still restrict the content to the same bounds as the site content itself, so the blocks aren't flush-left with the viewport.

01e1ff7 tweaks the sizes so it reflects the available set in Newspack Campaigns and full width.

Since large is rather large, I set the default to medium now.

assets/memberships-gate/overlay.scss

includes/plugins/class-wc-memberships.php

miguelpeixe · 2023-03-31T19:07:38Z

Or truncate the content under the overlay like we do with the inline gate?

The content should be truncated with the same settings as applied to the inline gate. Did it not on your instance?

dkoo

The content should be truncated with the same settings as applied to the inline gate. Did it not on your instance?

Oh, you're right, it is! I just didn't notice because my article content is all lorem ipsum. 😆 Nit: Could we append an ellipsis [...] to the end of the truncated content to indicate that it's truncated?

I also left some small suggestions which would apply a feature from the Campaigns plugin for PositionControl selector when the overlay is full-width. After that, this looks good to go!

assets/memberships-gate/editor.js

assets/memberships-gate/editor.scss

Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>

miguelpeixe · 2023-03-31T20:38:08Z

Nice! Thank you for the suggestion!

Did you manage to confirm the the_content filter issue on global post?

miguelpeixe · 2023-03-31T21:11:53Z

61382e0 adds ellipsis when in overlay and fixes a minor bug. The last paragraph of the truncated content was missing a closing </p>

dkoo

Thanks for the revisions!

# [1.112.0-alpha.3](v1.112.0-alpha.2...v1.112.0-alpha.3) (2023-04-04) ### Bug Fixes * add pre push hook ([#2395](#2395)) ([04a6e57](04a6e57)) * Avoid falal error on Reader Revenue wizard ([#2382](#2382)) ([646d212](646d212)) ### Features * **memberships:** overlay style for content gate ([#2377](#2377)) ([dd2ff5c](dd2ff5c))

matticbot · 2023-04-04T12:59:08Z

🎉 This PR is included in version 1.112.0-alpha.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [1.112.0](v1.111.1...v1.112.0) (2023-04-10) ### Bug Fixes * add pre push hook ([#2395](#2395)) ([04a6e57](04a6e57)) * Avoid falal error on Reader Revenue wizard ([#2382](#2382)) ([646d212](646d212)) * bail silently when recaptcha key is not set ([#2363](#2363)) ([de18369](de18369)) * don't show gate unless attached to a specific post ([#2400](#2400)) ([c45097c](c45097c)) * if My Account is set to shown in RAS, show in Customizer at all breakpoints ([#2379](#2379)) ([1052923](1052923)) * **memberships:** remove content filters from excerpt ([#2398](#2398)) ([987df5b](987df5b)) * **stripe-sync-script:** process only customers with successful transactions ([#2355](#2355)) ([1020663](1020663)) ### Features * **amp-deprecation:** polyfill amp-vimeo tag ([#2372](#2372)) ([4a70b65](4a70b65)) * **amp:** polyfill lightbox effect ([#2324](#2324)) ([b31288c](b31288c)) * **memberships:** content gate page ([#2366](#2366)) ([15026ab](15026ab)) * **memberships:** overlay style for content gate ([#2377](#2377)) ([dd2ff5c](dd2ff5c)) * **popups:** support disabled segments ([#2376](#2376)) ([bfd65b2](bfd65b2))

matticbot · 2023-04-10T19:52:22Z

🎉 This PR is included in version 1.112.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

miguelpeixe added 29 commits March 21, 2023 18:10

feat(memberships): content gate page

7afc59d

feat: add gate styles and settings

0e286bf

fix: handle trashed gate post

0732351

fix: typo

fed4fe8

fix: ui tweaks

7cd3394

fix: improve readability

3862658

feat: make "more" tag threshold optional

7c9c5ca

fix: disable overlay

06eea66

fix: ui tweaks

2d78e10

chore: lint

e473485

fix: rendering loops

92c4385

fix: typo

ddde70c

fix: ensure form exists

5c45e5d

feat: reload gated content on ras reader

b7a5081

feat: suppress campaigns prompts

00e8091

feat: update copy for "more" tag toggle

b40352b

fix: update copy for settings

495d96c

fix: update settings copy

7c365c1

fix: remove unncessary var

0cb2679

fix: tweak copy for settings

16d8359

Merge branch 'master' into feat/memberships-content-gate-page

9af51fa

fix: unify editor css

bbae182

feat(memberships): overlay style for content gate

ea87fae

feat: ui tweaks

74cf15f

fix: simplify and remove superfluous check

ee8af5c

feat: support different overlay styles

6bf6ffe

fix: syntax tweak

bbb50de

fix: typo

d3846c5

fix: dont apply custom width to inline

2a0a61c

Base automatically changed from feat/memberships-content-gate-page to master March 29, 2023 18:44

chore: remove unused vars

1377f5a

dkoo self-requested a review March 31, 2023 17:40

chore: update l10n domain

ea5071a

dkoo requested changes Mar 31, 2023

View reviewed changes

miguelpeixe added 2 commits March 31, 2023 16:42

feat: update overlay sizes

01e1ff7

fix: restore center only on desktop

bbda707

miguelpeixe requested a review from dkoo March 31, 2023 19:55

fix: style tweaks

8383709

dkoo requested changes Mar 31, 2023

View reviewed changes

assets/memberships-gate/editor.js Outdated Show resolved Hide resolved

assets/memberships-gate/editor.js Show resolved Hide resolved

assets/memberships-gate/editor.scss Outdated Show resolved Hide resolved

miguelpeixe and others added 4 commits March 31, 2023 17:35

Update assets/memberships-gate/editor.js

8a6f30f

Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>

Update assets/memberships-gate/editor.scss

0ba99ff

Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>

Update assets/memberships-gate/editor.js

35676ab

Co-authored-by: Derrick Koo <dkoo@users.noreply.github.com>

fix: change size name

b8c4aa8

miguelpeixe requested a review from dkoo March 31, 2023 21:00

fix: missing </p> closing tag and add ellipsis on overlay

61382e0

chore: remove superfluous rule

6721758

dkoo approved these changes Mar 31, 2023

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 labels Mar 31, 2023

miguelpeixe merged commit dd2ff5c into master Mar 31, 2023

miguelpeixe deleted the feat/memberships-content-gate-overlay branch March 31, 2023 22:16

matticbot added the released on @alpha label Apr 4, 2023

matticbot added the released label Apr 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(memberships): overlay style for content gate #2377

feat(memberships): overlay style for content gate #2377

miguelpeixe commented Mar 27, 2023 •

edited

Loading

dkoo left a comment

dkoo Mar 31, 2023

miguelpeixe Mar 31, 2023

miguelpeixe commented Mar 31, 2023

dkoo left a comment

miguelpeixe commented Mar 31, 2023

miguelpeixe commented Mar 31, 2023

dkoo left a comment

matticbot commented Apr 4, 2023

matticbot commented Apr 10, 2023

feat(memberships): overlay style for content gate #2377

feat(memberships): overlay style for content gate #2377

Conversation

miguelpeixe commented Mar 27, 2023 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

dkoo left a comment

Choose a reason for hiding this comment

dkoo Mar 31, 2023

Choose a reason for hiding this comment

miguelpeixe Mar 31, 2023

Choose a reason for hiding this comment

miguelpeixe commented Mar 31, 2023

dkoo left a comment

Choose a reason for hiding this comment

miguelpeixe commented Mar 31, 2023

miguelpeixe commented Mar 31, 2023

dkoo left a comment

Choose a reason for hiding this comment

matticbot commented Apr 4, 2023

matticbot commented Apr 10, 2023

miguelpeixe commented Mar 27, 2023 •

edited

Loading