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

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

141 lines 4.1 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.1.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 tab IDs.
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_number = 1;
25	foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
26	if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
27	$attrs = $tab_block['attrs'] ?? array();
28
29	$tab_id = ! empty( $attrs['anchor'] )
30	? $attrs['anchor']
31	: ( ! empty( $tabs_id )
32	? $tabs_id . '-tab-' . $tab_number
33	: 'tab-' . $tab_number );
34
35	$tabs_list[] = esc_attr( $tab_id );
36	++$tab_number;
37	}
38	}
39	break;
40	}
41	}
42
43	return $tabs_list;
44	}
45
46	/**
47	* Filter to provide tabs list context to core/tabs and core/tab-list blocks.
48	* It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
49	* In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
50	*
51	* @since 7.1.0
52	*
53	* @param array $context Default block context.
54	* @param array $parsed_block The block being rendered.
55	*
56	* @return array Modified context.
57	*/
58	function gutenberg_block_core_tabs_provide_context( array $context, array $parsed_block ): array {
59	if ( 'core/tabs' === $parsed_block['blockName'] ) {
60	// Generate a unique ID for the tabs instance first, so it can be used
61	// to derive stable tab IDs.
62	$tabs_id = $parsed_block['attrs']['anchor'] ?? wp_unique_prefixed_id( 'tabs_' );
63	$tabs_list = gutenberg_block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
64	$context['core/tabs-list'] = $tabs_list;
65	$context['core/tabs-id'] = $tabs_id;
66	}
67
68	return $context;
69	}
70	add_filter( 'render_block_context', 'gutenberg_block_core_tabs_provide_context', 10, 2 );
71
72	/**
73	* Render callback for core/tabs.
74	*
75	* @since 7.1.0
76	*
77	* @param array $attributes Block attributes.
78	* @param string $content Block content.
79	* @param \WP_Block $block WP_Block instance.
80	*
81	* @return string Updated HTML.
82	*/
83	function gutenberg_block_core_tabs_render_block_callback( array $attributes, string $content, \WP_Block $block ): string {
84	$active_tab_index = $attributes['activeTabIndex'] ?? 0;
85	$tabs_list = $block->context['core/tabs-list'] ?? array();
86	$tabs_id = $block->context['core/tabs-id'] ?? null;
87
88	if ( empty( $tabs_id ) ) {
89	// If malformed tabs, return early to avoid errors.
90	return '';
91	}
92
93	$tag_processor = new WP_HTML_Tag_Processor( $content );
94
95	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
96	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );
97
98	$tag_processor->set_attribute(
99	'data-wp-context',
100	wp_json_encode(
101	array(
102	'tabsId' => $tabs_id,
103	'activeTabIndex' => $active_tab_index,
104	)
105	)
106	);
107	$tag_processor->set_attribute( 'data-wp-init', 'callbacks.activateTabByHash' );
108	$tag_processor->set_attribute( 'data-wp-on-window--hashchange', 'callbacks.activateTabByHash' );
109	$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
110
111	$output = $tag_processor->get_updated_html();
112
113	/**
114	* Builds a client side state for just this tabs instance, so each
115	* core/tabs block manages its own state, like context.
116	*/
117	wp_interactivity_state(
118	'core/tabs',
119	array(
120	$tabs_id => $tabs_list,
121	)
122	);
123
124	return $output;
125	}
126
127	/**
128	* Registers the `core/tabs` block on the server.
129	*
130	* @since 7.1.0
131	*/
132	function gutenberg_register_block_core_tabs() {
133	register_block_type_from_metadata(
134	__DIR__ . '/tabs',
135	array(
136	'render_callback' => 'gutenberg_block_core_tabs_render_block_callback',
137	)
138	);
139	}
140	add_action( 'init', 'gutenberg_register_block_core_tabs', 20 );
141