From a5b02b969c5b40577ca8926e8131e2d4bc0e517d Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sun, 28 Jul 2024 20:20:03 -0500
Subject: [PATCH] Attempts to add interactivity API to show tab on click

---
 packages/block-library/src/tab/save.js     |  1 +
 packages/block-library/src/tabs/block.json |  3 ++-
 packages/block-library/src/tabs/save.js    | 10 ++++++++--
 packages/block-library/src/tabs/view.js    | 13 +++++++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 packages/block-library/src/tabs/view.js

diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index e0d50b1cbac879..dca2d2856dbed3 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -18,6 +18,7 @@ export default function save( { attributes } ) {
 		<div
 			{ ...innerBlocksProps }
 			aria-labelledby={ tabLabelId }
+			data-wp-class--is-active={ `${ tabIndex } === context.activeTab` }
 			id={ tabPanelId }
 			role="tabpanel"
 		/>
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 89b715f064d9ba..49598ad5521195 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -41,5 +41,6 @@
 		}
 	},
 	"editorStyle": "wp-block-tabs-editor",
-	"style": "wp-block-tabs"
+	"style": "wp-block-tabs",
+	"viewScriptModule": "file:./view.min.js"
 }
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
index e858f9c43f4da0..dc7637d9b002cd 100644
--- a/packages/block-library/src/tabs/save.js
+++ b/packages/block-library/src/tabs/save.js
@@ -20,7 +20,11 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div { ...blockProps }>
+		<div
+			{ ...blockProps }
+			data-wp-interactive="core/tabs"
+			data-wp-context='{ "activeTab": 0 }'
+		>
 			<ul className="wp-block-tabs__list" role="tablist">
 				{ innerTabs.map( ( tab, index ) => {
 					const isActive = index === 0;
@@ -34,7 +38,9 @@ export default function save( { attributes } ) {
 						>
 							<RichText.Content
 								aria-controls={ tab.id }
-								aria-selected={ isActive }
+								data-wp-bind--aria-selected={ `${ index } === context.activeTab` }
+								data-wp-class--is-active={ `${ index } === context.activeTab` }
+								data-wp-on--click={ `actions.setActiveTab.bind( null, ${ index } )` }
 								className={ clsx( 'wp-block-tabs__tab-label', {
 									'is-active': isActive,
 								} ) }
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
new file mode 100644
index 00000000000000..c79e6c636f7312
--- /dev/null
+++ b/packages/block-library/src/tabs/view.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'core/tabs', {
+	actions: {
+		setActiveTab: ( index ) => {
+			const context = getContext();
+			context.activeTab = index;
+		},
+	},
+} );