CookieConsent: use template saved in settings (#31511)

Co-authored-by: Omar Alshaker <omar@omaralshaker.com>

projects/plugins/jetpack/changelog/add-cookie-consent-setting

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Persist block markup and ensure it is rendered in the footer

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

@@ -49,7 +49,15 @@ function register_block() {
 
 	Blocks::jetpack_register_block(
 		BLOCK_NAME,
-		array( 'render_callback' => __NAMESPACE__ . '\load_assets' )
+		array( 'render_callback' => __NAMESPACE__ . '\load_assets' ),
+		array(
+			'attributes' => array(
+				'render_from_template' => array(
+					'default' => false,
+					'type'    => 'boolean',
+				),
+			),
+		)
 	);
 }
 add_action( 'init', __NAMESPACE__ . '\register_block' );
@@ -73,6 +81,11 @@ function load_assets( $attr, $content ) {
 		return '';
 	}
 
+	$option = get_option( 'cookie_consent_template' );
+	if ( ! empty( $option ) && ! $attr['render_from_template'] ) {
+		return '';
+	}
+
 	/*
 	 * Enqueue necessary scripts and styles.
 	 */
@@ -96,3 +109,51 @@ function notify_batcache_that_content_changed() {
 		vary_cache_on_function( 'return isset( $_COOKIE[ "' . COOKIE_NAME . '" ] );' );
 	}
 }
+
+/**
+ * Render the cookie consent template.
+ *
+ * @since $$next-version$$
+ */
+function render_cookie_consent_template() {
+
+	if ( is_admin() ) {
+		return;
+	}
+
+	// Check whether block theme functions exist.
+	if ( ! function_exists( 'parse_blocks' ) ) {
+		return;
+	}
+
+	$template = get_option( 'cookie_consent_template' );
+
+	if ( empty( $template ) ) {
+		return;
+	}
+
+	$parsed = parse_blocks( $template );
+	if ( ! empty( $parsed[0] ) ) {
+		$parsed[0]['attrs']['render_from_template'] = true;
+		echo render_block( $parsed[0] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	}
+}
+add_action( 'wp_footer', __NAMESPACE__ . '\render_cookie_consent_template' );
+
+/**
+ * Register cookie_consent_template setting
+ *
+ * @since $$next-version$$
+ */
+function cookie_consent_register_settings() {
+	register_setting(
+		'general',
+		'cookie_consent_template',
+		array(
+			'type'         => 'string',
+			'show_in_rest' => true,
+		)
+	);
+}
+
+add_action( 'rest_api_init', __NAMESPACE__ . '\cookie_consent_register_settings' );

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

@@ -2,18 +2,21 @@ import { InspectorControls, useBlockProps, InnerBlocks, RichText } from '@wordpr
 import { PanelBody, TextControl, SelectControl } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import './editor.scss';
+import { useSaveCookieConsentSettings } from './use-save-cookie-consent-settings';
 
 /**
  * Cookie Consent Edit Component.
  *
  * @param {object} props - Component props.
+ * @param {string} props.clientId - Block id
  * @param {object} props.attributes	- {object} Block attributes.
  * @param {Function} props.setAttributes - Set block attributes.
  * @returns {object} Element to render.
  */
-function CookieConsentBlockEdit( { attributes, setAttributes } ) {
+function CookieConsentBlockEdit( { clientId, attributes, setAttributes } ) {
 	const { consentExpiryDays, align, text } = attributes;
 
+	useSaveCookieConsentSettings( clientId );
 	/**
 	 * Update the alignment of the block. This takes care setting names alignments (left, right, etc..) or eg width=500.
 	 *

projects/plugins/jetpack/extensions/blocks/cookie-consent/editor.scss

@@ -5,6 +5,7 @@
 @import './common';
 
 .wp-block-jetpack-cookie-consent {
+	position: initial;
 	/* Required to capture clicks */
 	background-color: transparent;
 	bottom: unset;

projects/plugins/jetpack/extensions/blocks/cookie-consent/test/fixtures/jetpack__cookie-consent.html

@@ -0,0 +1,5 @@
+<!-- wp:jetpack/cookie-consent -->
+<div class="wp-block-jetpack-cookie-consent alignwide has-text-color has-background has-text-color has-background" style="color:var(--wp--preset--color--contrast);background-color:var(--wp--preset--color--tertiary);padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em" role="dialog" aria-modal="true"><p>Privacy &amp; 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>.</p><!-- wp:button -->
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Accept</a></div>
+	<!-- /wp:button --><span>365</span></div>
+<!-- /wp:jetpack/cookie-consent -->

projects/plugins/jetpack/extensions/blocks/cookie-consent/test/fixtures/jetpack__cookie-consent.json

@@ -0,0 +1,30 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "jetpack/cookie-consent",
+		"isValid": true,
+		"attributes": {
+			"text": "Privacy &amp; 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>.",
+			"style": {
+				"color": {
+					"text": "var(--wp--preset--color--contrast)",
+					"background": "var(--wp--preset--color--tertiary)",
+					"link": "var(--wp--preset--color--contrast)"
+				},
+				"spacing": {
+					"padding": {
+						"top": "1em",
+						"right": "1em",
+						"bottom": "1em",
+						"left": "1em"
+					}
+				}
+			},
+			"align": "wide",
+			"consentExpiryDays": 365,
+			"showOverlay": false
+		},
+		"innerBlocks": [],
+		"originalContent": "<div class=\"wp-block-jetpack-cookie-consent alignwide has-text-color has-background has-text-color has-background\" style=\"color:var(--wp--preset--color--contrast);background-color:var(--wp--preset--color--tertiary);padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em\" role=\"dialog\" aria-modal=\"true\"><p>Privacy &amp; 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>.</p><span>365</span></div>"
+	}
+]

projects/plugins/jetpack/extensions/blocks/cookie-consent/test/fixtures/jetpack__cookie-consent.parsed.json

@@ -0,0 +1,23 @@
+[
+	{
+		"blockName": "jetpack/cookie-consent",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/button",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Accept</a></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Accept</a></div>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-jetpack-cookie-consent alignwide has-text-color has-background has-text-color has-background\" style=\"color:var(--wp--preset--color--contrast);background-color:var(--wp--preset--color--tertiary);padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em\" role=\"dialog\" aria-modal=\"true\"><p>Privacy &amp; 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>.</p><span>365</span></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-jetpack-cookie-consent alignwide has-text-color has-background has-text-color has-background\" style=\"color:var(--wp--preset--color--contrast);background-color:var(--wp--preset--color--tertiary);padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em\" role=\"dialog\" aria-modal=\"true\"><p>Privacy &amp; 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>.</p>",
+			null,
+			"<span>365</span></div>\n"
+		]
+	}
+]

