Scaffolds tabs and tab blocks

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 your most used tags. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tag-cloud))

lib/blocks.php

@@ -39,6 +39,8 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
+				'tab',
+				'tabs',
 				'text-columns',
 				'verse',
 				'video',

lib/experimental/editor-settings.php

@@ -37,12 +37,28 @@ function gutenberg_enable_experiments() {
 
 /**
  * Sets a global JS variable used to trigger the availability of form & input blocks.
+ *
+ * @deprecated 18.8.0 Use gutenberg_enable_block_experiments().
  */
 function gutenberg_enable_form_input_blocks() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 18.8.0', 'gutenberg_enable_block_experiments' );
+}
+
+/**
+ * Sets global JS variables used to enable various block experiments.
+ */
+function gutenberg_enable_block_experiments() {
 	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+
+	// Experimental form blocks.
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-form-blocks', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableFormBlocks = true', 'before' );
 	}
+
+	// General experimental blocks that are not in the default block library.
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-experiments', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockExperiments = true', 'before' );
+	}
 }
 
-add_action( 'admin_init', 'gutenberg_enable_form_input_blocks' );
+add_action( 'admin_init', 'gutenberg_enable_block_experiments' );

lib/experiments-page.php

@@ -79,6 +79,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-block-experiments',
+		__( 'Experimental blocks', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable experimental blocks.<p class="description">(Warning: these blocks may have significant changes during development that cause validation errors and display issues.)</p>', 'gutenberg' ),
+			'id'    => 'gutenberg-block-experiments',
+		)
+	);
+
 	add_settings_field(
 		'gutenberg-form-blocks',
 		__( 'Form and input blocks ', 'gutenberg' ),

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

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

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

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,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

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

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

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

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

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

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

phpunit/bootstrap.php

@@ -95,6 +95,7 @@ function fail_if_died( $message ) {
 		'gutenberg-widget-experiments' => '1',
 		'gutenberg-full-site-editing'  => 1,
 		'gutenberg-form-blocks'        => 1,
+		'gutenberg-block-experiments'  => 1,
 	),
 );