From c22a237c0ad412ded694c1a6ff4c5c1ea854059b Mon Sep 17 00:00:00 2001
From: jeremyfelt <jeremy.felt@gmail.com>
Date: Wed, 11 Jun 2025 11:41:07 -0700
Subject: [PATCH] Wrap `buttonText` with `<span>` inside `<button>`

* Wrap `{buttonText}` with a `<span>` element.
* Prevent pointer events on the `<span>` so that clicks on the
  button area work as expected.
* Move editor-specific styles to `index.css` to be loaded only in
  the editor context.
* Add deprecated version of the saved block markup for WordPress to
  more easily upgrade it.

Fixes #31
---
 .gitignore                         |  1 +
 build/toggle-block/block.json      |  3 ++-
 build/toggle-block/index.asset.php |  2 +-
 build/toggle-block/index.css       |  3 +++
 build/toggle-block/index.js        |  2 +-
 build/toggle-block/view.css        |  4 ++--
 src/toggle-block/block.json        |  3 ++-
 src/toggle-block/deprecated.js     | 30 ++++++++++++++++++++++++++++++
 src/toggle-block/index.css         |  3 +++
 src/toggle-block/index.js          |  4 +++-
 src/toggle-block/view.css          |  4 ++--
 11 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 build/toggle-block/index.css
 create mode 100644 src/toggle-block/deprecated.js
 create mode 100644 src/toggle-block/index.css

