@wordpress/block-library 9.48.0 → 10.0.0

package/src/tab-list/save.js

@@ -1,14 +1,49 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	const { tabs } = attributes;
 	const blockProps = useBlockProps.save( {
 		role: 'tablist',
 	} );
 
-	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+
+	const buttonClassName = clsx( colorProps.className, borderProps.className );
+
+	const buttonStyle = {
+		...colorProps.style,
+		...borderProps.style,
+		...spacingProps.style,
+	};
 
-	return <div { ...innerBlocksProps } />;
+	return (
+		<div { ...blockProps }>
+			{ tabs.map( ( tab, index ) => (
+				<button
+					key={ index }
+					className={ buttonClassName || undefined }
+					style={ buttonStyle }
+					type="button"
+					role="tab"
+				>
+					{ tab.label }
+				</button>
+			) ) }
+		</div>
+	);
 }

package/src/{tab → tab-list}/style.scss

@@ -1,4 +1,4 @@
-.wp-block-tab {
+:where(.wp-block-tab-list button) {
 	box-sizing: border-box;
 	color: inherit;
 	display: block;
@@ -27,8 +27,7 @@
 	text-transform: inherit;
 	text-align: inherit;
 
-	&[aria-selected="true"]::before,
-	&.is-active::before {
+	&[aria-selected="true"]::before {
 		content: "";
 		position: absolute;
 		border-bottom: 2px solid currentColor;

package/src/tab-panel/README.md

@@ -0,0 +1,72 @@
+# Tab Panel
+
+<!-- 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>
+
+Content for a tab in a tabbed interface.
+
+- **Name:** `core/tab-panel`
+- **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
+
+**[Parent](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#parent) blocks (direct):**
+- [`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 |
+|-----------|------|---------|-------------|
+| `label` | `string` | `""` | — |
+
+## 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`
+- [`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):
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `blockGap`: `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`
+- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
+
+## 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-activeTabIndex`
+- `core/tabs-editorActiveTabIndex`
+- `core/tabs-id`
+
+**Provides context:**
+
+- `core/tab-label` → attribute `label`
+
+## 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:tab-panel {"label":""} -->
+<!-- Content... -->
+<!-- /wp:tab-panel -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab-panel/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/tab-panel/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/tab-panel/add-tab-toolbar-control.js

@@ -12,22 +12,28 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add tab" button in the block toolbar for the tabs block.
- * Inserts a new core/tab-panel into the tab-panels and a new core/tab
- * into the tab-list, keeping both in sync.
+ * Inserts a new core/tab-panel into the tab-panels. The tab-list items
+ * attribute is kept in sync automatically via useTabListItemsSync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
  * @return {React.JSX.Element} The toolbar control element.
  */
 export default function AddTabToolbarControl( { tabsClientId } ) {
-	const { insertBlock } = useDispatch( blockEditorStore );
+	const {
+		insertBlock,
+		updateBlockAttributes,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
-	const { tabPanelsClientId, tabsListClientId } = useSelect(
+	const { tabPanelsClientId, tabCount, tabListClientId } = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
 					tabPanelsClientId: null,
-					tabsListClientId: null,
+					tabCount: 0,
+					tabListClientId: null,
 				};
 			}
 			const { getBlocks } = select( blockEditorStore );
@@ -40,7 +46,8 @@ export default function AddTabToolbarControl( { tabsClientId } ) {
 			);
 			return {
 				tabPanelsClientId: tabPanels?.clientId || null,
-				tabsListClientId: tabList?.clientId || null,
+				tabCount: tabPanels?.innerBlocks?.length || 0,
+				tabListClientId: tabList?.clientId || null,
 			};
 		},
 		[ tabsClientId ]
@@ -54,12 +61,18 @@ export default function AddTabToolbarControl( { tabsClientId } ) {
 		const newTabPanelBlock = createBlock( 'core/tab-panel', {
 			label: __( 'Tab' ),
 		} );
-		insertBlock( newTabPanelBlock, undefined, tabPanelsClientId );
+		insertBlock( newTabPanelBlock, undefined, tabPanelsClientId, false );
 
-		// Insert a corresponding tab into the tab-list.
-		if ( tabsListClientId ) {
-			const newTabBlock = createBlock( 'core/tab', {} );
-			insertBlock( newTabBlock, undefined, tabsListClientId );
+		// Switch editor active tab to the new tab.
+		const newIndex = tabCount;
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newIndex,
+		} );
+
+		// Select the tab-list block so focus stays in the menu area.
+		if ( tabListClientId ) {
+			selectBlock( tabListClientId );
 		}
 	};
 

package/src/tab-panel/block.json

@@ -22,7 +22,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"reusable": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -34,8 +33,7 @@
 		"layout": true,
 		"spacing": {
 			"blockGap": true,
-			"padding": true,
-			"margin": false
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -45,12 +43,10 @@
 				"__experimentalFontFamily": true
 			}
 		},
-		"renaming": true,
 		"visibility": false
 	},
 	"providesContext": {
 		"core/tab-label": "label"
 	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	"style": "wp-block-tab-panel"
 }

package/src/tab-panel/edit.js

@@ -8,7 +8,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef, useEffect } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,25 +24,12 @@ const TEMPLATE = [
 	],
 ];
 
-const { cancelAnimationFrame } = window;
-
 export default function Edit( { clientId, context, isSelected } ) {
-	const focusRef = useRef();
-
 	// Consume tab indices from context
 	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
 	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
-	// Clean up animation frames on unmount.
-	useEffect( () => {
-		return () => {
-			if ( focusRef.current ) {
-				cancelAnimationFrame( focusRef.current );
-			}
-		};
-	}, [] );
-
 	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
 		( select ) => {
 			const {

package/src/tab-panel/index.php

@@ -8,7 +8,7 @@
 /**
  * Render callback for core/tab-panel.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
  * @param string    $content    Block content.
@@ -41,31 +41,8 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
 		$tag_processor->set_attribute( 'id', $tab_id );
 	}
 
-	/**
-	 * Add interactivity to the tab element.
-	 */
-	$tag_processor->set_attribute(
-		'data-wp-interactive',
-		'core/tabs/private'
-	);
-	$tag_processor->set_attribute(
-		'data-wp-context',
-		wp_json_encode(
-			array(
-				'tab' => array(
-					'id' => $tab_id,
-				),
-			)
-		)
-	);
-
-	/**
-	 * Process accessibility and interactivity attributes.
-	 */
-	$tag_processor->set_attribute( 'role', 'tabpanel' );
 	$tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id );
 	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
-	$tag_processor->set_attribute( 'tabindex', 0 );
 
 	return (string) $tag_processor->get_updated_html();
 }
@@ -75,7 +52,7 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
  *
  * @hook init
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tab_panel() {
 	register_block_type_from_metadata(

package/src/tab-panel/remove-tab-toolbar-control.js

@@ -11,8 +11,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Remove Tab" button in the block toolbar for the tabs block.
- * Removes the currently active core/tab-panel and its corresponding
- * core/tab, keeping both in sync.
+ * Removes the currently active core/tab-panel. The tab-list items
+ * attribute is kept in sync automatically via useTabListItemsSync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
@@ -28,17 +28,17 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 
 	const {
 		activeTabPanelClientId,
-		activeTabClientId,
 		tabCount,
 		editorActiveTabIndex,
+		tabListClientId,
 	} = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
 					activeTabPanelClientId: null,
-					activeTabClientId: null,
 					tabCount: 0,
 					editorActiveTabIndex: 0,
+					tabListClientId: null,
 				};
 			}
 			const { getBlocks, getBlockAttributes } =
@@ -56,15 +56,13 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 				( block ) => block.name === 'core/tab-list'
 			);
 			const tabPanelBlocks = tabPanels?.innerBlocks || [];
-			const tabs = tabList?.innerBlocks || [];
 			const activeTabPanel = tabPanelBlocks[ activeIndex ];
-			const activeTab = tabs[ activeIndex ];
 
 			return {
 				activeTabPanelClientId: activeTabPanel?.clientId || null,
-				activeTabClientId: activeTab?.clientId || null,
-				tabCount: tabs.length,
+				tabCount: tabPanelBlocks.length,
 				editorActiveTabIndex: activeIndex,
+				tabListClientId: tabList?.clientId || null,
 			};
 		},
 		[ tabsClientId ]
@@ -86,14 +84,12 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			editorActiveTabIndex: newActiveIndex,
 		} );
 
