Whoops mis-replaced this file

packages/block-library/src/tab/index.php

@@ -1,222 +1,129 @@
 <?php
 /**
- * Server-side rendering of the `core/tabs` block.
+ * Server-side rendering of the `core/tab` block.
  *
  * @package WordPress
  */
 
 /**
- * Constructs a string of CSS color variables for the tabs block.
- * - customTabBackgroundColor - The background color of the tabs.
- * - customTabHoverColor - The hover background color of the tabs.
- * - customTabActiveColor - The active background color of the tabs.
- * - customTabTextColor - The text color of the tabs.
- * - customTabHoverTextColor - The hover text color of the tabs.
- * - customTabActiveTextColor - The active text color of the tabs.
+ * Returns typography classnames depending on whether there are named font sizes/families.
  *
  * @since 9.22.0
  *
- * @param array $attributes Block attributes.
- * @return string A string of CSS variables.
+ * @param array $attributes The block attributes.
+ * @return string The typography color classnames to be applied to the block elements.
  */
-function block_core_tabs_generate_color_variables( $attributes ) {
-	$tab_inactive = array_key_exists( 'customTabInactiveColor', $attributes ) ? $attributes['customTabInactiveColor'] : '';
-	$tab_hover    = array_key_exists( 'customTabHoverColor', $attributes ) ? $attributes['customTabHoverColor'] : '';
-	$tab_active   = array_key_exists( 'customTabActiveColor', $attributes ) ? $attributes['customTabActiveColor'] : '';
-	$tab_text     = array_key_exists( 'customTabTextColor', $attributes ) ? $attributes['customTabTextColor'] : '';
-	$hover_text   = array_key_exists( 'customTabHoverTextColor', $attributes ) ? $attributes['customTabHoverTextColor'] : '';
-	$active_text  = array_key_exists( 'customTabActiveTextColor', $attributes ) ? $attributes['customTabActiveTextColor'] : '';
-
-	$styles = array(
-		'--custom-tab-inactive-color'    => $tab_inactive,
-		'--custom-tab-hover-color'       => $tab_hover,
-		'--custom-tab-active-color'      => $tab_active,
-		'--custom-tab-text-color'        => $tab_text,
-		'--custom-tab-hover-text-color'  => $hover_text,
-		'--custom-tab-active-text-color' => $active_text,
-	);
+function block_core_tab_get_typography_classes( $attributes ) {
+	$typography_classes    = array();
+	$has_named_font_family = ! empty( $attributes['fontFamily'] );
+	$has_named_font_size   = ! empty( $attributes['fontSize'] );
 
-	$style_string = array_map(
-		function( $key, $value ) {
-			return ! empty( $value ) ? $key . ': ' . $value . ';' : '';
-		},
-		array_keys( $styles ),
-		$styles
-	);
-	$style_string = implode( ' ', array_filter( $style_string ) );
+	if ( $has_named_font_size ) {
+		$typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) );
+	}
+
+	if ( $has_named_font_family ) {
+		$typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) );
+	}
 
-	return $style_string;
+	return implode( ' ', $typography_classes );
 }
 
 /**
- * Generates a string of CSS block gap variables for the tabs block.
+ * Returns typography styles to be included in an HTML style tag.
+ * This excludes text-decoration, which is applied only to the label and button elements of the search block.
  *
  * @since 9.22.0
  *
- * @param array $attributes Block attributes.
- * @return string A string of CSS variables.
+ * @param array $attributes The block attributes.
+ * @return string A string of typography CSS declarations.
  */
