gutenberg / build / scripts / block-library / tabs.php

tabs.php in Gutenberg 22.5.1, at build/scripts/block-library/tabs.php

164 lines 5.0 KB

Raw Download Zip

1	<?php
2	/**
3	* Tabs Block
4	*
5	* @package WordPress
6	*/
7
8	/**
9	* Extract tabs list from tab-panels innerblocks.
10	*
11	* @param array $innerblocks Parsed inner blocks of tabs block.
12	*
13	* @return array List of tabs with id, label, index.
14	*/
15	function gutenberg_block_core_tabs_generate_tabs_list( array $innerblocks = array() ): array {
16	$tabs_list = array();
17
18	// Find tab-panels block
19	foreach ( $innerblocks as $inner_block ) {
20	if ( 'core/tab-panels' === ( $inner_block['blockName'] ?? '' ) ) {
21	$tab_index = 0;
22	foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
23	if ( 'core/tab' === ( $tab_block['blockName'] ?? '' ) ) {
24	$attrs = $tab_block['attrs'] ?? array();
25	$tab_label = $attrs['label'] ?? '';
26
27	// Try to get the ID from the rendered content
28	$tab_id = $attrs['anchor'] ?? '';
29	if ( empty( $tab_id ) && ! empty( $tab_block['innerHTML'] ) ) {
30	$tag_processor = new WP_HTML_Tag_Processor( $tab_block['innerHTML'] );
31	if ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
32	$tab_id = $tag_processor->get_attribute( 'id' ) ?? '';
33	}
34	}
35	if ( empty( $tab_id ) ) {
36	$tab_id = 'tab-' . $tab_index;
37	}
38
39	$tabs_list[] = array(
40	'id' => $tab_id,
41	'label' => esc_html( (string) $tab_label ),
42	'index' => $tab_index,
43	);
44	++$tab_index;
45	}
46	}
47	break;
48	}
49	}
50
51	return $tabs_list;
52	}
53
54	/**
55	* Filter to provide tabs list context to core/tabs and core/tabs-menu blocks.
56	* It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
57	* In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
58	*
59	* @param array $context Default block context.
60	* @param array $parsed_block The block being rendered.
61	*
62	* @return array Modified context.
63	*/
64	function gutenberg_block_core_tabs_provide_context( array $context, array $parsed_block ): array {
65	if ( 'core/tabs' === $parsed_block['blockName'] ) {
66	$tabs_list = gutenberg_block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array() );
67	$context['core/tabs-list'] = $tabs_list;
68	$context['core/tabs-id'] = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' ); // Generate a unique ID for each tabs instance. Used for 3rd party extensibility to identify the tabs instance.
69	}
70
71	return $context;
72	}
73	add_filter( 'render_block_context', 'gutenberg_block_core_tabs_provide_context', 10, 2 );
74
75	/**
76	* Render callback for core/tabs.
77	*
78	* @param array $attributes Block attributes.
79	* @param string $content Block content.
80	* @param \WP_Block $block WP_Block instance.
81	*
82	* @return string Updated HTML.
83	*/
84	function gutenberg_block_core_tabs_render_block_callback( array $attributes, string $content, \WP_Block $block ): string {
85	$active_tab_index = $attributes['activeTabIndex'] ?? 0;
86	$tabs_list = $block->context['core/tabs-list'] ?? array();
87	$tabs_id = $block->context['core/tabs-id'] ?? null;
88
89	if ( empty( $tabs_id ) ) {
90	// If malformed tabs, return early to avoid errors.
91	return '';
92	}
93
94	$title = $attributes['metadata']['name'] ?? '';
95	if ( empty( $title ) ) {
96	$title = 'Tab Contents';
97	}
98	$title = wp_sprintf( '<h3 class="wp-block-tabs__title">%s</h3>', esc_html( $title ) );
99
100	$is_vertical = false;
101
102	$tag_processor = new WP_HTML_Tag_Processor( $content );
103
104	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
105	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
106
107	// Inspect inside the tabs-menu to see if its vertical or not.
108	$tag_processor->set_bookmark( 'core/tabs_wrapper' );
109	while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs-menu' ) ) ) {
110	if ( $tag_processor->has_class( 'is-vertical' ) ) {
111	$is_vertical = true;
112	break;
113	}
114	}
115	$tag_processor->seek( 'core/tabs_wrapper' );
116
117	$tag_processor->set_attribute(
118	'data-wp-context',
119	wp_json_encode(
120	array(
121	'tabsId' => $tabs_id,
122	'activeTabIndex' => $active_tab_index,
123	'isVertical' => $is_vertical,
124	)
125	)
126	);
127	$tag_processor->set_attribute( 'data-wp-init', 'callbacks.onTabsInit' );
128	$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
129
130	$output = $tag_processor->get_updated_html();
131
132	// Insert the title after the first opening tag.
133	$output = preg_replace( '/^(<[^>]+>)/', '$1' . $title, $output );
134
135	/**
136	* Builds a client side state for just this tabs instance.
137	* This allows 3rd party extensibility of tabs while retaining
138	* client side state management per core/tabs instance, like context.
139	*/
140	wp_interactivity_state(
141	'core/tabs/private',
142	array(
143	$tabs_id => $tabs_list,
144	)
145	);
146
147	return $output;
148	}
149
150	/**
151	* Registers the `core/tabs` block on the server.
152	*
153	* @since 6.8.0
154	*/
155	function gutenberg_register_block_core_tabs() {
156	register_block_type_from_metadata(
157	__DIR__ . '/tabs',
158	array(
159	'render_callback' => 'gutenberg_block_core_tabs_render_block_callback',
160	)
161	);
162	}
163	add_action( 'init', 'gutenberg_register_block_core_tabs', 20 );
164