Merge pull request #76 from boxuk/consent-management

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+tests
+src
+.turbo

Readme.md

@@ -0,0 +1,29 @@
+# Consent Management
+
+A WordPress plugin to provide an interface for providing cookie consent
+that integrates with [Google Tag Manager Consent Mode](https://support.google.com/tagmanager/answer/10718549?hl=en).
+
+Provides a fully customisable experience for editors to setup the relevant labels and text for configuring Google Tag Manager consents, and inserts the relevant tag manager code to the page. 
+
+Based on [Vanilla Cookie Consent](https://github.com/orestbida/cookieconsent), the interface is ready
+for you to apply your customisations. To customise the look feel, see the file at `./sample/style.scss` or follow the docs from Cookie Consent to add CSS.
+
+![](./screenshots/1.png)
+![](./screenshots/2.png)
+![](./screenshots/3.png)
+![](./screenshots/4.png)
+![](./screenshots/5.png)
+
+## To Do
+
+- [] Allow UI shape/style customisation (ie change from popup to banner etc)
+- [] Allow colour/style specification from within the admin interface. (at the moment a user-provided CSS sheet must be included to modify the deafult style).
+- [] Allow for further customistaion 
+
+---
+
+Please do not submit any Pull Requests here. They will be closed.
+Please submit your PR here instead: https://github.com/boxuk/wp-packages
+
+This repository is what we call a "subtree split": a read-only subset of that main repository.
+We're looking forward to your PR there!

build/admin.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-deprecated', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-preferences', 'wp-primitives'), 'version' => 'f8c51b093a88d9e36da9');

build/blocks/ShowConsent/block.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "boxuk/consent-button",
+  "title": "Consent Trigger",
+  "description": "Adds a link to show the cookie consent popup.",
+  "category": "widgets",
+  "keywords": [
+    "cookies",
+    "consent",
+    "button",
+    "gdpr"
+  ],
+  "textdomain": "boxuk",
+  "editorScript": "file:./index.js",
+  "supports": {
+    "align": [
+      "full",
+      "wide"
+    ],
+    "dimensions": {
+      "aspectRatio": false,
+      "minHeight": false
+    },
+    "anchor": true,
+    "html": false,
+    "multiple": true,
+    "position": {
+      "sticky": false
+    },
+    "spacing": {
+      "margin": true,
+      "padding": true
+    },
+    "typography": {
+      "fontSize": true,
+      "lineHeight": true,
+      "textAlign": true
+    },
+    "reusable": true
+  },
+  "attributes": {
+    "text": {
+      "type": "rich-text",
+      "default": "Set Cookie Preferences",
+      "source": "rich-text"
+    }
+  },
+  "example": {}
+}

build/blocks/ShowConsent/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-rich-text'), 'version' => '721c10773df0474a00c7');

build/frontend.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-dom-ready', 'wp-i18n', 'wp-url'), 'version' => '0c3c23dd29989af1b448');

composer.json

@@ -0,0 +1,11 @@
+{
+	"name": "boxuk/wp-consent-management",
+	"type": "wordpress-muplugin",
+	"authors": [
+		{
+			"name": "BoxUK",
+			"email": "[email protected]"
+		}
+	],
+	"require": {}
+}

consent-management.php

