Add tabs example

07-tabs-esnext/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-polyfill'), 'version' => 'd8112f16e58347572adfd8189bbe5c45');

07-tabs-esnext/editor.css

@@ -0,0 +1,17 @@
+.wp-block-gutenberg-examples-example-07-tabs-esnext__tabs {
+    display: flex;
+    align-items: center;
+}
+
+.wp-block-gutenberg-examples-example-07-tabs-esnext__tab {
+    border: 1px solid black;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    padding: 0 10px;
+    opacity: .5;
+}
+
+.wp-block-gutenberg-examples-example-07-tabs-esnext__tab--active {
+    border-bottom: 0;
+    opacity: 1;
+}

07-tabs-esnext/frontend.js

@@ -0,0 +1,39 @@
+( function( $ ) {
+	function setActiveTab( $el ) {
+		const tabId = $el.attr( 'data-tab-id' );
+		$el.siblings().removeClass(
+			'wp-block-gutenberg-examples-example-07-tabs-esnext__tab--active'
+		);
+		$el.addClass(
+			'wp-block-gutenberg-examples-example-07-tabs-esnext__tab--active'
+		);
+		$el.parent()
+			.siblings( '.wp-block-gutenberg-examples-example-07-tab-esnext' )
+			.each( function() {
+				const $tab = $( this );
+				if ( $tab.attr( 'data-tab-id' ) === tabId ) {
+					$tab.css( 'display', 'block' );
+				} else {
+					$tab.css( 'display', 'none' );
+				}
+			} );
+	}
+
+	$( '.wp-block-gutenberg-examples-example-07-tabs-esnext__tab' ).click(
+		function() {
+			const $el = $( this );
+			setActiveTab( $el );
+		}
+	);
+
+	$( '.wp-block-gutenberg-examples-example-07-tabs-esnext__tabs' ).each(
+		function() {
+			const $firstTab = $( this )
+				.children()
+				.first();
+			if ( $firstTab ) {
+				setActiveTab( $firstTab );
+			}
+		}
+	);
+} )( jQuery ); // eslint-disable-line no-undef

07-tabs-esnext/index.php

@@ -0,0 +1,80 @@
+<?php
+
+/**
+ * Plugin Name: Gutenberg Examples Tabs ESNext
+ * Plugin URI: https://github.com/WordPress/gutenberg-examples
+ * Description: This is a plugin demonstrating how to create tabs using the Gutenberg editor.
+ * Version: 1.0.0
+ * Author: the Gutenberg Team
+ *
+ * @package gutenberg-examples
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+function gutenberg_examples_07_esnext_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	// automatically load dependencies and version
+	$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
+
+	wp_register_script(
+		'gutenberg-examples-07-esnext-editor',
+		plugins_url( 'build/index.js', __FILE__ ),
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
+	);
+
+	wp_register_style(
+		'gutenberg-examples-07-esnext-editor',
+		plugins_url( 'editor.css', __FILE__ ),
+		array( 'wp-edit-blocks' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
+	);
+
+	wp_register_script(
+		'gutenberg-examples-07-esnext',
+		plugins_url( 'frontend.js', __FILE__ ),
+		array('jquery'),
+		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ),
+		true
+	);
+
+	wp_register_style(
+		'gutenberg-examples-07-esnext',
+		plugins_url( 'style.css', __FILE__ ),
+		array( ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
+	);
+
+	register_block_type(
+		'gutenberg-examples/example-07-tabs-esnext',
+		[
+			'editor_script' => 'gutenberg-examples-07-esnext-editor',
+			'editor_style' => 'gutenberg-examples-07-esnext-editor',
+			'script' => 'gutenberg-examples-07-esnext',
+			'style' => 'gutenberg-examples-07-esnext',
+		]
+	);
+
+	register_block_type(
+		'gutenberg-examples/example-07-tab-esnext',
+		[
+			'editor_script' => 'gutenberg-examples-07-esnext-editor',
+			'editor_style' => 'gutenberg-examples-07-esnext-editor',
+			'script' => 'gutenberg-examples-07-esnext',
+			'style' => 'gutenberg-examples-07-esnext',
+		]
+	);
+
+}
+add_action( 'init', 'gutenberg_examples_07_esnext_register_block' );