| @@ -7,9 +7,9 @@ | ||
| 7 | 7 | |
| 8 | 8 | /** |
| 9 | 9 | * Render callback for core/tab-panel. |
| 10 | 10 | * |
| 11 | - * @since 7.0.0 | |
| 11 | + * @since 7.1.0 | |
| 12 | 12 | * |
| 13 | 13 | * @param array $attributes Block attributes. |
| 14 | 14 | * @param string $content Block content. |
| 15 | 15 | * @param \WP_Block $block Block instance. |
| @@ -21,12 +21,12 @@ | ||
| 21 | 21 | |
| 22 | 22 | static $tab_counters = array(); |
| 23 | 23 | |
| 24 | 24 | if ( ! isset( $tab_counters[ $tabs_id ] ) ) { |
| 25 | - $tab_counters[ $tabs_id ] = 0; | |
| 25 | + $tab_counters[ $tabs_id ] = 1; | |
| 26 | 26 | } |
| 27 | 27 | |
| 28 | - $tab_index = $tab_counters[ $tabs_id ]; | |
| 28 | + $tab_number = $tab_counters[ $tabs_id ]; | |
| 29 | 29 | ++$tab_counters[ $tabs_id ]; |
| 30 | 30 | |
| 31 | 31 | $tag_processor = new WP_HTML_Tag_Processor( $content ); |
| 32 | 32 | $tag_processor->next_tag( array( 'class_name' => 'wp-block-tab-panel' ) ); |
| @@ -35,38 +35,24 @@ | ||
| 35 | 35 | // the generated position-based ID. |
| 36 | 36 | $tab_id = (string) $tag_processor->get_attribute( 'id' ); |
| 37 | 37 | if ( empty( $tab_id ) ) { |
| 38 | 38 | $tab_id = ! empty( $tabs_id ) |
| 39 | - ? $tabs_id . '-tab-' . $tab_index | |
| 40 | - : 'tab-' . $tab_index; | |
| 39 | + ? $tabs_id . '-tab-' . $tab_number | |
| 40 | + : 'tab-' . $tab_number; | |
| 41 | 41 | $tag_processor->set_attribute( 'id', $tab_id ); |
| 42 | 42 | } |
| 43 | 43 | |
| 44 | - /** | |
| 45 | - * Add interactivity to the tab element. | |
| 46 | - */ | |
| 47 | - $tag_processor->set_attribute( | |
| 48 | - 'data-wp-interactive', | |
| 49 | - 'core/tabs/private' | |
| 50 | - ); | |
| 51 | - $tag_processor->set_attribute( | |
| 52 | - 'data-wp-context', | |
| 53 | - wp_json_encode( | |
| 54 | - array( | |
| 55 | - 'tab' => array( | |
| 56 | - 'id' => $tab_id, | |
| 57 | - ), | |
| 58 | - ) | |
| 59 | - ) | |
| 60 | - ); | |
| 44 | + $tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id ); | |
| 61 | 45 | |
| 62 | - /** | |
| 63 | - * Process accessibility and interactivity attributes. | |
| 46 | + /* | |
| 47 | + * Hiding a panel is left to the client, which is why `hidden` is bound to a | |
| 48 | + * state getter the server cannot resolve rather than set here: a visitor | |
| 49 | + * whose browser never runs the block's script is then given the content of | |
| 50 | + * every panel instead of none of it. `core/accordion` works the same way. | |
| 64 | 51 | */ |
| 65 | - $tag_processor->set_attribute( 'role', 'tabpanel' ); | |
| 66 | - $tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id ); | |
| 67 | - $tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' ); | |
| 68 | - $tag_processor->set_attribute( 'tabindex', 0 ); | |
| 52 | + $tag_processor->set_attribute( 'data-wp-bind--hidden', 'state.isHidden' ); | |
| 53 | + $tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' ); | |
| 54 | + $tag_processor->set_attribute( 'data-wp-on--beforematch', 'actions.handleBeforeMatch' ); | |
| 69 | 55 | |
| 70 | 56 | return (string) $tag_processor->get_updated_html(); |
| 71 | 57 | } |
| 72 | 58 | |
| @@ -74,9 +60,9 @@ | ||
| 74 | 60 | * Registers the `core/tab-panel` block on the server. |
| 75 | 61 | * |
| 76 | 62 | * @hook init |
| 77 | 63 | * |
| 78 | - * @since 7.0.0 | |
| 64 | + * @since 7.1.0 | |
| 79 | 65 | */ |
| 80 | 66 | function gutenberg_register_block_core_tab_panel() { |
| 81 | 67 | register_block_type_from_metadata( |
| 82 | 68 | __DIR__ . '/tab-panel', |
