Allow for a class on body when a toggle is toggled

build/toggle-block/block.json

@@ -16,6 +16,10 @@
 		"file:../src/view.css"
 	],
 	"attributes": {
+		"bodyClass": {
+			"type": "string",
+			"default": ""
+		},
 		"buttonText": {
 			"type": "string",
 			"default": ""

build/toggle-block/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '08086c18c6ed91df9b7f');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '258f20c46a12ec82d3d1');

build/toggle-block/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '1e04be7a9fb66215ea7c');
+<?php return array('dependencies' => array(), 'version' => 'f0f872b7da64297edb79');

src/toggle-block/block.json

@@ -16,6 +16,10 @@
 		"file:../src/view.css"
 	],
 	"attributes": {
+		"bodyClass": {
+			"type": "string",
+			"default": ""
+		},
 		"buttonText": {
 			"type": "string",
 			"default": ""

src/toggle-block/index.js

@@ -13,7 +13,7 @@ import metadata from './block.json';
 
 const Edit = (props) => {
 	const {
-		attributes: { buttonText, controlsId, labelText },
+		attributes: { bodyClass, buttonText, controlsId, labelText },
 		setAttributes,
 	} = props;
 
@@ -43,6 +43,17 @@ const Edit = (props) => {
 							setAttributes({ labelText: value })
 						}
 					/>
+					<TextControl
+						label={__('Body class', 'toggle-block')}
+						description={__(
+							'Enter a class to add to the body when the toggle is active.',
+							'toggle-block'
+						)}
+						value={bodyClass}
+						onChange={(value) =>
+							setAttributes({ bodyClass: value })
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<RichText
@@ -61,14 +72,15 @@ const Edit = (props) => {
 
 const Save = (props) => {
 	const {
-		attributes: { buttonText, controlsId, labelText },
+		attributes: { bodyClass, buttonText, controlsId, labelText },
 	} = props;
 
 	return (
 		<button
 			{...useBlockProps.save()}
 			aria-label={labelText}
 			aria-controls={controlsId}
+			{...(bodyClass && { 'data-body-class': bodyClass })}
 		>
 			{buttonText}
 		</button>

src/toggle-block/view.js

@@ -12,6 +12,8 @@
 			return;
 		}
 
+		const bodyClass = evt.target.getAttribute('data-body-class');
+
 		// Add a persisting class to the toggle button when it is
 		// clicked for the first time to flag that it has, at one
 		// point in its history, been toggled.
@@ -32,10 +34,18 @@
 			evt.target.setAttribute('aria-pressed', 'true');
 			evt.target.setAttribute('aria-expanded', 'true');
 			toggledBlock.classList.remove('toggle-block-hidden');
+
+			if (bodyClass) {
+				document.body.classList.add(bodyClass);
+			}
 		} else {
 			evt.target.setAttribute('aria-pressed', 'false');
 			evt.target.setAttribute('aria-expanded', 'false');
 			toggledBlock.classList.add('toggle-block-hidden');
+
+			if (bodyClass) {
+				document.body.classList.remove(bodyClass);
+			}
 		}
 	};
 
@@ -55,12 +65,22 @@
 					return;
 				}
 
+				const bodyClass = el.getAttribute('data-body-class');
+
 				if (toggledBlock.classList.contains('toggle-block-hidden')) {
 					el.setAttribute('aria-pressed', 'false');
 					el.setAttribute('aria-expanded', 'false');
+
+					if (bodyClass) {
+						document.body.classList.remove(bodyClass);
+					}
 				} else {
 					el.setAttribute('aria-pressed', 'true');
 					el.setAttribute('aria-expanded', 'true');
+
+					if (bodyClass) {
+						document.body.classList.add(bodyClass);
+					}
 				}
 
 				el.addEventListener('click', handleClick);