@wordpress/block-library 9.38.0 → 9.39.0

package/src/tabs/index.php

@@ -6,160 +6,71 @@
  */
 
 /**
- * Build inline CSS custom properties for color settings.
+ * Extract tabs list from tab-panels innerblocks.
  *
- * @param array $attributes Block attributes.
+ * @param array $innerblocks Parsed inner blocks of tabs block.
  *
- * @return string Inline CSS string.
- */
-function block_core_tabs_generate_color_styles( array $attributes ): string {
-	$tab_inactive = $attributes['customTabInactiveColor'] ?? '';
-	$tab_hover    = $attributes['customTabHoverColor'] ?? '';
-	$tab_active   = $attributes['customTabActiveColor'] ?? '';
-	$tab_text     = $attributes['customTabTextColor'] ?? '';
-	$hover_text   = $attributes['customTabHoverTextColor'] ?? '';
-	$active_text  = $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,
-	);
-
-	$style_string = array_map(
-		static function ( string $key, string $value ): string {
-			return ! empty( $value ) ? $key . ': ' . $value . ';' : '';
-		},
-		array_keys( $styles ),
-		$styles
-	);
-
-	return implode( ' ', array_filter( $style_string ) );
-}
-
-/**
- * Build inline CSS custom properties for gap settings.
- *
- * @param array $attributes Block attributes.
- * @param bool  $is_vertical Whether the tabs are vertical.
- *
- * @return string Inline CSS string.
+ * @return array List of tabs with id, label, index.
  */
