WIP Adds title attribute for tab blocks

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"

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

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

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