Adds tabs block behind block experiments flag

docs/reference-guides/core-blocks.md

@@ -887,6 +887,17 @@ Add white space between blocks and customize its height. ([Source](https://githu
 -	**Supports:** anchor, interactivity (clientNavigation), spacing (margin)
 -	**Attributes:** height, width
 
+## 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:** anchor, ~~html~~, ~~reusable~~
+-	**Attributes:** isActive, label, slug, tabIndex
+
 ## 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 +917,17 @@ 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), color (text, ~~background~~), interactivity, spacing (margin, padding), ~~html~~
+-	**Attributes:** innerTabs
+
 ## 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))

lib/blocks.php

@@ -116,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',

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

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

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

packages/block-library/src/tab/block.json

@@ -0,0 +1,34 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/tab",
+	"title": "Tab",
+	"category": "design",
+	"description": "Single tab within a tabs block.",
+	"textdomain": "default",
+	"__experimental": true,
+	"attributes": {
+		"isActive": {
+			"type": "boolean",
+			"default": false
+		},
+		"label": {
+			"type": "string",
+			"default": ""
+		},
+		"slug": {
+			"type": "string",
+			"default": ""
+		},
+		"tabIndex": {
+			"type": "number"
+		}
+	},
+	"parent": [ "core/tabs" ],
+	"supports": {
+		"anchor": true,
+		"html": false,
+		"reusable": false
+	},
+	"style": "wp-block-tab"
+}

packages/block-library/src/tab/edit.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+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(
+		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 set. Otherwise fall back to the slug generated from the label text.
+	const tabPanelId = anchor || slug;
+	const tabLabelId = tabPanelId + '--tab';
+	const hasChildBlocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockOrder( clientId ).length > 0,
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( label ) {
+			setAttributes( { slug: slugFromLabel( label, tabIndex ) } );
+		}
+	}, [ label, setAttributes, tabIndex ] );
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: hasChildBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+	return (
+		<div
+			{ ...innerBlocksProps }
+			aria-labelledby={ tabLabelId }
+			hidden={ ! isActive }
+			id={ tabPanelId }
+			role="tabpanel"
+		/>
+	);
+}

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

packages/block-library/src/tab/index.js

@@ -0,0 +1,20 @@
+/**
+ * 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';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/tab/index.php

@@ -0,0 +1,53 @@
+<?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 ) {
+	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' ) ) ) {
+		// 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'] );
+	}
+
+	return $p->get_updated_html();
+}
+
+/**
+ * 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' );

packages/block-library/src/tab/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/tab/save.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { anchor, slug } = attributes;
+	const tabPanelId = anchor || slug;
+
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <section { ...innerBlocksProps } id={ tabPanelId } />;
+}

packages/block-library/src/tab/style.scss

@@ -0,0 +1,7 @@
+.wp-block-tab {
+	padding: 1em 0;
+
+	> *:first-child {
+		margin-top: 0;
+	}
+}

packages/block-library/src/tabs/block.json

@@ -0,0 +1,45 @@
+{
+	"$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": {
+		"innerTabs": {
+			"type": "array",
+			"default": [],
+			"source": "query",
+			"selector": ".wp-block-tabs__tab-label",
+			"query": {
+				"href": {
+					"type": "string",
+					"source": "attribute",
+					"attribute": "href"
+				},
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			}
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"color": {
+			"background": false,
+			"text": true
+		},
+		"html": false,
+		"interactivity": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
+	},
+	"editorStyle": "wp-block-tabs-editor",
+	"style": "wp-block-tabs"
+}