@@ -0,0 +1,172 @@
+<?php
+/**
+ * Plugin Name: ConsentManagement
+ * Description: A plugin that allows you to add GTM and cookie consent to your site.
+ * Version: 1.0.0
+ * Author: BoxUK
+ * Author URI: https://boxuk.com
+ * 
+ * @package Boxuk\ConsentManagement
+ */
+
+declare( strict_types=1 );
+
+namespace Boxuk\ConsentManagement;
+
+/**
+ * Loads Consent Management
+ */
+class ConsentManagement {
+
+	/**
+	 * Hook Name
+	 *
+	 * @var string
+	 */
+	private const HOOK_NAME = 'consent-management';
+
+	/**
+	 * Option Name
+	 *
+	 * @var string
+	 */
+	private const OPTION_NAME = 'consent_options';
+
+	/**
+	 * Init Hooks
+	 *
+	 * @return void
+	 */
+	public function init(): void {
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_frontend' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin' ) );
+		add_action( 'init', array( $this, 'register_settings' ) );
+		add_action( 'admin_menu', array( $this, 'add_settings_screen' ) );
+	}
+
+	/**
+	 * Enqueue Scripts
+	 *
+	 * @return void
+	 */
+	public function enqueue_frontend(): void {
+
+		$asset = require __DIR__ . '/build/frontend.asset.php';
+
+		wp_enqueue_script(
+			self::HOOK_NAME,
+			plugins_url( '/build/frontend.js', __FILE__ ),
+			$asset['dependencies'],
+			$asset['version'],
+			false
+		);
+
+		wp_localize_script(
+			self::HOOK_NAME,
+			'consentManagement',
+			(array) get_option( self::OPTION_NAME, array() ),
+		);
+
+		wp_enqueue_style(
+			self::HOOK_NAME,
+			plugins_url( '/build/frontend.css', __FILE__ ),
+			array(),
+			$asset['version']
+		);
+	}
+
+	/**
+	 * Enqueue Admin Assets
+	 *
+	 * @param string $suffix The current admin page.
+	 *
+	 * @return void
+	 */
+	public function enqueue_admin( string $suffix ): void {
+		if ( 'settings_page_' . self::HOOK_NAME !== $suffix ) {
+			return;
+		}
+
+		$this->enqueue_frontend();
+
+		$asset = require __DIR__ . '/build/admin.asset.php';
+
+		wp_enqueue_script(
+			self::HOOK_NAME . '-admin',
+			plugins_url( '/build/admin.js', __FILE__ ),
+			$asset['dependencies'],
+			$asset['version'],
+			true
+		);
+
+
+		wp_enqueue_style(
+			self::HOOK_NAME . '-admin',
+			plugins_url( '/build/style-frontend.css', __FILE__ ),
+			array(),
+			$asset['version']
+		);
+
+		wp_enqueue_style( 'wp-edit-post' );
+		do_action( 'enqueue_block_editor_assets' );
+	}
+
+	/**
+	 * Register Settings
+	 *
+	 * @return void
+	 */
+	public function register_settings(): void {
+		$schema = file_get_contents( __DIR__ . '/schema.json' );
+		register_setting(
+			self::OPTION_NAME,
+			self::OPTION_NAME,
+			array(
+				'type'         => 'object',
+				'show_in_rest' => array(
+					'schema' => json_decode( $schema ? $schema : '{}', true ),
+				),
+			)
+		);
+
+		$block_json_file = plugin_dir_path( __FILE__ ) . 'build/blocks/ShowConsent/block.json';
+
+		register_block_type( $block_json_file );
+	}
+
+	/**
+	 * Add Settings Screen
+	 *
+	 * @return void
+	 */
+	public function add_settings_screen(): void {
+		add_options_page(
+			__( 'Cookie Consent', 'boxuk' ),
+			__( 'Cookie Consent', 'boxuk' ),
+			'manage_options',
+			self::HOOK_NAME,
+			array( $this, 'render_settings_screen' ),
+		);
+	}
+
+	/**
+	 * Render Settings Screen
+	 *
+	 * @return void
+	 */
+	public function render_settings_screen(): void {
+		?>
+		<div class='wrap'>
+			<div id="consent-settings-root"></div>
+		</div>
+		<?php
+	}
+}
+
+add_action(
+	'plugins_loaded',
+	function () {
+		$consent_management = new ConsentManagement();
+		$consent_management->init();
+	}
+);

package.json