diff --git a/.gitignore b/.gitignore
index 58875fd..a29f064 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 /vendor
+build/**/*.LICENSE.txt
diff --git a/build/toggle-block/block.json b/build/toggle-block/block.json
index c069a18..3be9669 100644
--- a/build/toggle-block/block.json
+++ b/build/toggle-block/block.json
@@ -6,7 +6,7 @@
 	"category": "widgets",
 	"icon": "location",
 	"description": "Toggle button to show and hide another block.",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"textdomain": "toggle-block",
 	"editorScript": "file:index.js",
 	"viewScript": [
@@ -15,6 +15,7 @@
 	"style": [
 		"file:view.css"
 	],
+	"editorStyle": "file:index.css",
 	"attributes": {
 		"bodyClass": {
 			"type": "string",
diff --git a/build/toggle-block/index.asset.php b/build/toggle-block/index.asset.php
index 0d2f8f7..9b31902 100644
--- a/build/toggle-block/index.asset.php
+++ b/build/toggle-block/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-hooks', 'wp-i18n'), 'version' => '00a3f7186531c3820c9c');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-hooks', 'wp-i18n'), 'version' => 'ad8212848b403ce55acf');
diff --git a/build/toggle-block/index.css b/build/toggle-block/index.css
new file mode 100644
index 0000000..e353493
--- /dev/null
+++ b/build/toggle-block/index.css
@@ -0,0 +1,3 @@
+.editor-styles-wrapper .wp-block-happyprime-toggle-block {
+	display: inline-block;
+}
diff --git a/build/toggle-block/index.js b/build/toggle-block/index.js
index 55298f4..2b38ec7 100644
--- a/build/toggle-block/index.js
+++ b/build/toggle-block/index.js
@@ -1 +1 @@
-(()=>{"use strict";function e(){return e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var l in o)({}).hasOwnProperty.call(o,l)&&(e[l]=o[l])}return e},e.apply(null,arguments)}const t=window.wp.blockEditor,o=window.wp.blocks,l=window.wp.components,n=window.wp.i18n,a=JSON.parse('{"$schema":"https://json.schemastore.org/block.json","apiVersion":3,"name":"happyprime/toggle-block","title":"Toggle Block","category":"widgets","icon":"location","description":"Toggle button to show and hide another block.","version":"0.2.0","textdomain":"toggle-block","editorScript":"file:index.js","viewScript":["file:view.js"],"style":["file:view.css"],"attributes":{"bodyClass":{"type":"string","default":""},"buttonText":{"type":"string","default":""},"controlsId":{"type":"string","default":""},"labelText":{"type":"string","default":""}},"supports":{"align":true,"alignWide":true,"anchor":true,"color":{"background":true,"enableContrastChecker":true,"text":true,"gradients":true},"defaultStylePicker":true,"dimensions":{"minHeight":true},"html":false,"position":{"sticky":false},"spacing":{"margin":true,"padding":true},"typography":{"fontSize":true,"lineHeight":true}}}');(0,window.wp.hooks.addFilter)("blocks.registerBlockType","happyprime/add-toggle-to-navigation",(function(e,t){if("core/navigation"!==t)return e;const o=e.allowedBlocks||[];return{...e,allowedBlocks:[...o,"happyprime/toggle-block"]}}));const r={from:[{type:"block",blocks:["core/navigation-link"],transform:(e,t)=>(0,o.createBlock)("happyprime/toggle-block",{buttonText:e.label||e.title||""},t)}],to:[{type:"block",blocks:["core/navigation-link"],transform:(e,t)=>(0,o.createBlock)("core/navigation-link",{label:e.buttonText||"",url:"#"},t)}]};(0,o.registerBlockType)(a,{edit:o=>{const{attributes:{bodyClass:a,buttonText:r,controlsId:c,labelText:s},setAttributes:i}=o;return React.createElement(React.Fragment,null,React.createElement(t.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,n.__)("Toggle settings","toggle-block")},React.createElement(l.TextControl,{label:(0,n.__)("Controls ID","toggle-block"),description:(0,n.__)("Enter the HTML anchor ID of the element this toggle controls.","toggle-block"),value:c,onChange:e=>i({controlsId:e})}),React.createElement(l.TextControl,{label:(0,n.__)("Screen reader text","toggle-block"),description:(0,n.__)("Enter a description of what this toggle controls.","toggle-block"),value:s,onChange:e=>i({labelText:e})}),React.createElement(l.TextControl,{label:(0,n.__)("Body class","toggle-block"),description:(0,n.__)("Enter a class to add to the body when the toggle is active.","toggle-block"),value:a,onChange:e=>i({bodyClass:e})}))),React.createElement(t.RichText,e({},(0,t.useBlockProps)(),{tagName:"span",label:(0,n.__)("Button text","toggle-block"),placeholder:(0,n.__)("Button text","toggle-block"),value:r,onChange:e=>{i({buttonText:e})}})))},save:o=>{const{attributes:{bodyClass:l,buttonText:n,controlsId:a,labelText:r}}=o;return React.createElement("button",e({},t.useBlockProps.save(),{"aria-label":r,"aria-controls":a},l&&{"data-body-class":l}),n)},transforms:r})})();
\ No newline at end of file
+(()=>{"use strict";function t(){return t=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var l in o)({}).hasOwnProperty.call(o,l)&&(t[l]=o[l])}return t},t.apply(null,arguments)}const e=window.wp.blockEditor,o=window.wp.blocks,l=window.wp.components,n=window.wp.i18n,a=JSON.parse('{"$schema":"https://json.schemastore.org/block.json","apiVersion":3,"name":"happyprime/toggle-block","title":"Toggle Block","category":"widgets","icon":"location","description":"Toggle button to show and hide another block.","version":"0.4.0","textdomain":"toggle-block","editorScript":"file:index.js","viewScript":["file:view.js"],"style":["file:view.css"],"editorStyle":"file:index.css","attributes":{"bodyClass":{"type":"string","default":""},"buttonText":{"type":"string","default":""},"controlsId":{"type":"string","default":""},"labelText":{"type":"string","default":""}},"supports":{"align":true,"alignWide":true,"anchor":true,"color":{"background":true,"enableContrastChecker":true,"text":true,"gradients":true},"defaultStylePicker":true,"dimensions":{"minHeight":true},"html":false,"position":{"sticky":false},"spacing":{"margin":true,"padding":true},"typography":{"fontSize":true,"lineHeight":true}}}'),r=[{attributes:{bodyClass:{type:"string"},buttonText:{type:"string"},controlsId:{type:"string"},labelText:{type:"string"}},save:o=>{const{attributes:{bodyClass:l,buttonText:n,controlsId:a,labelText:r}}=o;return React.createElement("button",t({},e.useBlockProps.save(),{"aria-label":r,"aria-controls":a},l&&{"data-body-class":l}),n)}}];(0,window.wp.hooks.addFilter)("blocks.registerBlockType","happyprime/add-toggle-to-navigation",(function(t,e){if("core/navigation"!==e)return t;const o=t.allowedBlocks||[];return{...t,allowedBlocks:[...o,"happyprime/toggle-block"]}}));const s={from:[{type:"block",blocks:["core/navigation-link"],transform:(t,e)=>(0,o.createBlock)("happyprime/toggle-block",{buttonText:t.label||t.title||""},e)}],to:[{type:"block",blocks:["core/navigation-link"],transform:(t,e)=>(0,o.createBlock)("core/navigation-link",{label:t.buttonText||"",url:"#"},e)}]};(0,o.registerBlockType)(a,{edit:o=>{const{attributes:{bodyClass:a,buttonText:r,controlsId:s,labelText:c},setAttributes:i}=o;return React.createElement(React.Fragment,null,React.createElement(e.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,n.__)("Toggle settings","toggle-block")},React.createElement(l.TextControl,{label:(0,n.__)("Controls ID","toggle-block"),description:(0,n.__)("Enter the HTML anchor ID of the element this toggle controls.","toggle-block"),value:s,onChange:t=>i({controlsId:t})}),React.createElement(l.TextControl,{label:(0,n.__)("Screen reader text","toggle-block"),description:(0,n.__)("Enter a description of what this toggle controls.","toggle-block"),value:c,onChange:t=>i({labelText:t})}),React.createElement(l.TextControl,{label:(0,n.__)("Body class","toggle-block"),description:(0,n.__)("Enter a class to add to the body when the toggle is active.","toggle-block"),value:a,onChange:t=>i({bodyClass:t})}))),React.createElement(e.RichText,t({},(0,e.useBlockProps)(),{tagName:"span",label:(0,n.__)("Button text","toggle-block"),placeholder:(0,n.__)("Button text","toggle-block"),value:r,onChange:t=>{i({buttonText:t})}})))},save:o=>{const{attributes:{bodyClass:l,buttonText:n,controlsId:a,labelText:r}}=o;return React.createElement("button",t({},e.useBlockProps.save(),{"aria-label":r,"aria-controls":a},l&&{"data-body-class":l}),React.createElement("span",null,n))},transforms:s,deprecated:r})})();
\ No newline at end of file
diff --git a/build/toggle-block/view.css b/build/toggle-block/view.css
index ffd150d..2a4f3cb 100644
--- a/build/toggle-block/view.css
+++ b/build/toggle-block/view.css
@@ -2,6 +2,6 @@
 	display: none;
 }
 
