@wordpress/block-library 9.48.0 → 10.0.0

package/src/table-of-contents/README.md

@@ -0,0 +1,61 @@
+# Table of Contents
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
+
+Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here.
+
+- **Name:** `core/table-of-contents`
+- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+- **Keywords:** `document outline`, `summary`
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `headings` | `array` | `[]` | — |
+| `onlyIncludeCurrentPage` | `boolean` | `false` | — |
+| `maxLevel` | `number` | — | — |
+| `ordered` | `boolean` | `true` | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Block Markup
+
+This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
+
+```html
+<!-- wp:table-of-contents {"headings":[{"content":"Heading text","level":2,"link":"#heading-id-1"},{"content":"A sub-heading","level":3,"link":"#heading-id-2"}]} -->
+<nav class="wp-block-table-of-contents"><ol><li><a class="wp-block-table-of-contents__entry" href="#heading-id-1">Heading text</a><ol><li><a class="wp-block-table-of-contents__entry" href="#heading-id-2">A sub-heading</a></li></ol></li></ol></nav>
+<!-- /wp:table-of-contents -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table-of-contents/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table-of-contents/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/tabs/README.md

@@ -0,0 +1,77 @@
+# Tabs
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
+
+Display content in a tabbed interface to help users navigate detailed content with ease.
+
+- **Name:** `core/tabs`
+- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+
+## Block Relationships
+
+**[Allowed](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#allowed-blocks) inner blocks:**
+- [`core/tab-list`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-list/)
+- [`core/tab-panels`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-panels/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `activeTabIndex` | `number` | `0` | — |
+| `editorActiveTabIndex` | `number` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
+  - [`allowEditing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowediting): `false`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `blockGap`: `true`
+  - `margin`: `true`
+  - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `core/tabs-list`
+- `core/tabs-id`
+
+**Provides context:**
+
+- `core/tabs-activeTabIndex` → attribute `activeTabIndex`
+- `core/tabs-editorActiveTabIndex` → attribute `editorActiveTabIndex`
+
+## Block Markup
+
+This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
+
+```html
+<!-- wp:tabs {"activeTabIndex":0} -->
+<!-- Content... -->
+<!-- /wp:tabs -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tabs/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/tabs/block.json

@@ -30,18 +30,7 @@
 			}
 		},
 		"layout": {
-			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"justifyContent": "stretch",
-				"verticalAlignment": "stretch",
-				"orientation": "vertical"
-			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true,
-			"allowSizingOnChildren": true
+			"allowEditing": false
 		},
 		"html": false,
 		"interactivity": true,
@@ -53,16 +42,13 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
-		},
-		"renaming": true
+		}
 	},
 	"providesContext": {
 		"core/tabs-activeTabIndex": "activeTabIndex",
 		"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
 	},
 	"usesContext": [ "core/tabs-list", "core/tabs-id" ],
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css",
+	"style": "wp-block-tabs",
 	"viewScriptModule": "@wordpress/block-library/tabs/view"
 }

package/src/tabs/edit.js

@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Controls from './controls';
-import useTabListSync from './use-tab-list-sync';
+import useTabListItemsSync from './use-tab-list-items-sync';
 
 const EMPTY_ARRAY = [];
 
@@ -32,15 +32,15 @@ const EMPTY_ARRAY = [];
  */
 const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];
 
-function Edit( { clientId, attributes, setAttributes } ) {
+function Edit( { clientId, attributes } ) {
 	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
 
-	const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
+	const { tabPanels, tabListClientId } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			const tabPanelBlocks = innerBlocks.find(
+			const tabPanelsBlock = innerBlocks.find(
 				( block ) => block.name === 'core/tab-panels'
 			);
 			const tabList = innerBlocks.find(
@@ -48,21 +48,14 @@ function Edit( { clientId, attributes, setAttributes } ) {
 			);
 
 			return {
-				tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
-				tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
-				tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
 				tabListClientId: tabList?.clientId ?? null,
 			};
 		},
 		[ clientId ]
 	);
 
-	useTabListSync( {
-		tabPanels,
-		tabs,
-		tabPanelsClientId,
-		tabListClientId,
-	} );
+	useTabListItemsSync( { tabPanels, tabListClientId } );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
@@ -70,7 +63,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
 	const contextValue = useMemo( () => {
 		/**
 		 * Compute tabs list from innerblocks to provide via context.
-		 * This traverses the tab-panel block to find all tab blocks
+		 * This traverses the tab-panels block to find all tab-panel blocks
 		 * and extracts their label and anchor for the tab-list to consume.
 		 */
 		const tabList = tabPanels.map( ( tab, index ) => ( {
@@ -100,11 +93,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
 	return (
 		<BlockContextProvider value={ contextValue }>
 			<div { ...innerBlockProps }>
-				<Controls
-					clientId={ clientId }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
+				<Controls clientId={ clientId } />
 				{ innerBlockProps.children }
 			</div>
 		</BlockContextProvider>

package/src/tabs/index.js

@@ -22,16 +22,12 @@ export const settings = {
 		innerBlocks: [
 			{
 				name: 'core/tab-list',
-				innerBlocks: [
-					{
-						name: 'core/tab',
-						attributes: { anchor: 'tab-1-button' },
-					},
-					{
-						name: 'core/tab',
-						attributes: { anchor: 'tab-2-button' },
-					},
-				],
+				attributes: {
+					tabs: [
+						{ label: __( 'Tab 1' ) },
+						{ label: __( 'Tab 2' ) },
+					],
+				},
 			},
 			{
 				name: 'core/tab-panels',

package/src/tabs/index.php

@@ -8,12 +8,12 @@
 /**
  * Extract tabs list from tab-panel innerblocks.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array  $innerblocks Parsed inner blocks of tabs block.
  * @param string $tabs_id     Unique ID for the tabs instance, used to generate tab IDs.
  *
- * @return array List of tabs with id, label, index.
+ * @return array List of tab IDs.
  */
 function block_core_tabs_generate_tabs_list( array $innerblocks = array(), string $tabs_id = '' ): array {
 	$tabs_list = array();
@@ -24,8 +24,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 			$tab_index = 0;
 			foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
 				if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
-					$attrs     = $tab_block['attrs'] ?? array();
-					$tab_label = $attrs['label'] ?? '';
+					$attrs = $tab_block['attrs'] ?? array();
 
 					$tab_id = ! empty( $attrs['anchor'] )
 						? $attrs['anchor']
@@ -33,11 +32,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 							? $tabs_id . '-tab-' . $tab_index
 							: 'tab-' . $tab_index );
 
-					$tabs_list[] = array(
-						'id'    => esc_attr( $tab_id ),
-						'label' => $tab_label,
-						'index' => $tab_index,
-					);
+					$tabs_list[] = esc_attr( $tab_id );
 					++$tab_index;
 				}
 			}
@@ -53,7 +48,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
  * 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.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array $context      Default block context.
  * @param array $parsed_block The block being rendered.
@@ -63,8 +58,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 function block_core_tabs_provide_context( array $context, array $parsed_block ): array {
 	if ( 'core/tabs' === $parsed_block['blockName'] ) {
 		// Generate a unique ID for the tabs instance first, so it can be used
-		// to derive stable tab IDs. Used for 3rd party extensibility to identify
-		// the tabs instance.
+		// to derive stable tab IDs.
 		$tabs_id                   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' );
 		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
 		$context['core/tabs-list'] = $tabs_list;
@@ -78,7 +72,7 @@ add_filter( 'render_block_context', 'block_core_tabs_provide_context', 10, 2 );
 /**
  * Render callback for core/tabs.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
  * @param string    $content    Block content.
@@ -96,22 +90,10 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 		return '';
 	}
 
-	$is_vertical = false;
-
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
-	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
-
-	// Inspect inside the tab-list 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-list' ) ) ) {
-		if ( $tag_processor->has_class( 'is-vertical' ) ) {
-			$is_vertical = true;
-			break;
-		}
-	}
-	$tag_processor->seek( 'core/tabs_wrapper' );
+	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );
 
 	$tag_processor->set_attribute(
 		'data-wp-context',
@@ -119,7 +101,6 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 			array(
 				'tabsId'         => $tabs_id,
 				'activeTabIndex' => $active_tab_index,
-				'isVertical'     => $is_vertical,
 			)
 		)
 	);
@@ -129,12 +110,11 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$output = $tag_processor->get_updated_html();
 
 	/**
-	 * 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.
+	 * Builds a client side state for just this tabs instance, so each
+	 * core/tabs block manages its own state, like context.
 	 */
 	wp_interactivity_state(
-		'core/tabs/private',
+		'core/tabs',
 		array(
 			$tabs_id => $tabs_list,
 		)
@@ -146,7 +126,7 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 /**
  * Registers the `core/tabs` block on the server.
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tabs() {
 	register_block_type_from_metadata(

package/src/tabs/use-tab-list-items-sync.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.
+ *
+ * Whenever the list of core/tab-panel blocks changes (add, remove, reorder, or
+ * label edit), this hook updates the `tabs` attribute on the core/tab-list
+ * block so that save.js can render the correct buttons.
+ *
+ * @param {Object}      props
+ * @param {Array}       props.tabPanels       Raw core/tab-panel block objects.
+ * @param {string|null} props.tabListClientId Client ID of the core/tab-list block.
+ */
+export default function useTabListItemsSync( { tabPanels, tabListClientId } ) {
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const prevTabsRef = useRef( null );
+
+	useEffect( () => {
+		if ( ! tabListClientId ) {
+			return;
+		}
+
+		const newTabs = tabPanels.map( ( tab ) => ( {
+			label: tab.attributes.label || '',
+		} ) );
+
+		// Only update if tabs actually changed to avoid unnecessary re-renders.
+		const serialized = JSON.stringify( newTabs );
+		if ( serialized === prevTabsRef.current ) {
+			return;
+		}
+		prevTabsRef.current = serialized;
+
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabListClientId, { tabs: newTabs } );
+	}, [
+		tabPanels,
+		tabListClientId,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+}