@wordpress/block-library 10.4.0 → 10.5.0

package/src/playlist-track/test/edit.js

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { useDispatch } from '@wordpress/data';
 import PlaylistTrackEdit from '../edit';
 import { PlaylistContext } from '../../playlist/context';
@@ -6,44 +6,43 @@ import { useUploadMediaFromBlobURL } from '../../utils/hooks';
 
 let mockMediaReplaceFlowProps;
 
-jest.mock( '@wordpress/block-editor', () => ( {
-	BlockControls: ( { children } ) => <div>{ children }</div>,
-	BlockIcon: () => <span />,
-	InspectorControls: ( { children } ) => <div>{ children }</div>,
-	MediaPlaceholder: () => <div />,
-	MediaReplaceFlow: ( props ) => {
-		mockMediaReplaceFlowProps = props;
-		const { name, onSelect } = props;
-		return <button onClick={ () => onSelect( {} ) }>{ name }</button>;
-	},
-	MediaUpload: ( { render: renderMediaUpload } ) =>
-		renderMediaUpload( { open: jest.fn() } ),
-	MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
-	PlainText: ( {
-		onChange,
-		placeholder,
-		tagName: TagName = 'div',
-		value,
-		__experimentalVersion,
-		...props
-	} ) => <TagName { ...props }>{ value || placeholder }</TagName>,
-	useBlockProps: jest.fn( () => ( {} ) ),
-} ) );
+jest.mock( '@wordpress/block-editor', () => {
+	const PlainText = jest.requireActual(
+		'../../../../block-editor/src/components/plain-text'
+	).default;
 
-jest.mock( '@wordpress/data', () => ( {
-	useDispatch: jest.fn(),
-	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
-		const newState = {};
-		Object.keys( reducers ).forEach( ( key ) => {
-			newState[ key ] = reducers[ key ]( state[ key ], action );
-		} );
-		return newState;
-	} ),
-	createRegistrySelector: jest.fn( ( fn ) => fn ),
-	createReduxStore: jest.fn( () => ( {} ) ),
-	createSelector: jest.fn( ( fn ) => fn ),
-	register: jest.fn(),
-} ) );
+	return {
+		BlockControls: ( { children } ) => <div>{ children }</div>,
+		BlockIcon: () => <span />,
+		InspectorControls: ( { children } ) => <div>{ children }</div>,
+		MediaPlaceholder: () => <div />,
+		MediaReplaceFlow: ( props ) => {
+			mockMediaReplaceFlowProps = props;
+			const { name, onSelect } = props;
+			return <button onClick={ () => onSelect( {} ) }>{ name }</button>;
+		},
+		MediaUpload: ( { render: renderMediaUpload } ) =>
+			renderMediaUpload( { open: jest.fn() } ),
+		MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
+		PlainText,
+		useBlockProps: jest.fn( () => ( {} ) ),
+	};
+} );
+
+jest.mock( '@wordpress/data', () => {
+	const data = jest.requireActual( '@wordpress/data' );
+	const mockUseDispatch = jest.fn();
+
+	return new Proxy( data, {
+		get( target, property ) {
+			if ( property === 'useDispatch' ) {
+				return mockUseDispatch;
+			}
+
+			return target[ property ];
+		},
+	} );
+} );
 
 jest.mock( '@wordpress/notices', () => ( {
 	store: 'core/notices',
@@ -53,6 +52,10 @@ jest.mock( '../../utils/hooks', () => ( {
 	useUploadMediaFromBlobURL: jest.fn(),
 } ) );
 
+// The handler only forwards the message to a notice, so its text is
+// irrelevant to what these tests check.
+const UPLOAD_ERROR = 'Upload failed.';
+
 const defaultAttributes = {
 	id: 1,
 	src: 'https://example.com/song.mp3',
@@ -67,12 +70,14 @@ const defaultAttributes = {
 function renderEdit( props = {} ) {
 	const setAttributes = jest.fn();
 	const setCurrentTrackClientId = props.setCurrentTrackClientId || jest.fn();
+	const removeTrack = props.removeTrack || jest.fn();
 
 	render(
 		<PlaylistContext.Provider
 			value={ {
 				currentTrackClientId: props.currentTrackClientId ?? null,
 				setCurrentTrackClientId,
+				removeTrack,
 			} }
 		>
 			<PlaylistTrackEdit
@@ -92,7 +97,7 @@ function renderEdit( props = {} ) {
 		</PlaylistContext.Provider>
 	);
 
-	return { setAttributes, setCurrentTrackClientId };
+	return { setAttributes, setCurrentTrackClientId, removeTrack };
 }
 
 describe( 'PlaylistTrackEdit', () => {
@@ -104,6 +109,43 @@ describe( 'PlaylistTrackEdit', () => {
 		useUploadMediaFromBlobURL.mockClear();
 	} );
 
+	it( 'shows the title control for a single selected playlist track', () => {
+		renderEdit( { isSelected: true } );
+
+		expect(
+			screen.getByRole( 'textbox', { name: 'Title' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'shows the replace track control for a single selected playlist track', () => {
+		renderEdit( { isSelected: true } );
+
+		expect( mockMediaReplaceFlowProps ).toBeDefined();
+	} );
+
+	it( 'does not show the replace track control when multiple playlist tracks are selected', () => {
+		renderEdit( { isSelected: false } );
+
+		expect( mockMediaReplaceFlowProps ).toBeUndefined();
+	} );
+
+	it( 'does not show the title control when multiple playlist tracks are selected', () => {
+		// The track inspector only renders for the selected block, or for the
+		// first block of a same-type multi-selection, where `isSelected` is
+		// false.
+		renderEdit( { isSelected: false } );
+
+		expect(
+			screen.queryByRole( 'textbox', { name: 'Title' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'textbox', { name: 'Artist' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'textbox', { name: 'Album' } )
+		).toBeInTheDocument();
+	} );
+
 	it( 'allows the track image alternative text to be edited', () => {
 		const { setAttributes } = renderEdit();
 
@@ -169,6 +211,7 @@ describe( 'PlaylistTrackEdit', () => {
 		renderEdit( {
 			attributes: {
 				blob: 'blob:https://example.com/temporary-track',
+				length: undefined,
 				src: undefined,
 			},
 		} );
@@ -178,10 +221,71 @@ describe( 'PlaylistTrackEdit', () => {
 				url: 'blob:https://example.com/temporary-track',
 			} )
 		);
+		const trackButton = screen.getByRole( 'button', {
+			name: /Song One/,
+		} );
+
+		expect(
+			within( trackButton ).getByRole( 'presentation', { hidden: true } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'removes the track when its initial upload fails', () => {
+		const createErrorNotice = jest.fn();
+		const removeBlock = jest.fn();
+		useDispatch.mockReturnValue( { createErrorNotice, removeBlock } );
+
+		const { removeTrack } = renderEdit( {
+			attributes: {
+				blob: 'blob:https://example.com/temporary-track',
+				id: undefined,
+				length: undefined,
+				src: undefined,
+			},
+			clientId: 'temporary-track',
+		} );
+
+		const { onError } = useUploadMediaFromBlobURL.mock.calls[ 0 ][ 0 ];
+		act( () => {
+			onError( UPLOAD_ERROR );
+		} );
+
+		expect( createErrorNotice ).toHaveBeenCalled();
+		// The playlist owns its inner blocks: removing the track directly
+		// would take an unmodified playlist with it.
+		expect( removeTrack ).toHaveBeenCalledWith( 'temporary-track' );
+		expect( removeBlock ).not.toHaveBeenCalled();
+	} );
+
+	// `onUploadError` also fires when replacing an existing track's media, so
+	// removing the block unconditionally would discard the original track.
+	it( 'keeps a track that already has a source when an upload fails', () => {
+		const createErrorNotice = jest.fn();
+		const removeBlock = jest.fn();
+		useDispatch.mockReturnValue( { createErrorNotice, removeBlock } );
+
+		const { setAttributes } = renderEdit( {
+			clientId: 'existing-track',
+			isSelected: true,
+		} );
+
+		// A failed replacement is reported by MediaReplaceFlow, not the
+		// blob uploader, which never runs for a track that has a source.
+		act( () => {
+			mockMediaReplaceFlowProps.onError( UPLOAD_ERROR );
+		} );
+
+		expect( createErrorNotice ).toHaveBeenCalled();
+		expect( removeBlock ).not.toHaveBeenCalled();
+		// The original track is left untouched, so its source still plays.
+		expect( setAttributes ).not.toHaveBeenCalled();
+		expect(
+			screen.getByRole( 'button', { name: /Song One/ } )
+		).toBeInTheDocument();
 	} );
 
 	it( 'preserves the current track source when a replacement upload fails', () => {
-		const { setAttributes } = renderEdit();
+		const { setAttributes } = renderEdit( { isSelected: true } );
 
 		mockMediaReplaceFlowProps.onSelect();
 
@@ -192,7 +296,7 @@ describe( 'PlaylistTrackEdit', () => {
 	} );
 
 	it( 'accepts raw uploaded attachment data when replacing a track', () => {
-		const { setAttributes } = renderEdit();
+		const { setAttributes } = renderEdit( { isSelected: true } );
 
 		mockMediaReplaceFlowProps.onSelect( {
 			id: 2,

package/src/post-comments-form/style.scss

@@ -59,15 +59,6 @@
 		}
 	}
 
-	.comment-form-author,
-	.comment-form-email,
-	.comment-form-url {
-		label {
-			display: block;
-			margin-bottom: 0.25em;
-		}
-	}
-
 	.comment-form-cookies-consent {
 		display: flex;
 		gap: 0.25em;
@@ -85,3 +76,10 @@
 		}
 	}
 }
+
+:where(.wp-block-post-comments-form .comment-form-author label),
+:where(.wp-block-post-comments-form .comment-form-email label),
+:where(.wp-block-post-comments-form .comment-form-url label) {
+	display: block;
+	margin-bottom: 0.25em;
+}

package/src/post-template/edit.js

@@ -14,10 +14,19 @@ import { Spinner, ToolbarGroup } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { list, grid } from '@wordpress/icons';
 
+// The Post Template's layout attribute arranges the post items, not the
+// blocks of the template, which always stack vertically inside each post
+// item. Override the inherited layout so inner block UI (movers, inserters,
+// grid controls) doesn't follow the post items' grid.
+const INNER_BLOCKS_LAYOUT = { type: 'default' };
+
 function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: clsx( 'wp-block-post', classList ) },
-		{ __unstableDisableLayoutClassNames: true }
+		{
+			__unstableDisableLayoutClassNames: true,
+			layout: INNER_BLOCKS_LAYOUT,
+		}
 	);
 	return <li { ...innerBlocksProps } />;
 }

package/src/post-title/edit.js

@@ -14,7 +14,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
@@ -24,7 +23,6 @@ export default function PostTitleEdit( {
 	attributes: { level, levelOptions, isLink, rel, linkTarget, placeholder },
 	setAttributes,
 	context: { postType, postId, queryId },
-	insertBlocksAfter,
 } ) {
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
@@ -56,11 +54,6 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
-	const onSplitAtEnd = insertBlocksAfter
-		? () => {
-				insertBlocksAfter( createBlock( getDefaultBlockName() ) );
-		  }
-		: undefined;
 	const blockProps = useBlockProps();
 	const blockEditingMode = useBlockEditingMode();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -77,7 +70,7 @@ export default function PostTitleEdit( {
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
-				__unstableOnSplitAtEnd={ onSplitAtEnd }
+				disableLineBreaks
 				{ ...blockProps }
 			/>
 		) : (
@@ -104,7 +97,7 @@ export default function PostTitleEdit( {
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
-					__unstableOnSplitAtEnd={ onSplitAtEnd }
+					disableLineBreaks
 				/>
 			</TagName>
 		) : (

package/src/private-apis.js

@@ -1,4 +1,3 @@
-import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from './navigation/constants';
 import { NavigationLinkUI } from './navigation/edit/navigation-link-ui';
 import { lock } from './lock-unlock';
@@ -8,7 +7,6 @@ import { lock } from './lock-unlock';
  */
 export const privateApis = {};
 lock( privateApis, {
-	BlockKeyboardShortcuts,
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
 	NavigationLinkUI,
 } );

package/src/query/README.md

@@ -29,6 +29,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`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`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
 
 ## Context

package/src/query/block.json

@@ -55,6 +55,9 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"layout": true,
+		"spacing": {
+			"blockGap": true
+		},
 		"interactivity": true
 	},
 	"editorStyle": "wp-block-query-editor"

package/src/query-no-results/README.md

@@ -30,6 +30,9 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
   - [`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`
+  - `margin`: `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`

package/src/query-no-results/block.json

@@ -17,6 +17,14 @@
 			"gradients": true,
 			"link": true
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -32,6 +40,13 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-query-no-results"
 }

package/src/query-no-results/style.scss

@@ -0,0 +1,5 @@
+// Lowest specificity so parent layout can still enforce width.
+:where(.wp-block-query-no-results) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/rss/edit.js

@@ -12,7 +12,7 @@ import {
 	ToolbarGroup,
 	TextControl,
 	ExternalLink,
-	__experimentalInputControl as InputControl,
+	__experimentalInputControl as WCInputControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -88,7 +88,7 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<InputControl
+						<WCInputControl
 							label={ label }
 							type="url"
 							hideLabelFromVision

package/src/search/style.scss

@@ -37,7 +37,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
 	width: 100%;
 }
 

package/src/search/theme.scss

@@ -1,7 +1,5 @@
-.wp-block-search {
-	.wp-block-search__label {
-		font-weight: bold;
-	}
+:where(.wp-block-search .wp-block-search__label) {
+	font-weight: bold;
 }
 
 .wp-block-search__button {

package/src/site-logo/edit.js

@@ -344,7 +344,7 @@ const SiteLogo = ( {
 							}
 							aria-haspopup="dialog"
 							icon={ crop }
-							label={ __( 'Crop' ) }
+							label={ __( 'Edit image' ) }
 						/>
 					</BlockControls>
 				) }

package/src/site-title/edit.js

@@ -14,7 +14,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
@@ -22,7 +21,7 @@ import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 export default function SiteTitleEdit( props ) {
 	useDeprecatedTextAlign( props );
 
-	const { attributes, setAttributes, insertBlocksAfter } = props;
+	const { attributes, setAttributes } = props;
 
 	const { level, levelOptions, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
@@ -66,14 +65,6 @@ export default function SiteTitleEdit( props ) {
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
-				__unstableOnSplitAtEnd={
-					insertBlocksAfter
-						? () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-						: undefined
-				}
 			/>
 		</TagName>
 	) : (

package/src/social-link/index.php

@@ -10,10 +10,9 @@
  *
  * @since 5.4.0
  *
- * @param Array    $attributes The block attributes.
- * @param String   $content    InnerBlocks content of the Block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    InnerBlocks content of the Block.
  * @param WP_Block $block      Block object.
- *
  * @return string Rendered HTML of the referenced block.
  */
 function render_block_core_social_link( $attributes, $content, $block ) {
@@ -39,7 +38,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	/**
+	/*
 	 * Prepend emails with `mailto:` if not set.
 	 * The `is_email` returns false for emails with schema.
 	 */
@@ -47,7 +46,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		$url = 'mailto:' . antispambot( $url );
 	}
 
-	/**
+	/*
 	 * Prepend URL with https:// if it doesn't appear to contain a scheme
 	 * and it's not a relative link or a fragment.
 	 */
@@ -95,14 +94,12 @@ function register_block_core_social_link() {
 }
 add_action( 'init', 'register_block_core_social_link' );
 
-
 /**
  * Returns the SVG for social link.
  *
  * @since 5.4.0
  *
  * @param string $service The service icon.
- *
  * @return string SVG Element for service icon.
  */
 function block_core_social_link_get_icon( $service ) {
@@ -120,7 +117,6 @@ function block_core_social_link_get_icon( $service ) {
  * @since 5.4.0
  *
  * @param string $service The service icon.
- *
  * @return string Brand label.
  */
 function block_core_social_link_get_name( $service ) {
@@ -138,8 +134,7 @@ function block_core_social_link_get_name( $service ) {
  * @since 5.4.0
  *
  * @param string $service The service slug to extract data from.
- * @param string $field The field ('name', 'icon', etc) to extract for a service.
- *
+ * @param string $field   The field ('name', 'icon', etc) to extract for a service.
  * @return array|string
  */
 function block_core_social_link_services( $service = '', $field = '' ) {
@@ -346,7 +341,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 	);
 
 	/**
-	 * Filter the list of available social service.
+	 * Filters the list of available social service.
 	 *
 	 * This can be used to change icons or add custom icons (additionally to variations in the editor).
 	 * Icons should be directly renderable - therefore SVGs work best.
@@ -377,7 +372,6 @@ function block_core_social_link_services( $service = '', $field = '' ) {
  * @since 5.7.0
  *
  * @param array $context Block context passed to Social Link.
- *
  * @return string Inline CSS styles for link's icon and background colors.
  */
 function block_core_social_link_get_color_styles( $context ) {
@@ -400,7 +394,6 @@ function block_core_social_link_get_color_styles( $context ) {
  * @since 6.3.0
  *
  * @param array $context Block context passed to Social Sharing Link.
- *
  * @return string CSS classes for link's icon and background colors.
  */
 function block_core_social_link_get_color_classes( $context ) {

package/src/style.scss

@@ -60,6 +60,7 @@
 @use "./preformatted/style.scss" as *;
 @use "./pullquote/style.scss" as *;
 @use "./post-template/style.scss" as *;
+@use "./query-no-results/style.scss" as *;
 @use "./query-pagination/style.scss" as *;
 @use "./query-title/style.scss" as *;
 @use "./query-total/style.scss" as *;

package/src/tab-panel/index.php

@@ -22,10 +22,10 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
 	static $tab_counters = array();
 
 	if ( ! isset( $tab_counters[ $tabs_id ] ) ) {
-		$tab_counters[ $tabs_id ] = 0;
+		$tab_counters[ $tabs_id ] = 1;
 	}
 
-	$tab_index = $tab_counters[ $tabs_id ];
+	$tab_number = $tab_counters[ $tabs_id ];
 	++$tab_counters[ $tabs_id ];
 
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
@@ -36,13 +36,22 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
 	$tab_id = (string) $tag_processor->get_attribute( 'id' );
 	if ( empty( $tab_id ) ) {
 		$tab_id = ! empty( $tabs_id )
-			? $tabs_id . '-tab-' . $tab_index
-			: 'tab-' . $tab_index;
+			? $tabs_id . '-tab-' . $tab_number
+			: 'tab-' . $tab_number;
 		$tag_processor->set_attribute( 'id', $tab_id );
 	}
 
 	$tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id );
-	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
+
+	/*
+	 * Hiding a panel is left to the client, which is why `hidden` is bound to a
+	 * state getter the server cannot resolve rather than set here: a visitor
+	 * whose browser never runs the block's script is then given the content of
+	 * every panel instead of none of it. `core/accordion` works the same way.
+	 */
+	$tag_processor->set_attribute( 'data-wp-bind--hidden', 'state.isHidden' );
+	$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
+	$tag_processor->set_attribute( 'data-wp-on--beforematch', 'actions.handleBeforeMatch' );
 
 	return (string) $tag_processor->get_updated_html();
 }

package/src/tab-panel/style.scss

@@ -1,6 +1,12 @@
 .wp-block-tab-panel {
-	&[hidden],
 	&:empty {
 		display: none !important;
 	}
+
+	// Prevent blockGap and padding from adding extra spacing when the panel is
+	// closed, which the panel would otherwise keep along with its layout box.
+	&[hidden] {
+		margin-block-start: 0;
+		padding: 0 !important;
+	}
 }