WIP Show only active tab

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"
 }

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>
 	);
 }

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>

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"
 }

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>
 	);
 }