@wordpress/block-library 10.0.1 → 10.1.1-next.v.202607070741.0

package/src/playlist/edit.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { v4 as uuid } from 'uuid';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
@@ -38,6 +37,7 @@ import { createBlock } from '@wordpress/blocks';
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { WaveformPlayer } from '../utils/waveform-player';
+import { PlaylistContext } from './context';
 import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
@@ -56,21 +56,19 @@ const PlaylistEdit = ( {
 		showImages,
 		showArtists,
 		showTrackLength,
-		currentTrack,
 	} = attributes;
 
 	// Extract the waveform style from the block style variation class.
 	const waveformStyle =
 		attributes.className?.match( /is-style-([\w-]+)/ )?.[ 1 ] || 'bars';
 	const blockProps = useBlockProps();
-	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const [ currentTrackClientId, setCurrentTrackClientId ] = useState( null );
 
 	const { innerBlockTracks } = useSelect(
 		( select ) => {
@@ -82,61 +80,44 @@ const PlaylistEdit = ( {
 		[ clientId ]
 	);
 
-	// Ensure that each inner block has a unique ID,
-	// even if a track is duplicated.
-	useEffect( () => {
-		const seen = new Set();
-		let hasDuplicates = false;
-		const updatedBlocks = innerBlockTracks.map( ( block ) => {
-			if ( seen.has( block.attributes.uniqueId ) ) {
-				hasDuplicates = true;
-				return {
-					...block,
-					attributes: {
-						...block.attributes,
-						uniqueId: uuid(),
-					},
-				};
-			}
-			seen.add( block.attributes.uniqueId );
-			return block;
-		} );
-		if ( hasDuplicates ) {
-			replaceInnerBlocks( clientId, updatedBlocks );
-		}
-	}, [ innerBlockTracks, clientId, replaceInnerBlocks ] );
-
 	// Create a list of tracks from the inner blocks,
-	// but skip blocks that do not have a uniqueId attribute, such as the media placeholder.
-	const validTracks = innerBlockTracks.filter(
-		( block ) => !! block.attributes.uniqueId
+	// but skip blocks that do not have a source, such as the media placeholder.
+	const validTracks = useMemo(
+		() =>
+			innerBlockTracks.filter(
+				( block ) => !! block.attributes.src || !! block.attributes.blob
+			),
+		[ innerBlockTracks ]
+	);
+	const tracks = useMemo(
+		() =>
+			validTracks.map( ( block ) => ( {
+				...block.attributes,
+				clientId: block.clientId,
+			} ) ),
+		[ validTracks ]
 	);
-	const tracks = validTracks.map( ( block ) => block.attributes );
-	const firstTrackId = validTracks[ 0 ]?.attributes?.uniqueId;
 
-	// updateBlockAttributes is used to force updating the parent playlist block
-	// when the currentTrack changes. Using setAttributes directly does not update
-	// the currentTrack when multiple tracks are moved at the same time.
 	useEffect( () => {
-		if ( tracks.length === 0 ) {
-			// If there are no tracks but currentTrack is set, set it to null.
-			if ( currentTrack !== null ) {
-				updateBlockAttributes( clientId, { currentTrack: null } );
+		if ( validTracks.length === 0 ) {
+			if ( currentTrackClientId !== null ) {
+				setCurrentTrackClientId( null );
 			}
-		} else if (
-			// If the currentTrack is not the first track, update it to the first track.
-			firstTrackId &&
-			firstTrackId !== currentTrack
-		) {
-			updateBlockAttributes( clientId, { currentTrack: firstTrackId } );
+			return;
 		}
-	}, [
-		tracks,
-		currentTrack,
-		firstTrackId,
-		clientId,
-		updateBlockAttributes,
-	] );
+
+		const currentTrackExists = validTracks.some(
+			( block ) => block.clientId === currentTrackClientId
+		);
+		if ( ! currentTrackExists ) {
+			setCurrentTrackClientId( validTracks[ 0 ].clientId );
+		}
+	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
+
+	const playlistContext = useMemo(
+		() => ( { currentTrackClientId, setCurrentTrackClientId } ),
+		[ currentTrackClientId, setCurrentTrackClientId ]
+	);
 
 	const onSelectTracks = useCallback(
 		( media ) => {
@@ -149,41 +130,32 @@ const PlaylistEdit = ( {
 			}
 
 			const trackList = media.map( getTrackAttributes );
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				currentTrack:
-					trackList.length > 0 ? trackList[ 0 ].uniqueId : null,
-			} );
 
 			const newBlocks = trackList.map( ( track ) =>
 				createBlock( 'core/playlist-track', track )
 			);
+			setCurrentTrackClientId( newBlocks[ 0 ]?.clientId ?? null );
 			// Replace the inner blocks with the new tracks.
 			replaceInnerBlocks( clientId, newBlocks );
 		},
-		[
-			__unstableMarkNextChangeAsNotPersistent,
-			setAttributes,
-			replaceInnerBlocks,
-			clientId,
-		]
+		[ replaceInnerBlocks, clientId, setCurrentTrackClientId ]
 	);
 
-	// Get current track data by finding the track with matching uniqueId.
-	const currentTrackData = tracks.find(
-		( track ) => track.uniqueId === currentTrack
-	);
+	// Get current track data by finding the track with matching client ID.
+	const currentTrackData =
+		tracks.find( ( track ) => track.clientId === currentTrackClientId ) ??
+		tracks[ 0 ];
 
 	// Handle track end - advance to next track or loop to first.
 	const onTrackEnded = useCallback( () => {
 		const currentIndex = tracks.findIndex(
-			( track ) => track.uniqueId === currentTrack
+			( track ) => track.clientId === currentTrackClientId
 		);
 		const nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];
-		if ( nextTrack?.uniqueId ) {
-			setAttributes( { currentTrack: nextTrack.uniqueId } );
+		if ( nextTrack?.clientId ) {
+			setCurrentTrackClientId( nextTrack.clientId );
 		}
-	}, [ currentTrack, tracks, setAttributes ] );
+	}, [ currentTrackClientId, setCurrentTrackClientId, tracks ] );
 
 	const onChangeOrder = useCallback(
 		( trackOrder ) => {
@@ -196,22 +168,18 @@ const PlaylistEdit = ( {
 				}
 				return titleB.localeCompare( titleA );
 			} );
-			const firstUniqueId = sortedBlocks[ 0 ]?.attributes?.uniqueId;
 			replaceInnerBlocks( clientId, sortedBlocks );
+			setCurrentTrackClientId( sortedBlocks[ 0 ]?.clientId ?? null );
 			setAttributes( {
 				order: trackOrder,
-				currentTrack:
-					firstUniqueId && firstUniqueId !== currentTrack
-						? firstUniqueId
-						: currentTrack,
 			} );
 		},
 		[
 			clientId,
-			currentTrack,
 			innerBlockTracks,
 			replaceInnerBlocks,
 			setAttributes,
+			setCurrentTrackClientId,
 		]
 	);
 
@@ -379,7 +347,6 @@ const PlaylistEdit = ( {
 						onDeselect={ () => setAttributes( { order: 'asc' } ) }
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Order' ) }
 							value={ order }
 							options={ [
@@ -411,7 +378,9 @@ const PlaylistEdit = ( {
 								! showTrackLength,
 						} ) }
 					>
-						{ innerBlocksProps.children }
+						<PlaylistContext.Provider value={ playlistContext }>
+							{ innerBlocksProps.children }
+						</PlaylistContext.Provider>
 					</ol>
 				) }
 				<Caption

package/src/playlist/index.php

@@ -17,28 +17,23 @@
  * @return string Returns the Playlist.
  */
 function render_block_core_playlist( $attributes, $content, $block ) {
-	if ( empty( $attributes['currentTrack'] ) ) {
-		return '';
-	}
-
-	$current_media_id  = $attributes['currentTrack'];
-	$playlist_id       = wp_unique_id( 'playlist-' );
-	$playlist_tracks   = array();
-	$tracks_data       = array();
-	$current_unique_id = null;
+	$playlist_id     = wp_unique_id( 'playlist-' );
+	$playlist_tracks = array();
+	$tracks_data     = array();
 
 	// Parse inner blocks to extract track data.
 	// This approach avoids duplicating track data in the HTML output.
 	if ( ! empty( $block->inner_blocks ) ) {
 		foreach ( $block->inner_blocks as $inner_block ) {
 			if ( 'core/playlist-track' === $inner_block->name ) {
-				$inner_block->context['playlistId'] = $playlist_id;
+				$track_attributes = $inner_block->attributes;
 
-				$track_attributes  = $inner_block->attributes;
-				$unique_id         = $track_attributes['uniqueId'] ?? wp_unique_id( 'playlist-track-' );
-				$playlist_tracks[] = $unique_id;
+				if ( empty( $track_attributes['id'] ) ) {
+					continue;
+				}
 
-				$inner_block->attributes['uniqueId'] = $unique_id;
+				$track_id          = 'track-' . count( $playlist_tracks );
+				$playlist_tracks[] = $track_id;
 
 				// Extract track metadata from block attributes.
 				$title      = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' );
@@ -61,7 +56,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				// Data is passed to wp_interactivity_state() which JSON-encodes it,
 				// so we use wp_strip_all_tags() instead of esc_html() to prevent
 				// HTML injection without double-encoding. URLs still use esc_url().
-				$tracks_data[ $unique_id ] = array(
+				$tracks_data[ $track_id ] = array(
 					'url'       => esc_url( $url ),
 					'title'     => wp_strip_all_tags( $title ),
 					'artist'    => wp_strip_all_tags( $artist ),
@@ -69,18 +64,11 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 					'image'     => esc_url( $image ),
 					'ariaLabel' => wp_strip_all_tags( $aria_label ),
 				);
-
-				if ( $unique_id === $current_media_id ) {
-					$current_unique_id = $unique_id;
-				}
 			}
 		}
 	}
 
-	// If there are no tracks but there is a currentTrack set, do not render the block.
-	// This can happen for example if the currentTrack was not deleted correctly
-	// or if the block is manually edited in the code editor mode.
-	if ( empty( $playlist_tracks ) || ! in_array( $current_media_id, $playlist_tracks, true ) ) {
+	if ( empty( $playlist_tracks ) ) {
 		return '';
 	}
 
@@ -108,7 +96,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 		data-label-pause="' . $label_pause . '"
 	></div>';
 
-	// Add the HTML for the current track inside the figure.
+	// Add the waveform player container inside the figure.
 	$figure = null;
 	preg_match( '/<figure[^>]*>/', $content, $figure );
 	if ( ! empty( $figure[0] ) ) {
@@ -126,16 +114,39 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 
 	$processor->set_attribute(
 		'data-wp-context',
-		json_encode(
+		wp_json_encode(
 			array(
 				'playlistId'    => $playlist_id,
-				'currentId'     => $current_unique_id,
+				'currentId'     => $playlist_tracks[0],
 				'tracks'        => $playlist_tracks,
 				'waveformStyle' => $waveform_style,
 			)
 		)
 	);
 
+	// Track IDs are render-time only. Add them after inner blocks have rendered
+	// so track buttons can update the Interactivity API state without storing
+	// persistent unique IDs in post content.
+	$track_index = 0;
+	while ( $processor->next_tag( array( 'class_name' => 'wp-block-playlist-track__button' ) ) ) {
+		$track_id = $playlist_tracks[ $track_index ] ?? null;
+
+		if ( null === $track_id ) {
+			break;
+		}
+
+		$processor->set_attribute(
+			'data-wp-context',
+			wp_json_encode(
+				array(
+					'trackId' => $track_id,
+				)
+			)
+		);
+
+		++$track_index;
+	}
+
 	return $processor->get_updated_html();
 }
 

package/src/playlist/style.scss

@@ -4,11 +4,6 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
-	// Clip content to respect border-radius.
-	// `overflow: hidden` is a fallback for browsers that don't support `overflow: clip`.
-	overflow: hidden;
-	overflow: clip;
-
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;

package/src/playlist/test/edit.js

@@ -1,17 +1,8 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * Internal dependencies
  */
 import { getTrackAttributes } from '../utils';
 
-// Mock uuid to return predictable values.
-jest.mock( 'uuid', () => ( {
-	v4: jest.fn( () => 'mock-uuid-1234' ),
-} ) );
-
 describe( 'Playlist block edit utilities', () => {
 	describe( 'getTrackAttributes', () => {
 		it( 'should transform media object to track attributes', () => {
@@ -29,7 +20,6 @@ describe( 'Playlist block edit utilities', () => {
 
 			expect( result ).toEqual( {
 				id: 123,
-				uniqueId: 'mock-uuid-1234',
 				src: 'https://example.com/song.mp3',
 				title: 'My Song',
 				artist: 'The Artist',

package/src/playlist/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { v4 as uuid } from 'uuid';
-
 /**
  * WordPress dependencies
  */
@@ -17,7 +12,6 @@ import { __ } from '@wordpress/i18n';
 export function getTrackAttributes( media ) {
 	return {
 		id: media.id || media.url, // Attachment ID or URL.
-		uniqueId: uuid(), // Unique ID for the track.
 		src: media.url,
 		title: media.title,
 		artist:

package/src/playlist/view.js

@@ -19,14 +19,14 @@ const { state } = store(
 		state: {
 			playlists: {},
 			get isCurrentTrack() {
-				const { currentId, uniqueId } = getContext();
-				return currentId === uniqueId;
+				const { currentId, trackId } = getContext();
+				return currentId === trackId;
 			},
 		},
 		actions: {
 			changeTrack() {
 				const context = getContext();
-				context.currentId = context.uniqueId;
+				context.currentId = context.trackId;
 			},
 		},
 		callbacks: {
@@ -109,7 +109,7 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 		onEnded: () => {
 			// Advance to next track (autoPlay handles playback).
 			const currentIndex = context.tracks.findIndex(
-				( uniqueId ) => uniqueId === context.currentId
+				( trackId ) => trackId === context.currentId
 			);
 			const nextTrack = context.tracks[ currentIndex + 1 ];
 			if ( nextTrack ) {

package/src/playlist-track/README.md

@@ -24,7 +24,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 |-----------|------|---------|-------------|
 | `blob` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
 | `id` | `number` | — | — |
-| `uniqueId` | `string` | — | — |
 | `src` | `string` | — | — |
 | `type` | `string` | `"audio"` | — |
 | `album` | `string` | — | — |
@@ -49,7 +48,6 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `showArtists`
-- `currentTrack`
 
 ## Block Markup
 

package/src/playlist-track/block.json

@@ -9,7 +9,7 @@
 	"description": "Playlist track.",
 	"keywords": [ "music", "sound" ],
 	"textdomain": "default",
-	"usesContext": [ "showArtists", "currentTrack" ],
+	"usesContext": [ "showArtists" ],
 	"attributes": {
 		"blob": {
 			"type": "string",
@@ -18,9 +18,6 @@
 		"id": {
 			"type": "number"
 		},
-		"uniqueId": {
-			"type": "string"
-		},
 		"src": {
 			"type": "string"
 		},

package/src/playlist-track/edit.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import { v4 as uuid } from 'uuid';
-
 /**
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
-import { useRef, useState } from '@wordpress/element';
+import { useContext, useEffect, useRef, useState } from '@wordpress/element';
 import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
@@ -35,26 +30,42 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
+import { PlaylistContext } from '../playlist/context';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 const ALBUM_COVER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
-	// Note that 'id' is the media attachment ID, while 'uniqueId' is a unique identifier.
-	// This is to make sure that the same media can be used in more than one track.
-	const { id, uniqueId, src, album, artist, image, length, title } =
-		attributes;
+const PlaylistTrackEdit = ( {
+	attributes,
+	setAttributes,
+	context,
+	clientId,
+	isSelected,
+} ) => {
+	const { id, src, album, artist, image, length, title } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const showArtists = context?.showArtists;
-	const currentTrack = context?.currentTrack;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
+	const { currentTrackClientId, setCurrentTrackClientId } =
+		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
+	useEffect( () => {
+		if ( isSelected && currentTrackClientId !== clientId ) {
+			setCurrentTrackClientId( clientId );
+		}
+	}, [
+		isSelected,
+		clientId,
+		currentTrackClientId,
+		setCurrentTrackClientId,
+	] );
+
 	useUploadMediaFromBlobURL( {
 		src: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -69,7 +80,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 			setAttributes( {
 				blob: undefined,
 				id: undefined,
-				uniqueId: undefined,
 				artist: undefined,
 				album: undefined,
 				image: undefined,
@@ -89,7 +99,6 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 		setAttributes( {
 			blob: undefined,
 			id: media.id,
-			uniqueId: uuid(),
 			src: media.url,
 			artist:
 				media.artist ||
@@ -228,9 +237,9 @@ const PlaylistTrackEdit = ( { attributes, setAttributes, context } ) => {
 				{ !! temporaryURL && <Spinner /> }
 				<button
 					className="wp-block-playlist-track__button"
-					data-wp-context={ JSON.stringify( { uniqueId } ) }
+					onClick={ () => setCurrentTrackClientId( clientId ) }
 					aria-current={
-						currentTrack === uniqueId ? 'true' : 'false'
+						currentTrackClientId === clientId ? 'true' : 'false'
 					}
 				>
 					<span className="wp-block-playlist-track__content">

package/src/playlist-track/index.php

@@ -21,19 +21,12 @@ function render_block_core_playlist_track( $attributes ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 
-	$unique_id = $attributes['uniqueId'] ?? wp_unique_id( 'playlist-track-' );
-	$artist    = $attributes['artist'] ?? '';
-	$length    = $attributes['length'] ?? '';
-	$title     = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
-
-	$context = wp_interactivity_data_wp_context(
-		array(
-			'uniqueId' => $unique_id,
-		)
-	);
+	$artist = $attributes['artist'] ?? '';
+	$length = $attributes['length'] ?? '';
+	$title  = isset( $attributes['title'] ) && ! empty( $attributes['title'] ) ? $attributes['title'] : __( 'Unknown title' );
 
 	$html  = '<li ' . $wrapper_attributes . '>';
-	$html .= '<button ' . $context . 'data-wp-on--click="actions.changeTrack" data-wp-bind--aria-current="state.isCurrentTrack" class="wp-block-playlist-track__button">';
+	$html .= '<button data-wp-on--click="actions.changeTrack" data-wp-bind--aria-current="state.isCurrentTrack" class="wp-block-playlist-track__button">';
 
 	$html .= '<span class="wp-block-playlist-track__content">';
 	if ( $title ) {

package/src/post-author/edit.js

@@ -107,7 +107,6 @@ function AuthorCombobox( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ value?.id }
@@ -268,7 +267,6 @@ function PostAuthorEdit( {
 							}
 						>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Avatar size' ) }
 								value={ avatarSize }
 								options={ avatarSizes }

package/src/post-excerpt/edit.js

@@ -248,7 +248,6 @@ export default function PostExcerptEditor( props ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) => {

package/src/post-featured-image/overlay-controls.js

@@ -75,7 +75,6 @@ const Overlay = ( {
 					max={ 100 }
 					step={ 10 }
 					required
-					__next40pxDefaultSize
 				/>
 			</ToolsPanelItem>
 		</>

package/src/post-navigation-link/edit.js

@@ -145,7 +145,6 @@ export default function PostNavigationLinkEdit( {
 						onDeselect={ () => setAttributes( { arrow: 'none' } ) }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label={ __( 'Arrow' ) }
 							value={ arrow }
 							onChange={ ( value ) => {
@@ -183,7 +182,6 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

package/src/query/edit/inspector-controls/author-control.js

@@ -76,7 +76,6 @@ function AuthorControl( { value, onChange } ) {
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
 			help=""
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/query/edit/inspector-controls/format-controls.js

@@ -83,7 +83,6 @@ export default function FormatControls( { onChange, query: { format } } ) {
 			} }
 			help=""
 			__experimentalExpandOnFocus
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/query/edit/inspector-controls/index.js

@@ -218,7 +218,6 @@ export default function QueryInspectorControls( props ) {
 						>
 							<VStack spacing={ 4 }>
 								<ToggleGroupControl
-									__next40pxDefaultSize
 									label={ __( 'Query type' ) }
 									isBlock
 									onChange={ ( value ) => {
@@ -269,7 +268,6 @@ export default function QueryInspectorControls( props ) {
 						>
 							{ postTypesSelectOptions.length > 2 ? (
 								<SelectControl
-									__next40pxDefaultSize
 									options={ postTypesSelectOptions }
 									value={ postType }
 									label={ postTypeControlLabel }
@@ -278,7 +276,6 @@ export default function QueryInspectorControls( props ) {
 								/>
 							) : (
 								<ToggleGroupControl
-									__next40pxDefaultSize
 									isBlock
 									value={ postType }
 									label={ postTypeControlLabel }