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

160 lines 4.6 KB Raw Download Zip

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