← All changes | build/scripts/block-library/tabs.php +19 -38 23.2.2 → trunk View file →

		@@ -7,14 +7,14 @@
7	7
8	8	/**
9	9	* Extract tabs list from tab-panel innerblocks.
10	10	*
11		- * @since 7.0.0
	11	+ * @since 7.1.0
12	12	*
13	13	* @param array $innerblocks Parsed inner blocks of tabs block.
14	14	* @param string $tabs_id Unique ID for the tabs instance, used to generate tab IDs.
15	15	*
16		- * @return array List of tabs with id, label, index.
	16	+ * @return array List of tab IDs.
17	17	*/
18	18	function gutenberg_block_core_tabs_generate_tabs_list( array $innerblocks = array(), string $tabs_id = '' ): array {
19	19	$tabs_list = array();
20	20
		@@ -20,26 +20,21 @@
20	20
21	21	// Find tab-panel block
22	22	foreach ( $innerblocks as $inner_block ) {
23	23	if ( 'core/tab-panels' === ( $inner_block['blockName'] ?? '' ) ) {
24		- $tab_index = 0;
	24	+ $tab_number = 1;
25	25	foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
26	26	if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
27		- $attrs = $tab_block['attrs'] ?? array();
28		- $tab_label = $attrs['label'] ?? '';
	27	+ $attrs = $tab_block['attrs'] ?? array();
29	28
30	29	$tab_id = ! empty( $attrs['anchor'] )
31	30	? $attrs['anchor']
32	31	: ( ! empty( $tabs_id )
33		- ? $tabs_id . '-tab-' . $tab_index
34		- : 'tab-' . $tab_index );
	32	+ ? $tabs_id . '-tab-' . $tab_number
	33	+ : 'tab-' . $tab_number );
35	34
36		- $tabs_list[] = array(
37		- 'id' => esc_attr( $tab_id ),
38		- 'label' => $tab_label,
39		- 'index' => $tab_index,
40		- );
41		- ++$tab_index;
	35	+ $tabs_list[] = esc_attr( $tab_id );
	36	+ ++$tab_number;
42	37	}
43	38	}
44	39	break;
45	40	}
		@@ -52,9 +47,9 @@
52	47	* Filter to provide tabs list context to core/tabs and core/tab-list blocks.
53	48	* It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
54	49	* In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
55	50	*
56		- * @since 7.0.0
	51	+ * @since 7.1.0
57	52	*
58	53	* @param array $context Default block context.
59	54	* @param array $parsed_block The block being rendered.
60	55	*
		@@ -62,11 +57,10 @@
62	57	*/
63	58	function gutenberg_block_core_tabs_provide_context( array $context, array $parsed_block ): array {
64	59	if ( 'core/tabs' === $parsed_block['blockName'] ) {
65	60	// 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_' );
	61	+ // to derive stable tab IDs.
	62	+ $tabs_id = $parsed_block['attrs']['anchor'] ?? wp_unique_prefixed_id( 'tabs_' );
69	63	$tabs_list = gutenberg_block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
70	64	$context['core/tabs-list'] = $tabs_list;
71	65	$context['core/tabs-id'] = $tabs_id;
72	66	}
		@@ -77,9 +71,9 @@
77	71
78	72	/**
79	73	* Render callback for core/tabs.
80	74	*
81		- * @since 7.0.0
	75	+ * @since 7.1.0
82	76	*
83	77	* @param array $attributes Block attributes.
84	78	* @param string $content Block content.
85	79	* @param \WP_Block $block WP_Block instance.
		@@ -95,25 +89,13 @@
95	89	// If malformed tabs, return early to avoid errors.
96	90	return '';
97	91	}
98	92
99		- $is_vertical = false;
100		-
101	93	$tag_processor = new WP_HTML_Tag_Processor( $content );
102	94
103	95	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
104		- $tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
	96	+ $tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );
105	97
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	98	$tag_processor->set_attribute(
117	99	'data-wp-context',
118	100	wp_json_encode(
119	101	array(
		@@ -118,24 +100,23 @@
118	100	wp_json_encode(
119	101	array(
120	102	'tabsId' => $tabs_id,
121	103	'activeTabIndex' => $active_tab_index,
122		- 'isVertical' => $is_vertical,
123	104	)
124	105	)
125	106	);
126		- $tag_processor->set_attribute( 'data-wp-init', 'callbacks.onTabsInit' );
	107	+ $tag_processor->set_attribute( 'data-wp-init', 'callbacks.activateTabByHash' );
	108	+ $tag_processor->set_attribute( 'data-wp-on-window--hashchange', 'callbacks.activateTabByHash' );
127	109	$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
128	110
129	111	$output = $tag_processor->get_updated_html();
130	112
131	113	/**
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.
	114	+ * Builds a client side state for just this tabs instance, so each
	115	+ * core/tabs block manages its own state, like context.
135	116	*/
136	117	wp_interactivity_state(
137		- 'core/tabs/private',
	118	+ 'core/tabs',
138	119	array(
139	120	$tabs_id => $tabs_list,
140	121	)
141	122	);
		@@ -145,9 +126,9 @@
145	126
146	127	/**
147	128	* Registers the `core/tabs` block on the server.
148	129	*
149		- * @since 7.0.0
	130	+ * @since 7.1.0
150	131	*/
151	132	function gutenberg_register_block_core_tabs() {
152	133	register_block_type_from_metadata(
153	134	__DIR__ . '/tabs',