-function block_core_tabs_generate_gap_styles( $attributes ) {
-	if ( ! array_key_exists( 'style', $attributes ) || ! is_array( $attributes['style'] ) ) {
-		return '--wp--style--tabs-gap-default: 0.5em;';
-	}
-	// Check that 'spacing' exists and it's an array.
-	if ( ! array_key_exists( 'spacing', $attributes['style'] ) || ! is_array( $attributes['style']['spacing'] ) ) {
-		return '--wp--style--tabs-gap-default: 0.5em;';
-	}
-	if ( ! array_key_exists( 'blockGap', $attributes['style']['spacing'] ) ) {
-		return '--wp--style--tabs-gap-default: 0.5em;';
+function block_core_tab_get_typography_styles( $attributes ) {
+	$typography_styles = array();
+
+	// Add typography styles.
+	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
+		$typography_styles[] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $attributes['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
-	$orientation = array_key_exists( 'orientation', $attributes ) ? $attributes['orientation'] : 'horizontal';
-
-	$block_gap = $attributes['style']['spacing']['blockGap'];
-
-	// Check if block_gap is an array and has both left and top values, if not, return the default value.
-	if ( is_array( $block_gap ) && array_key_exists( 'left', $block_gap ) && array_key_exists( 'top', $block_gap ) ) {
-		$block_gap_horizontal = $block_gap['left'];
-		$block_gap_vertical   = $block_gap['top'];
-	} else {
-		return '--wp--style--tabs-gap-default: 0.5em;';
+	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
+		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
 	}
 
-	if ( 'vertical' === $orientation ) {
-		$block_gap_horizontal = $block_gap['top'];
-		$block_gap_vertical   = $block_gap['left'];
+	if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
+		$typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] );
 	}
 
-	$block_gap_horizontal = preg_match( '/^var:preset\|spacing\|\d+$/', $block_gap_horizontal )
-		? 'var(--wp--preset--spacing--' . substr( $block_gap_horizontal, strrpos( $block_gap_horizontal, '|' ) + 1 ) . ')'
-		: $block_gap_horizontal;
-	$block_gap_vertical = preg_match( '/^var:preset\|spacing\|\d+$/', $block_gap_vertical )
-		? 'var(--wp--preset--spacing--' . substr( $block_gap_vertical, strrpos( $block_gap_vertical, '|' ) + 1 ) . ')'
-		: $block_gap_vertical;
-
-	return wp_sprintf(
-		'--wp--style--unstable-tabs-list-gap: %s;--wp--style--unstable-tabs-gap: %s;',
-		$block_gap_horizontal,
-		$block_gap_vertical
-	);
-}
-
-/**
- * Generates a usable list of tab attributes from the innerblocks of core/tabs.
- *
- * @since 9.22.0
- *
- * @param array $innerblocks The innerblocks of the tabs block.
- * @return array The list of tabs.
- */
-function block_core_tabs_generate_tabs_list_from_innerblocks( $innerblocks = array() ) {
-	$tab_index = 0;
-	$tabs_list  = array_map(
-		function( $tab ) use ( &$tab_index ) {
-			$attrs = $tab['attrs'];
-
-			$tag_processor = new WP_HTML_Tag_Processor( $tab['innerHTML'] );
-			$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
+	if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
+		$typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] );
+	}
 
-			$tab_id    = $tag_processor->get_attribute( 'id' );
-			$tab_label = array_key_exists( 'label', $attrs ) ? $attrs['label'] : '';
+	if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
+		$typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] );
+	}
 
-			$attrs['id']    = $tab_id;
-			$attrs['label'] = esc_html( $tab_label );
-			$attrs['index'] = $tab_index;
+	if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
+		$typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
+	}
 
-			$tab_index++;
+	if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
+		$typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] );
+	}
 
-			return $attrs;
-		},
-		$innerblocks
-	);
-	return $tabs_list;
+	return implode( '', $typography_styles );
 }
 
 /**
- * Render the block
+ * Render the core/tab block.
+ * This function adds Interactivity API directives to the tabpanel.
  *
  * @since 9.22.0
  *
- * @param array    $attributes Block attributes.
- * @param string   $content Block content.
- * @param WP_Block $block WP_Block object.
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block content.
  * @return string
  */
