Code cleanup and innerblocks config

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

@@ -11,8 +11,8 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Fragment, useMemo } from '@wordpress/element';
-import { PanelBody, TextControl } from '@wordpress/components';
+import { Fragment, useMemo, useRef } from '@wordpress/element';
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 import { cleanForSlug } from '@wordpress/url';
 
 /**
@@ -49,7 +49,8 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const { anchor, label, slug } = attributes;
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
 
 	const {
 		blockIndex,
@@ -58,43 +59,54 @@ export default function Edit( {
 		tabsHasSelectedBlock,
 		tabsClientId,
 		forceDisplay,
-		isFirstTab,
 		isTabsClientSelected,
 		previousTabClientId,
 		nextTabClientId,
+		isDefaultTab,
 	} = useSelect(
 		( select ) => {
-			const rootClientId =
-				select( blockEditorStore ).getBlockRootClientId( clientId );
-			const _isFirstTab =
-				select( blockEditorStore ).getBlockIndex( clientId ) === 0;
-			const _isTabsClientSelected =
-				select( blockEditorStore ).isBlockSelected( rootClientId );
-			// Check if any of the rootClientId blocks are selected...
-			const hasTabSelected = select(
-				blockEditorStore
-			).hasSelectedInnerBlock( rootClientId, true );
+			const {
+				getBlockRootClientId,
+				getBlockIndex,
+				getBlockOrder,
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+
+			// Get data from core/tabs.
+			const rootClientId = getBlockRootClientId( clientId );
+			const hasTabSelected = hasSelectedInnerBlock( rootClientId, true );
+			const rootAttributes = getBlockAttributes( rootClientId );
+			const { activeTabIndex } = rootAttributes;
+			const _isTabsClientSelected = isBlockSelected( rootClientId );
+
+			// Get data about this instance of core/tab.
+			const _blockIndex = getBlockIndex( clientId );
+			const _isDefaultTab = activeTabIndex === _blockIndex;
+			const _hasChildBlocks = getBlockOrder( clientId ).length > 0;
+			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+
+			// Get data about the previous and next tabs.
+			const _previousTabClientId = getPreviousBlockClientId( clientId );
+			const _nextTabClientId = getNextBlockClientId( clientId );
 
 			return {
-				blockIndex:
-					select( blockEditorStore ).getBlockIndex( clientId ),
-				hasChildBlocks:
-					select( blockEditorStore ).getBlockOrder( clientId )
-						.length > 0,
-				hasInnerBlocksSelected: select(
-					blockEditorStore
-				).hasSelectedInnerBlock( clientId, true ),
+				blockIndex: _blockIndex,
+				hasChildBlocks: _hasChildBlocks,
+				hasInnerBlocksSelected: _hasInnerBlocksSelected,
 				tabsClientId: rootClientId,
-				forceDisplay: _isFirstTab && _isTabsClientSelected,
+				forceDisplay: _isDefaultTab && _isTabsClientSelected,
 				tabsHasSelectedBlock: hasTabSelected,
-				isFirstTab: _isFirstTab,
 				isTabsClientSelected: _isTabsClientSelected,
-				previousTabClientId:
-					select( blockEditorStore ).getPreviousBlockClientId(
-						clientId
-					),
-				nextTabClientId:
-					select( blockEditorStore ).getNextBlockClientId( clientId ),
+				previousTabClientId: _previousTabClientId,
+				nextTabClientId: _nextTabClientId,
+				isDefaultTab: _isDefaultTab,
 			};
 		},
 		[ clientId ]
@@ -108,7 +120,7 @@ export default function Edit( {
 			return true;
 		}
 		if (
-			isFirstTab &&
+			isDefaultTab &&
 			! isTabsClientSelected &&
 			! isSelected &&
 			! tabsHasSelectedBlock
@@ -120,7 +132,7 @@ export default function Edit( {
 		isSelected,
 		hasInnerBlocksSelected,
 		forceDisplay,
-		isFirstTab,
+		isDefaultTab,
 		isTabsClientSelected,
 		tabsHasSelectedBlock,
 	] );
@@ -133,11 +145,20 @@ export default function Edit( {
 		hidden: ! isSelectedTab,
 	} );
 
+	const innerBlocksRef = useRef( null );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			'aria-labelledby': tabLabelId,
 			id: tabPanelId,
 			role: 'tabpanel',
+			ref: innerBlocksRef,
+			template: [
+				[
+					'core/paragraph',
+				],
+			],
+			tabIndex: 0,
 		},
 		{
 			renderAppender: hasChildBlocks
@@ -159,6 +180,19 @@ export default function Edit( {
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 					/>
+					<ToggleControl
+						label="Is Default"
+						checked={ isDefaultTab }
+						onChange={ ( value ) => {
+							updateBlockAttributes( tabsClientId, {
+								activeTabIndex: value ? blockIndex : 0,
+							} );
+						} }
+						help={ __(
+							'If true, this tab will be selected when the page loads.'
+						) }
+						__nextHasNoMarginBottom
+					/>
 				</PanelBody>
 			</InspectorControls>
 
@@ -170,21 +204,6 @@ export default function Edit( {
 							aria-selected={ isSelectedTab }
 							className="tabs__tab-label"
 							id={ tabLabelId }
-							onKeyDown={ ( event ) => {
-								// Playing around with keyboard navigation. Will settle on the best approach next.
-								switch ( event.key ) {
-									case 'ArrowLeft':
-									case 'ArrowUp':
-										event.preventDefault();
-										selectBlock( previousTabClientId );
-										break;
-									case 'ArrowRight':
-									case 'ArrowDown':
-										event.preventDefault();
-										selectBlock( nextTabClientId );
-										break;
-								}
-							} }
 							role="tab"
 							tabIndex="0"
 						>

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

@@ -9,7 +9,6 @@ import {
 	InnerBlocks,
 } from '@wordpress/block-editor';
 import { Fragment } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,8 +18,8 @@ import useColorSupports from './use-color-supports';
 import { TabFill } from '../tab/slotfill';
 
 const TABS_TEMPLATE = [
-	[ 'core/tab', { label: 'Tab 1' } ],
-	[ 'core/tab', { label: 'Tab 2' } ],
+	[ 'core/tab', { label: 'Tab 1', slug: 'tab-1' }, [ [ 'core/paragraph' ] ] ],
+	[ 'core/tab', { label: 'Tab 2', slug: 'tab-2' }, [ [ 'core/paragraph' ] ] ],
 ];
 
 function Edit( {
@@ -90,17 +89,10 @@ function Edit( {
 			clientId,
 			orientation,
 			template: TABS_TEMPLATE,
+			renderAppender: false, // We handle this element ourselves.
 		}
 	);
 
-	const { insertBlock } = useDispatch( blockEditorStore );
-
-	const appendTabItem = () => {
-		insertBlock( 'core/tab', {
-			label: 'New Tab',
-		} );
-	};
-
 	return (
 		<Fragment>
 			<Controls
@@ -126,10 +118,7 @@ function Edit( {
 				{ innerBlockProps.children }
 				<TabFill tabsClientId={ clientId }>
 					<li className="tab-item wp-block-tabs__tab-item tab-item__inserter">
-						<InnerBlocks.ButtonBlockAppender
-							icon="plus"
-							onClick={ appendTabItem }
-						/>
+						<InnerBlocks.ButtonBlockAppender />
 					</li>
 				</TabFill>
 			</div>

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

@@ -53,7 +53,7 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 
 	$styles = block_core_tabs_generate_color_variables( $attributes );
 
-	$url_encoded_active_tab_index = get_query_var( 'activeTabIndex', 0 );
+	$url_encoded_active_tab_index = get_query_var( 'activeTabIndex', false );
 	// Validate base64 string and safely decode
 	$decoded_tab_index = '';
 	if (is_string($url_encoded_active_tab_index) && !empty($url_encoded_active_tab_index)) {
@@ -62,7 +62,7 @@ function render_block_core_tabs( $attributes, $content, $block ) {
 		$decoded_tab_index = ($decoded_tab_index !== false) ? $decoded_tab_index : '';
 	}
 	// Only try to match if we have a valid decoded string
-	$active_tab_index = 0;
+	$active_tab_index = $attributes['activeTabIndex'];
 	if (!empty($decoded_tab_index)) {
 		preg_match('/__(\d+)$/', $decoded_tab_index, $matches);
 		$active_tab_index = isset($matches[1]) ? (int) $matches[1] : 0;
@@ -109,6 +109,13 @@ function ( $tab ) {
 	while ( $p->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
 		$p->set_attribute( 'role', 'tabpanel' );
 		$p->set_attribute( 'data-tab-index', $tab_index );
+		$p->set_attribute( 'data-wp-interactive', 'core/tabs' );
+		$p->set_attribute( 'data-wp-context', wp_json_encode(
+			array(
+				'isActiveTab' => $tab_index === $active_tab_index,
+				'tabIndex' => $tab_index,
+			)
+		) );
 		$p->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
 		$p->set_attribute( 'data-wp-bind--tabindex', 'state.tabindexPanelAttribute' );
 		$tab_index++;

packages/block-library/src/tabs/util.php

@@ -11,7 +11,7 @@
  * @param int    $index The index of the tab.
  * @return WP_Block_Parser_Block The tab block
  */