-.editor-styles-wrapper .wp-block-happyprime-toggle-block {
-	display: inline-block;
+.wp-block-happyprime-toggle-block span {
+	pointer-events: none;
 }
diff --git a/src/toggle-block/block.json b/src/toggle-block/block.json
index c069a18..3be9669 100644
--- a/src/toggle-block/block.json
+++ b/src/toggle-block/block.json
@@ -6,7 +6,7 @@
 	"category": "widgets",
 	"icon": "location",
 	"description": "Toggle button to show and hide another block.",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"textdomain": "toggle-block",
 	"editorScript": "file:index.js",
 	"viewScript": [
@@ -15,6 +15,7 @@
 	"style": [
 		"file:view.css"
 	],
+	"editorStyle": "file:index.css",
 	"attributes": {
 		"bodyClass": {
 			"type": "string",
diff --git a/src/toggle-block/deprecated.js b/src/toggle-block/deprecated.js
new file mode 100644
index 0000000..cdd2600
--- /dev/null
+++ b/src/toggle-block/deprecated.js
@@ -0,0 +1,30 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		attributes: {
+			bodyClass: { type: 'string' },
+			buttonText: { type: 'string' },
+			controlsId: { type: 'string' },
+			labelText: { type: 'string' },
+		},
+		save: (props) => {
+			const {
+				attributes: { bodyClass, buttonText, controlsId, labelText },
+			} = props;
+
+			return (
+				<button
+					{...useBlockProps.save()}
+					aria-label={labelText}
+					aria-controls={controlsId}
+					{...(bodyClass && { 'data-body-class': bodyClass })}
+				>
+					{buttonText}
+				</button>
+			);
+		},
+	},
+];
+
+export default deprecated;
diff --git a/src/toggle-block/index.css b/src/toggle-block/index.css
new file mode 100644
index 0000000..e353493
--- /dev/null
+++ b/src/toggle-block/index.css
@@ -0,0 +1,3 @@
+.editor-styles-wrapper .wp-block-happyprime-toggle-block {
+	display: inline-block;
+}
diff --git a/src/toggle-block/index.js b/src/toggle-block/index.js
index 79a2440..f39c087 100644
--- a/src/toggle-block/index.js
+++ b/src/toggle-block/index.js
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 
 // Internal dependencies.
 import metadata from './block.json';
+import deprecated from './deprecated';
 
 // Extend the navigation block to allow the toggle block.
 import './extend-navigation-block';
@@ -85,7 +86,7 @@ const Save = (props) => {
 			aria-controls={controlsId}
 			{...(bodyClass && { 'data-body-class': bodyClass })}
 		>
-			{buttonText}
+			<span>{buttonText}</span>
 		</button>
 	);
 };
@@ -127,4 +128,5 @@ registerBlockType(metadata, {
 	edit: Edit,
 	save: Save,
 	transforms: Transforms,
+	deprecated,
 });
diff --git a/src/toggle-block/view.css b/src/toggle-block/view.css
index ffd150d..2a4f3cb 100644
--- a/src/toggle-block/view.css
+++ b/src/toggle-block/view.css
@@ -2,6 +2,6 @@
 	display: none;
 }
 
-.editor-styles-wrapper .wp-block-happyprime-toggle-block {
-	display: inline-block;
+.wp-block-happyprime-toggle-block span {
+	pointer-events: none;
 }