@wordpress/block-editor 11.8.0 → 12.0.0

package/src/components/global-styles/test/use-global-styles-output.js

@@ -480,10 +480,128 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
 					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px;}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
+
+		it( 'should handle feature selectors', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							spacing: {
+								padding: {
+									top: '1px',
+								},
+							},
+							border: {
+								color: 'red',
+								radius: '9999px',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.wp-image-spacing{padding-top: 1px;}.wp-image-border-color{border-color: red;}.wp-image-border{border-radius: 9999px;}.wp-image{color: red;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should handle block variations', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							variations: {
+								foo: {
+									color: {
+										text: 'blue',
+									},
+									spacing: {
+										padding: {
+											top: '2px',
+										},
+									},
+									border: {
+										color: 'blue',
+									},
+								},
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+					styleVariationSelectors: {
+						foo: '.is-style-foo.wp-image',
+					},
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should handle duotone filter', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							filter: {
+								duotone: 'blur(5px)',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					duotoneSelector: '.wp-image img',
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.wp-image img{filter: blur(5px);}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
 		it( 'should output content and wide size variables if values are specified', () => {
 			const tree = {
 				settings: {
@@ -493,7 +611,7 @@ describe( 'global styles renderer', () => {
 					},
 				},
 			};
-			expect( toStyles( tree, 'body' ) ).toEqual(
+			expect( toStyles( Object.freeze( tree ), 'body' ) ).toEqual(
 				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
 			);
 		} );
@@ -678,8 +796,9 @@ describe( 'global styles renderer', () => {
 				selectors: imageSelectors,
 			};
 			const blockTypes = [ imageBlock ];
+			const getBlockStyles = () => [ { name: 'foo' } ];
 
-			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
+			expect( getBlockSelectors( blockTypes, getBlockStyles ) ).toEqual( {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSelectors.root,
@@ -690,6 +809,9 @@ describe( 'global styles renderer', () => {
 						border: '.my-image img, .my-image .crop-area',
 						filter: { duotone: 'img' },
 					},
+					styleVariationSelectors: {
+						foo: '.is-style-foo.my-image',
+					},
 					hasLayoutSupport: false,
 				},
 			} );
@@ -811,7 +933,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+				'font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			] );
 		} );
 

package/src/components/global-styles/typography-panel.js

@@ -20,7 +20,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -163,10 +163,12 @@ export default function TypographyPanel( {
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'typography', 'fontFamily' ],
-				slug ? `var:preset|font-family|${ slug }` : newValue
+				slug
+					? `var:preset|font-family|${ slug }`
+					: newValue || undefined
 			)
 		);
 	};
@@ -188,7 +190,11 @@ export default function TypographyPanel( {
 			: newValue;
 
 		onChange(
-			immutableSet( value, [ 'typography', 'fontSize' ], actualValue )
+			setImmutably(
+				value,
+				[ 'typography', 'fontSize' ],
+				actualValue || undefined
+			)
 		);
 	};
 	const hasFontSize = () => !! value?.typography?.fontSize;
@@ -209,8 +215,8 @@ export default function TypographyPanel( {
 			...value,
 			typography: {
 				...value?.typography,
-				fontStyle: newFontStyle,
-				fontWeight: newFontWeight,
+				fontStyle: newFontStyle || undefined,
+				fontWeight: newFontWeight || undefined,
 			},
 		} );
 	};
@@ -225,7 +231,11 @@ export default function TypographyPanel( {
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
 	const setLineHeight = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'typography', 'lineHeight' ], newValue )
+			setImmutably(
+				value,
+				[ 'typography', 'lineHeight' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasLineHeight = () => !! value?.typography?.lineHeight;
@@ -238,7 +248,11 @@ export default function TypographyPanel( {
 	);
 	const setLetterSpacing = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'typography', 'letterSpacing' ], newValue )
+			setImmutably(
+				value,
+				[ 'typography', 'letterSpacing' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
@@ -249,7 +263,11 @@ export default function TypographyPanel( {
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
 	const setTextColumns = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'typography', 'textColumns' ], newValue )
+			setImmutably(
+				value,
+				[ 'typography', 'textColumns' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasTextColumns = () => !! value?.typography?.textColumns;
@@ -262,7 +280,11 @@ export default function TypographyPanel( {
 	);
 	const setTextTransform = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'typography', 'textTransform' ], newValue )
+			setImmutably(
+				value,
+				[ 'typography', 'textTransform' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasTextTransform = () => !! value?.typography?.textTransform;
@@ -275,7 +297,11 @@ export default function TypographyPanel( {
 	);
 	const setTextDecoration = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'typography', 'textDecoration' ], newValue )
+			setImmutably(
+				value,
+				[ 'typography', 'textDecoration' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;

package/src/components/global-styles/use-global-styles-output.js

@@ -325,7 +325,7 @@ export function getStylesDeclarations(
 				return declarations;
 			}
 
-			if ( !! properties && typeof styleValue !== 'string' ) {
+			if ( properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
@@ -382,7 +382,7 @@ export function getStylesDeclarations(
 			ruleValue = get( tree, refPath );
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
-			if ( ! ruleValue || !! ruleValue?.ref ) {
+			if ( ! ruleValue || ruleValue?.ref ) {
 				return;
 			}
 		}
@@ -551,6 +551,33 @@ export function getLayoutStyles( {
 	return ruleset;
 }
 
+const STYLE_KEYS = [
+	'border',
+	'color',
+	'dimensions',
+	'spacing',
+	'typography',
+	'filter',
+	'outline',
+	'shadow',
+];
+
+function pickStyleKeys( treeToPickFrom ) {
+	if ( ! treeToPickFrom ) {
+		return {};
+	}
+	const entries = Object.entries( treeToPickFrom );
+	const pickedEntries = entries.filter( ( [ key ] ) =>
+		STYLE_KEYS.includes( key )
+	);
+	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
+	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
+		key,
+		JSON.parse( JSON.stringify( style ) ),
+	] );
+	return Object.fromEntries( clonedEntries );
+}
+
 export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	const nodes = [];
 
@@ -558,25 +585,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		return nodes;
 	}
 
-	const pickStyleKeys = ( treeToPickFrom ) =>
-		Object.fromEntries(
-			Object.entries( treeToPickFrom ?? {} ).filter( ( [ key ] ) =>
-				[
-					'border',
-					'color',
-					'dimensions',
-					'spacing',
-					'typography',
-					'filter',
-					'outline',
-					'shadow',
-				].includes( key )
-			)
-		);
-
 	// Top-level.
 	const styles = pickStyleKeys( tree.styles );
-	if ( !! styles ) {
+	if ( styles ) {
 		nodes.push( {
 			styles,
 			selector: ROOT_BLOCK_SELECTOR,
@@ -584,7 +595,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
-		if ( !! tree.styles?.elements?.[ name ] ) {
+		if ( tree.styles?.elements?.[ name ] ) {
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ],
 				selector,
@@ -606,10 +617,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 				} );
 				blockStyles.variations = variations;
 			}
-			if (
-				!! blockStyles &&
-				!! blockSelectors?.[ blockName ]?.selector
-			) {
+			if ( blockStyles && blockSelectors?.[ blockName ]?.selector ) {
 				nodes.push( {
 					duotoneSelector:
 						blockSelectors[ blockName ].duotoneSelector,
@@ -617,7 +625,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						blockSelectors[ blockName ].fallbackGapValue,
 					hasLayoutSupport:
 						blockSelectors[ blockName ].hasLayoutSupport,
-					selector: blockSelectors[ blockName ]?.selector,
+					selector: blockSelectors[ blockName ].selector,
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
@@ -629,9 +637,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			Object.entries( node?.elements ?? {} ).forEach(
 				( [ elementName, value ] ) => {
 					if (
-						!! value &&
-						!! blockSelectors?.[ blockName ] &&
-						!! ELEMENTS?.[ elementName ]
+						value &&
+						blockSelectors?.[ blockName ] &&
+						ELEMENTS[ elementName ]
 					) {
 						nodes.push( {
 							styles: value,
@@ -677,7 +685,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	// Top-level.
 	const presets = pickPresets( tree.settings );
 	const custom = tree.settings?.custom;
-	if ( ! isEmpty( presets ) || !! custom ) {
+	if ( ! isEmpty( presets ) || custom ) {
 		nodes.push( {
 			presets,
 			custom,
@@ -690,7 +698,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		( [ blockName, node ] ) => {
 			const blockPresets = pickPresets( node );
 			const blockCustom = node.custom;
-			if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
+			if ( ! isEmpty( blockPresets ) || blockCustom ) {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
@@ -714,7 +722,7 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 		}
 
 		if ( declarations.length > 0 ) {
-			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+			ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
 		}
 	} );
 
@@ -787,9 +795,9 @@ export const toStyles = (
 
 				Object.entries( featureDeclarations ).forEach(
 					( [ cssSelector, declarations ] ) => {
-						if ( !! declarations.length ) {
+						if ( declarations.length ) {
 							const rules = declarations.join( ';' );
-							ruleset = ruleset + `${ cssSelector }{${ rules }}`;
+							ruleset += `${ cssSelector }{${ rules };}`;
 						}
 					}
 				);
@@ -798,20 +806,20 @@ export const toStyles = (
 			if ( styleVariationSelectors ) {
 				Object.entries( styleVariationSelectors ).forEach(
 					( [ styleVariationName, styleVariationSelector ] ) => {
-						if ( styles?.variations?.[ styleVariationName ] ) {
+						const styleVariations =
+							styles?.variations?.[ styleVariationName ];
+						if ( styleVariations ) {
 							// If the block uses any custom selectors for block support, add those first.
 							if ( featureSelectors ) {
 								const featureDeclarations =
 									getFeatureDeclarations(
 										featureSelectors,
-										styles?.variations?.[
-											styleVariationName
-										]
+										styleVariations
 									);
 
 								Object.entries( featureDeclarations ).forEach(
 									( [ baseSelector, declarations ] ) => {
-										if ( !! declarations.length ) {
+										if ( declarations.length ) {
 											const cssSelector =
 												concatFeatureVariationSelectorString(
 													baseSelector,
@@ -819,9 +827,7 @@ export const toStyles = (
 												);
 											const rules =
 												declarations.join( ';' );
-											ruleset =
-												ruleset +
-												`${ cssSelector }{${ rules }}`;
+											ruleset += `${ cssSelector }{${ rules };}`;
 										}
 									}
 								);
@@ -830,39 +836,34 @@ export const toStyles = (
 							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
-									styles?.variations?.[ styleVariationName ],
+									styleVariations,
 									styleVariationSelector,
 									useRootPaddingAlign,
 									tree
 								);
-							if ( !! styleVariationDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ styleVariationSelector }{${ styleVariationDeclarations.join(
-										';'
-									) }}`;
+							if ( styleVariationDeclarations.length ) {
+								ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									';'
+								) };}`;
 							}
 						}
 					}
 				);
 			}
 
-			const duotoneStyles = {};
-			if ( styles?.filter ) {
-				duotoneStyles.filter = styles.filter;
-				delete styles.filter;
-			}
-
 			// Process duotone styles.
 			if ( duotoneSelector ) {
+				const duotoneStyles = {};
+				if ( styles?.filter ) {
+					duotoneStyles.filter = styles.filter;
+					delete styles.filter;
+				}
 				const duotoneDeclarations =
 					getStylesDeclarations( duotoneStyles );
-				if ( duotoneDeclarations.length > 0 ) {
-					ruleset =
-						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
+				if ( duotoneDeclarations.length ) {
+					ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+						';'
+					) };}`;
 				}
 			}
 
@@ -889,8 +890,7 @@ export const toStyles = (
 				tree
 			);
 			if ( declarations?.length ) {
-				ruleset =
-					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+				ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
 			}
 
 			// Check for pseudo selector in `styles` and handle separately.
@@ -924,7 +924,7 @@ export const toStyles = (
 							';'
 						) };}`;
 
-						ruleset = ruleset + pseudoRule;
+						ruleset += pseudoRule;
 					}
 				);
 			}
@@ -965,7 +965,7 @@ export const toStyles = (
 
 		const classes = getPresetsClasses( selector, presets );
 		if ( ! isEmpty( classes ) ) {
-			ruleset = ruleset + classes;
+			ruleset += classes;
 		}
 	} );
 

package/src/components/index.js

@@ -95,6 +95,7 @@ export { default as __experimentalSpacingSizesControl } from './spacing-sizes-co
 export {
 	getSpacingPresetCssVar,
 	isValueSpacingPreset,
+	getCustomValueFromPreset,
 } from './spacing-sizes-control/utils';
 /*
  * Content Related Components

package/src/components/inserter/block-types-tab.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -59,7 +54,15 @@ export function BlockTypesTab( {
 				itemList.filter(
 					( item ) => item.category && item.category !== 'reusable'
 				),
-			( itemList ) => groupBy( itemList, 'category' )
+			( itemList ) =>
+				itemList.reduce( ( acc, item ) => {
+					const { category } = item;
+					if ( ! acc[ category ] ) {
+						acc[ category ] = [];
+					}
+					acc[ category ].push( item );
+					return acc;
+				}, {} )
 		)( items );
 	}, [ items ] );
 

package/src/components/inserter/index.js

@@ -214,7 +214,7 @@ class PrivateInserter extends Component {
 					'block-editor-inserter__popover',
 					{ 'is-quick': isQuick }
 				) }
-				popoverProps={ { position } }
+				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile
 				headerTitle={ __( 'Add a block' ) }

package/src/components/inspector-controls/groups.js

@@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -22,6 +23,7 @@ const groups = {
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	settings: InspectorControlsDefault, // Alias for default.

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -32,6 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }

package/src/components/list-view/block-select-button.js

@@ -35,6 +35,9 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaLabel,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -76,7 +79,9 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+				aria-label={ ariaLabel }
+				aria-describedby={ ariaDescribedBy }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />