@wordpress/block-library 9.48.1 → 10.0.0

package/src/tab-list/README.md

@@ -15,42 +15,33 @@ Display the tab buttons for a tabbed interface.
 **[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`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab/)
-
 ## 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._
+| 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 |
+|-----------|------|---------|-------------|
+| `tabs` | `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): `button` |
 
 ## 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`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `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`
-- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
-  - `aspectRatio`: `false`
-  - `height`: `false`
-  - `minHeight`: `false`
-  - `width`: `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`
 - [`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`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
-  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"}`
-  - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
-  - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true`
-  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
-  - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true`
+  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap"}`
+  - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false`
+  - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false`
+  - [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `padding`: `true`
-  - `margin`: `true`
   - `blockGap`: `true`
 
 ## Context
@@ -61,12 +52,23 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 
 - `core/tabs-list`
 
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **border**: `.wp-block-tab-list button`
+- **color**:
+  - background: `.wp-block-tab-list button`
+  - text: `.wp-block-tab-list button`
+- **spacing**:
+  - padding: `.wp-block-tab-list button`
+
 ## 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-list -->
+<!-- wp:tab-list {"tabs":[]} -->
 <!-- Content... -->
 <!-- /wp:tab-list -->
 ```

package/src/tab-list/block.json

@@ -8,23 +8,29 @@
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
-	"attributes": {},
+	"attributes": {
+		"tabs": {
+			"type": "array",
+			"source": "query",
+			"selector": "button",
+			"query": {
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			},
+			"default": []
+		}
+	},
 	"supports": {
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -38,30 +44,37 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalSkipSerialization": true
 		},
 		"layout": {
 			"default": {
 				"type": "flex",
-				"flexWrap": "nowrap",
-				"orientation": "horizontal"
+				"flexWrap": "nowrap"
 			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowWrap": false
 		},
 		"spacing": {
 			"padding": true,
-			"margin": true,
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "padding" ],
 			"__experimentalDefaultControls": {
 				"padding": true,
-				"margin": true,
 				"blockGap": true
 			}
 		}
 	},
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css"
+	"selectors": {
+		"border": ".wp-block-tab-list button",
+		"color": {
+			"background": ".wp-block-tab-list button",
+			"text": ".wp-block-tab-list button"
+		},
+		"spacing": {
+			"padding": ".wp-block-tab-list button"
+		}
+	},
+	"style": "wp-block-tab-list"
 }

package/src/tab-list/edit.js

@@ -1,12 +1,22 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,30 +24,158 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
-const TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];
+const EMPTY_ARRAY = [];
+
+function Edit( {
+	attributes,
+	clientId,
+	context,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
+	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
+
+	const colorProps = useColorProps( attributes );
+	const borderProps = useBorderProps( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
 
-function Edit( { clientId } ) {
-	const tabsClientId = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockRootClientId( clientId ),
+	const { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getBlockAttributes } =
+				select( blockEditorStore );
+
+			const _tabsClientId = getBlockRootClientId( clientId );
+			const tabsAttributes = _tabsClientId
+				? getBlockAttributes( _tabsClientId )
+				: {};
+
+			return {
+				tabsClientId: _tabsClientId,
+				editorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,
+				activeTabIndex: tabsAttributes?.activeTabIndex ?? 0,
+			};
+		},
 		[ clientId ]
 	);
 
-	const blockProps = useBlockProps();
+	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+
+	const handleTabClick = useCallback(
+		( tabIndex ) => {
+			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabIndex,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/tab' ],
-		orientation: 'horizontal',
-		template: TAB_LIST_TEMPLATE,
-		templateLock: false,
-		renderAppender: false,
+	const handleLabelChange = useCallback(
+		( tabIndex, newLabel ) => {
+			const tab = tabsList[ tabIndex ];
+			if ( tab?.clientId ) {
+				updateBlockAttributes( tab.clientId, { label: newLabel } );
+			}
+		},
+		[ tabsList, updateBlockAttributes ]
+	);
+
+	const menuRef = useRef();
+	const prevTabCountRef = useRef( tabsList.length );
+
+	// When tabs are added or removed, focus the appropriate button.
+	useEffect( () => {
+		const prevCount = prevTabCountRef.current;
+		prevTabCountRef.current = tabsList.length;
+
+		if ( ! menuRef.current || tabsList.length === prevCount ) {
+			return;
+		}
+
+		const focusButtonAt = ( index ) => {
+			window.requestAnimationFrame( () => {
+				const buttons = menuRef.current?.querySelectorAll( 'button' );
+				const target = buttons?.[ index ];
+				if ( ! target ) {
+					return;
+				}
+				const richText = target.querySelector( '[contenteditable]' );
+				if ( richText ) {
+					richText.focus();
+				} else {
+					target.focus();
+				}
+			} );
+		};
+
+		if ( tabsList.length > prevCount ) {
+			// Tab added — focus the last (newly added) button.
+			focusButtonAt( tabsList.length - 1 );
+		} else {
+			// Tab removed — focus the new active button.
+			focusButtonAt( effectiveActiveIndex );
+		}
+	}, [ tabsList.length, effectiveActiveIndex ] );
+
+	const blockProps = useBlockProps( {
+		role: 'tablist',
+		ref: menuRef,
+		// Applied manually since this block has no inner blocks for the layout
+		// support to add its container classes to.
+		className: layoutClassNames,
 	} );
 
+	const buttonClassName = clsx( colorProps.className, borderProps.className );
+
+	const buttonStyle = {
+		...colorProps.style,
+		...borderProps.style,
+		...spacingProps.style,
+	};
+
 	return (
 		<>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<div { ...innerBlocksProps } />
+			<div { ...blockProps }>
+				{ tabsList.map( ( tab, index ) => {
+					const isActive = index === effectiveActiveIndex;
+					return (
+						<button
+							key={ tab.clientId || index }
+							type="button"
+							role="tab"
+							aria-selected={ isActive }
+							className={ buttonClassName || undefined }
+							style={ buttonStyle }
+							tabIndex={ -1 }
+							onClick={ ( event ) => {
+								event.preventDefault();
+								handleTabClick( index );
+							} }
+						>
+							<RichText
+								tagName="span"
+								withoutInteractiveFormatting
+								placeholder={ __( 'Tab title' ) }
+								value={ tab.label }
+								onChange={ ( newLabel ) =>
+									handleLabelChange( index, newLabel )
+								}
+							/>
+						</button>
+					);
+				} ) }
+			</div>
 		</>
 	);
 }

package/src/tab-list/index.php

@@ -8,14 +8,15 @@
 /**
  * Render callback for core/tab-list.
  *
- * Re-renders each tab inner block with per-item context (index, id,
- * label) injected from the tabs-list, so the tab render callback
- * can add the correct IAPI directives for each button.
+ * Injects IAPI directives into the saved button HTML. The buttons already
+ * carry color/border/padding styles from save.js; this callback adds
+ * tab-specific attributes (id, aria-controls, context) and interactivity
+ * directives using data from the tabs-list context.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
- * @param string    $content    Block content (rendered inner blocks from save.js).
+ * @param string    $content    Block content (rendered buttons from save.js).
  * @param \WP_Block $block      WP_Block instance.
  *
  * @return string Updated HTML.
@@ -27,47 +28,37 @@ function block_core_tab_list_render_callback( array $attributes, string $content
 		return $content;
 	}
 
-	// Re-render each tab with per-item context (index, id, label).
-	// Match by position so items align with their corresponding tabs.
-	$buttons_html = '';
-	$tab_position = 0;
+	$tag_processor = new WP_HTML_Tag_Processor( $content );
+	$tab_index     = 0;
 
-	foreach ( $block->parsed_block['innerBlocks'] ?? array() as $parsed_tab ) {
-		if ( 'core/tab' !== ( $parsed_tab['blockName'] ?? '' ) ) {
-			continue;
-		}
-
-		$tab       = $tabs_list[ $tab_position ] ?? null;
-		$tab_index = $tab_position;
-		++$tab_position;
+	while ( $tag_processor->next_tag( 'button' ) ) {
+		$tab_id = $tabs_list[ $tab_index ] ?? null;
 
-		// Skip tabs with no matching tab panel.
-		if ( null === $tab ) {
-			continue;
+		if ( null === $tab_id ) {
+			break;
 		}
 
-		$item_context = array_merge(
-			$block->context,
-			array(
-				'core/tab-index' => $tab_index,
-				'core/tab-id'    => $tab['id'] ?? '',
-				'core/tab-label' => $tab['label'] ?? '',
-			)
+		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
+		$tag_processor->set_attribute( 'aria-controls', $tab_id );
+		$tag_processor->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
+		$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
+		$tag_processor->set_attribute( 'data-wp-bind--aria-selected', 'state.isActiveTab' );
+		$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
+		$tag_processor->set_attribute(
+			'data-wp-context',
+			wp_json_encode( array( 'tabIndex' => $tab_index ) )
 		);
 
-		$tab_block     = new WP_Block( $parsed_tab, $item_context );
-		$buttons_html .= $tab_block->render();
+		++$tab_index;
 	}
 
-	// Rebuild the wrapper using get_block_wrapper_attributes().
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'role' => 'tablist' ) );
-	return sprintf( '<div %s>%s</div>', $wrapper_attributes, $buttons_html );
+	return $tag_processor->get_updated_html();
 }
 
 /**
  * Registers the `core/tab-list` block on the server.
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tab_list() {
 	register_block_type_from_metadata(

package/src/tab-list/init.js

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

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

@@ -29,7 +29,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`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`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `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`
@@ -37,10 +36,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `blockGap`: `true`
   - `padding`: `true`
-  - `margin`: `false`
 - [`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`
-- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true`
 - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
 
 ## Context

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"
 }