From 5bf4de5132363de0f6e780b5b89f91cc2dc5c6c3 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Wed, 10 Jul 2024 15:24:08 -0500
Subject: [PATCH 01/21] Scaffolds tabs and tab blocks

---
 docs/reference-guides/core-blocks.md       | 20 ++++++++++++++++
 lib/blocks.php                             |  2 ++
 packages/block-library/src/index.js        |  8 +++++++
 packages/block-library/src/tab/block.json  | 18 ++++++++++++++
 packages/block-library/src/tab/edit.js     | 12 ++++++++++
 packages/block-library/src/tab/index.js    | 22 +++++++++++++++++
 packages/block-library/src/tab/init.js     |  6 +++++
 packages/block-library/src/tab/save.js     | 12 ++++++++++
 packages/block-library/src/tabs/block.json | 28 ++++++++++++++++++++++
 packages/block-library/src/tabs/edit.js    | 12 ++++++++++
 packages/block-library/src/tabs/index.js   | 22 +++++++++++++++++
 packages/block-library/src/tabs/init.js    |  6 +++++
 packages/block-library/src/tabs/save.js    | 12 ++++++++++
 13 files changed, 180 insertions(+)
 create mode 100644 packages/block-library/src/tab/block.json
 create mode 100644 packages/block-library/src/tab/edit.js
 create mode 100644 packages/block-library/src/tab/index.js
 create mode 100644 packages/block-library/src/tab/init.js
 create mode 100644 packages/block-library/src/tab/save.js
 create mode 100644 packages/block-library/src/tabs/block.json
 create mode 100644 packages/block-library/src/tabs/edit.js
 create mode 100644 packages/block-library/src/tabs/index.js
 create mode 100644 packages/block-library/src/tabs/init.js
 create mode 100644 packages/block-library/src/tabs/save.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 72281a53c3dd1..dceeca2d93d4f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -887,6 +887,16 @@ Add white space between blocks and customize its height. ([Source](https://githu
 -	**Supports:** anchor, interactivity (clientNavigation), spacing (margin)
 -	**Attributes:** height, width
 
+## Tab
+
+Tab container for content (use within the Tabs block). ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab))
+
+-	**Name:** core/tab
+-	**Experimental:** true
+-	**Category:** design
+-	**Parent:** core/tabs
+-	**Supports:** ~~align~~, ~~html~~
+
 ## Table
 
 Create structured content in rows and columns to display information. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table))
@@ -906,6 +916,16 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
 -	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** headings, onlyIncludeCurrentPage
 
+## Tabs
+
+Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs))
+
+-	**Name:** core/tabs
+-	**Experimental:** true
+-	**Category:** design
+-	**Allowed Blocks:** core/tab
+-	**Supports:** align (full, wide), layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
+
 ## Tag Cloud
 
 A cloud of popular keywords, each sized by how often it appears. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tag-cloud))
diff --git a/lib/blocks.php b/lib/blocks.php
index c3fdb26700c58..d5ef71fa7f87b 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -39,6 +39,8 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
+				'tab',
+				'tabs',
 				'text-columns',
 				'verse',
 				'video',
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 56365c87a268f..2ebd1b0cb0ecc 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -114,6 +114,8 @@ import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
+import * as tab from './tab';
+import * as tabs from './tabs';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
@@ -232,6 +234,12 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
+
+	if ( window.__experimentalEnableBlockExperiments ) {
+		blocks.push( tab );
+		blocks.push( tabs );
+	}
+
 	if ( window?.__experimentalEnableFormBlocks ) {
 		blocks.push( form );
 		blocks.push( formInput );
diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
new file mode 100644
index 0000000000000..ab363d0f70100
--- /dev/null
+++ b/packages/block-library/src/tab/block.json
@@ -0,0 +1,18 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/tab",
+	"title": "Tab",
+	"category": "design",
+	"description": "Tab container for content (use within the Tabs block).",
+	"textdomain": "default",
+	"__experimental": true,
+	"attributes": {},
+	"parent": [ "core/tabs" ],
+	"supports": {
+		"align": false,
+		"html": false
+	},
+	"editorScript": "file:./build/index.js",
+	"style": "file:./build/style.css"
+}
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
new file mode 100644
index 0000000000000..25fc9b40db6a1
--- /dev/null
+++ b/packages/block-library/src/tab/edit.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function Edit() {
+	return (
+		<div { ...useBlockProps() }>
+			<InnerBlocks />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/tab/index.js b/packages/block-library/src/tab/index.js
new file mode 100644
index 0000000000000..724198cd0d54c
--- /dev/null
+++ b/packages/block-library/src/tab/index.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+// import icon from './icon';
+
+// import './style.scss';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	// icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/tab/init.js b/packages/block-library/src/tab/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/tab/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
new file mode 100644
index 0000000000000..000acdcd4a605
--- /dev/null
+++ b/packages/block-library/src/tab/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
new file mode 100644
index 0000000000000..b3bc49af3ea06
--- /dev/null
+++ b/packages/block-library/src/tabs/block.json
@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/tabs",
+	"title": "Tabs",
+	"category": "design",
+	"description": "Organize content into tabs.",
+	"textdomain": "default",
+	"__experimental": true,
+	"allowedBlocks": [ "core/tab" ],
+	"attributes": {},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"layout": {
+			"default": { "type": "flex", "orientation": "horizontal" },
+			"allowSwitching": false,
+			"allowJustification": false
+		},
+		"shadow": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
+	},
+	"editorScript": "file:./build/index.js",
+	"style": "file:./build/style.css"
+}
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
new file mode 100644
index 0000000000000..25fc9b40db6a1
--- /dev/null
+++ b/packages/block-library/src/tabs/edit.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function Edit() {
+	return (
+		<div { ...useBlockProps() }>
+			<InnerBlocks />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/tabs/index.js b/packages/block-library/src/tabs/index.js
new file mode 100644
index 0000000000000..724198cd0d54c
--- /dev/null
+++ b/packages/block-library/src/tabs/index.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+// import icon from './icon';
+
+// import './style.scss';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	// icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/tabs/init.js b/packages/block-library/src/tabs/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/tabs/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
new file mode 100644
index 0000000000000..000acdcd4a605
--- /dev/null
+++ b/packages/block-library/src/tabs/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

From 89c8035ff4508c2d8a51a1b00b152902133bdd75 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Wed, 17 Jul 2024 11:05:11 -0500
Subject: [PATCH 02/21] WIP Adds title attribute for tab blocks

---
 packages/block-library/src/tab/block.json  | 13 +++++++---
 packages/block-library/src/tab/edit.js     | 20 ++++++++++++---
 packages/block-library/src/tab/save.js     |  9 +++++--
 packages/block-library/src/tabs/style.scss | 29 ++++++++++++++++++++++
 4 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 packages/block-library/src/tabs/style.scss

diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index ab363d0f70100..402b625724782 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -4,14 +4,19 @@
 	"name": "core/tab",
 	"title": "Tab",
 	"category": "design",
-	"description": "Tab container for content (use within the Tabs block).",
+	"description": "Single tab within a tabs block.",
 	"textdomain": "default",
 	"__experimental": true,
-	"attributes": {},
+	"attributes": {
+		"title": {
+			"type": "string"
+		}
+	},
 	"parent": [ "core/tabs" ],
 	"supports": {
-		"align": false,
-		"html": false
+		"html": false,
+		"inserter": false,
+		"reusable": false
 	},
 	"editorScript": "file:./build/index.js",
 	"style": "file:./build/style.css"
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index 25fc9b40db6a1..cb06dc2045fa6 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -1,12 +1,26 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, setAttributes } ) {
+	const { title } = attributes;
 
-export default function Edit() {
 	return (
 		<div { ...useBlockProps() }>
-			<InnerBlocks />
+			<RichText
+				className="wp-block-tab__title"
+				tagName="div"
+				value={ title }
+				onChange={ ( newTitle ) =>
+					setAttributes( { title: newTitle } )
+				}
+				placeholder={ __( 'Add text…' ) }
+			/>
+			<div className="wp-block-tab__content">
+				<InnerBlocks />
+			</div>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index 000acdcd4a605..e7fafd12668f9 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -3,10 +3,15 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	const { title } = attributes;
+
 	return (
 		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
+			<div className="wp-block-tab__title">{ title }</div>
+			<div className="wp-block-tab__content">
+				<InnerBlocks.Content />
+			</div>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
new file mode 100644
index 0000000000000..bfdd07f54461f
--- /dev/null
+++ b/packages/block-library/src/tabs/style.scss
@@ -0,0 +1,29 @@
+.wp-block-tabs {
+	.wp-block-tabs__tab-buttons {
+		display: flex;
+		border-bottom: 1px solid #ccc;
+	}
+
+	.wp-block-tabs__tab-button {
+		background: none;
+		border: none;
+		padding: 10px 15px;
+		cursor: pointer;
+
+		&.is-active {
+			border-bottom: 2px solid #007cba;
+		}
+	}
+
+	.wp-block-tabs__content {
+		padding: 15px 0;
+	}
+}
+
+.wp-block-tab {
+	display: none;
+
+	&.is-active {
+		display: block;
+	}
+}

From f3074ba1b6852510b1212530bb2bf72eb79c36f8 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Wed, 17 Jul 2024 22:02:35 -0500
Subject: [PATCH 03/21] WIP Show only active tab

---
 packages/block-library/src/tab/block.json  |  1 +
 packages/block-library/src/tab/edit.js     | 29 ++++++++-------
 packages/block-library/src/tab/save.js     |  1 -
 packages/block-library/src/tabs/block.json | 15 ++++++--
 packages/block-library/src/tabs/edit.js    | 42 +++++++++++++++++++---
 5 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index 402b625724782..802c014d5579a 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -18,6 +18,7 @@
 		"inserter": false,
 		"reusable": false
 	},
+	"usesContext": [ "tabs/activeTab" ],
 	"editorScript": "file:./build/index.js",
 	"style": "file:./build/style.css"
 }
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index cb06dc2045fa6..45b75750e156a 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -4,23 +4,22 @@
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-export default function Edit( { attributes, setAttributes } ) {
-	const { title } = attributes;
-
+export default function Edit( { context } ) {
+	console.log( context );
+	const isActive = context[ 'tabs/activeTab' ];
 	return (
-		<div { ...useBlockProps() }>
-			<RichText
-				className="wp-block-tab__title"
-				tagName="div"
-				value={ title }
-				onChange={ ( newTitle ) =>
-					setAttributes( { title: newTitle } )
-				}
-				placeholder={ __( 'Add text…' ) }
+		<div
+			{ ...useBlockProps( {
+				className: isActive ? 'is-active' : '',
+			} ) }
+		>
+			<InnerBlocks
+				defaultBlock={ [
+					'core/paragraph',
+					{ placeholder: __( 'Enter tab content…' ) },
+				] }
+				directInsert
 			/>
-			<div className="wp-block-tab__content">
-				<InnerBlocks />
-			</div>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index e7fafd12668f9..b78ba5bb38bdd 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -8,7 +8,6 @@ export default function save( { attributes } ) {
 
 	return (
 		<div { ...useBlockProps.save() }>
-			<div className="wp-block-tab__title">{ title }</div>
 			<div className="wp-block-tab__content">
 				<InnerBlocks.Content />
 			</div>
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index b3bc49af3ea06..154ba0e9e6ada 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -8,10 +8,19 @@
 	"textdomain": "default",
 	"__experimental": true,
 	"allowedBlocks": [ "core/tab" ],
-	"attributes": {},
+	"attributes": {
+		"activeTab": {
+			"type": "number",
+			"default": 0
+		}
+	},
+	"providesContext": {
+		"tabs/activeTab": "activeTab"
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
+		"interactivity": true,
 		"layout": {
 			"default": { "type": "flex", "orientation": "horizontal" },
 			"allowSwitching": false,
@@ -23,6 +32,6 @@
 			"padding": true
 		}
 	},
-	"editorScript": "file:./build/index.js",
-	"style": "file:./build/style.css"
+	"editorStyle": "wp-block-tabs-editor",
+	"style": "wp-block-tabs"
 }
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 25fc9b40db6a1..481479b15f055 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -1,12 +1,46 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import clsx from 'clsx';
+
+export default function Edit( { attributes, clientId, setAttributes } ) {
+	const { activeTab } = attributes;
+	const innerBlocks = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks( clientId ),
+		[ clientId ]
+	);
+
+	const setActiveTab = ( index ) => {
+		setAttributes( { activeTab: index } );
+	};
 
-export default function Edit() {
 	return (
-		<div { ...useBlockProps() }>
-			<InnerBlocks />
+		<div { ...useBlockProps() } data-wp-interactive="core/tabs">
+			<div className="wp-block-tabs__tab-titles">
+				{ innerBlocks.map( ( block, index ) => (
+					<button
+						key={ block.clientId }
+						className={ `wp-block-tabs__tab-title ${
+							index === activeTab ? 'is-active' : ''
+						}` }
+						onClick={ () => setActiveTab( index ) }
+					>
+						{ block.attributes.title }
+					</button>
+				) ) }
+			</div>
+			<div className="wp-block-tabs__tab-content">
+				<InnerBlocks />
+			</div>
 		</div>
 	);
 }

From ccebbe2773459dc232b4e736b34a7059aeca9782 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Thu, 18 Jul 2024 21:01:34 -0500
Subject: [PATCH 04/21] Displays list of tabs and active tab content

---
 docs/reference-guides/core-blocks.md       |   8 +-
 packages/block-library/src/style.scss      |   2 +
 packages/block-library/src/tab/block.json  |   3 +-
 packages/block-library/src/tab/edit.js     |  34 +++----
 packages/block-library/src/tab/index.js    |   2 -
 packages/block-library/src/tab/style.scss  |   8 ++
 packages/block-library/src/tabs/block.json |   5 +-
 packages/block-library/src/tabs/edit.js    | 105 ++++++++++++++++-----
 packages/block-library/src/tabs/index.js   |   2 -
 packages/block-library/src/tabs/style.scss |  33 +------
 10 files changed, 119 insertions(+), 83 deletions(-)
 create mode 100644 packages/block-library/src/tab/style.scss

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index dceeca2d93d4f..2d191c938c4ff 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -889,13 +889,14 @@ Add white space between blocks and customize its height. ([Source](https://githu
 
 ## Tab
 
-Tab container for content (use within the Tabs block). ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab))
+Single tab within a tabs block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab))
 
 -	**Name:** core/tab
 -	**Experimental:** true
 -	**Category:** design
 -	**Parent:** core/tabs
--	**Supports:** ~~align~~, ~~html~~
+-	**Supports:** ~~html~~, ~~inserter~~, ~~reusable~~
+-	**Attributes:** title
 
 ## Table
 
@@ -924,7 +925,8 @@ Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tre
 -	**Experimental:** true
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
--	**Supports:** align (full, wide), layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
+-	**Supports:** align (full, wide), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
+-	**Attributes:** activeTab
 
 ## Tag Cloud
 
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 8f17cd7a50f55..e4f029c084a00 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -53,9 +53,11 @@
 @import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
+@import "./tab/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
 @import "./table-of-contents/style.scss";
+@import "./tabs/style.scss";
 @import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index 802c014d5579a..fdabf177c2697 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -19,6 +19,5 @@
 		"reusable": false
 	},
 	"usesContext": [ "tabs/activeTab" ],
-	"editorScript": "file:./build/index.js",
-	"style": "file:./build/style.css"
+	"style": "wp-block-tab"
 }
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index 45b75750e156a..27757e0dc2af4 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -1,25 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
-export default function Edit( { context } ) {
-	console.log( context );
-	const isActive = context[ 'tabs/activeTab' ];
-	return (
-		<div
-			{ ...useBlockProps( {
-				className: isActive ? 'is-active' : '',
-			} ) }
-		>
-			<InnerBlocks
-				defaultBlock={ [
-					'core/paragraph',
-					{ placeholder: __( 'Enter tab content…' ) },
-				] }
-				directInsert
-			/>
-		</div>
-	);
+export default function Edit( { clientId, context } ) {
+	const isActive = context[ 'tabs/activeTab' ] === clientId;
+	const blockProps = useBlockProps( {
+		className: isActive ? 'is-active' : '',
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: InnerBlocks.ButtonBlockAppender,
+	} );
+	return <div { ...innerBlocksProps } role="tabpanel"></div>;
 }
diff --git a/packages/block-library/src/tab/index.js b/packages/block-library/src/tab/index.js
index 724198cd0d54c..966216c39af91 100644
--- a/packages/block-library/src/tab/index.js
+++ b/packages/block-library/src/tab/index.js
@@ -7,8 +7,6 @@ import edit from './edit';
 import save from './save';
 // import icon from './icon';
 
-// import './style.scss';
-
 const { name } = metadata;
 
 export { metadata, name };
diff --git a/packages/block-library/src/tab/style.scss b/packages/block-library/src/tab/style.scss
new file mode 100644
index 0000000000000..a2051c5861ef6
--- /dev/null
+++ b/packages/block-library/src/tab/style.scss
@@ -0,0 +1,8 @@
+.wp-block-tab {
+	display: none;
+
+	&.is-active {
+		display: block;
+	}
+}
+
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 154ba0e9e6ada..92422411ce30e 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -10,8 +10,8 @@
 	"allowedBlocks": [ "core/tab" ],
 	"attributes": {
 		"activeTab": {
-			"type": "number",
-			"default": 0
+			"type": "string",
+			"default": ""
 		}
 	},
 	"providesContext": {
@@ -32,6 +32,5 @@
 			"padding": true
 		}
 	},
-	"editorStyle": "wp-block-tabs-editor",
 	"style": "wp-block-tabs"
 }
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 481479b15f055..d0f0f583e8980 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -6,11 +11,16 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import clsx from 'clsx';
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+const initialTabsTemplate = [
+	[ 'core/tab', { title: 'Tab 1' } ],
+	[ 'core/tab', { title: 'Tab 2' } ],
+];
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
 	const { activeTab } = attributes;
@@ -19,28 +29,77 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		[ clientId ]
 	);
 
