Blocks: add a new Cookie Consent Block #29197

jeherve · 2023-02-28T08:38:37Z

Proposed changes:

Replay of #29191 in the Jetpack plugin.

This adds a new Beta block, to be used in block themes, to display a cookie consent banner on the site.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

pdDR7T-Ax-p2
pdDR7T-Cr-p2

Does this pull request change what data or activity we track or use?

Yes, it adds a new cookie (eucookielaw) when you click to accept the banner. That cookie is already in use by the Cookies & Consents Banner widget, but that should still be documented.

Testing instructions:

Start with a site that's connected to WordPress.com and where you have enabled Beta blocks (add_filter( 'jetpack_blocks_variation', function () { return 'beta'; } );).
- On WordPress.com Simple, you do not need the filter. You will see the block when you are logged in.
Go to Appearance > Themes and enable a block theme; Twenty Twenty Three will work.
Go to Appearance > Site Editor
You should now be able to add and customize the block.
- Check that you can edit contents and change the settings in the block sidebar.
- Check that your changes can be saved.
- Check that your changes are visible on the frontend.
- When dismissing the banner in the frontend, you will see the eucookielaw cookie be added in your browser. The banner should then be gone.
- When refreshing the page, the banner should still be gone.

Replay of #29191 in the Jetpack plugin. This adds a new Beta block, to be used in block themes, to display a cookie consent banner on the site. Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

github-actions · 2023-02-28T08:40:32Z

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack add/cookie-consent-block

to get started. More details: p9dueE-5Nn-p2

github-actions · 2023-02-28T08:40:44Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ All commits were linted before commit.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

Next scheduled release: March 7, 2023.
Scheduled code freeze: February 28, 2023.

projects/plugins/jetpack/extensions/blocks/cookie-consent/cookie-consent.php

jeherve · 2023-02-28T08:40:56Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/cookie-consent.php

+ * @return bool
+ */
+function should_register_block() {
+	return true;


This is there for development, it should be removed before we merge this PR.

projects/plugins/jetpack/extensions/blocks/cookie-consent/icon.js

jeherve · 2023-02-28T08:43:28Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/index.js

+	attributes,
+	example: {
+		attributes: {
+			// @TODO: Add default values for block attributes, for generating the block preview.


We'd need to address that.

Do we have to add anything here if the block as a default value for every attribute?

anomiex · 2023-02-28T14:20:41Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/attributes.js

+		source: 'html',
+		selector: 'p',
+		default: __(
+			'Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here: <a href=https://automattic.com/cookies/>Cookie Policy</a>.',


I suspect that self-hosted sites would need a different link here. Maybe Atomic too?

Yes, for the widget we allow custom links in there, and also take into account the page you can set as your privacy policy page in WordPress:

jetpack/projects/plugins/jetpack/modules/widgets/class-jetpack-eu-cookie-law-widget.php

Lines 138 to 139 in 3104e37

'default-policy-url' => 'https://automattic.com/cookies/',

'custom-policy-url' => get_option( 'wp_page_for_privacy_policy' ) ? get_permalink( (int) get_option( 'wp_page_for_privacy_policy' ) ) : '',

This is something we could improve on in a follow-up PR I think.

It would be a nice improvement for the default value, but the block is entirely customizable and users can change the URL.

projects/plugins/jetpack/extensions/blocks/cookie-consent/index.js

alshakero · 2023-02-28T15:32:53Z

Thank you so much @jeherve and @anomiex! I addressed all your feedback.

Added a nice MIT licensed icon.
Removed the exclusion for sites with ads, took inspiration from the widget. I took this condition from wpcom/wp-content/mu-plugins/widgets/eu-cookie-law/eu-cookie-law.php but it doesn't seem to translate well in Jetpack (at least locally). And removing it is fairly harmless since the block is opt-in.
Made the description plain text. Hence, removed the learn more link.

jeherve

I gave it a try. I think this first iteration is ready to merge; we can iterate in follow-up PRs.

I cannot approve it though since I opened the PR, so I'll let someone else from Crew take care of that.

I left some more comments below.

I wonder if some folks will be tempted to do something like this:

And if so, should we support having 2 buttons, one accept, one reject? That's probably something for a v2.

jeherve · 2023-02-28T18:13:23Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+							},
+						],
+					] }
+					templateLock="all"


It would be nice if I had more flexibility over the button, such as alignment within the block. Maybe we could give more options by not locking the button?