-		// Remove the tab panel and corresponding tab
+		// Remove the tab panel.
 		removeBlock( activeTabPanelClientId, false );
-		if ( activeTabClientId ) {
-			removeBlock( activeTabClientId, false );
-		}
 
-		if ( tabsClientId ) {
-			selectBlock( tabsClientId );
+		// Select the tab-list so focus moves to the new active tab button.
+		if ( tabListClientId ) {
+			selectBlock( tabListClientId );
 		}
 	};
 

package/src/tab-panel/save.js

@@ -6,6 +6,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save() {
 	const blockProps = useBlockProps.save( {
 		role: 'tabpanel',
+		tabIndex: 0,
 	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 

package/src/tab-panel/style.scss

@@ -1,23 +1,6 @@
 .wp-block-tab-panel {
-	max-width: 100%;
-	flex-basis: 100%;
-	flex-grow: 1;
-	box-sizing: border-box;
-
-	& > *:first-child {
-		margin-top: 0;
-	}
-	& > *:last-child {
-		margin-bottom: 0;
-	}
-
 	&[hidden],
 	&:empty {
 		display: none !important;
 	}
 }
-
-.wp-block-tab-panel.wp-block.has-background,
-.wp-block-tab-panel:not(.wp-block).has-background {
-	padding: var(--wp--preset--spacing--30);
-}

package/src/tab-panels/README.md

@@ -0,0 +1,59 @@
+# Tab Panels
+
+<!-- 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>
+
+Container for tab panel content in a tabbed interface.
+
+- **Name:** `core/tab-panels`
+- **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:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
+
+## Block Relationships
+
+**[Parent](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#parent) blocks (direct):**
+- [`core/tabs`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tabs/)
+
+**[Allowed](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#allowed-blocks) inner blocks:**
+- [`core/tab-panel`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-panel/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+_This block has no custom attributes._
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
+- [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `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):
+  - `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`
+
+## Block Markup
+
+This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
+
+```html
+<!-- wp:tab-panels -->
+<!-- Content... -->
+<!-- /wp:tab-panels -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab-panels/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/tab-panels/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/tab-panels/block.json

@@ -9,19 +9,10 @@
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
 	"allowedBlocks": [ "core/tab-panel" ],
-	"attributes": {},
 	"supports": {
-		"anchor": false,
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
@@ -33,34 +24,17 @@
 			}
 		},
 		"spacing": {
-			"blockGap": false,
-			"padding": true,
-			"margin": true
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
 		},
-		"layout": {
-			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"justifyContent": "stretch",
-				"orientation": "vertical"
-			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": false,
-			"allowOrientation": false,
-			"allowJustification": true,
-			"allowSizingOnChildren": false
-		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,
 			"width": true,
 			"style": true
 		}
-	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	}
 }

package/src/tab-panels/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/table/README.md

@@ -0,0 +1,71 @@
+# Table
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Create structured content in rows and columns to display information.
+
+- **Name:** `core/table`
+- **Category:** [text](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
+
+## 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 |
+|-----------|------|---------|-------------|
+| `hasFixedLayout` | `boolean` | `true` | — |
+| `caption` | `rich-text` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `figcaption`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `head` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `thead tr` |
+| `body` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `tbody tr` |
+| `foot` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `tfoot tr` |
+
+## 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`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `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 Styles
+
+_Defined via the [`styles`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/) property in block.json._
+
+| Style Name | Label | Default |
+|------------|-------|---------|
+| `regular` | Default | Yes |
+| `stripes` | Stripes | No |
+
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **root**: `.wp-block-table > table`
+- **spacing**: `.wp-block-table`
+
+## Block Markup
+
+This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
+
+```html
+<!-- wp:core/table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
+<!-- /wp:core/table -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table/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/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/table/edit.js

@@ -563,7 +563,6 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
-							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -572,7 +571,6 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<TextControl
-							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Row count' ) }
 							value={ initialRowCount }