@@ -0,0 +1,48 @@
+{
+	"name": "wp-consent-management",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"directories": {
+		"test": "tests"
+	},
+	"scripts": {
+		"build": "wp-scripts build",
+		"format": "wp-scripts format",
+		"lint": "npm run lint:css && npm run lint:js",
+		"lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
+		"lint:css": "wp-scripts lint-style",
+		"lint:css:fix": "wp-scripts lint-style --fix",
+		"lint:js": "wp-scripts lint-js",
+		"lint:js:fix": "wp-scripts lint-js --fix",
+		"packages-update": "wp-scripts packages-update",
+		"start": "wp-scripts start",
+		"type-coverage": "type-coverage --strict --detail --at-least 99.45"
+	},
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@wordpress/rich-text": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/block-editor": "^13.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/data-controls": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@jest/globals": "^29.7.0",
+		"@testing-library/react": "^16.0.0",
+		"@types/wordpress__block-editor": "^11.5.15",
+		"@types/wordpress__data": "^7.0.0",
+		"@wordpress/dom-ready": "^3.42.13",
+		"@wordpress/editor": "^13.19.14",
+		"@wordpress/icons": "^9.33.13",
+		"@wordpress/interface": "^5.19.14",
+		"@wordpress/scripts": "^26.13.13",
+		"react": "^18.2.0",
+		"type-coverage": "^2.29.1",
+		"vanilla-cookieconsent": "^3.0.1"
+	}
+}

sample/style.scss

@@ -0,0 +1,49 @@
+/**
+ * Sample style sheet for the Cookie Consent plugin.
+ */
+
+#cc-main {
+
+	@media (prefers-reduced-motion: reduce) {
+		--cc-modal-transition-duration: 0;
+	}
+
+	--cc-bg: var(--wp--preset--color-white);
+	--cc-primary-color: var(--wp--preset--color-black);
+	--cc-secondary-color: var(--wp--preset--color--grey-8);
+
+	--cc-btn-primary-bg: var(--wp--preset--color-blue-4);
+	--cc-btn-primary-color: var(--wp--preset--color-white);
+	--cc-btn-primary-hover-bg: var(--wp--preset--color-blue-5);
+	--cc-btn-primary-hover-color: var(--wp--preset--color-white);
+	--cc-btn-primary-border-color: var(--wp--preset--color-white);
+	--cc-btn-primary-hover-border-color: var(--wp--preset--color-blue-5);
+
+	--cc-btn-secondary-bg: var(--wp--preset--color-white);
+	--cc-btn-secondary-color: var(--wp--preset--color-blue-4);
+	--cc-btn-secondary-hover-bg: var(--wp--preset--color-blue-1);
+	--cc-btn-secondary-hover-color: var(--wp--preset--color-blue-4);
+	--cc-btn-secondary-border-color: var(--wp--preset--color-blue-4);
+	--cc-btn-secondary-hover-border-color: var(--wp--preset--color-blue-4);
+
+	--cc-btn-border-radius: 999px;
+
+	--cc-cookie-category-block-bg: var(--cc-bg);
+	--cc-cookie-category-block-border: var(--wp--preset--color-grey-1);
+	--cc-cookie-category-block-hover-bg: var(--wp--preset--color-grey-1);
+	--cc-cookie-category-expanded-block-hover-bg: var(--wp--preset--color-grey-1);
+	--cc-cookie-category-expanded-block-bg: var(--wp--preset--color-grey-1);
+
+	--cc-toggle-readonly-bg: var(--wp--preset--color-grey-2);
+	--cc-overlay-bg: rgba(4, 6, 8, 0.85) !important;
+
+	--cc-toggle-off-bg: var(--wp--preset--color-black);
+	--cc-toggle-on-bg: var(--wp--preset--color-blue-3);
+
+	--cc-toggle-off-knob-bg: var(--cc-bg);
+	--cc-toggle-on-knob-bg: var(--cc-bg);
+
+	--cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);
+
+	--cc-separator-border-color: var(--cc-bg);
+}