New block/tabs

lib/blocks.php

@@ -117,6 +117,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/package.json

@@ -32,7 +32,8 @@
 		"./image/view": "./build-module/image/view.js",
 		"./navigation/view": "./build-module/navigation/view.js",
 		"./query/view": "./build-module/query/view.js",
-		"./search/view": "./build-module/search/view.js"
+		"./search/view": "./build-module/search/view.js",
+		"./tabs/view": "./build-module/tabs/view.js"
 	},
 	"sideEffects": [
 		"build-style/**",

packages/block-library/src/editor.scss

@@ -45,6 +45,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

@@ -115,6 +115,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';
@@ -177,6 +179,8 @@ const getAllBlocks = () => {
 		socialLinks,
 		spacer,
 		table,
+		tab,
+		tabs,
 		tagCloud,
 		textColumns,
 		verse,

packages/block-library/src/style.scss

@@ -62,6 +62,8 @@
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
+@import "./tabs/style.scss";
+@import "./tab/style.scss";
 @import "./table-of-contents/style.scss";
 @import "./term-description/style.scss";
 @import "./text-columns/style.scss";

packages/block-library/src/tab/README.md

@@ -0,0 +1,16 @@
+# Tabs
+
+Contributors:      Seth Rubenstein,Pew Research Center, creativecoder
+Tags:              block
+Tested up to:      6.8
+Stable tag:        1.0.0
+License:           GPL-2.0-or-later
+License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+
+## Description
+
+This is an exploration at a [`core/` level block](https://github.com/WordPress/gutenberg/pull/63689/) that allows for the creation of tabbed content. Bootstrapped from work that @creativecoder was close to finishing but had to abandon due to other commitments.
+https://github.com/WordPress/gutenberg/blob/cc304b55ad47d7b63985e39d965f420023c2f44d/packages/block-library/src/tabs/edit.js
+
+## Instructions
+

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockVariation,
+	registerBlockBindingsSource,
+} from '@wordpress/blocks';
+
+export default function registerTabLabelBinding() {
+	const allowedAttributes = [ 'content' ];
+	registerBlockBindingsSource( {
+		name: 'tab/label',
+		usesContext: [ 'tab/label' ],
+		getValues( { bindings } ) {
+			const values = {};
+			for ( const [ attributeName, source ] of Object.entries(
+				bindings
+			) ) {
+				if ( allowedAttributes.includes( source.args.key ) ) {
+					values[ attributeName ] = 'Tab Title';
+				}
+			}
+			return values;
+		},
+	} );
+	registerBlockVariation( 'core/paragraph', {
+		name: 'core-tab-label',
+		title: 'Tab: Label',
+		category: 'design',
+		attributes: {
+			content: 'Tab Label',
+			metadata: {
+				bindings: {
+					content: {
+						source: 'core/tab',
+						args: {
+							contextKey: 'tab/label',
+						},
+					},
+				},
+			},
+		},
+	} );
+	registerBlockVariation( 'core/heading', {
+		name: 'core-tab-label',
+		title: 'Tab: Label',
+		category: 'design',
+		attributes: {
+			content: 'Tab Label',
+			level: 3,
+			metadata: {
+				bindings: {
+					content: {
+						source: 'core/tab',
+						args: {
+							contextKey: 'tab/label',
+						},
+					},
+				},
+			},
+		},
+	} );
+};

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

@@ -0,0 +1,51 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/tab",
+	"title": "Tab",
+	"version": "1.0.0",
+	"category": "design",
+	"attributes": {
+		"label": {
+			"type": "string",
+			"default": ""
+		},
+		"slug": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "core/tabs" ],
+	"supports": {
+		"anchor": true,
+		"html": false,
+		"reusable": false,
+		"color": {
+			"background": true,
+			"heading": true,
+			"text": true
+		},
+		"spacing": {
+			"padding": true,
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"__experimentalFontFamily": true
+			}
+		}
+	},
+	"providesContext": {
+		"tab/label": "label",
+		"tab/slug": "slug"
+	},
+	"textdomain": "tab",
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}