projects/plugins/jetpack/extensions/blocks/cookie-consent/test/fixtures/jetpack__cookie-consent.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:jetpack/cookie-consent -->
+<div class="wp-block-jetpack-cookie-consent alignwide has-text-color has-background has-text-color has-background" style="color:var(--wp--preset--color--contrast);background-color:var(--wp--preset--color--tertiary);padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em" role="dialog" aria-modal="true"><p>Privacy &amp; 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>.</p><span>365</span></div>
+<!-- /wp:jetpack/cookie-consent -->

projects/plugins/jetpack/extensions/blocks/cookie-consent/test/validate.js

@@ -0,0 +1,5 @@
+import { name, settings } from '../';
+import runBlockFixtureTests from '../../../shared/test/block-fixtures';
+
+const blocks = [ { name: `jetpack/${ name }`, settings } ];
+runBlockFixtureTests( `jetpack/${ name }`, blocks, __dirname );

projects/plugins/jetpack/extensions/blocks/cookie-consent/use-save-cookie-consent-settings.js

@@ -0,0 +1,53 @@
+import { serialize } from '@wordpress/blocks';
+import { usePrevious } from '@wordpress/compose';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+
+export function useSaveCookieConsentSettings( clientId ) {
+	const isSaving = useSelect( select => {
+		const { isSavingPost, isSavingNonPostEntityChanges } = select( 'core/editor' );
+		return isSavingPost() || isSavingNonPostEntityChanges();
+	}, [] );
+	const wasSaving = usePrevious( isSaving );
+	const postHasBeenJustSaved = !! ( wasSaving && ! isSaving );
+
+	const [ , setCookieConsentTemplate ] = useEntityProp( 'root', 'site', 'cookie_consent_template' );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const [ isSavingSetting, setIsSavingSetting ] = useState( false );
+
+	const getBlockById = useSelect( select => {
+		const { getBlock } = select( 'core/block-editor' );
+		return getBlock;
+	} );
+
+	const saveTemplate = useCallback(
+		template => {
+			setIsSavingSetting( true );
+			setCookieConsentTemplate( template );
+			saveEditedEntityRecord( 'root', 'site', undefined, {
+				cookie_consent_template: template,
+			} ).finally( () => {
+				setIsSavingSetting( false );
+			} );
+		},
+		[ setIsSavingSetting, setCookieConsentTemplate, saveEditedEntityRecord ]
+	);
+
+	useEffect( () => {
+		return () => {
+			const block = getBlockById( clientId );
+
+			if ( ! block ) {
+				saveTemplate( null );
+			}
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	useEffect( () => {
+		if ( postHasBeenJustSaved && ! isSavingSetting ) {
+			saveTemplate( serialize( [ getBlockById( clientId ) ] ) );
+		}
+	}, [ postHasBeenJustSaved, isSavingSetting, saveTemplate, getBlockById, clientId ] );
+}