-function generate_tab( $label, $content, $index = 0 ) {
+function generate_tab( $label, $content ) {
 	$parsed_content   = is_array( $content ) ? $content : parse_blocks( $content );
 	$inner_html_start = wp_sprintf(
 		'<section id="%s" class="wp-block-prc-block-tab">',
@@ -20,12 +20,11 @@
 	$inner_html_end   = '</section>';
 	$inner_html       = $inner_html_start . $inner_html_end;
 	$nulls            = count( $parsed_content );
 	$tab_block = new WP_Block_Parser_Block(
 		'core/tab',
 		array(
 			'label'    => $label,
 			'slug'     => sanitize_title( $label ),
-			'tabIndex' => $index,
 		),
 		$parsed_content,
 		$inner_html,
@@ -44,19 +43,18 @@
  * @param array $tabs An array of tabs to create.
  * @return array An array of blocks representing the tabs
  */
 function create_tabs( $tabs = array(), $attributes = array() ) {
 	$inner_html    = '';
 	$inner_content = array();
 	$inner_blocks  = array();
 	$tab_index     = 0;
 
 	foreach ( $tabs as $tab ) {
-		$new_tab = generate_tab( $tab['label'], $tab['content'], $tab_index );
+		$new_tab = generate_tab( $tab['label'], $tab['content'] );
 		$inner_html     .= $new_tab->innerHTML; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
 		$new_tab         = (array) $new_tab;
 		$inner_blocks[]  = $new_tab;
 		$inner_content[] = null;
-		++$tab_index;
 	}
 
 	$tabs = new WP_Block_Parser_Block(