Since the button has to be there for the block to work, we could maybe take an approach similar to #24838?

We actually started with a much more flexible block, we had the whole thing as a template (see: pdDR7T-Cr-p2) but the flexibility makes it a great tool to abuse and show one-time ads on your site.

The only reason I see InnerBlocks here is that I couldn't figure hard-coding a customizable button. RichText only allowed us to hard-code a p but I was unable to find a way for a button.

jeherve · 2023-02-28T18:14:04Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+					allowedBlocks={ [ 'core/button' ] }
+					template={ [
+						[
+							'core/button',


I wonder if we would get more options by switching to using jetpack/button, like we do in most of our other blocks that use buttons?

projects/plugins/jetpack/extensions/blocks/cookie-consent/icon.js

jeherve · 2023-02-28T18:18:08Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/attributes.js

+				text: 'var(--wp--preset--color--contrast)',
+				background: 'var(--wp--preset--color--tertiary)',
+				link: 'var(--wp--preset--color--contrast)',


Something seems off with this. It grabs the colors just fine, but when I go to edit them, I see this:

I couldn't come up with a way to make this work. Undocumented and I tried everything I can come up with!

projects/plugins/jetpack/extensions/blocks/cookie-consent/index.js

jeherve · 2023-02-28T18:21:35Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+							{
+								label: isRTL() ? __( 'Right', 'jetpack' ) : __( 'Left', 'jetpack' ),
+								value: 'left',
+							},
+							{
+								label: __( 'Full', 'jetpack' ),
+								value: 'full',
+							},
+							{
+								label: __( 'Wide', 'jetpack' ),
+								value: 'wide',
+							},
+							{
+								label: isRTL() ? __( 'Left', 'jetpack' ) : __( 'Right', 'jetpack' ),
+								value: 'right',


Should we offer a center option here as well?

It took us so much work to get this running in more than one theme.

jeherve · 2023-02-28T18:22:46Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+					onChange={ textValue => setAttributes( { text: textValue } ) }
+				/>
+				<InnerBlocks
+					allowedBlocks={ [ 'core/button' ] }


Could we allow headings here as well, for folks who want to add a bigger title before the explanation?

These InnerBlocks are only around the button. They're not meant to give control to the user. They're just a way to make the button customizable. I wish I could lock it down further.

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

alshakero

Pushed some improvements and it looks great now!

projects/plugins/jetpack/extensions/blocks/cookie-consent/cookie-consent.php

alshakero · 2023-02-28T15:26:00Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/index.js

+	attributes,
+	example: {
+		attributes: {
+			// @TODO: Add default values for block attributes, for generating the block preview.


Do we have to add anything here if the block as a default value for every attribute?

alshakero · 2023-02-28T15:27:29Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/attributes.js

+		source: 'html',
+		selector: 'p',
+		default: __(
+			'Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here: <a href=https://automattic.com/cookies/>Cookie Policy</a>.',


It would be a nice improvement for the default value, but the block is entirely customizable and users can change the URL.

alshakero · 2023-02-28T21:28:35Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+							},
+						],
+					] }
+					templateLock="all"


We actually started with a much more flexible block, we had the whole thing as a template (see: pdDR7T-Cr-p2) but the flexibility makes it a great tool to abuse and show one-time ads on your site.

The only reason I see InnerBlocks here is that I couldn't figure hard-coding a customizable button. RichText only allowed us to hard-code a p but I was unable to find a way for a button.

alshakero · 2023-02-28T22:13:20Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/attributes.js

+				text: 'var(--wp--preset--color--contrast)',
+				background: 'var(--wp--preset--color--tertiary)',
+				link: 'var(--wp--preset--color--contrast)',


I couldn't come up with a way to make this work. Undocumented and I tried everything I can come up with!

alshakero · 2023-02-28T22:23:12Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+							{
+								label: isRTL() ? __( 'Right', 'jetpack' ) : __( 'Left', 'jetpack' ),
+								value: 'left',
+							},
+							{
+								label: __( 'Full', 'jetpack' ),
+								value: 'full',
+							},
+							{
+								label: __( 'Wide', 'jetpack' ),
+								value: 'wide',
+							},
+							{
+								label: isRTL() ? __( 'Left', 'jetpack' ) : __( 'Right', 'jetpack' ),
+								value: 'right',


It took us so much work to get this running in more than one theme.

alshakero · 2023-02-28T22:24:21Z

projects/plugins/jetpack/extensions/blocks/cookie-consent/edit.js

+					onChange={ textValue => setAttributes( { text: textValue } ) }
+				/>
+				<InnerBlocks
+					allowedBlocks={ [ 'core/button' ] }


These InnerBlocks are only around the button. They're not meant to give control to the user. They're just a way to make the button customizable. I wish I could lock it down further.

anomiex

I'll go with Jeremy saying it's good enough to merge and iterate on.

Blocks: add a new Cookie Consent Block

747eae2

Replay of #29191 in the Jetpack plugin. This adds a new Beta block, to be used in block themes, to display a cookie consent banner on the site. Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

jeherve added [Feature] Extra Sidebar Widgets [Status] In Progress [Pri] Normal [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Feb 28, 2023

jeherve assigned alshakero and jeherve Feb 28, 2023

github-actions bot added the [Block] Cookie Consent label Feb 28, 2023

jeherve commented Feb 28, 2023

View reviewed changes

jeherve requested a review from escapemanuele February 28, 2023 08:45

anomiex reviewed Feb 28, 2023

View reviewed changes

projects/plugins/jetpack/extensions/blocks/cookie-consent/index.js Outdated Show resolved Hide resolved

alshakero added 3 commits February 28, 2023 15:45

Add Icon

85a3c57

Remove ads conditions

fb0bf02

Plain text description

1c5bb07

Add keywords

942dd87

jeherve commented Feb 28, 2023

View reviewed changes

jeherve added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] Needs Team Review and removed [Status] In Progress labels Feb 28, 2023

alshakero added 3 commits February 28, 2023 23:12

Pass className to useBlockProps

de64834

Add block description

290bff7

Simpler label

02355a4

alshakero approved these changes Feb 28, 2023

View reviewed changes

anomiex approved these changes Mar 1, 2023

View reviewed changes

Merge branch 'trunk' into add/cookie-consent-block

6e5032f

jeherve merged commit b8fd51f into trunk Mar 2, 2023

jeherve deleted the add/cookie-consent-block branch March 2, 2023 09:18

github-actions bot removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] Needs Team Review labels Mar 2, 2023

github-actions bot added this to the jetpack/11.9 milestone Mar 2, 2023

jeherve modified the milestones: jetpack/11.9, jetpack/12.0 Mar 2, 2023

alshakero mentioned this pull request Mar 2, 2023

Tiny PR: Fix cookie consent default content and CSS #29251

Merged

3 tasks

samiff added the [Status] Needs Testing We need to add this change to the testing call for this month's release label Mar 8, 2023

alshakero mentioned this pull request Mar 14, 2023

Release cookie-consent block to production #29462

Merged

anomiex removed the [Status] Needs Testing We need to add this change to the testing call for this month's release label May 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: add a new Cookie Consent Block #29197

Blocks: add a new Cookie Consent Block #29197

jeherve commented Feb 28, 2023

github-actions bot commented Feb 28, 2023 •

edited

github-actions bot commented Feb 28, 2023 •

edited

jeherve Feb 28, 2023

jeherve Feb 28, 2023

alshakero Feb 28, 2023

anomiex Feb 28, 2023

jeherve Feb 28, 2023

alshakero Feb 28, 2023

alshakero commented Feb 28, 2023

jeherve left a comment

jeherve Feb 28, 2023

alshakero Feb 28, 2023

jeherve Feb 28, 2023

jeherve Feb 28, 2023

alshakero Feb 28, 2023

jeherve Feb 28, 2023

alshakero Feb 28, 2023

jeherve Feb 28, 2023

alshakero Feb 28, 2023

alshakero left a comment

alshakero Feb 28, 2023

alshakero Feb 28, 2023

alshakero Feb 28, 2023

alshakero Feb 28, 2023

alshakero Feb 28, 2023

alshakero Feb 28, 2023

anomiex left a comment

	'default-policy-url' => 'https://automattic.com/cookies/',
	'custom-policy-url' => get_option( 'wp_page_for_privacy_policy' ) ? get_permalink( (int) get_option( 'wp_page_for_privacy_policy' ) ) : '',

Blocks: add a new Cookie Consent Block #29197

Blocks: add a new Cookie Consent Block #29197

Conversation

jeherve commented Feb 28, 2023

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Feb 28, 2023 • edited

github-actions bot commented Feb 28, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alshakero commented Feb 28, 2023

jeherve left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anomiex left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2023 •

edited

github-actions bot commented Feb 28, 2023 •

edited