-	const setActiveTab = ( index ) => {
-		setAttributes( { activeTab: index } );
+	const blockProps = useBlockProps();
+
+	const innerBlockProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-tabs__tab-content',
+		},
+		{
+			renderAppender: InnerBlocks.ButtonBlockAppender,
+			template: initialTabsTemplate,
+		}
+	);
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+
+	const setActiveTab = ( tabId ) => {
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { activeTab: tabId } );
 	};
 
+	useEffect( () => {
+		// Initialize the first tab as active when the component mounts.
+		if ( innerBlocks.length ) {
+			setActiveTab( innerBlocks[ 0 ].clientId );
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps -- only run effect once when component mounts.
+
+	// if ( ! innerBlocks || innerBlocks.length === 0 ) {
+	// 	return null;
+	// }
+
 	return (
-		<div { ...useBlockProps() } data-wp-interactive="core/tabs">
-			<div className="wp-block-tabs__tab-titles">
-				{ innerBlocks.map( ( block, index ) => (
-					<button
-						key={ block.clientId }
-						className={ `wp-block-tabs__tab-title ${
-							index === activeTab ? 'is-active' : ''
-						}` }
-						onClick={ () => setActiveTab( index ) }
-					>
-						{ block.attributes.title }
-					</button>
-				) ) }
-			</div>
-			<div className="wp-block-tabs__tab-content">
-				<InnerBlocks />
-			</div>
+		<div { ...blockProps }>
+			<ul className="wp-block-tabs__list" role="tablist">
+				{ innerBlocks.map( ( block ) => {
+					const isActive = block.clientId === activeTab;
+					const tabIndex = isActive ? '0' : '-1';
+
+					// TODO: Add unique ids and aria attributes for accessibility.
+					// (Try the anchor generation functionality from the heading block?)
+					return (
+						<li
+							key={ block.clientId }
+							className="wp-block-tabs__list-item"
+							role="presentation"
+						>
+							<Button
+								className={ clsx( 'wp-block-tabs__tab', {
+									'is-active': isActive,
+								} ) }
+								onClick={ () => setActiveTab( block.clientId ) }
+								variant="link"
+								role="tab"
+								tabIndex={ tabIndex }
+							>
+								<RichText
+									tagName="span"
+									value={ block.attributes.title }
+									onChange={ ( value ) =>
+										updateBlockAttributes( block.clientId, {
+											title: value,
+										} )
+									}
+								/>
+							</Button>
+						</li>
+					);
+				} ) }
+			</ul>
+
+			<div { ...innerBlockProps }></div>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tabs/index.js b/packages/block-library/src/tabs/index.js
index 724198cd0d54c..966216c39af91 100644
--- a/packages/block-library/src/tabs/index.js
+++ b/packages/block-library/src/tabs/index.js
@@ -7,8 +7,6 @@ import edit from './edit';
 import save from './save';
 // import icon from './icon';
 
-// import './style.scss';
-
 const { name } = metadata;
 
 export { metadata, name };
diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
index bfdd07f54461f..84ef2377c87af 100644
--- a/packages/block-library/src/tabs/style.scss
+++ b/packages/block-library/src/tabs/style.scss
@@ -1,29 +1,6 @@
-.wp-block-tabs {
-	.wp-block-tabs__tab-buttons {
-		display: flex;
-		border-bottom: 1px solid #ccc;
-	}
-
-	.wp-block-tabs__tab-button {
-		background: none;
-		border: none;
-		padding: 10px 15px;
-		cursor: pointer;
-
-		&.is-active {
-			border-bottom: 2px solid #007cba;
-		}
-	}
-
-	.wp-block-tabs__content {
-		padding: 15px 0;
-	}
-}
-
-.wp-block-tab {
-	display: none;
-
-	&.is-active {
-		display: block;
-	}
+.wp-block-tabs__list {
+	display: flex;
+	gap: 10px;
+	list-style: none;
+	padding: 0;
 }

From aa0a7108b1c7333fc44a88fce3c07d3a818adf15 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Mon, 22 Jul 2024 12:29:07 -0500
Subject: [PATCH 05/21] Removes button component from block and initial styles
 for tab labels

---
 docs/reference-guides/core-blocks.md       |  2 +-
 packages/block-library/src/tabs/block.json |  4 ++++
 packages/block-library/src/tabs/edit.js    | 26 ++++++++++++++++------
 packages/block-library/src/tabs/style.scss | 22 ++++++++++++++++++
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 2d191c938c4ff..141da0f13aae8 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -925,7 +925,7 @@ Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tre
 -	**Experimental:** true
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
--	**Supports:** align (full, wide), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
+-	**Supports:** align (full, wide), color (text, ~~background~~), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
 -	**Attributes:** activeTab
 
 ## Tag Cloud
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 92422411ce30e..49e2b2e551c93 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -19,6 +19,10 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"text": true
+		},
 		"html": false,
 		"interactivity": true,
 		"layout": {
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index d0f0f583e8980..2bc9d781be195 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -13,15 +13,27 @@ import {
 	store as blockEditorStore,
 	RichText,
 } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-const initialTabsTemplate = [
+const TABS_TEMPLATE = [
 	[ 'core/tab', { title: 'Tab 1' } ],
 	[ 'core/tab', { title: 'Tab 2' } ],
 ];
 
+const ALLOWED_FORMATS = [
+	'core/bold',
+	'core/code',
+	'core/image',
+	'core/italic',
+	'core/keyboard',
+	'core/language',
+	'core/strikethrough',
+	'core/subscript',
+	'core/superscript',
+	'core/text-color',
+];
+
 export default function Edit( { attributes, clientId, setAttributes } ) {
 	const { activeTab } = attributes;
 	const innerBlocks = useSelect(
@@ -33,11 +45,11 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 
 	const innerBlockProps = useInnerBlocksProps(
 		{
-			className: 'wp-block-tabs__tab-content',
+			className: 'wp-block-tabs__content',
 		},
 		{
 			renderAppender: InnerBlocks.ButtonBlockAppender,
-			template: initialTabsTemplate,
+			template: TABS_TEMPLATE,
 		}
 	);
 
@@ -75,16 +87,16 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 							className="wp-block-tabs__list-item"
 							role="presentation"
 						>
-							<Button
+							<button
 								className={ clsx( 'wp-block-tabs__tab', {
 									'is-active': isActive,
 								} ) }
 								onClick={ () => setActiveTab( block.clientId ) }
-								variant="link"
 								role="tab"
 								tabIndex={ tabIndex }
 							>
 								<RichText
+									allowedFormats={ ALLOWED_FORMATS }
 									tagName="span"
 									value={ block.attributes.title }
 									onChange={ ( value ) =>
@@ -93,7 +105,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 										} )
 									}
 								/>
-							</Button>
+							</button>
 						</li>
 					);
 				} ) }
diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
index 84ef2377c87af..b4e7b4197e64e 100644
--- a/packages/block-library/src/tabs/style.scss
+++ b/packages/block-library/src/tabs/style.scss
@@ -2,5 +2,27 @@
 	display: flex;
 	gap: 10px;
 	list-style: none;
+	margin: 0;
 	padding: 0;
 }
+
+.wp-block-tabs__tab {
+	box-shadow: none;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	font-size: var(--wp--preset--font-size--normal, inherit);
+	margin: 0;
+	opacity: 0.5;
+	outline: none;
+	padding: $grid-unit;
+
+	&.is-active {
+		border-bottom: currentColor 2px solid;
+		opacity: 1;
+	}
+}
+
+.wp-block-tabs__content {
+	border-top: var(--wp--preset--color--accent) 2px solid;
+}

From 4a42b99319ce76714ac9f1451dafef70a7674838 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Mon, 22 Jul 2024 20:26:03 -0500
Subject: [PATCH 06/21] Adds basic tab inserting and management

---
 docs/reference-guides/core-blocks.md        |   7 +-
 packages/block-library/src/editor.scss      |   1 +
 packages/block-library/src/tab/block.json   |   9 +-
 packages/block-library/src/tab/edit.js      |  16 ++-
 packages/block-library/src/tab/save.js      |   8 +-
 packages/block-library/src/tab/style.scss   |   5 +
 packages/block-library/src/tabs/block.json  |  17 +--
 packages/block-library/src/tabs/edit.js     | 114 ++++++++++++++------
 packages/block-library/src/tabs/editor.scss |   5 +
 9 files changed, 118 insertions(+), 64 deletions(-)
 create mode 100644 packages/block-library/src/tabs/editor.scss

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 141da0f13aae8..832ebe10aa3b0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -895,8 +895,8 @@ Single tab within a tabs block. ([Source](https://github.com/WordPress/gutenberg
 -	**Experimental:** true
 -	**Category:** design
 -	**Parent:** core/tabs
--	**Supports:** ~~html~~, ~~inserter~~, ~~reusable~~
--	**Attributes:** title
+-	**Supports:** anchor, ~~html~~, ~~reusable~~
+-	**Attributes:** isActive, label
 
 ## Table
 
@@ -925,8 +925,7 @@ Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tre
 -	**Experimental:** true
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
--	**Supports:** align (full, wide), color (text, ~~background~~), interactivity, layout (default, ~~allowJustification~~, ~~allowSwitching~~), shadow, spacing (margin, padding), ~~html~~
--	**Attributes:** activeTab
+-	**Supports:** align (full, wide), color (text, ~~background~~), interactivity, spacing (margin, padding), ~~html~~
 
 ## Tag Cloud
 
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 52f3aa64287fa..896f7fe4ab672 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -44,6 +44,7 @@
 @import "./social-links/editor.scss";
 @import "./spacer/editor.scss";
 @import "./table/editor.scss";
+@import "./tabs/editor.scss";
 @import "./tag-cloud/editor.scss";
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index fdabf177c2697..ce258113e1b2c 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -8,16 +8,19 @@
 	"textdomain": "default",
 	"__experimental": true,
 	"attributes": {
-		"title": {
+		"isActive": {
+			"type": "boolean",
+			"default": false
+		},
+		"label": {
 			"type": "string"
 		}
 	},
 	"parent": [ "core/tabs" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
-		"inserter": false,
 		"reusable": false
 	},
-	"usesContext": [ "tabs/activeTab" ],
 	"style": "wp-block-tab"
 }
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index 27757e0dc2af4..ac8ac7b5982e2 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -5,15 +5,25 @@ import {
 	InnerBlocks,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function Edit( { attributes, clientId } ) {
+	const hasChildBlocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockOrder( clientId ).length > 0,
+		[ clientId ]
+	);
+	const { isActive } = attributes;
 
-export default function Edit( { clientId, context } ) {
-	const isActive = context[ 'tabs/activeTab' ] === clientId;
 	const blockProps = useBlockProps( {
 		className: isActive ? 'is-active' : '',
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		renderAppender: InnerBlocks.ButtonBlockAppender,
+		renderAppender: hasChildBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
 	} );
 	return <div { ...innerBlocksProps } role="tabpanel"></div>;
 }
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index b78ba5bb38bdd..000acdcd4a605 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -3,14 +3,10 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { title } = attributes;
-
+export default function save() {
 	return (
 		<div { ...useBlockProps.save() }>
-			<div className="wp-block-tab__content">
-				<InnerBlocks.Content />
-			</div>
+			<InnerBlocks.Content />
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tab/style.scss b/packages/block-library/src/tab/style.scss
index a2051c5861ef6..e96d32fb7e6bd 100644
--- a/packages/block-library/src/tab/style.scss
+++ b/packages/block-library/src/tab/style.scss
@@ -1,8 +1,13 @@
 .wp-block-tab {
 	display: none;
+	padding: 1em 0;
 
 	&.is-active {
 		display: block;
 	}
+
+	> *:first-child {
+		margin-top: 0;
+	}
 }
 
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 49e2b2e551c93..a421044e6d0db 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -8,15 +8,7 @@
 	"textdomain": "default",
 	"__experimental": true,
 	"allowedBlocks": [ "core/tab" ],
-	"attributes": {
-		"activeTab": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"providesContext": {
-		"tabs/activeTab": "activeTab"
-	},
+	"attributes": {},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"color": {
@@ -25,16 +17,11 @@
 		},
 		"html": false,
 		"interactivity": true,
-		"layout": {
-			"default": { "type": "flex", "orientation": "horizontal" },
-			"allowSwitching": false,
-			"allowJustification": false
-		},
-		"shadow": true,
 		"spacing": {
 			"margin": true,
 			"padding": true
 		}
 	},
+	"editorStyle": "wp-block-tabs-editor",
 	"style": "wp-block-tabs"
 }
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 2bc9d781be195..ff81724f94bf4 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -7,18 +7,18 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	InnerBlocks,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 	RichText,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 const TABS_TEMPLATE = [
-	[ 'core/tab', { title: 'Tab 1' } ],
-	[ 'core/tab', { title: 'Tab 2' } ],
+	[ 'core/tab', { label: 'Tab 1' } ],
+	[ 'core/tab', { label: 'Tab 2' } ],
 ];
 
 const ALLOWED_FORMATS = [
@@ -34,49 +34,96 @@ const ALLOWED_FORMATS = [
 	'core/text-color',
 ];
 
-export default function Edit( { attributes, clientId, setAttributes } ) {
-	const { activeTab } = attributes;
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( clientId ),
-		[ clientId ]
-	);
+export default function Edit( { clientId } ) {
+	const { innerTabs, selectedTabClientId } = useSelect(
+		( select ) => {
+			const {
+				getBlocks,
+				getSelectedBlockClientId,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+			const selectedBlockClientId = getSelectedBlockClientId();
+			let selectedTabId = null;
 
-	const blockProps = useBlockProps();
+			// Find the first tab that is selected or has selected inner blocks so we can set it as active.
+			for ( const block of innerBlocks ) {
+				if (
+					block.clientId === selectedBlockClientId ||
+					hasSelectedInnerBlock( block.clientId, true )
+				) {
+					selectedTabId = block.clientId;
+					break;
+				}
+			}
 
-	const innerBlockProps = useInnerBlocksProps(
-		{
-			className: 'wp-block-tabs__content',
+			return {
+				innerTabs: innerBlocks,
+				selectedTabClientId: selectedTabId,
+			};
 		},
-		{
-			renderAppender: InnerBlocks.ButtonBlockAppender,
-			template: TABS_TEMPLATE,
-		}
+		[ clientId ]
 	);
 
 	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
 
-	const setActiveTab = ( tabId ) => {
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { activeTab: tabId } );
-	};
+	const setActiveTab = useCallback(
+		( activeTabClientId ) => {
+			// Set each inner tab's `isActive` attribute.
+			innerTabs.forEach( ( block ) => {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( block.clientId, {
+					isActive: block.clientId === activeTabClientId,
+				} );
+			} );
+		},
+		[
+			innerTabs,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
 
 	useEffect( () => {
-		// Initialize the first tab as active when the component mounts.
-		if ( innerBlocks.length ) {
-			setActiveTab( innerBlocks[ 0 ].clientId );
+		if ( innerTabs?.length ) {
+			// Set the first tab as active when the editor is loaded
+			setActiveTab( innerTabs[ 0 ].clientId );
 		}
-	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps -- only run effect once when component mounts.
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps -- set first tab as active when the editor is loaded.
 
-	// if ( ! innerBlocks || innerBlocks.length === 0 ) {
-	// 	return null;
-	// }
+	useEffect( () => {
+		const hasActiveTab =
+			innerTabs &&
+			innerTabs.some( ( block ) => block.attributes.isActive );
+
+		if ( selectedTabClientId ) {
+			// If an inner tab block is selected, or its inner blocks are selected, it becomes the active tab.
+			setActiveTab( selectedTabClientId );
+		} else if ( ! hasActiveTab && innerTabs?.length ) {
+			// Otherwise, if there's no active tab, default to the first inner tab.
+			setActiveTab( innerTabs[ 0 ].clientId );
+		}
+	}, [ innerTabs, selectedTabClientId, setActiveTab ] );
+
+	const blockProps = useBlockProps();
+	const innerBlockProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-tabs__content',
+		},
+		{
+			__experimentalCaptureToolbars: true,
+			clientId,
+			orientation: 'horizontal',
+			template: TABS_TEMPLATE,
+		}
+	);
 
 	return (
 		<div { ...blockProps }>
 			<ul className="wp-block-tabs__list" role="tablist">
-				{ innerBlocks.map( ( block ) => {
-					const isActive = block.clientId === activeTab;
+				{ innerTabs.map( ( block ) => {
+					const isActive = block.attributes.isActive;
 					const tabIndex = isActive ? '0' : '-1';
 
 					// TODO: Add unique ids and aria attributes for accessibility.
@@ -98,12 +145,13 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 								<RichText
 									allowedFormats={ ALLOWED_FORMATS }
 									tagName="span"
-									value={ block.attributes.title }
 									onChange={ ( value ) =>
 										updateBlockAttributes( block.clientId, {
-											title: value,
+											label: value,
 										} )
 									}
+									placeholder={ __( 'Add label…' ) }
+									value={ block.attributes.label }
 								/>
 							</button>
 						</li>
diff --git a/packages/block-library/src/tabs/editor.scss b/packages/block-library/src/tabs/editor.scss
new file mode 100644
index 0000000000000..eb39135ff40b5
--- /dev/null
+++ b/packages/block-library/src/tabs/editor.scss
@@ -0,0 +1,5 @@
+.wp-block-tabs {
+	&__content > .block-list-appender {
+		top: -30px;
+	}
+}

From c47f40785dd196efa3363dc87c2ed7b0b903766c Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Thu, 25 Jul 2024 22:54:03 -0500
Subject: [PATCH 07/21] Correctly saves block markup for front-end

---
 docs/reference-guides/core-blocks.md       |  3 +-
 packages/block-library/src/tab/block.json  |  3 +
 packages/block-library/src/tab/save.js     | 18 +++---
 packages/block-library/src/tabs/block.json | 18 +++++-
 packages/block-library/src/tabs/edit.js    | 64 ++++++++++++++++------
 packages/block-library/src/tabs/save.js    | 50 +++++++++++++++--
 packages/block-library/src/tabs/style.scss | 10 +---
 7 files changed, 128 insertions(+), 38 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 832ebe10aa3b0..e422d27d7211d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -896,7 +896,7 @@ Single tab within a tabs block. ([Source](https://github.com/WordPress/gutenberg
 -	**Category:** design
 -	**Parent:** core/tabs
 -	**Supports:** anchor, ~~html~~, ~~reusable~~
--	**Attributes:** isActive, label
+-	**Attributes:** isActive, label, tabIndex
 
 ## Table
 
@@ -926,6 +926,7 @@ Organize content into tabs. ([Source](https://github.com/WordPress/gutenberg/tre
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
 -	**Supports:** align (full, wide), color (text, ~~background~~), interactivity, spacing (margin, padding), ~~html~~
+-	**Attributes:** innerTabs
 
 ## Tag Cloud
 
diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index ce258113e1b2c..93149e30e1165 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -14,6 +14,9 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"tabIndex": {
+			"type": "number"
 		}
 	},
 	"parent": [ "core/tabs" ],
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index 000acdcd4a605..d69058bbeea62 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -1,12 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save() {
-	return (
-		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</div>
-	);
+export default function save( { attributes } ) {
+	const { tabIndex } = attributes;
+
+	// The first tab in the set is always active on initial load.
+	const blockProps = useBlockProps.save( {
+		className: tabIndex === 0 ? 'is-active' : '',
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } role="tabpanel"></div>;
 }
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index a421044e6d0db..fc92a27b68e58 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -8,7 +8,23 @@
 	"textdomain": "default",
 	"__experimental": true,
 	"allowedBlocks": [ "core/tab" ],
-	"attributes": {},
+	"attributes": {
+		"innerTabs": {
+			"type": "array",
+			"items": {
+				"type": "string"
+			},
+			"default": [],
+			"source": "query",
+			"selector": ".wp-block-tabs__tab-label",
+			"query": {
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			}
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"color": {
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index ff81724f94bf4..6be2426e14ade 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -34,8 +34,8 @@ const ALLOWED_FORMATS = [
 	'core/text-color',
 ];
 
-export default function Edit( { clientId } ) {
-	const { innerTabs, selectedTabClientId } = useSelect(
+export default function Edit( { clientId, setAttributes } ) {
+	const { innerTabBlocks, selectedTabClientId } = useSelect(
 		( select ) => {
 			const {
 				getBlocks,
@@ -58,7 +58,7 @@ export default function Edit( { clientId } ) {
 			}
 
 			return {
-				innerTabs: innerBlocks,
+				innerTabBlocks: innerBlocks,
 				selectedTabClientId: selectedTabId,
 			};
 		},
@@ -71,7 +71,7 @@ export default function Edit( { clientId } ) {
 	const setActiveTab = useCallback(
 		( activeTabClientId ) => {
 			// Set each inner tab's `isActive` attribute.
-			innerTabs.forEach( ( block ) => {
+			innerTabBlocks.forEach( ( block ) => {
 				__unstableMarkNextChangeAsNotPersistent();
 				updateBlockAttributes( block.clientId, {
 					isActive: block.clientId === activeTabClientId,
@@ -79,32 +79,58 @@ export default function Edit( { clientId } ) {
 			} );
 		},
 		[
-			innerTabs,
+			innerTabBlocks,
 			updateBlockAttributes,
 			__unstableMarkNextChangeAsNotPersistent,
 		]
 	);
 
+	// Set the first tab as active when the editor is loaded.
 	useEffect( () => {
-		if ( innerTabs?.length ) {
-			// Set the first tab as active when the editor is loaded
-			setActiveTab( innerTabs[ 0 ].clientId );
+		if ( innerTabBlocks?.length ) {
+			setActiveTab( innerTabBlocks[ 0 ].clientId );
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps -- set first tab as active when the editor is loaded.
 
+	// Update active tab when selection or blocks change.
 	useEffect( () => {
 		const hasActiveTab =
-			innerTabs &&
-			innerTabs.some( ( block ) => block.attributes.isActive );
+			innerTabBlocks &&
+			innerTabBlocks.some( ( block ) => block.attributes.isActive );
 
 		if ( selectedTabClientId ) {
 			// If an inner tab block is selected, or its inner blocks are selected, it becomes the active tab.
 			setActiveTab( selectedTabClientId );
-		} else if ( ! hasActiveTab && innerTabs?.length ) {
+		} else if ( ! hasActiveTab && innerTabBlocks?.length ) {
 			// Otherwise, if there's no active tab, default to the first inner tab.
-			setActiveTab( innerTabs[ 0 ].clientId );
+			setActiveTab( innerTabBlocks[ 0 ].clientId );
 		}
-	}, [ innerTabs, selectedTabClientId, setActiveTab ] );
+	}, [ innerTabBlocks, selectedTabClientId, setActiveTab ] );
+
+	/**
+	 * Cache data needed for save functions:
+	 * - Labels for inner tabs to generate tab list
+	 * - tabIndex to save the first tab as active, independent of the editor view
+	 */
+	useEffect( () => {
+		setAttributes( {
+			innerTabs: innerTabBlocks.map( ( block ) => ( {
+				label: block.attributes.label,
+			} ) ),
+		} );
+
+		innerTabBlocks.forEach( ( block, index ) => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( block.clientId, {
+				tabIndex: index,
+			} );
+		} );
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		innerTabBlocks,
+		setAttributes,
+		updateBlockAttributes,
+	] );
 
 	const blockProps = useBlockProps();
 	const innerBlockProps = useInnerBlocksProps(
@@ -122,9 +148,9 @@ export default function Edit( { clientId } ) {
 	return (
 		<div { ...blockProps }>
 			<ul className="wp-block-tabs__list" role="tablist">
-				{ innerTabs.map( ( block ) => {
+				{ innerTabBlocks.map( ( block ) => {
 					const isActive = block.attributes.isActive;
-					const tabIndex = isActive ? '0' : '-1';
+					const tabIndex = isActive ? 0 : -1;
 
 					// TODO: Add unique ids and aria attributes for accessibility.
 					// (Try the anchor generation functionality from the heading block?)
@@ -134,10 +160,12 @@ export default function Edit( { clientId } ) {
 							className="wp-block-tabs__list-item"
 							role="presentation"
 						>
-							<button
-								className={ clsx( 'wp-block-tabs__tab', {
+							<a // eslint-disable-line jsx-a11y/anchor-is-valid -- TODO: add tab ids to href
+								aria-selected={ isActive }
+								className={ clsx( 'wp-block-tabs__tab-label', {
 									'is-active': isActive,
 								} ) }
+								href="#"
 								onClick={ () => setActiveTab( block.clientId ) }
 								role="tab"
 								tabIndex={ tabIndex }
@@ -153,7 +181,7 @@ export default function Edit( { clientId } ) {
 									placeholder={ __( 'Add label…' ) }
 									value={ block.attributes.label }
 								/>
-							</button>
+							</a>
 						</li>
 					);
 				} ) }
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
index 000acdcd4a605..64a53cf522c5b 100644
--- a/packages/block-library/src/tabs/save.js
+++ b/packages/block-library/src/tabs/save.js
@@ -1,12 +1,54 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { innerTabs } = attributes;
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( {
+		className: 'wp-block-tabs__content',
+	} );
 
-export default function save() {
 	return (
-		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
+		<div { ...blockProps }>
+			<ul className="wp-block-tabs__list" role="tablist">
+				{ innerTabs.map( ( tab, index ) => {
+					const isActive = index === 0;
+					const tabIndex = isActive ? 0 : -1;
+
+					return (
+						<li
+							className="wp-block-tabs__list-item"
+							key={ index }
+							role="presentation"
+						>
+							<RichText.Content
+								aria-selected={ isActive }
+								className={ clsx( 'wp-block-tabs__tab-label', {
+									'is-active': isActive,
+								} ) }
+								href="#"
+								role="tab"
+								tabIndex={ tabIndex }
+								tagName="a"
+								value={ tab.label }
+							/>
+						</li>
+					);
+				} ) }
+			</ul>
+
+			<div { ...innerBlocksProps }></div>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
index b4e7b4197e64e..ad580b05857da 100644
--- a/packages/block-library/src/tabs/style.scss
+++ b/packages/block-library/src/tabs/style.scss
@@ -6,16 +6,12 @@
 	padding: 0;
 }
 
-.wp-block-tabs__tab {
-	box-shadow: none;
-	border: 0;
-	border-radius: 0;
-	background: none;
-	font-size: var(--wp--preset--font-size--normal, inherit);
+.wp-block-tabs__tab-label {
+	display: block;
 	margin: 0;
 	opacity: 0.5;
-	outline: none;
 	padding: $grid-unit;
+	text-decoration: none;
 
 	&.is-active {
 		border-bottom: currentColor 2px solid;

From 9b30278644ac4ece088aa9cb0370b4f762a4ff57 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sat, 27 Jul 2024 22:02:58 -0500
Subject: [PATCH 08/21] Adds proper ids to tabs, integrated with anchor
 attribute

---
 docs/reference-guides/core-blocks.md       |  2 +-
 packages/block-library/src/tab/block.json  |  7 +++-
 packages/block-library/src/tab/edit.js     | 38 ++++++++++++++++++++--
 packages/block-library/src/tab/save.js     | 13 ++++++--
 packages/block-library/src/tabs/block.json |  8 +++--
 packages/block-library/src/tabs/edit.js    | 20 +++++++-----
 packages/block-library/src/tabs/save.js    | 10 +++---
 7 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e422d27d7211d..511d65f4149be 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -896,7 +896,7 @@ Single tab within a tabs block. ([Source](https://github.com/WordPress/gutenberg
 -	**Category:** design
 -	**Parent:** core/tabs
 -	**Supports:** anchor, ~~html~~, ~~reusable~~
--	**Attributes:** isActive, label, tabIndex
+-	**Attributes:** isActive, label, slug, tabIndex
 
 ## Table
 
diff --git a/packages/block-library/src/tab/block.json b/packages/block-library/src/tab/block.json
index 93149e30e1165..9234361b44c86 100644
--- a/packages/block-library/src/tab/block.json
+++ b/packages/block-library/src/tab/block.json
@@ -13,7 +13,12 @@
 			"default": false
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"default": ""
+		},
+		"slug": {
+			"type": "string",
+			"default": ""
 		},
 		"tabIndex": {
 			"type": "number"
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index ac8ac7b5982e2..720e7c48a12cc 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -8,14 +8,39 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { cleanForSlug } from '@wordpress/url';
 
-export default function Edit( { attributes, clientId } ) {
+function slugFromLabel( label, tabIndex ) {
+	// Get just the text content, filtering out any HTML tags from the RichText value.
+	const htmlDocument = new window.DOMParser().parseFromString(
+		label,
+		'text/html'
+	);
+	if ( htmlDocument.body?.textContent ) {
+		return cleanForSlug( htmlDocument.body.textContent );
+	}
+
+	// Fall back to using the tab index if the label is empty.
+	return 'tab-panel-' + tabIndex;
+}
+
+export default function Edit( { attributes, clientId, setAttributes } ) {
+	const { anchor, isActive, label, slug, tabIndex } = attributes;
+	// Use a custom anchor, if possible. Otherwise fall back to the slug generated from the label.
+	const tabPanelId = anchor || slug;
+	const tabLabelId = tabPanelId + '--tab';
 	const hasChildBlocks = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockOrder( clientId ).length > 0,
 		[ clientId ]
 	);
-	const { isActive } = attributes;
+
+	useEffect( () => {
+		if ( label ) {
+			setAttributes( { slug: slugFromLabel( label, tabIndex ) } );
+		}
+	}, [ label, setAttributes, tabIndex ] );
 
 	const blockProps = useBlockProps( {
 		className: isActive ? 'is-active' : '',
@@ -25,5 +50,12 @@ export default function Edit( { attributes, clientId } ) {
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
 	} );
-	return <div { ...innerBlocksProps } role="tabpanel"></div>;
+	return (
+		<div
+			{ ...innerBlocksProps }
+			aria-labelledby={ tabLabelId }
+			id={ tabPanelId }
+			role="tabpanel"
+		/>
+	);
 }
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index d69058bbeea62..e0d50b1cbac87 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -4,7 +4,9 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { tabIndex } = attributes;
+	const { anchor, slug, tabIndex } = attributes;
+	const tabPanelId = anchor || slug;
+	const tabLabelId = tabPanelId + '--tab';
 
 	// The first tab in the set is always active on initial load.
 	const blockProps = useBlockProps.save( {
@@ -12,5 +14,12 @@ export default function save( { attributes } ) {
 	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <div { ...innerBlocksProps } role="tabpanel"></div>;
+	return (
+		<div
+			{ ...innerBlocksProps }
+			aria-labelledby={ tabLabelId }
+			id={ tabPanelId }
+			role="tabpanel"
+		/>
+	);
 }
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index fc92a27b68e58..89b715f064d9b 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -11,13 +11,15 @@
 	"attributes": {
 		"innerTabs": {
 			"type": "array",
-			"items": {
-				"type": "string"
-			},
 			"default": [],
 			"source": "query",
 			"selector": ".wp-block-tabs__tab-label",
 			"query": {
+				"id": {
+					"type": "string",
+					"source": "attribute",
+					"attribute": "aria-controls"
+				},
 				"label": {
 					"type": "string",
 					"source": "html"
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 6be2426e14ade..d52cbb93a6180 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -113,9 +113,11 @@ export default function Edit( { clientId, setAttributes } ) {
 	 * - tabIndex to save the first tab as active, independent of the editor view
 	 */
 	useEffect( () => {
+		__unstableMarkNextChangeAsNotPersistent();
 		setAttributes( {
 			innerTabs: innerTabBlocks.map( ( block ) => ( {
 				label: block.attributes.label,
+				id: block.attributes.anchor || block.attributes.slug,
 			} ) ),
 		} );
 
@@ -149,26 +151,28 @@ export default function Edit( { clientId, setAttributes } ) {
 		<div { ...blockProps }>
 			<ul className="wp-block-tabs__list" role="tablist">
 				{ innerTabBlocks.map( ( block ) => {
-					const isActive = block.attributes.isActive;
-					const tabIndex = isActive ? 0 : -1;
+					const { anchor, isActive, label, slug } = block.attributes;
+					const tabIndexAttr = isActive ? 0 : -1;
+					const tabPanelId = anchor || slug;
+					const tabLabelId = tabPanelId + '--tab';
 
-					// TODO: Add unique ids and aria attributes for accessibility.
-					// (Try the anchor generation functionality from the heading block?)
 					return (
 						<li
 							key={ block.clientId }
 							className="wp-block-tabs__list-item"
 							role="presentation"
 						>
-							<a // eslint-disable-line jsx-a11y/anchor-is-valid -- TODO: add tab ids to href
+							<a
+								aria-controls={ tabPanelId }
 								aria-selected={ isActive }
 								className={ clsx( 'wp-block-tabs__tab-label', {
 									'is-active': isActive,
 								} ) }
-								href="#"
+								href={ '#' + tabPanelId }
+								id={ tabLabelId }
 								onClick={ () => setActiveTab( block.clientId ) }
 								role="tab"
-								tabIndex={ tabIndex }
+								tab-index={ tabIndexAttr }
 							>
 								<RichText
 									allowedFormats={ ALLOWED_FORMATS }
@@ -179,7 +183,7 @@ export default function Edit( { clientId, setAttributes } ) {
 										} )
 									}
 									placeholder={ __( 'Add label…' ) }
-									value={ block.attributes.label }
+									value={ label }
 								/>
 							</a>
 						</li>
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
index 64a53cf522c5b..e858f9c43f4da 100644
--- a/packages/block-library/src/tabs/save.js
+++ b/packages/block-library/src/tabs/save.js
@@ -24,8 +24,8 @@ export default function save( { attributes } ) {
 			<ul className="wp-block-tabs__list" role="tablist">
 				{ innerTabs.map( ( tab, index ) => {
 					const isActive = index === 0;
-					const tabIndex = isActive ? 0 : -1;
-
+					const tabIndexAttr = isActive ? 0 : -1;
+					const tabLabelId = tab.id + '--tab';
 					return (
 						<li
 							className="wp-block-tabs__list-item"
@@ -33,13 +33,15 @@ export default function save( { attributes } ) {
 							role="presentation"
 						>
 							<RichText.Content
+								aria-controls={ tab.id }
 								aria-selected={ isActive }
 								className={ clsx( 'wp-block-tabs__tab-label', {
 									'is-active': isActive,
 								} ) }
-								href="#"
+								href={ '#' + tab.id }
+								id={ tabLabelId }
 								role="tab"
-								tabIndex={ tabIndex }
+								tab-index={ tabIndexAttr }
 								tagName="a"
 								value={ tab.label }
 							/>

From 4fe919efe0c9d1973eddce8f4d3407eac4f87f40 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sun, 28 Jul 2024 20:20:03 -0500
Subject: [PATCH 09/21] 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 e0d50b1cbac87..dca2d2856dbed 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 89b715f064d9b..49598ad552119 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 e858f9c43f4da..dc7637d9b002c 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 0000000000000..c79e6c636f731
--- /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;
+		},
+	},
+} );

From d141de933914bac8c1fa976ddb68bab656a86592 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Mon, 29 Jul 2024 18:00:46 -0500
Subject: [PATCH 10/21] Adds icons to block settings

---
 packages/block-library/src/tab/icon.js   | 19 +++++++++++++++++++
 packages/block-library/src/tab/index.js  |  4 ++--
 packages/block-library/src/tabs/icon.js  | 19 +++++++++++++++++++
 packages/block-library/src/tabs/index.js |  4 ++--
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 packages/block-library/src/tab/icon.js
 create mode 100644 packages/block-library/src/tabs/icon.js

diff --git a/packages/block-library/src/tab/icon.js b/packages/block-library/src/tab/icon.js
new file mode 100644
index 0000000000000..8ccdf6d3a4473
--- /dev/null
+++ b/packages/block-library/src/tab/icon.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.5498 10.3501V6.3501H9.8498V10.3501H11.3498V6.1001C11.3498 5.40974 10.7902 4.8501 10.0998 4.8501H5.2998C4.60945 4.8501 4.0498 5.40974 4.0498 6.1001V10.3501H5.5498ZM20 12.6001H4V14.1001L20 14.1001V12.6001ZM14 17.1001H4V18.6001H14V17.1001Z"
+		/>
+	</SVG>
+);
diff --git a/packages/block-library/src/tab/index.js b/packages/block-library/src/tab/index.js
index 966216c39af91..c42afb84470d6 100644
--- a/packages/block-library/src/tab/index.js
+++ b/packages/block-library/src/tab/index.js
@@ -5,14 +5,14 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-// import icon from './icon';
+import icon from './icon';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
-	// icon,
+	icon,
 	edit,
 	save,
 };
diff --git a/packages/block-library/src/tabs/icon.js b/packages/block-library/src/tabs/icon.js
new file mode 100644
index 0000000000000..af9356f636acf
--- /dev/null
+++ b/packages/block-library/src/tabs/icon.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.2998 4.8501C4.60945 4.8501 4.0498 5.40974 4.0498 6.1001V10.3501H11.3498V6.1001C11.3498 5.40974 10.7902 4.8501 10.0998 4.8501H5.2998ZM14.2002 10.3501V7.1001H18.5002V10.3501H20.0002V6.8501C20.0002 6.15974 19.4406 5.6001 18.7502 5.6001H13.9502C13.2598 5.6001 12.7002 6.15974 12.7002 6.8501V10.3501H14.2002ZM20 12.6001H4V14.1001H20V12.6001ZM14 17.1001H4V18.6001H14V17.1001Z"
+		/>
+	</SVG>
+);
diff --git a/packages/block-library/src/tabs/index.js b/packages/block-library/src/tabs/index.js
index 966216c39af91..c42afb84470d6 100644
--- a/packages/block-library/src/tabs/index.js
+++ b/packages/block-library/src/tabs/index.js
@@ -5,14 +5,14 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
-// import icon from './icon';
+import icon from './icon';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
-	// icon,
+	icon,
 	edit,
 	save,
 };

From 590f3b2bed7dbc3c0028427aa3da8534819a85e8 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Mon, 29 Jul 2024 19:39:46 -0500
Subject: [PATCH 11/21] Converts save functions to render a static version of
 the block

This allows the block to display content in non-browser contexts like email.
---
 packages/block-library/src/tab/edit.js     |  5 +--
 packages/block-library/src/tab/save.js     | 17 ++-------
 packages/block-library/src/tab/style.scss  |  6 ---
 packages/block-library/src/tabs/block.json |  4 +-
 packages/block-library/src/tabs/edit.js    | 16 +++-----
 packages/block-library/src/tabs/save.js    | 40 +++++---------------
 packages/block-library/src/tabs/style.scss | 44 ++++++++++++----------
 7 files changed, 47 insertions(+), 85 deletions(-)

diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index 720e7c48a12cc..b9f923872a3f3 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -42,9 +42,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		}
 	}, [ label, setAttributes, tabIndex ] );
 
-	const blockProps = useBlockProps( {
-		className: isActive ? 'is-active' : '',
-	} );
+	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: hasChildBlocks
 			? undefined
@@ -54,6 +52,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		<div
 			{ ...innerBlocksProps }
 			aria-labelledby={ tabLabelId }
+			hidden={ ! isActive }
 			id={ tabPanelId }
 			role="tabpanel"
 		/>
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index dca2d2856dbed..3f2146a2ef128 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -4,23 +4,12 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { anchor, slug, tabIndex } = attributes;
+	const { anchor, slug } = attributes;
 	const tabPanelId = anchor || slug;
-	const tabLabelId = tabPanelId + '--tab';
 
 	// The first tab in the set is always active on initial load.
-	const blockProps = useBlockProps.save( {
-		className: tabIndex === 0 ? 'is-active' : '',
-	} );
+	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return (
-		<div
-			{ ...innerBlocksProps }
-			aria-labelledby={ tabLabelId }
-			data-wp-class--is-active={ `${ tabIndex } === context.activeTab` }
-			id={ tabPanelId }
-			role="tabpanel"
-		/>
-	);
+	return <section { ...innerBlocksProps } id={ tabPanelId } />;
 }
diff --git a/packages/block-library/src/tab/style.scss b/packages/block-library/src/tab/style.scss
index e96d32fb7e6bd..1d92981230b17 100644
--- a/packages/block-library/src/tab/style.scss
+++ b/packages/block-library/src/tab/style.scss
@@ -1,13 +1,7 @@
 .wp-block-tab {
-	display: none;
 	padding: 1em 0;
 
-	&.is-active {
-		display: block;
-	}
-
 	> *:first-child {
 		margin-top: 0;
 	}
 }
-
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 49598ad552119..96ccd1404d3e7 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -15,10 +15,10 @@
 			"source": "query",
 			"selector": ".wp-block-tabs__tab-label",
 			"query": {
-				"id": {
+				"href": {
 					"type": "string",
 					"source": "attribute",
-					"attribute": "aria-controls"
+					"attribute": "href"
 				},
 				"label": {
 					"type": "string",
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index d52cbb93a6180..bc4476dc6152f 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -117,7 +112,8 @@ export default function Edit( { clientId, setAttributes } ) {
 		setAttributes( {
 			innerTabs: innerTabBlocks.map( ( block ) => ( {
 				label: block.attributes.label,
-				id: block.attributes.anchor || block.attributes.slug,
+				href:
+					'#' + ( block.attributes.anchor || block.attributes.slug ),
 			} ) ),
 		} );
 
@@ -134,7 +130,7 @@ export default function Edit( { clientId, setAttributes } ) {
 		updateBlockAttributes,
 	] );
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { className: 'interactive' } );
 	const innerBlockProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-tabs__content',
@@ -165,14 +161,12 @@ export default function Edit( { clientId, setAttributes } ) {
 							<a
 								aria-controls={ tabPanelId }
 								aria-selected={ isActive }
-								className={ clsx( 'wp-block-tabs__tab-label', {
-									'is-active': isActive,
-								} ) }
+								className="wp-block-tabs__tab-label"
 								href={ '#' + tabPanelId }
 								id={ tabLabelId }
 								onClick={ () => setActiveTab( block.clientId ) }
 								role="tab"
-								tab-index={ tabIndexAttr }
+								tabIndex={ tabIndexAttr }
 							>
 								<RichText
 									allowedFormats={ ALLOWED_FORMATS }
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
index dc7637d9b002c..6ed845f1d0a27 100644
--- a/packages/block-library/src/tabs/save.js
+++ b/packages/block-library/src/tabs/save.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { innerTabs } = attributes;
@@ -20,34 +16,18 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div
-			{ ...blockProps }
-			data-wp-interactive="core/tabs"
-			data-wp-context='{ "activeTab": 0 }'
-		>
-			<ul className="wp-block-tabs__list" role="tablist">
+		<div { ...blockProps }>
+			{ /* translators: Title for a list of content sections linked below. */ }
+			<h3 className="wp-block-tabs__title">{ __( 'Contents' ) }</h3>
+			<ul className="wp-block-tabs__list">
 				{ innerTabs.map( ( tab, index ) => {
-					const isActive = index === 0;
-					const tabIndexAttr = isActive ? 0 : -1;
-					const tabLabelId = tab.id + '--tab';
+					const tabId = tab.href.replace( '#', '' ) + '--tab';
 					return (
-						<li
-							className="wp-block-tabs__list-item"
-							key={ index }
-							role="presentation"
-						>
+						<li className="wp-block-tabs__list-item" key={ index }>
 							<RichText.Content
-								aria-controls={ tab.id }
-								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,
-								} ) }
-								href={ '#' + tab.id }
-								id={ tabLabelId }
-								role="tab"
-								tab-index={ tabIndexAttr }
+								id={ tabId }
+								className="wp-block-tabs__tab-label"
+								href={ tab.href }
 								tagName="a"
 								value={ tab.label }
 							/>
diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
index ad580b05857da..f6d59630a4948 100644
--- a/packages/block-library/src/tabs/style.scss
+++ b/packages/block-library/src/tabs/style.scss
@@ -1,24 +1,30 @@
-.wp-block-tabs__list {
-	display: flex;
-	gap: 10px;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
+.wp-block-tabs.interactive {
+	.wp-block-tabs__title {
+		display: none;
+	}
+
+	.wp-block-tabs__list {
+		display: flex;
+		gap: 10px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
 
-.wp-block-tabs__tab-label {
-	display: block;
-	margin: 0;
-	opacity: 0.5;
-	padding: $grid-unit;
-	text-decoration: none;
+	.wp-block-tabs__tab-label {
+		display: block;
+		margin: 0;
+		opacity: 0.5;
+		padding: $grid-unit;
+		text-decoration: none;
 
-	&.is-active {
-		border-bottom: currentColor 2px solid;
-		opacity: 1;
+		&[aria-selected="true"] {
+			border-bottom: currentColor 2px solid;
+			opacity: 1;
+		}
 	}
-}
 
-.wp-block-tabs__content {
-	border-top: var(--wp--preset--color--accent) 2px solid;
+	.wp-block-tabs__content {
+		border-top: var(--wp--preset--color--accent) 2px solid;
+	}
 }

From fa1873be7bb716c1bd684134344589703616e9c4 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Tue, 30 Jul 2024 16:36:56 -0500
Subject: [PATCH 12/21] Uses withoutInteractiveFormatting prop rather than
 allowedFormats for RichText tab titles

---
 packages/block-library/src/tabs/edit.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index bc4476dc6152f..34fd9955ac5b9 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -16,19 +16,6 @@ const TABS_TEMPLATE = [
 	[ 'core/tab', { label: 'Tab 2' } ],
 ];
 
-const ALLOWED_FORMATS = [
-	'core/bold',
-	'core/code',
-	'core/image',
-	'core/italic',
-	'core/keyboard',
-	'core/language',
-	'core/strikethrough',
-	'core/subscript',
-	'core/superscript',
-	'core/text-color',
-];
-
 export default function Edit( { clientId, setAttributes } ) {
 	const { innerTabBlocks, selectedTabClientId } = useSelect(
 		( select ) => {
@@ -169,7 +156,6 @@ export default function Edit( { clientId, setAttributes } ) {
 								tabIndex={ tabIndexAttr }
 							>
 								<RichText
-									allowedFormats={ ALLOWED_FORMATS }
 									tagName="span"
 									onChange={ ( value ) =>
 										updateBlockAttributes( block.clientId, {
@@ -178,6 +164,7 @@ export default function Edit( { clientId, setAttributes } ) {
 									}
 									placeholder={ __( 'Add label…' ) }
 									value={ label }
+									withoutInteractiveFormatting
 								/>
 							</a>
 						</li>

From 02479251cb33704126b5ecdeb72d118862f734d0 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Wed, 31 Jul 2024 13:20:24 -0500
Subject: [PATCH 13/21] Switches tab and tabs blocks to server side rendering

---
 lib/blocks.php                            |  4 +--
 packages/block-library/src/tab/index.php  | 32 ++++++++++++++++++++++
 packages/block-library/src/tabs/index.php | 33 +++++++++++++++++++++++
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 packages/block-library/src/tab/index.php
 create mode 100644 packages/block-library/src/tabs/index.php

diff --git a/lib/blocks.php b/lib/blocks.php
index d5ef71fa7f87b..3f53eb8c4372f 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -39,8 +39,6 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
-				'tab',
-				'tabs',
 				'text-columns',
 				'verse',
 				'video',
@@ -118,6 +116,8 @@ function gutenberg_reregister_core_block_types() {
 				'site-logo.php'                    => 'core/site-logo',
 				'site-tagline.php'                 => 'core/site-tagline',
 				'site-title.php'                   => 'core/site-title',
+				'tab.php'                          => 'core/tab',
+				'tabs.php'                         => 'core/tabs',
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
 				'term-description.php'             => 'core/term-description',
diff --git a/packages/block-library/src/tab/index.php b/packages/block-library/src/tab/index.php
new file mode 100644
index 0000000000000..8e38c020b4cb4
--- /dev/null
+++ b/packages/block-library/src/tab/index.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Server-side rendering of the `core/tab` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/tab` block on the server.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content.
+ */
+function render_block_core_tab( $attributes, $content, $block ) {
+	return $content;
+}
+
+/**
+ * Registers the `core/tab` block on server.
+ */
+function register_block_core_tab() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tab',
+		array(
+			'render_callback' => 'render_block_core_tab',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tab' );
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
new file mode 100644
index 0000000000000..b6d81fb552a8e
--- /dev/null
+++ b/packages/block-library/src/tabs/index.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Server-side rendering of the `core/tabs` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/tabs` block on the server.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content.
+ */
+function render_block_core_tabs( $attributes, $content, $block ) {
+	l( 'render core/tabs' );
+	return $content;
+}
+
+/**
+ * Registers the `core/tabs` block on server.
+ */
+function register_block_core_tabs() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tabs',
+		array(
+			'render_callback' => 'render_block_core_tabs',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tabs' );

From 04b2b49f12ef62fa42f8878df1c790c05e2388b4 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Thu, 1 Aug 2024 16:04:27 -0500
Subject: [PATCH 14/21] Gets interactivity API loaded for tabs

---
 packages/block-library/src/tabs/block.json |  3 +-
 packages/block-library/src/tabs/index.php  | 37 ++++++++++++++++++++--
 packages/block-library/src/tabs/view.js    | 10 +++++-
 tools/webpack/interactivity.js             |  1 +
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
index 96ccd1404d3e7..c46e93afda3d9 100644
--- a/packages/block-library/src/tabs/block.json
+++ b/packages/block-library/src/tabs/block.json
@@ -41,6 +41,5 @@
 		}
 	},
 	"editorStyle": "wp-block-tabs-editor",
-	"style": "wp-block-tabs",
-	"viewScriptModule": "file:./view.min.js"
+	"style": "wp-block-tabs"
 }
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index b6d81fb552a8e..db59ec2224314 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -15,8 +15,41 @@
  * @return string The block content.
  */
 function render_block_core_tabs( $attributes, $content, $block ) {
-	l( 'render core/tabs' );
-	return $content;
+	if ( ! $content ) {
+		return '';
+	}
+
+	// Enqueue script modules for interactivity API.
+	$suffix = wp_scripts_get_suffix();
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		$module_url = gutenberg_url( '/build/interactivity/tabs.min.js' );
+	}
+
+	wp_register_script_module(
+		'@wordpress/block-library/tabs',
+		isset( $module_url ) ? $module_url : includes_url( "blocks/tabs/view{$suffix}.js" ),
+		array( '@wordpress/interactivity' ),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
+
+	wp_enqueue_script_module( '@wordpress/block-library/tabs' );
+
+	// Modify markup to include interactivity API attributes.
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	while ( $p->next_tag() ) {
+		if ( $p->has_class( 'wp-block-tabs' ) ) {
+			// Mark block as interactive to trigger tab styles.
+			$p->set_attribute( 'data-wp-interactive', 'core/tabs' );
+			$p->set_attribute( 'data-wp-context', '{ "activeTab": 0 }' );
+			$p->set_attribute( 'data-wp-init', 'callbacks.init' );
+		}
+
+		if ( $p->has_class( 'wp-block-tabs__list' ) ) {
+		}
+	}
+
+	return $p->get_updated_html();
 }
 
 /**
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index c79e6c636f731..c34a7b3fc36f8 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+function initTabs( ref ) {}
 
 store( 'core/tabs', {
 	actions: {
@@ -10,4 +12,10 @@ store( 'core/tabs', {
 			context.activeTab = index;
 		},
 	},
+	callbacks: {
+		init: () => {
+			const { ref } = getElement();
+			initTabs( ref );
+		},
+	},
 } );
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
index cbde31171fe26..b3919eb2d15c9 100644
--- a/tools/webpack/interactivity.js
+++ b/tools/webpack/interactivity.js
@@ -25,6 +25,7 @@ module.exports = {
 		image: './packages/block-library/src/image/view.js',
 		file: './packages/block-library/src/file/view.js',
 		search: './packages/block-library/src/search/view.js',
+		tabs: './packages/block-library/src/tabs/view.js',
 	},
 	experiments: {
 		outputModule: true,

From b42ca9ce877e452ec0d37e7dba788ef236ac12af Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Thu, 1 Aug 2024 17:14:55 -0500
Subject: [PATCH 15/21] Sets aria roles and labels in front-end markup

---
 packages/block-library/src/tabs/index.php |  7 ++-
 packages/block-library/src/tabs/save.js   |  7 ++-
 packages/block-library/src/tabs/view.js   | 60 ++++++++++++++++++++++-
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index db59ec2224314..0f5389f0c6d80 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -35,7 +35,8 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 	wp_enqueue_script_module( '@wordpress/block-library/tabs' );
 
 	// Modify markup to include interactivity API attributes.
-	$p = new WP_HTML_Tag_Processor( $content );
+	$p        = new WP_HTML_Tag_Processor( $content );
+	$title_id = wp_unique_id( 'tablist-label-' );
 
 	while ( $p->next_tag() ) {
 		if ( $p->has_class( 'wp-block-tabs' ) ) {
@@ -45,7 +46,9 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 			$p->set_attribute( 'data-wp-init', 'callbacks.init' );
 		}
 
-		if ( $p->has_class( 'wp-block-tabs__list' ) ) {
+		// Set a unique ID for the title, so it can be used by aria-labelledby.
+		if ( $p->has_class( 'wp-block-tabs__title' ) ) {
+			$p->set_attribute( 'id', $title_id );
 		}
 	}
 
diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
index 6ed845f1d0a27..b298fb2cca393 100644
--- a/packages/block-library/src/tabs/save.js
+++ b/packages/block-library/src/tabs/save.js
@@ -17,8 +17,11 @@ export default function save( { attributes } ) {
 
 	return (
 		<div { ...blockProps }>
-			{ /* translators: Title for a list of content sections linked below. */ }
-			<h3 className="wp-block-tabs__title">{ __( 'Contents' ) }</h3>
+			<h3 className="wp-block-tabs__title">
+				{ /* translators: Title for a list of content sections linked below. */ }
+				{ __( 'Contents' ) }
+			</h3>
+
 			<ul className="wp-block-tabs__list">
 				{ innerTabs.map( ( tab, index ) => {
 					const tabId = tab.href.replace( '#', '' ) + '--tab';
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index c34a7b3fc36f8..11be520bb0acd 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -3,7 +3,65 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-function initTabs( ref ) {}
+function getTabPanelToLabelIdMap( tabLabels ) {
+	if ( ! tabLabels ) {
+		return new Map();
+	}
+
+	return new Map(
+		[ ...tabLabels ].map( ( tabLabel ) => {
+			const tabPanelId = tabLabel.getAttribute( 'href' ).substring( 1 );
+			const tabLabelId = tabLabel.getAttribute( 'id' );
+			return [ tabPanelId, tabLabelId ];
+		} )
+	);
+}
+
+function initTabs( ref ) {
+	// Add class interactive to the block wrapper to indicate JavaScript has been loaded.
+	ref.classList.add( 'interactive' );
+
+	const tabList = ref.querySelector( '.wp-block-tabs__list' );
+	if ( tabList ) {
+		// Add role="tablist" to the <ul> element.
+		tabList.setAttribute( 'role', 'tablist' );
+
+		// Use the hidden <h3>Contents</h3> element as the label for the tab list, if found.
+		const tabListLabel = ref.querySelector( '.wp-block-tabs__title' );
+		if ( tabListLabel ) {
+			const tabListLabelId = tabListLabel.id || 'tablist-label';
+			tabListLabel.id = tabListLabelId;
+			tabList.setAttribute( 'aria-labelledby', tabListLabelId );
+		} else {
+			tabList.setAttribute( 'aria-label', 'Tabs' );
+		}
+	}
+
+	// Add role="presentation" to each <li> element, because the inner <a> elements are the actual tabs.
+	const tabItems = ref.querySelectorAll( '.wp-block-tabs__list-item' );
+	tabItems.forEach( ( item ) => {
+		item.setAttribute( 'role', 'presentation' );
+	} );
+
+	// Add role="tab" and aria-controls with the corresponding tab panel ID to each <a> element.
+	const tabLabels = ref.querySelectorAll( '.wp-block-tabs__tab-label' );
+	const tabPanelToLabelIdMap = getTabPanelToLabelIdMap( tabLabels );
+	tabLabels.forEach( ( label ) => {
+		label.setAttribute( 'role', 'tab' );
+		const tabPanelId = label.getAttribute( 'href' ).substring( 1 );
+		label.setAttribute( 'aria-controls', tabPanelId );
+	} );
+
+	// Add role="tabpanel" and aria-labelledby with the corresponding tab label ID to each tab panel.
+	const tabPanels = ref.querySelectorAll( '.wp-block-tab' );
+	tabPanels.forEach( ( panel ) => {
+		panel.setAttribute( 'role', 'tabpanel' );
+		const tabLabelledById = tabPanelToLabelIdMap.get( panel.id );
+		if ( tabLabelledById ) {
+			panel.setAttribute( 'aria-labelledby', tabLabelledById );
+		}
+	} );
+}
 
 store( 'core/tabs', {
 	actions: {

From e5bff1b26464688a3832e2ef7b94d3131a682f85 Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Fri, 2 Aug 2024 20:46:43 -0500
Subject: [PATCH 16/21] Adds accessibility features for tabs front-end

---
 packages/block-library/src/tab/index.php  |  14 ++-
 packages/block-library/src/tabs/index.php |  12 ++-
 packages/block-library/src/tabs/view.js   | 110 +++++++++++++++++++++-
 3 files changed, 131 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/tab/index.php b/packages/block-library/src/tab/index.php
index 8e38c020b4cb4..ff93b05a87ff4 100644
--- a/packages/block-library/src/tab/index.php
+++ b/packages/block-library/src/tab/index.php
@@ -15,7 +15,19 @@
  * @return string The block content.
  */
 function render_block_core_tab( $attributes, $content, $block ) {
-	return $content;
+	if ( ! $content ) {
+		return '';
+	}
+
+	// Modify markup to include interactivity API attributes.
+	$p = new WP_HTML_Tag_Processor( $content );
+	while ( $p->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
+		$p->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
+		$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexPanelAttribute' );
+		$p->set_attribute( 'data-tab-index', $attributes['tabIndex'] );
+	}
+
+	return $p->get_updated_html();
 }
 
 /**
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index 0f5389f0c6d80..246378bacba24 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -38,11 +38,12 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 	$p        = new WP_HTML_Tag_Processor( $content );
 	$title_id = wp_unique_id( 'tablist-label-' );
 
+	$tab_label_index = 0;
 	while ( $p->next_tag() ) {
 		if ( $p->has_class( 'wp-block-tabs' ) ) {
 			// Mark block as interactive to trigger tab styles.
 			$p->set_attribute( 'data-wp-interactive', 'core/tabs' );
-			$p->set_attribute( 'data-wp-context', '{ "activeTab": 0 }' );
+			$p->set_attribute( 'data-wp-context', '{ "activeTabIndex": 0 }' );
 			$p->set_attribute( 'data-wp-init', 'callbacks.init' );
 		}
 
@@ -50,6 +51,15 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 		if ( $p->has_class( 'wp-block-tabs__title' ) ) {
 			$p->set_attribute( 'id', $title_id );
 		}
+
+		if ( $p->has_class( 'wp-block-tabs__tab-label' ) ) {
+			$p->set_attribute( 'data-wp-bind--aria-selected', 'state.isActiveTab' );
+			$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexLabelAttribute' );
+			$p->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
+			$p->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
+			$p->set_attribute( 'data-tab-index', $tab_label_index );
+			++$tab_label_index;
+		}
 	}
 
 	return $p->get_updated_html();
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index 11be520bb0acd..c100a461b2154 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -3,6 +3,30 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
+// Helper function to check for focusable elements
+function isFocusable( element ) {
+	return element.tabIndex >= 0;
+}
+
+function getFirstFocusableChild( element ) {
+	const treeWalker = document.createTreeWalker(
+		element,
+		window.NodeFilter.SHOW_ELEMENT,
+		{
+			acceptNode: ( node ) =>
+				isFocusable( node )
+					? window.NodeFilter.FILTER_ACCEPT
+					: window.NodeFilter.FILTER_SKIP,
+		}
+	);
+
+	return treeWalker.nextNode();
+}
+
+function isNumeric( value ) {
+	return ! isNaN( parseFloat( value ) );
+}
+
 function getTabPanelToLabelIdMap( tabLabels ) {
 	if ( ! tabLabels ) {
 		return new Map();
@@ -63,11 +87,91 @@ function initTabs( ref ) {
 	} );
 }
 
-store( 'core/tabs', {
+const { state, actions } = store( 'core/tabs', {
+	state: {
+		get isActiveTab() {
+			const context = getContext();
+			const { attributes } = getElement();
+			const tabIndexValue = attributes?.[ 'data-tab-index' ];
+			const tabIndex = isNumeric( tabIndexValue )
+				? parseInt( tabIndexValue, 10 )
+				: 0;
+
+			return context.activeTabIndex === tabIndex;
+		},
+		get tabindexLabelAttribute() {
+			return state.isActiveTab ? false : '-1';
+		},
+		get tabindexPanelAttribute() {
+			const { attributes } = getElement();
+			const panel = attributes?.id
+				? document.getElementById( attributes.id )
+				: null;
+			const hasFocusable = panel
+				? !! getFirstFocusableChild( panel )
+				: false;
+			return state.isActiveTab && ! hasFocusable ? '0' : false;
+		},
+	},
 	actions: {
-		setActiveTab: ( index ) => {
+		handleTabKeyDown: ( event ) => {
+			const { key } = event;
+			const context = getContext();
+			const { ref } = getElement();
+			const container = ref?.closest( '.wp-block-tabs' );
+			const tabs = Array.from(
+				container.querySelectorAll( '.wp-block-tabs__tab-label' ) || []
+			);
+			const currentIndex = tabs.indexOf( event.target );
+
+			let nextIndex = currentIndex;
+
+			switch ( key ) {
+				case 'ArrowRight':
+					nextIndex = ( currentIndex + 1 ) % tabs.length;
+					actions.setActiveTab( nextIndex );
+					break;
+				case 'ArrowLeft':
+					nextIndex =
+						( currentIndex - 1 + tabs.length ) % tabs.length;
+					actions.setActiveTab( nextIndex );
+					break;
+				case 'ArrowDown':
+					event.preventDefault();
+					const panels = Array.from(
+						container?.querySelectorAll( '.wp-block-tab' ) || []
+					);
+					const currentPanel = panels[ context.activeTabIndex ];
+					const focusableChild =
+						getFirstFocusableChild( currentPanel );
+					if ( focusableChild ) {
+						focusableChild.focus();
+					} else {
+						currentPanel?.focus();
+					}
+					return;
+				default:
+					return;
+			}
+
+			tabs[ nextIndex ]?.focus();
+		},
+		handleTabClick: ( event ) => {
+			event.preventDefault();
+
+			const tabIndexValue =
+				event.target?.getAttribute( 'data-tab-index' );
+			const tabIndex = isNumeric( tabIndexValue )
+				? parseInt( tabIndexValue, 10 )
+				: null;
+
+			if ( tabIndex !== null ) {
+				actions.setActiveTab( tabIndex );
+			}
+		},
+		setActiveTab: ( tabIndex ) => {
 			const context = getContext();
-			context.activeTab = index;
+			context.activeTabIndex = tabIndex;
 		},
 	},
 	callbacks: {

From 58fe9186541312cccfaa8462865bed838f65e2ba Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Fri, 2 Aug 2024 21:10:31 -0500
Subject: [PATCH 17/21] Enables tab label text selection in editor

---
 packages/block-library/src/tabs/edit.js     |  9 +++++++--
 packages/block-library/src/tabs/editor.scss |  2 +-
 packages/block-library/src/tabs/view.js     | 16 +++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 34fd9955ac5b9..2454609631562 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -145,13 +145,18 @@ export default function Edit( { clientId, setAttributes } ) {
 							className="wp-block-tabs__list-item"
 							role="presentation"
 						>
-							<a
+							<a // eslint-disable-line jsx-a11y/anchor-is-valid -- remove href attribute in editor so inner text can be selected for editing
 								aria-controls={ tabPanelId }
 								aria-selected={ isActive }
 								className="wp-block-tabs__tab-label"
-								href={ '#' + tabPanelId }
 								id={ tabLabelId }
 								onClick={ () => setActiveTab( block.clientId ) }
+								onFocus={ () => setActiveTab( block.clientId ) }
+								onKeyDown={ ( event ) => {
+									if ( event.key === 'Enter' ) {
+										setActiveTab( block.clientId );
+									}
+								} }
 								role="tab"
 								tabIndex={ tabIndexAttr }
 							>
diff --git a/packages/block-library/src/tabs/editor.scss b/packages/block-library/src/tabs/editor.scss
index eb39135ff40b5..00d8a49170764 100644
--- a/packages/block-library/src/tabs/editor.scss
+++ b/packages/block-library/src/tabs/editor.scss
@@ -1,5 +1,5 @@
 .wp-block-tabs {
 	&__content > .block-list-appender {
-		top: -30px;
+		top: -38px;
 	}
 }
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index c100a461b2154..10abb99c4fa4a 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -116,11 +116,10 @@ const { state, actions } = store( 'core/tabs', {
 	actions: {
 		handleTabKeyDown: ( event ) => {
 			const { key } = event;
-			const context = getContext();
 			const { ref } = getElement();
 			const container = ref?.closest( '.wp-block-tabs' );
 			const tabs = Array.from(
-				container.querySelectorAll( '.wp-block-tabs__tab-label' ) || []
+				container?.querySelectorAll( '.wp-block-tabs__tab-label' ) || []
 			);
 			const currentIndex = tabs.indexOf( event.target );
 
@@ -130,14 +129,17 @@ const { state, actions } = store( 'core/tabs', {
 				case 'ArrowRight':
 					nextIndex = ( currentIndex + 1 ) % tabs.length;
 					actions.setActiveTab( nextIndex );
-					break;
+					tabs[ nextIndex ]?.focus();
+					return;
 				case 'ArrowLeft':
 					nextIndex =
 						( currentIndex - 1 + tabs.length ) % tabs.length;
 					actions.setActiveTab( nextIndex );
-					break;
+					tabs[ nextIndex ]?.focus();
+					return;
 				case 'ArrowDown':
 					event.preventDefault();
+					const context = getContext();
 					const panels = Array.from(
 						container?.querySelectorAll( '.wp-block-tab' ) || []
 					);
@@ -149,12 +151,8 @@ const { state, actions } = store( 'core/tabs', {
 					} else {
 						currentPanel?.focus();
 					}
-					return;
-				default:
-					return;
+					return; // eslint-disable-line no-useless-return -- explicit return for switch statement
 			}
-
-			tabs[ nextIndex ]?.focus();
 		},
 		handleTabClick: ( event ) => {
 			event.preventDefault();

From 28c682c226f891c68fdc6bb1cdb9c1daef25a7eb Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sun, 4 Aug 2024 16:43:43 -0500
Subject: [PATCH 18/21] Adds view.js null/undefined checks and small refactor
 to keyDown handler

---
 packages/block-library/src/tabs/view.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index 10abb99c4fa4a..6462e53e16df1 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -9,6 +9,10 @@ function isFocusable( element ) {
 }
 
 function getFirstFocusableChild( element ) {
+	if ( ! element ) {
+		return null;
+	}
+
 	const treeWalker = document.createTreeWalker(
 		element,
 		window.NodeFilter.SHOW_ELEMENT,
@@ -34,7 +38,7 @@ function getTabPanelToLabelIdMap( tabLabels ) {
 
 	return new Map(
 		[ ...tabLabels ].map( ( tabLabel ) => {
-			const tabPanelId = tabLabel.getAttribute( 'href' ).substring( 1 );
+			const tabPanelId = tabLabel.getAttribute( 'href' )?.substring( 1 );
 			const tabLabelId = tabLabel.getAttribute( 'id' );
 			return [ tabPanelId, tabLabelId ];
 		} )
@@ -127,18 +131,26 @@ const { state, actions } = store( 'core/tabs', {
 
 			switch ( key ) {
 				case 'ArrowRight':
+					event.stopPropagation();
+					event.preventDefault();
+
 					nextIndex = ( currentIndex + 1 ) % tabs.length;
 					actions.setActiveTab( nextIndex );
 					tabs[ nextIndex ]?.focus();
-					return;
+					break;
 				case 'ArrowLeft':
+					event.stopPropagation();
+					event.preventDefault();
+
 					nextIndex =
 						( currentIndex - 1 + tabs.length ) % tabs.length;
 					actions.setActiveTab( nextIndex );
 					tabs[ nextIndex ]?.focus();
-					return;
+					break;
 				case 'ArrowDown':
+					event.stopPropagation();
 					event.preventDefault();
+
 					const context = getContext();
 					const panels = Array.from(
 						container?.querySelectorAll( '.wp-block-tab' ) || []
@@ -146,12 +158,15 @@ const { state, actions } = store( 'core/tabs', {
 					const currentPanel = panels[ context.activeTabIndex ];
 					const focusableChild =
 						getFirstFocusableChild( currentPanel );
+
 					if ( focusableChild ) {
 						focusableChild.focus();
 					} else {
 						currentPanel?.focus();
 					}
-					return; // eslint-disable-line no-useless-return -- explicit return for switch statement
+					break;
+				default:
+					break;
 			}
 		},
 		handleTabClick: ( event ) => {

From 5f9133058f4cdbe321a368d2b0f852343601125d Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sun, 4 Aug 2024 22:00:37 -0500
Subject: [PATCH 19/21] Adds comments, simplifies, fixes linting

---
 packages/block-library/src/tab/index.php  |   3 +-
 packages/block-library/src/tabs/index.php |   2 +-
 packages/block-library/src/tabs/view.js   | 132 ++++++++++++----------
 3 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/packages/block-library/src/tab/index.php b/packages/block-library/src/tab/index.php
index ff93b05a87ff4..307e84640ccca 100644
--- a/packages/block-library/src/tab/index.php
+++ b/packages/block-library/src/tab/index.php
@@ -14,13 +14,14 @@
  *
  * @return string The block content.
  */
-function render_block_core_tab( $attributes, $content, $block ) {
+function render_block_core_tab( $attributes, $content ) {
 	if ( ! $content ) {
 		return '';
 	}
 
 	// Modify markup to include interactivity API attributes.
 	$p = new WP_HTML_Tag_Processor( $content );
+
 	while ( $p->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
 		$p->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
 		$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexPanelAttribute' );
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index 246378bacba24..af8ebd4d1e8bd 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -14,7 +14,7 @@
  *
  * @return string The block content.
  */
-function render_block_core_tabs( $attributes, $content, $block ) {
+function render_block_core_tabs( $attributes, $content ) {
 	if ( ! $content ) {
 		return '';
 	}
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index 6462e53e16df1..86b3733ea70d8 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -3,41 +3,29 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-// Helper function to check for focusable elements
-function isFocusable( element ) {
-	return element.tabIndex >= 0;
-}
-
-function getFirstFocusableChild( element ) {
-	if ( ! element ) {
-		return null;
-	}
-
-	const treeWalker = document.createTreeWalker(
-		element,
-		window.NodeFilter.SHOW_ELEMENT,
-		{
-			acceptNode: ( node ) =>
-				isFocusable( node )
-					? window.NodeFilter.FILTER_ACCEPT
-					: window.NodeFilter.FILTER_SKIP,
-		}
-	);
-
-	return treeWalker.nextNode();
-}
-
+/**
+ * Determines whether a value is numeric.
+ *
+ * @param {*} value A vlue to check.
+ * @return {boolean} Whether the value is numeric.
+ */
 function isNumeric( value ) {
 	return ! isNaN( parseFloat( value ) );
 }
 
+/**
+ * Generates a map of tab panel IDs to tab label IDs.
+ *
+ * @param {Element[]} tabLabels List of tab label elements.
+ * @return {Map} A map of tab panel IDs to tab label IDs.
+ */
 function getTabPanelToLabelIdMap( tabLabels ) {
 	if ( ! tabLabels ) {
 		return new Map();
 	}
 
 	return new Map(
-		[ ...tabLabels ].map( ( tabLabel ) => {
+		tabLabels.map( ( tabLabel ) => {
 			const tabPanelId = tabLabel.getAttribute( 'href' )?.substring( 1 );
 			const tabLabelId = tabLabel.getAttribute( 'id' );
 			return [ tabPanelId, tabLabelId ];
@@ -45,6 +33,11 @@ function getTabPanelToLabelIdMap( tabLabels ) {
 	);
 }
 
+/**
+ * Initializes the tabs block with the necessary ARIA attributes.
+ *
+ * @param {HTMLElement} ref The block wrapper element.
+ */
 function initTabs( ref ) {
 	// Add class interactive to the block wrapper to indicate JavaScript has been loaded.
 	ref.classList.add( 'interactive' );
@@ -66,22 +59,29 @@ function initTabs( ref ) {
 	}
 
 	// Add role="presentation" to each <li> element, because the inner <a> elements are the actual tabs.
-	const tabItems = ref.querySelectorAll( '.wp-block-tabs__list-item' );
+	const tabItems = Array.from(
+		ref.querySelectorAll( '.wp-block-tabs__list-item' )
+	);
 	tabItems.forEach( ( item ) => {
 		item.setAttribute( 'role', 'presentation' );
 	} );
 
 	// Add role="tab" and aria-controls with the corresponding tab panel ID to each <a> element.
-	const tabLabels = ref.querySelectorAll( '.wp-block-tabs__tab-label' );
+	const tabLabels = Array.from(
+		ref.querySelectorAll( '.wp-block-tabs__tab-label' )
+	);
 	const tabPanelToLabelIdMap = getTabPanelToLabelIdMap( tabLabels );
 	tabLabels.forEach( ( label ) => {
 		label.setAttribute( 'role', 'tab' );
-		const tabPanelId = label.getAttribute( 'href' ).substring( 1 );
-		label.setAttribute( 'aria-controls', tabPanelId );
+		const tabPanelId = label.getAttribute( 'href' )?.substring( 1 );
+
+		if ( tabPanelId ) {
+			label.setAttribute( 'aria-controls', tabPanelId );
+		}
 	} );
 
 	// Add role="tabpanel" and aria-labelledby with the corresponding tab label ID to each tab panel.
-	const tabPanels = ref.querySelectorAll( '.wp-block-tab' );
+	const tabPanels = Array.from( ref.querySelectorAll( '.wp-block-tab' ) );
 	tabPanels.forEach( ( panel ) => {
 		panel.setAttribute( 'role', 'tabpanel' );
 		const tabLabelledById = tabPanelToLabelIdMap.get( panel.id );
@@ -91,8 +91,14 @@ function initTabs( ref ) {
 	} );
 }
 
+// Interactivy store for the tabs block.
 const { state, actions } = store( 'core/tabs', {
 	state: {
+		/**
+		 * Whether the tab is the active tab.
+		 *
+		 * @type {boolean}
+		 */
 		get isActiveTab() {
 			const context = getContext();
 			const { attributes } = getElement();
@@ -103,30 +109,43 @@ const { state, actions } = store( 'core/tabs', {
 
 			return context.activeTabIndex === tabIndex;
 		},
+		/**
+		 * The value of the tabindex attribute for the tab label.
+		 *
+		 * @type {false|string}
+		 */
 		get tabindexLabelAttribute() {
 			return state.isActiveTab ? false : '-1';
 		},
+		/**
+		 * The value of the tabindex attribute for the tab panel.
+		 *
+		 * @type {false|string}
+		 */
 		get tabindexPanelAttribute() {
-			const { attributes } = getElement();
-			const panel = attributes?.id
-				? document.getElementById( attributes.id )
-				: null;
-			const hasFocusable = panel
-				? !! getFirstFocusableChild( panel )
-				: false;
-			return state.isActiveTab && ! hasFocusable ? '0' : false;
+			return state.isActiveTab ? '0' : false;
 		},
 	},
 	actions: {
+		/**
+		 * Handles the keydown event for the tab label.
+		 *
+		 * @param {KeyboardEvent} event The keydown event.
+		 */
 		handleTabKeyDown: ( event ) => {
-			const { key } = event;
+			const { key, target } = event;
+
+			if ( ! target ) {
+				return;
+			}
+
 			const { ref } = getElement();
 			const container = ref?.closest( '.wp-block-tabs' );
 			const tabs = Array.from(
 				container?.querySelectorAll( '.wp-block-tabs__tab-label' ) || []
 			);
-			const currentIndex = tabs.indexOf( event.target );
 
+			const currentIndex = tabs.indexOf( target );
 			let nextIndex = currentIndex;
 
 			switch ( key ) {
@@ -134,6 +153,7 @@ const { state, actions } = store( 'core/tabs', {
 					event.stopPropagation();
 					event.preventDefault();
 
+					// Loop back to the first tab if the last tab is reached.
 					nextIndex = ( currentIndex + 1 ) % tabs.length;
 					actions.setActiveTab( nextIndex );
 					tabs[ nextIndex ]?.focus();
@@ -142,33 +162,21 @@ const { state, actions } = store( 'core/tabs', {
 					event.stopPropagation();
 					event.preventDefault();
 
+					// Loop back to the last tab if the first tab is reached.
 					nextIndex =
 						( currentIndex - 1 + tabs.length ) % tabs.length;
 					actions.setActiveTab( nextIndex );
 					tabs[ nextIndex ]?.focus();
 					break;
-				case 'ArrowDown':
-					event.stopPropagation();
-					event.preventDefault();
-
-					const context = getContext();
-					const panels = Array.from(
-						container?.querySelectorAll( '.wp-block-tab' ) || []
-					);
-					const currentPanel = panels[ context.activeTabIndex ];
-					const focusableChild =
-						getFirstFocusableChild( currentPanel );
-
-					if ( focusableChild ) {
-						focusableChild.focus();
-					} else {
-						currentPanel?.focus();
-					}
-					break;
 				default:
 					break;
 			}
 		},
+		/**
+		 * Handles the click event for the tab label.
+		 *
+		 * @param {MouseEvent} event The click event.
+		 */
 		handleTabClick: ( event ) => {
 			event.preventDefault();
 
@@ -182,12 +190,20 @@ const { state, actions } = store( 'core/tabs', {
 				actions.setActiveTab( tabIndex );
 			}
 		},
+		/**
+		 * Sets the active tab index.
+		 *
+		 * @param {number} tabIndex The index of the active tab.
+		 */
 		setActiveTab: ( tabIndex ) => {
 			const context = getContext();
 			context.activeTabIndex = tabIndex;
 		},
 	},
 	callbacks: {
+		/**
+		 * Initializes the tabs block.
+		 */
 		init: () => {
 			const { ref } = getElement();
 			initTabs( ref );

From 2db172bff852f4bbff97d845befd0a625a9848aa Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Sun, 4 Aug 2024 22:50:17 -0500
Subject: [PATCH 20/21] Clarifies and corrects comments

---
 packages/block-library/src/tab/edit.js    | 10 +++++++++-
 packages/block-library/src/tab/save.js    |  1 -
 packages/block-library/src/tabs/edit.js   |  6 +++---
 packages/block-library/src/tabs/index.php |  1 -
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
index b9f923872a3f3..0d86e5e9ae801 100644
--- a/packages/block-library/src/tab/edit.js
+++ b/packages/block-library/src/tab/edit.js
@@ -11,6 +11,14 @@ import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { cleanForSlug } from '@wordpress/url';
 
+/**
+ * Generates a slug from a tab's text label.
+ *
+ * @param {string} label    Tab label RichText value.
+ * @param {number} tabIndex Tab index value.
+ *
+ * @return {string} The generated slug with HTML stripped out.
+ */
 function slugFromLabel( label, tabIndex ) {
 	// Get just the text content, filtering out any HTML tags from the RichText value.
 	const htmlDocument = new window.DOMParser().parseFromString(
@@ -27,7 +35,7 @@ function slugFromLabel( label, tabIndex ) {
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
 	const { anchor, isActive, label, slug, tabIndex } = attributes;
-	// Use a custom anchor, if possible. Otherwise fall back to the slug generated from the label.
+	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
 	const tabPanelId = anchor || slug;
 	const tabLabelId = tabPanelId + '--tab';
 	const hasChildBlocks = useSelect(
diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
index 3f2146a2ef128..d631a48eeb596 100644
--- a/packages/block-library/src/tab/save.js
+++ b/packages/block-library/src/tab/save.js
@@ -7,7 +7,6 @@ export default function save( { attributes } ) {
 	const { anchor, slug } = attributes;
 	const tabPanelId = anchor || slug;
 
-	// The first tab in the set is always active on initial load.
 	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
index 2454609631562..e30e7d6844eb8 100644
--- a/packages/block-library/src/tabs/edit.js
+++ b/packages/block-library/src/tabs/edit.js
@@ -74,7 +74,7 @@ export default function Edit( { clientId, setAttributes } ) {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps -- set first tab as active when the editor is loaded.
 
-	// Update active tab when selection or blocks change.
+	// Update active tab when selection or inner blocks change.
 	useEffect( () => {
 		const hasActiveTab =
 			innerTabBlocks &&
@@ -91,8 +91,8 @@ export default function Edit( { clientId, setAttributes } ) {
 
 	/**
 	 * Cache data needed for save functions:
-	 * - Labels for inner tabs to generate tab list
-	 * - tabIndex to save the first tab as active, independent of the editor view
+	 * - labels from inner tabs to generate tab list
+	 * - href values pointing to ids of inner tab blocks
 	 */
 	useEffect( () => {
 		__unstableMarkNextChangeAsNotPersistent();
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index af8ebd4d1e8bd..30878dd4a6a8e 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -41,7 +41,6 @@ function render_block_core_tabs( $attributes, $content ) {
 	$tab_label_index = 0;
 	while ( $p->next_tag() ) {
 		if ( $p->has_class( 'wp-block-tabs' ) ) {
-			// Mark block as interactive to trigger tab styles.
 			$p->set_attribute( 'data-wp-interactive', 'core/tabs' );
 			$p->set_attribute( 'data-wp-context', '{ "activeTabIndex": 0 }' );
 			$p->set_attribute( 'data-wp-init', 'callbacks.init' );

From cc304b55ad47d7b63985e39d965f420023c2f44d Mon Sep 17 00:00:00 2001
From: Grant Kinney <hi@grant.mk>
Date: Tue, 3 Sep 2024 17:07:57 -0500
Subject: [PATCH 21/21] Replace JS initTabs in favor of interativity directives
 and state getters

---
 packages/block-library/src/tab/index.php  |   8 ++
 packages/block-library/src/tabs/index.php |  66 +++++++++++--
 packages/block-library/src/tabs/view.js   | 108 +++++-----------------
 3 files changed, 86 insertions(+), 96 deletions(-)

diff --git a/packages/block-library/src/tab/index.php b/packages/block-library/src/tab/index.php
index 307e84640ccca..004216ae125ed 100644
--- a/packages/block-library/src/tab/index.php
+++ b/packages/block-library/src/tab/index.php
@@ -23,8 +23,16 @@ function render_block_core_tab( $attributes, $content ) {
 	$p = new WP_HTML_Tag_Processor( $content );
 
 	while ( $p->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
+		// Add role="tabpanel" to each tab panel.
+		$p->set_attribute( 'data-wp-bind--role', 'state.roleAttribute' );
+
+		// Hide all tab panels that are not currently selected.
 		$p->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
+
+		// Add tabindex="0" to the selected tab panel, so it can be focused.
 		$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexPanelAttribute' );
+
+		// Store the index of each tab panel for tracking the selected tab.
 		$p->set_attribute( 'data-tab-index', $attributes['tabIndex'] );
 	}
 
diff --git a/packages/block-library/src/tabs/index.php b/packages/block-library/src/tabs/index.php
index 30878dd4a6a8e..d61e2f04a662b 100644
--- a/packages/block-library/src/tabs/index.php
+++ b/packages/block-library/src/tabs/index.php
@@ -35,29 +35,77 @@ function render_block_core_tabs( $attributes, $content ) {
 	wp_enqueue_script_module( '@wordpress/block-library/tabs' );
 
 	// Modify markup to include interactivity API attributes.
-	$p        = new WP_HTML_Tag_Processor( $content );
-	$title_id = wp_unique_id( 'tablist-label-' );
+	$p = new WP_HTML_Tag_Processor( $content );
 
+	// Generate a dictionary of tab panel and tab label ids used to populate aria attributes.
+	$tab_panel_to_label_id = array();
+	while ( $p->next_tag( array( 'class_name' => 'wp-block-tabs__tab-label' ) ) ) {
+		$tab_label_href = $p->get_attribute( 'href' );
+		$tab_panel_id   = $tab_label_href ? substr( $tab_label_href, 1 ) : '';
+		$tab_label_id   = $p->get_attribute( 'id' );
+
+		$tab_panel_to_label_id[ $tab_panel_id ] = $tab_label_id;
+	}
+
+	// Reset the processor to the beginning of the content.
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	$title_id        = wp_unique_id( 'tablist-label-' );
 	$tab_label_index = 0;
 	while ( $p->next_tag() ) {
 		if ( $p->has_class( 'wp-block-tabs' ) ) {
+			// Add class interactive to the block wrapper to indicate JavaScript has been loaded.
+			$p->set_attribute( 'data-wp-class--interactive', 'state' );
+
+			// Set up interactivity API and context.
 			$p->set_attribute( 'data-wp-interactive', 'core/tabs' );
 			$p->set_attribute( 'data-wp-context', '{ "activeTabIndex": 0 }' );
-			$p->set_attribute( 'data-wp-init', 'callbacks.init' );
-		}
-
-		// Set a unique ID for the title, so it can be used by aria-labelledby.
-		if ( $p->has_class( 'wp-block-tabs__title' ) ) {
+		} elseif ( $p->has_class( 'wp-block-tabs__title' ) ) {
+			// Set a unique ID for the title, so it can be used by aria-labelledby.
 			$p->set_attribute( 'id', $title_id );
-		}
+		} elseif ( $p->has_class( 'wp-block-tabs__list' ) ) {
+			// Add role="tablist" to the <ul> element.
+			$p->set_attribute( 'data-wp-bind--role', 'state.roleAttribute' );
+
+			// Add aria-labelledby attribute with the title ID to the <ul> element.
+			$p->set_attribute( 'data-wp-bind--aria-labelledby', $title_id );
+		} elseif ( $p->has_class( 'wp-block-tabs__list-item' ) ) {
+			// Add role="presentation" to each <li> element, because the inner <a> elements are the actual tabs.
+			$p->set_attribute( 'data-wp-bind--role', 'state.roleAttribute' );
+		} elseif ( $p->has_class( 'wp-block-tabs__tab-label' ) ) {
+			$tab_label_href = $p->get_attribute( 'href' );
+			$tab_panel_id   = $tab_label_href ? substr( $tab_label_href, 1 ) : '';
+			if ( $tab_panel_id ) {
+				// Add aria-controls attribute with the corresponding tab panel ID to each tab label.
+				$p->set_attribute( 'data-wp-bind--aria-controls', $tab_panel_id );
+			}
 
-		if ( $p->has_class( 'wp-block-tabs__tab-label' ) ) {
+			// Add role="tab" to the <a> element that labels each tab panel.
+			$p->set_attribute( 'data-wp-bind--role', 'state.roleAttribute' );
+
+			// Add aria-selected attribute indicating if the tab is currently selected.
 			$p->set_attribute( 'data-wp-bind--aria-selected', 'state.isActiveTab' );
+
+			// Add tabindex="-1" to all non-selected tab labels, since they can be selected with arrow keys.
 			$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexLabelAttribute' );
+
+			// Add click and keydown event handlers to each tab label.
 			$p->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
 			$p->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
+
+			// Store the index of each tab label for tracking the selected tab.
 			$p->set_attribute( 'data-tab-index', $tab_label_index );
 			++$tab_label_index;
+		} elseif ( $p->has_class( 'wp-block-tab' ) ) {
+			$tab_panel_id = $p->get_attribute( 'id' );
+			$tab_label_id = $tab_panel_id && isset( $tab_panel_to_label_id[ $tab_panel_id ] )
+			? $tab_panel_to_label_id[ $tab_panel_id ]
+			: '';
+
+			if ( $tab_label_id ) {
+				// Add aria-labelledby attribute with the corresponding tab label ID to each tab panel.
+				$p->set_attribute( 'data-wp-bind--aria-labelledby', $tab_label_id );
+			}
 		}
 	}
 
diff --git a/packages/block-library/src/tabs/view.js b/packages/block-library/src/tabs/view.js
index 86b3733ea70d8..2bdb72e46eca8 100644
--- a/packages/block-library/src/tabs/view.js
+++ b/packages/block-library/src/tabs/view.js
@@ -13,87 +13,30 @@ function isNumeric( value ) {
 	return ! isNaN( parseFloat( value ) );
 }
 
-/**
- * Generates a map of tab panel IDs to tab label IDs.
- *
- * @param {Element[]} tabLabels List of tab label elements.
- * @return {Map} A map of tab panel IDs to tab label IDs.
- */
-function getTabPanelToLabelIdMap( tabLabels ) {
-	if ( ! tabLabels ) {
-		return new Map();
-	}
-
-	return new Map(
-		tabLabels.map( ( tabLabel ) => {
-			const tabPanelId = tabLabel.getAttribute( 'href' )?.substring( 1 );
-			const tabLabelId = tabLabel.getAttribute( 'id' );
-			return [ tabPanelId, tabLabelId ];
-		} )
-	);
-}
-
-/**
- * Initializes the tabs block with the necessary ARIA attributes.
- *
- * @param {HTMLElement} ref The block wrapper element.
- */
-function initTabs( ref ) {
-	// Add class interactive to the block wrapper to indicate JavaScript has been loaded.
-	ref.classList.add( 'interactive' );
-
-	const tabList = ref.querySelector( '.wp-block-tabs__list' );
-	if ( tabList ) {
-		// Add role="tablist" to the <ul> element.
-		tabList.setAttribute( 'role', 'tablist' );
-
-		// Use the hidden <h3>Contents</h3> element as the label for the tab list, if found.
-		const tabListLabel = ref.querySelector( '.wp-block-tabs__title' );
-		if ( tabListLabel ) {
-			const tabListLabelId = tabListLabel.id || 'tablist-label';
-			tabListLabel.id = tabListLabelId;
-			tabList.setAttribute( 'aria-labelledby', tabListLabelId );
-		} else {
-			tabList.setAttribute( 'aria-label', 'Tabs' );
-		}
-	}
-
-	// Add role="presentation" to each <li> element, because the inner <a> elements are the actual tabs.
-	const tabItems = Array.from(
-		ref.querySelectorAll( '.wp-block-tabs__list-item' )
-	);
-	tabItems.forEach( ( item ) => {
-		item.setAttribute( 'role', 'presentation' );
-	} );
-
-	// Add role="tab" and aria-controls with the corresponding tab panel ID to each <a> element.
-	const tabLabels = Array.from(
-		ref.querySelectorAll( '.wp-block-tabs__tab-label' )
-	);
-	const tabPanelToLabelIdMap = getTabPanelToLabelIdMap( tabLabels );
-	tabLabels.forEach( ( label ) => {
-		label.setAttribute( 'role', 'tab' );
-		const tabPanelId = label.getAttribute( 'href' )?.substring( 1 );
-
-		if ( tabPanelId ) {
-			label.setAttribute( 'aria-controls', tabPanelId );
-		}
-	} );
-
-	// Add role="tabpanel" and aria-labelledby with the corresponding tab label ID to each tab panel.
-	const tabPanels = Array.from( ref.querySelectorAll( '.wp-block-tab' ) );
-	tabPanels.forEach( ( panel ) => {
-		panel.setAttribute( 'role', 'tabpanel' );
-		const tabLabelledById = tabPanelToLabelIdMap.get( panel.id );
-		if ( tabLabelledById ) {
-			panel.setAttribute( 'aria-labelledby', tabLabelledById );
-		}
-	} );
-}
-
 // Interactivy store for the tabs block.
 const { state, actions } = store( 'core/tabs', {
 	state: {
+		get roleAttribute() {
+			const el = getElement();
+			const classList = el?.attributes?.class ?? '';
+			const classArray = classList.split( ' ' );
+
+			const classToRoleMap = new Map( [
+				[ 'wp-block-tabs__list', 'tablist' ],
+				[ 'wp-block-tabs__list-item', 'presentation' ],
+				[ 'wp-block-tabs__tab-label', 'tab' ],
+				[ 'wp-block-tab', 'tabpanel' ],
+			] );
+
+			for ( const className of classArray ) {
+				const role = classToRoleMap.get( className );
+				if ( role ) {
+					return role;
+				}
+			}
+
+			return false;
+		},
 		/**
 		 * Whether the tab is the active tab.
 		 *
@@ -200,13 +143,4 @@ const { state, actions } = store( 'core/tabs', {
 			context.activeTabIndex = tabIndex;
 		},
 	},
-	callbacks: {
-		/**
-		 * Initializes the tabs block.
-		 */
-		init: () => {
-			const { ref } = getElement();
-			initTabs( ref );
-		},
-	},
 } );