Site Builder

Editing: tabs.php

writable 0666

<?php
/**
 * Tabs Block
 *
 * @package WordPress
 */

/**
 * Extract tabs list from tab-panel innerblocks.
 *
 * @since 7.1.0
 *
 * @param array  $innerblocks Parsed inner blocks of tabs block.
 * @param string $tabs_id     Unique ID for the tabs instance, used to generate tab IDs.
 *
 * @return array List of tab IDs.
 */
function block_core_tabs_generate_tabs_list( array $innerblocks = array(), string $tabs_id = '' ): array {
	$tabs_list = array();

// Find tab-panel block
	foreach ( $innerblocks as $inner_block ) {
		if ( 'core/tab-panels' === ( $inner_block['blockName'] ?? '' ) ) {
			$tab_index = 0;
			foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
				if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
					$attrs = $tab_block['attrs'] ?? array();

$tab_id = ! empty( $attrs['anchor'] )
						? $attrs['anchor']
						: ( ! empty( $tabs_id )
							? $tabs_id . '-tab-' . $tab_index
							: 'tab-' . $tab_index );

$tabs_list[] = esc_attr( $tab_id );
					++$tab_index;
				}
			}
			break;
		}
	}

return $tabs_list;
}

/**
 * Filter to provide tabs list context to core/tabs and core/tab-list blocks.
 * It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
 * In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
 *
 * @since 7.1.0
 *
 * @param array $context      Default block context.
 * @param array $parsed_block The block being rendered.
 *
 * @return array Modified context.
 */
function block_core_tabs_provide_context( array $context, array $parsed_block ): array {
	if ( 'core/tabs' === $parsed_block['blockName'] ) {
		// Generate a unique ID for the tabs instance first, so it can be used
		// to derive stable tab IDs.
		$tabs_id                   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' );
		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
		$context['core/tabs-list'] = $tabs_list;
		$context['core/tabs-id']   = $tabs_id;
	}

return $context;
}
add_filter( 'render_block_context', 'block_core_tabs_provide_context', 10, 2 );

/**
 * Render callback for core/tabs.
 *
 * @since 7.1.0
 *
 * @param array     $attributes Block attributes.
 * @param string    $content    Block content.
 * @param \WP_Block $block      WP_Block instance.
 *
 * @return string Updated HTML.
 */
function block_core_tabs_render_block_callback( array $attributes, string $content, \WP_Block $block ): string {
	$active_tab_index = $attributes['activeTabIndex'] ?? 0;
	$tabs_list        = $block->context['core/tabs-list'] ?? array();
	$tabs_id          = $block->context['core/tabs-id'] ?? null;

if ( empty( $tabs_id ) ) {
		// If malformed tabs, return early to avoid errors.
		return '';
	}

$tag_processor = new WP_HTML_Tag_Processor( $content );

$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );

$tag_processor->set_attribute(
		'data-wp-context',
		wp_json_encode(
			array(
				'tabsId'         => $tabs_id,
				'activeTabIndex' => $active_tab_index,
			)
		)
	);
	$tag_processor->set_attribute( 'data-wp-init', 'callbacks.onTabsInit' );
	$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );

$output = $tag_processor->get_updated_html();

/**
	 * Builds a client side state for just this tabs instance, so each
	 * core/tabs block manages its own state, like context.
	 */
	wp_interactivity_state(
		'core/tabs',
		array(
			$tabs_id => $tabs_list,
		)
	);

return $output;
}

/**
 * Registers the `core/tabs` block on the server.
 *
 * @since 7.1.0
 */
function register_block_core_tabs() {
	register_block_type_from_metadata(
		__DIR__ . '/tabs',
		array(
			'render_callback' => 'block_core_tabs_render_block_callback',
		)
	);
}
add_action( 'init', 'register_block_core_tabs' );

Site Builder

Editing: tabs.php

Site Builder