-function render_block_core_tabs( $attributes, $content, $block ) {
-	wp_enqueue_script_module( '@wordpress/block-library/tabs/view' );
-	// Get the starting active tab index.
-	$active_tab_index = $attributes['activeTabIndex'];
-
-	// Construct an array of the innerblocks as tabs_list.
-	// We use innerblocks instead of parsing each .wp-block-tab because it scopes
-	// the tab_index to just this instance of the tabs block. This allows
-	// inner tabs to have unique tabs_list indexes, even if they're nested.
-	$tabs_list = block_core_tabs_generate_tabs_list_from_innerblocks( $block->parsed_block['innerBlocks'] );
-
-	// Generate the color styles and gap styles.
-	$color_styles = block_core_tabs_generate_color_variables( $attributes );
-	$gap_styles   = block_core_tabs_generate_gap_styles( $attributes );
-
-	// Modify the wrapper and setup initial interactivity directives and context.
+function render_block_core_tab( $attributes, $content ) {
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
-	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
-	$tag_processor->add_class( 'vertical' === $attributes['orientation'] ? 'is-vertical' : 'is-horizontal' );
-	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );
-	$tag_processor->set_attribute(
-		'data-wp-context',
-		wp_json_encode(
-			array(
-				'activeTabIndex' => $active_tab_index,
-				'tabsList'       => $tabs_list,
-			)
-		)
-	);
-	$tag_processor->set_attribute( 'data-wp-init', 'callbacks.onTabsInit' );
-	// Get the current hardcoded styles.
-	$style = $tag_processor->get_attribute( 'style' );
-	// Add the color styles and gap styles to the existing styles.
-	$style .= $color_styles;
-	$style .= $gap_styles;
-	// Set the updated styles.
-	$tag_processor->set_attribute( 'style', $style );
+	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
 
-	$content = $tag_processor->get_updated_html();
+	$tab_id = $tag_processor->get_attribute( 'id' );
 
-	$tabs_list = array_map(
-		function( $tab ) {
-			return wp_sprintf(
-				'<li class="tabs__list-item" role="presentation"><a data-wp-tab-id="%s" class="tabs__tab-label" data-wp-bind--href="state.getTabHref" role="tab" data-wp-on--click="actions.handleTabClick" data-wp-on--keydown="actions.handleTabKeyDown" data-wp-bind--aria-selected="state.isActiveTab" data-wp-bind--tabindex="state.tabIndexAttribute">%s</a></li>',
-				$tab['id'],
-				$tab['label']
-			);
-		},
-		$tabs_list
-	);
-	$tabs_list = implode( '', $tabs_list );
+	$tag_processor->set_attribute( 'role', 'tabpanel' );
+	$tag_processor->set_attribute( 'aria-labelledby', $tab_id );
+	$tag_processor->set_attribute( 'data-wp-tab-id', $tab_id );
+	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
+	$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
 
-	// Splice the tabs_template into the updated_content.
-	$list_start_pos = strpos( $content, '<ul class="tabs__list"' );
-	if ( false !== $list_start_pos ) {
-		$list_open_end    = strpos( $content, '>', $list_start_pos ) + 1;
-		$list_close_start = strpos( $content, '</ul>', $list_open_end );
+	$style  = $tag_processor->get_attribute( 'style' );
+	$style .= block_core_tab_get_typography_styles( $attributes );
+	$style .= block_core_tab_get_typography_classes( $attributes );
+	$tag_processor->set_attribute( 'style', $style );
 
-		$content = substr( $content, 0, $list_open_end ) . $tabs_list . substr( $content, $list_close_start );
-	}
+	$content = $tag_processor->get_updated_html();
 
 	return $content;
 }
 
 /**
  * Registers the `core/tab` block on the server.
  *
- * @since 6.8.0
+ * @since 9.22.0
  */
-function register_block_core_tabs() {
+function register_block_core_tab() {
 	register_block_type_from_metadata(
-		__DIR__ . '/tabs',
+		__DIR__ . '/tab',
 		array(
-			'render_callback' => 'render_block_core_tabs',
+			'render_callback' => 'render_block_core_tab',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_tabs' );
+
+add_action( 'init', 'register_block_core_tab' );