-function block_core_tabs_generate_gap_styles( array $attributes, bool $is_vertical ): string {
-	if ( empty( $attributes['style'] ) || ! is_array( $attributes['style'] ) ) {
-		return '--wp--style--tabs-gap-default: 0.5em;';
-	}
-	if ( empty( $attributes['style']['spacing'] ) || ! 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;';
-	}
-
-	$block_gap = $attributes['style']['spacing']['blockGap'];
-
-	if ( is_array( $block_gap ) ) {
-		if ( array_key_exists( 'left', $block_gap ) && array_key_exists( 'top', $block_gap ) ) {
-			$block_gap_horizontal = $block_gap['left'];
-			$block_gap_vertical   = $block_gap['top'];
-		} elseif ( array_key_exists( 'left', $block_gap ) ) {
-			$block_gap_horizontal = $block_gap['left'];
-			$block_gap_vertical   = '0.5em';
-		} elseif ( array_key_exists( 'top', $block_gap ) ) {
-			$block_gap_horizontal = '0.5em';
-			$block_gap_vertical   = $block_gap['top'];
-		} else {
-			return '--wp--style--tabs-gap-default: 0.5em;';
+function block_core_tabs_generate_tabs_list( array $innerblocks = array() ): array {
+	$tabs_list = array();
+
+	// Find tab-panels block
+	foreach ( $innerblocks as $inner_block ) {
+		if ( 'core/tab-panels' === ( $inner_block['blockName'] ?? '' ) ) {
+			$tab_index = 0;
+			foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
+				if ( 'core/tab' === ( $tab_block['blockName'] ?? '' ) ) {
+					$attrs     = $tab_block['attrs'] ?? array();
+					$tab_label = $attrs['label'] ?? '';
+
+					// Try to get the ID from the rendered content
+					$tab_id = $attrs['anchor'] ?? '';
+					if ( empty( $tab_id ) && ! empty( $tab_block['innerHTML'] ) ) {
+						$tag_processor = new WP_HTML_Tag_Processor( $tab_block['innerHTML'] );
+						if ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
+							$tab_id = $tag_processor->get_attribute( 'id' ) ?? '';
+						}
+					}
+					if ( empty( $tab_id ) ) {
+						$tab_id = 'tab-' . $tab_index;
+					}
+
+					$tabs_list[] = array(
+						'id'    => $tab_id,
+						'label' => esc_html( (string) $tab_label ),
+						'index' => $tab_index,
+					);
+					++$tab_index;
+				}
+			}
+			break;
 		}
-	} elseif ( is_string( $block_gap ) ) {
-		return '--wp--style--tabs-gap-default: 0.5em;';
 	}
 
-	$block_gap_horizontal = preg_match( '/^var:preset\|spacing\|\d+$/', (string) $block_gap_horizontal )
-		? 'var(--wp--preset--spacing--' . substr( (string) $block_gap_horizontal, strrpos( (string) $block_gap_horizontal, '|' ) + 1 ) . ')'
-		: (string) $block_gap_horizontal;
-
-	$block_gap_vertical = preg_match( '/^var:preset\|spacing\|\d+$/', (string) $block_gap_vertical )
-		? 'var(--wp--preset--spacing--' . substr( (string) $block_gap_vertical, strrpos( (string) $block_gap_vertical, '|' ) + 1 ) . ')'
-		: (string) $block_gap_vertical;
-
-	$list_gap  = $block_gap_horizontal;
-	$block_gap = $block_gap_vertical;
-
-	if ( $is_vertical ) {
-		$list_gap  = $block_gap_vertical;
-		$block_gap = $block_gap_horizontal;
-	}
-
-	return wp_sprintf(
-		'--wp--style--unstable-tabs-list-gap: %s; --wp--style--unstable-tabs-gap: %s;',
-		$list_gap,
-		$block_gap
-	);
+	return $tabs_list;
 }
 
 /**
- * Extract tabs list from inner blocks for hydration.
+ * Filter to provide tabs list context to core/tabs and core/tabs-menu blocks.
+ * It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
+ * In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
  *
- * @param array $innerblocks Parsed inner blocks.
+ * @param array $context      Default block context.
+ * @param array $parsed_block The block being rendered.
  *
- * @return array List of tabs with id, label, index.
+ * @return array Modified context.
  */
-function block_core_tabs_generate_tabs_list_from_innerblocks( array $innerblocks = array() ): array {
-	$tab_index = 0;
-
-	return array_map(
-		static function ( array $tab ) use ( &$tab_index ): array {
-			$attrs = $tab['attrs'] ?? array();
-
-			$tag_processor = new WP_HTML_Tag_Processor( $tab['innerHTML'] ?? '' );
-			$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
-
-			$tab_id    = $tag_processor->get_attribute( 'id' );
-			$tab_label = $attrs['label'] ?? '';
-
-			$attrs['id']    = $tab_id;
-			$attrs['label'] = esc_html( (string) $tab_label );
-
-			$tab_index++;
-
-			return $attrs;
-		},
-		$innerblocks
-	);
-}
-
-/**
- * Build inline CSS custom properties for border settings.
- *
- * @param array $attributes Block attributes.
- *
- * @return string Inline CSS string.
- */
-function block_core_tabs_generate_border_styles( array $attributes ): string {
-	$radius = $attributes['style']['border']['radius'] ?? null;
-
-	if ( empty( $radius ) ) {
-		return '';
+function block_core_tabs_provide_context( array $context, array $parsed_block ): array {
+	if ( 'core/tabs' === $parsed_block['blockName'] ) {
+		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array() );
+		$context['core/tabs-list'] = $tabs_list;
+		$context['core/tabs-id']   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' ); // Generate a unique ID for each tabs instance. Used for 3rd party extensibility to identify the tabs instance.
 	}
 
-	if ( is_array( $radius ) ) {
-		$radius_value = wp_sprintf(
-			'%s %s %s %s',
-			$radius['topLeft'] ?? '0',
-			$radius['topRight'] ?? '0',
-			$radius['bottomRight'] ?? '0',
-			$radius['bottomLeft'] ?? '0'
-		);
-	} else {
-		$radius_value = $radius;
-	}
-
-	return wp_sprintf( '--tab-border-radius: %s;', (string) $radius_value );
+	return $context;
 }
+add_filter( 'render_block_context', 'block_core_tabs_provide_context', 10, 2 );
 
 /**
  * Render callback for core/tabs.
@@ -172,29 +83,37 @@ function block_core_tabs_generate_border_styles( array $attributes ): string {
  */
 function block_core_tabs_render_block_callback( array $attributes, string $content, \WP_Block $block ): string {
 	$active_tab_index = $attributes['activeTabIndex'] ?? 0;
+	$tabs_list        = $block->context['core/tabs-list'] ?? array();
+	$tabs_id          = $block->context['core/tabs-id'] ?? null;
 
-	$tabs_list = block_core_tabs_generate_tabs_list_from_innerblocks( $block->parsed_block['innerBlocks'] ?? array() );
-
-	$tabs_id = wp_unique_id( 'tabs_' );
+	if ( empty( $tabs_id ) ) {
+		// If malformed tabs, return early to avoid errors.
+		return '';
+	}
 
-	/**
-	 * Builds a client side state for just this tabs instance.
-	 * This allows 3rd party extensibility of tabs while retaining
-	 * client side state management per core/tabs instance, like context.
-	 */
-	wp_interactivity_state(
-		'core/tabs/private',
-		array(
-			$tabs_id => $tabs_list,
-		)
-	);
+	$title = $attributes['metadata']['name'] ?? '';
+	if ( empty( $title ) ) {
+		$title = 'Tab Contents';
+	}
+	$title = wp_sprintf( '<h3 class="wp-block-tabs__title">%s</h3>', esc_html( $title ) );
 
-	$is_vertical = 'vertical' === ( $attributes['orientation'] ?? 'horizontal' );
+	$is_vertical = false;
 
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
+
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
-	$tag_processor->add_class( $is_vertical ? 'is-vertical' : 'is-horizontal' );
 	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
+
+	// Inspect inside the tabs-menu to see if its vertical or not.
+	$tag_processor->set_bookmark( 'core/tabs_wrapper' );
+	while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs-menu' ) ) ) {
+		if ( $tag_processor->has_class( 'is-vertical' ) ) {
+			$is_vertical = true;
+			break;
+		}
+	}
+	$tag_processor->seek( 'core/tabs_wrapper' );
+
 	$tag_processor->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
@@ -208,48 +127,24 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$tag_processor->set_attribute( 'data-wp-init', 'callbacks.onTabsInit' );
 	$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
 
-	/**
-	 * Process style attribute.
-	 */
-	$style  = (string) $tag_processor->get_attribute( 'style' );
-	$style .= block_core_tabs_generate_color_styles( $attributes );
-	$style .= block_core_tabs_generate_gap_styles( $attributes, $is_vertical );
-	$style .= block_core_tabs_generate_border_styles( $attributes );
-	$tag_processor->set_attribute( 'style', $style );
-
-	$updated_content = $tag_processor->get_updated_html();
+	$output = $tag_processor->get_updated_html();
 
-	/**
-	 * Build the tabs list markup.
-	 * We're doing this manually instead of using <template/> to make it possible
-	 * for other blocks to extend the tabs list via HTML api.
-	 */
-	$tabs_list_markup = array_map(
-		static function ( array $tab ): string {
-			return wp_sprintf(
-				'<a id="tab__%1$s" class="tabs__tab-label" href="#%1$s" role="tab" aria-controls="%1$s" 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">%2$s</a>',
-				$tab['id'],
-				html_entity_decode( $tab['label'] )
-			);
-		},
-		$tabs_list
-	);
-	$tabs_list_markup = implode( '', $tabs_list_markup );
+	// Insert the title after the first opening tag.
+	$output = preg_replace( '/^(<[^>]+>)/', '$1' . $title, $output );
 
 	/**
-	 * Splice the tabs list into the content.
+	 * Builds a client side state for just this tabs instance.
+	 * This allows 3rd party extensibility of tabs while retaining
+	 * client side state management per core/tabs instance, like context.
 	 */
-	$content = preg_replace(
-		'/<ul\s+class="tabs__list">\s*<\/ul>/i',
-		'<div class="tabs__list" role="tablist">' . $tabs_list_markup . '</div>',
-		(string) $updated_content
+	wp_interactivity_state(
+		'core/tabs/private',
+		array(
+			$tabs_id => $tabs_list,
+		)
 	);
 
-	/**
-	 * In the event preg_replace fails, return the tabs content without the list spliced in.
-	 * This ensures the block content is still rendered, albeit without the tabs list.
-	 */
-	return is_string( $content ) ? $content : (string) $updated_content;
+	return $output;
 }
 
 /**

package/src/tabs/save.js

@@ -3,20 +3,13 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function Save( { attributes } ) {
-	// eslint-disable-next-line react-compiler/react-compiler
-	const blockProps = useBlockProps.save();
+export default function save( { attributes } ) {
+	const { anchor } = attributes;
 
-	// eslint-disable-next-line react-compiler/react-compiler
-	const innerBlocksProps = useInnerBlocksProps.save( {} );
+	const tabsId = anchor;
 
-	const title = attributes?.metadata?.name || 'Tab Contents';
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return (
-		<div { ...blockProps }>
-			<h3 className="tabs__title">{ title }</h3>
-			<ul className="tabs__list"></ul>
-			{ innerBlocksProps.children }
-		</div>
-	);
+	return <div { ...innerBlocksProps } id={ tabsId } />;
 }

package/src/tabs/style.scss

@@ -1,192 +1,6 @@
 .wp-block-tabs {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--wp--style--unstable-tabs-gap, var(--wp--style--tabs-gap-default));
 	box-sizing: border-box;
-
-	--tab-bg: var(--custom-tab-inactive-color, transparent);
-	--tab-bg-hover: var(--custom-tab-hover-color, #eaeaea);
-	--tab-bg-active: var(--custom-tab-active-color, #000);
-	--tab-text: var(--custom-tab-text-color, #000);
-	--tab-text-hover: var(--custom-tab-hover-text-color, #000);
-	--tab-text-active: var(--custom-tab-active-text-color, #fff);
-	--tab-opacity: 0.5;
-	--tab-opacity-hover: 1;
-	--tab-opacity-active: 1;
-	--tab-outline-width: 0;
-	--tab-underline-width: 0;
-	--tab-side-border-width: 0;
-	--tab-border-color: var(--custom-tab-inactive-color, transparent);
-	--tab-border-color-hover: var(--custom-tab-hover-color, #000);
-	--tab-border-color-active: var(--custom-tab-active-color, #000);
-	--tab-padding-block: var(--wp--preset--spacing--20, 0.5em);
-	--tab-padding-inline: var(--wp--preset--spacing--30, 1em);
-	--tab-border-radius: 0;
-	--tabs-divider-color: var(--custom-tab-active-color, #000);
-
-	.tabs__title {
+	.wp-block-tabs__title {
 		display: none;
 	}
-
-	.tabs__list {
-		display: flex;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		align-items: flex-end;
-		flex-grow: 1;
-		flex-basis: 100%;
-		gap: var(--wp--style--unstable-tabs-list-gap, var(--wp--style--tabs-gap-default));
-		min-width: 100px;
-
-		button.tabs__tab-label {
-			font-size: inherit;
-			font-family: inherit;
-			font-weight: inherit;
-			line-height: inherit;
-			letter-spacing: inherit;
-			text-transform: inherit;
-			text-align: inherit;
-		}
-
-		.tabs__tab-label {
-			box-sizing: border-box;
-			display: block;
-			width: max-content;
-			margin: 0;
-			opacity: var(--tab-opacity);
-			padding-block: var(--tab-padding-block);
-			padding-inline: var(--tab-padding-inline);
-			text-decoration: none;
-			cursor: pointer;
-			background-color: var(--tab-bg);
-			color: var(--tab-text);
-			border: var(--tab-outline-width) solid var(--tab-border-color);
-			border-block-end: var(--tab-underline-width) solid var(--tab-border-color);
-			border-inline-end: var(--tab-side-border-width) solid var(--tab-border-color);
-			border-radius: var(--tab-border-radius);
-			&:focus {
-				outline: none;
-			}
-			&:focus-visible {
-				outline: 2px solid var(--tab-border-color-active);
-				outline-offset: 2px;
-			}
-			&:hover {
-				opacity: var(--tab-opacity-hover);
-				background-color: var(--tab-bg-hover);
-				color: var(--tab-text-hover);
-				border-color: var(--tab-border-color-hover);
-			}
-			&[aria-selected="true"] {
-				opacity: var(--tab-opacity-active);
-				background-color: var(--tab-bg-active);
-				color: var(--tab-text-active);
-				border-color: var(--tab-border-color-active);
-			}
-		}
-	}
-
-	&:not(.is-vertical) {
-		.tabs__list {
-			overflow-x: auto;
-			border-block-end: 1px solid var(--tabs-divider-color);
-		}
-	}
-
-	&.is-vertical {
-		flex-wrap: nowrap;
-		.tabs__list {
-			flex-grow: 0;
-			flex-direction: column;
-			max-width: 30%;
-			border-inline-end: 1px solid var(--tabs-divider-color);
-			border-block-end: none;
-			overflow-x: hidden;
-		}
-		.tabs__tab-label {
-			max-width: 100%;
-			text-align: end;
-		}
-	}
-}
-
-// Links style.
-.wp-block-tabs.is-style-links {
-	--tabs-divider-color: var(--custom-tab-hover-color, #000);
-	--tab-bg: transparent;
-	--tab-bg-hover: transparent;
-	--tab-bg-active: transparent;
-	--tab-text: var(--custom-tab-text-color, #000);
-	--tab-text-hover: var(--custom-tab-hover-text-color, #000);
-	--tab-text-active: var(--custom-tab-active-text-color, #000);
-	--tab-border-color: var(--custom-tab-inactive-color, transparent);
-	--tab-border-color-hover: var(--custom-tab-hover-color, #000);
-	--tab-border-color-active: var(--custom-tab-active-color, #000);
-	--tab-underline-width: 2px;
-
-	.tabs__tab-label {
-		/* preserve extra bottom space for underline */
-		padding-block-end: 0.5em;
-		border-bottom: 2px solid var(--tab-border-color);
-		&[aria-selected="true"] {
-			background-color: inherit;
-			color: var(--tab-text-active);
-			border-color: var(--tab-border-color-active);
-		}
-		&:hover:not([aria-selected="true"]) {
-			background-color: inherit;
-			color: var(--tab-text-hover);
-			border-color: var(--tab-border-color-hover);
-		}
-	}
-
-	&.is-vertical {
-		.tabs__list {
-			border-block-end: none;
-			border-inline-end: 1px solid var(--tabs-divider-color);
-		}
-		.tabs__tab-label {
-			/* switch underline to side for vertical */
-			border-block-end: 0;
-			--tab-underline-width: 0;
-			--tab-side-border-width: 2px;
-			padding-block-end: 0;
-			padding-inline-end: 0.5em;
-		}
-	}
-}
-
-// Button style.
-.wp-block-tabs.is-style-button {
-	--tab-border-radius: 9999px;
-	--tab-bg: var(--custom-tab-inactive-color, transparent);
-	--tab-bg-hover: var(--custom-tab-hover-color, #000);
-	--tab-bg-active: var(--custom-tab-active-color, #000);
-	--tab-text: var(--custom-tab-text-color, #000);
-	--tab-text-hover: var(--custom-tab-hover-text-color, #000);
-	--tab-text-active: var(--custom-tab-active-text-color, #000);
-	--tab-padding-block: 0.5em;
-	--tab-padding-inline: 1em;
-
-	.tabs__list {
-		border-block-end: none;
-		align-items: center;
-	}
-
-	.tabs__tab-label {
-		border-width: 0;
-		&:hover:not([aria-selected="true"]) {
-			background-color: var(--tab-bg-hover);
-		}
-	}
-
-	&.is-vertical {
-		.tabs__list {
-			border-block-end: none;
-			border-inline-end: none;
-			align-items: flex-end;
-		}
-	}
 }

package/src/tabs-menu/block.json

@@ -0,0 +1,77 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tabs-menu",
+	"title": "Tabs Menu",
+	"description": "Display the tab buttons for a tabbed interface.",
+	"version": "1.0.0",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [
+		"core/tabs"
+	],
+	"allowedBlocks": [
+		"core/tabs-menu-item"
+	],
+	"usesContext": [
+		"core/tabs-list",
+		"core/tabs-id",
+		"core/tabs-activeTabIndex",
+		"core/tabs-editorActiveTabIndex"
+	],
+	"attributes": {},
+	"supports": {
+		"html": false,
+		"reusable": false,
+		"lock": false,
+		"dimensions": {
+			"aspectRatio": false,
+			"height": false,
+			"minHeight": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"orientation": "horizontal"
+			},
+			"allowSwitching": false,
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowOrientation": true
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"margin": true,
+				"blockGap": true
+			}
+		}
+	},
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./style-index.css"
+}