@wordpress/block-library 7.8.0 → 7.9.0

package/src/list-item/hooks/use-outdent-list-item.js

@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import { first, last } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -23,7 +29,8 @@ export default function useOutdentListItem( clientId ) {
 		},
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { replaceBlocks, selectionChange, multiSelect } =
+		useDispatch( blockEditorStore );
 	const {
 		getBlockRootClientId,
 		getBlockAttributes,
@@ -31,11 +38,18 @@ export default function useOutdentListItem( clientId ) {
 		getBlockIndex,
 		getSelectionStart,
 		getSelectionEnd,
+		hasMultiSelection,
+		getMultiSelectedBlockClientIds,
 	} = useSelect( blockEditorStore );
 
 	return [
 		canOutdent,
 		useCallback( () => {
+			const _hasMultiSelection = hasMultiSelection();
+			const clientIds = _hasMultiSelection
+				? getMultiSelectedBlockClientIds()
+				: [ clientId ];
+
 			const selectionStart = getSelectionStart();
 			const selectionEnd = getSelectionEnd();
 
@@ -45,50 +59,63 @@ export default function useOutdentListItem( clientId ) {
 			const listItemParentAttributes =
 				getBlockAttributes( listItemParentId );
 
-			const index = getBlockIndex( clientId );
+			const firstIndex = getBlockIndex( first( clientIds ) );
+			const lastIndex = getBlockIndex( last( clientIds ) );
 			const siblingBlocks = getBlock( listParentId ).innerBlocks;
-			const previousSiblings = siblingBlocks.slice( 0, index );
-			const afterSiblings = siblingBlocks.slice( index + 1 );
+			const previousSiblings = siblingBlocks.slice( 0, firstIndex );
+			const afterSiblings = siblingBlocks.slice( lastIndex + 1 );
 
 			// Create a new parent list item block with just the siblings
-			// that existed before the child item being outdent.
+			// that existed before the first child item being outdent.
 			const newListItemParent = createListItem(
 				listItemParentAttributes,
 				listAttributes,
 				previousSiblings
 			);
 
-			const block = getBlock( clientId );
-			const childList = block.innerBlocks[ 0 ];
+			const lastBlock = getBlock( last( clientIds ) );
+			const childList = lastBlock.innerBlocks[ 0 ];
 			const childItems = childList?.innerBlocks || [];
 			const hasChildItems = !! childItems.length;
 
+			const newBlocksExcludingLast = clientIds
+				.slice( 0, -1 )
+				.map( ( _clientId ) => cloneBlock( getBlock( _clientId ) ) );
+
 			// Create a new list item block whose attributes are equal to the
-			// block being outdent and whose children are the children that it had (if any)
+			// last block being outdent and whose children are the children that it had (if any)
 			// followed by the siblings that existed after it.
-			const newItem = createListItem(
-				block.attributes,
+			const newLastItem = createListItem(
+				lastBlock.attributes,
 				hasChildItems ? childList.attributes : listAttributes,
 				[ ...childItems, ...afterSiblings ]
 			);
 
 			// Replace the parent list item block, with a new block containing
-			// the previous siblings, followed by another block containing after siblings
-			// in relation to the block being outdent.
+			// the previous siblings before the first block being outdent,
+			// followed by the blocks being outdent with the after siblings added
+			// as children of the last block.
 			replaceBlocks(
 				[ listItemParentId ],
-				[ newListItemParent, newItem ]
+				[ newListItemParent, ...newBlocksExcludingLast, newLastItem ]
 			);
 
 			// Restore the selection state.
-			selectionChange(
-				newItem.clientId,
-				selectionEnd.attributeKey,
-				selectionEnd.clientId === selectionStart.clientId
-					? selectionStart.offset
-					: selectionEnd.offset,
-				selectionEnd.offset
-			);
+			if ( ! _hasMultiSelection ) {
+				selectionChange(
+					newLastItem.clientId,
+					selectionEnd.attributeKey,
+					selectionEnd.clientId === selectionStart.clientId
+						? selectionStart.offset
+						: selectionEnd.offset,
+					selectionEnd.offset
+				);
+			} else {
+				multiSelect(
+					first( newBlocksExcludingLast ).clientId,
+					newLastItem.clientId
+				);
+			}
 		}, [ clientId ] ),
 	];
 }

package/src/navigation/block.json

@@ -114,6 +114,15 @@
 			"default": {
 				"type": "flex"
 			}
+		},
+		"__experimentalStyle": {
+			"elements": {
+				"link": {
+					"color": {
+						"text": "inherit"
+					}
+				}
+			}
 		}
 	},
 	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],

package/src/navigation/edit/index.js

@@ -472,6 +472,7 @@ function Navigation( {
 
 		if ( isSelected || isInnerBlockSelected ) {
 			if (
+				ref &&
 				hasResolvedCanUserUpdateNavigationMenu &&
 				! canUserUpdateNavigationMenu
 			) {

package/src/navigation/style.scss

@@ -44,7 +44,6 @@ $navigation-icon-size: 24px;
 	// By adding low specificity, we enable compatibility with link colors set in theme.json,
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
-		color: inherit;
 		display: block;
 
 		// Set the default menu item padding to zero, to allow text-only buttons.
@@ -675,6 +674,16 @@ button.wp-block-navigation-item__content {
 	position: relative;
 }
 
+// Adjust open dialog top margin when admin-bar is visible.
+.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+	margin-top: $admin-bar-height-big;
+
+	// Handle smaller admin-bar.
+	@include break-medium() {
+		margin-top: $admin-bar-height;
+	}
+}
+
 // Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;

package/src/navigation/test/use-navigation-menu.js

@@ -89,13 +89,14 @@ describe( 'useNavigationMenus', () => {
 	it( 'Should return no information when no data is resolved', () => {
 		expect( useNavigationMenu() ).toEqual( {
 			navigationMenus: null,
+			navigationMenu: undefined,
 			canSwitchNavigationMenu: false,
 			canUserCreateNavigationMenu: false,
-			canUserDeleteNavigationMenu: false,
-			canUserUpdateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
 			hasResolvedCanUserCreateNavigationMenu: false,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: false,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
@@ -109,13 +110,14 @@ describe( 'useNavigationMenus', () => {
 		resolveCreatePermission( registry, true );
 		expect( useNavigationMenu() ).toEqual( {
 			navigationMenus,
+			navigationMenu: undefined,
 			canSwitchNavigationMenu: true,
 			canUserCreateNavigationMenu: true,
-			canUserDeleteNavigationMenu: false,
-			canUserUpdateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
 			hasResolvedCanUserCreateNavigationMenu: true,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
@@ -170,6 +172,7 @@ describe( 'useNavigationMenus', () => {
 		resolveRecords( registry, navigationMenus );
 		resolveCreatePermission( registry, true );
 		resolveUpdatePermission( registry, 1, true );
+		resolveDeletePermission( registry, 1, false );
 		expect( useNavigationMenu( 1 ) ).toEqual( {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
@@ -178,7 +181,7 @@ describe( 'useNavigationMenus', () => {
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: true,
 			hasResolvedCanUserCreateNavigationMenu: true,
-			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
@@ -190,6 +193,8 @@ describe( 'useNavigationMenus', () => {
 
 	it( 'Should return correct permissions (delete only)', () => {
 		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, false );
+		resolveUpdatePermission( registry, 1, false );
 		resolveDeletePermission( registry, 1, true );
 		expect( useNavigationMenu( 1 ) ).toEqual( {
 			navigationMenu: navigationMenu1,
@@ -198,9 +203,9 @@ describe( 'useNavigationMenus', () => {
 			canUserCreateNavigationMenu: false,
 			canUserDeleteNavigationMenu: true,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,

package/src/navigation/use-navigation-menu.js

@@ -1,12 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function useNavigationMenu( ref ) {
+	const permissions = useResourcePermissions( 'navigation', ref );
+
 	return useSelect(
 		( select ) => {
+			const [
+				hasResolvedPermissions,
+				{ canCreate, canUpdate, canDelete, isResolving },
+			] = permissions;
+
 			const {
 				navigationMenus,
 				isResolvingNavigationMenus,
@@ -19,22 +29,6 @@ export default function useNavigationMenu( ref ) {
 				isNavigationMenuMissing,
 			} = selectExistingMenu( select, ref );
 
-			const {
-				canUserCreateNavigationMenu,
-				isResolvingCanUserCreateNavigationMenu,
-				hasResolvedCanUserCreateNavigationMenu,
-			} = selectMenuCreatePermissions( select );
-
-			const {
-				canUserUpdateNavigationMenu,
-				hasResolvedCanUserUpdateNavigationMenu,
-			} = selectMenuUpdatePermissions( select, ref );
-
-			const {
-				canUserDeleteNavigationMenu,
-				hasResolvedCanUserDeleteNavigationMenu,
-			} = selectMenuDeletePermissions( select, ref );
-
 			return {
 				navigationMenus,
 				isResolvingNavigationMenus,
@@ -44,22 +38,26 @@ export default function useNavigationMenu( ref ) {
 				isNavigationMenuResolved,
 				isNavigationMenuMissing,
 
-				canUserCreateNavigationMenu,
-				isResolvingCanUserCreateNavigationMenu,
-				hasResolvedCanUserCreateNavigationMenu,
-
-				canUserUpdateNavigationMenu,
-				hasResolvedCanUserUpdateNavigationMenu,
-
-				canUserDeleteNavigationMenu,
-				hasResolvedCanUserDeleteNavigationMenu,
-
 				canSwitchNavigationMenu: ref
 					? navigationMenus?.length > 1
 					: navigationMenus?.length > 0,
+
+				canUserCreateNavigationMenu: canCreate,
+				isResolvingCanUserCreateNavigationMenu: isResolving,
+				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+
+				canUserUpdateNavigationMenu: canUpdate,
+				hasResolvedCanUserUpdateNavigationMenu: ref
+					? hasResolvedPermissions
+					: undefined,
+
+				canUserDeleteNavigationMenu: canDelete,
+				hasResolvedCanUserDeleteNavigationMenu: ref
+					? hasResolvedPermissions
+					: undefined,
 			};
 		},
-		[ ref ]
+		[ ref, permissions ]
 	);
 }
 
@@ -113,58 +111,3 @@ function selectExistingMenu( select, ref ) {
 				: null,
 	};
 }
-
-function selectMenuCreatePermissions( select ) {
-	const { hasFinishedResolution, isResolving, canUser } = select( coreStore );
-
-	const args = [ 'create', 'navigation' ];
-	return {
-		canUserCreateNavigationMenu: !! canUser( ...args ),
-		isResolvingCanUserCreateNavigationMenu: !! isResolving(
-			'canUser',
-			args
-		),
-		hasResolvedCanUserCreateNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}
-
-function selectMenuUpdatePermissions( select, ref ) {
-	if ( ! ref ) {
-		return {
-			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
-		};
-	}
-
-	const { hasFinishedResolution, canUser } = select( coreStore );
-	const args = [ 'update', 'navigation', ref ];
-	return {
-		canUserUpdateNavigationMenu: !! canUser( ...args ),
-		hasResolvedCanUserUpdateNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}
-
-function selectMenuDeletePermissions( select, ref ) {
-	if ( ! ref ) {
-		return {
-			canUserDeleteNavigationMenu: false,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-		};
-	}
-
-	const { hasFinishedResolution, canUser } = select( coreStore );
-	const args = [ 'delete', 'navigation', ref ];
-	return {
-		canUserDeleteNavigationMenu: !! canUser( ...args ),
-		hasResolvedCanUserDeleteNavigationMenu: !! hasFinishedResolution(
-			'canUser',
-			args
-		),
-	};
-}

package/src/navigation/view.js

@@ -4,6 +4,8 @@ function closeSubmenus( element ) {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( function ( toggle ) {
 			toggle.setAttribute( 'aria-expanded', 'false' );
+			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
+			toggle.focus();
 		} );
 }
 
@@ -55,13 +57,16 @@ window.addEventListener( 'load', () => {
 			}
 		} );
 	} );
-	// Close on focus outside.
+	// Close on focus outside or escape key.
 	document.addEventListener( 'keyup', function ( event ) {
 		const submenuBlocks = document.querySelectorAll(
 			'.wp-block-navigation-item.has-child'
 		);
 		submenuBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
+			if (
+				! block.contains( event.target ) ||
+				( block.contains( event.target ) && event.key === 'Escape' )
+			) {
 				closeSubmenus( block );
 			}
 		} );

package/src/navigation-submenu/view.js

@@ -3,6 +3,8 @@ const closeSubmenus = ( element ) => {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( ( toggle ) => {
 			toggle.setAttribute( 'aria-expanded', 'false' );
+			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
+			toggle.focus();
 		} );
 };
 
@@ -49,13 +51,16 @@ document.addEventListener( 'click', function ( event ) {
 		}
 	} );
 } );
-// Close on focus outside.
+// Close on focus outside or escape key.
 document.addEventListener( 'keyup', function ( event ) {
 	const submenuBlocks = document.querySelectorAll(
 		'.wp-block-navigation-submenu'
 	);
 	submenuBlocks.forEach( ( block ) => {
-		if ( ! block.contains( event.target ) ) {
+		if (
+			! block.contains( event.target ) ||
+			( block.contains( event.target ) && event.key === 'Escape' )
+		) {
 			closeSubmenus( block );
 		}
 	} );

package/src/post-comments/index.php

@@ -78,7 +78,7 @@ add_action( 'init', 'register_block_core_post_comments' );
  */
 function post_comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-comments/style.scss

@@ -128,8 +128,12 @@
 	input:not([type="submit"]):not([type="checkbox"]) {
 		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 	}
+}
 
-	input[type="submit"] {
-		border: none;
-	}
+
+// Using :where to give this a low specificity so that element styles take precedence.
+// Needed for backwards compatibility.
+// Styles copied from button block styles.
+:where(.wp-block-post-comments input[type="submit"]) {
+	border: none;
 }

package/src/post-comments-form/edit.js

@@ -13,9 +13,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -28,7 +30,7 @@ export default function PostCommentsFormEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
-	const [ commentStatus ] = useEntityProp(
+	const [ commentStatus, setCommentStatus ] = useEntityProp(
 		'postType',
 		postType,
 		'comment_status',
@@ -55,6 +57,7 @@ export default function PostCommentsFormEdit( {
 	);
 
 	let warning = false;
+	let actions;
 	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
@@ -66,6 +69,18 @@ export default function PostCommentsFormEdit( {
 				),
 				postType
 			);
+			actions = [
+				<Button
+					key="enableComments"
+					onClick={ () => setCommentStatus( 'open' ) }
+					variant="primary"
+				>
+					{ _x(
+						'Enable comments',
+						'action that affects the current post'
+					) }
+				</Button>,
+			];
 			showPlaceholder = false;
 		} else if ( ! postTypeSupportsComments ) {
 			warning = sprintf(
@@ -95,7 +110,9 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ warning && <Warning>{ warning }</Warning> }
+				{ warning && (
+					<Warning actions={ actions }>{ warning }</Warning>
+				) }
 
 				{ showPlaceholder ? <CommentsForm /> : null }
 			</div>

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

@@ -1,3 +1,7 @@
 .wp-block-post-comments-form * {
 	pointer-events: none;
+
+	&.block-editor-warning * {
+		pointer-events: auto;
+	}
 }

package/src/post-comments-form/form.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
@@ -36,7 +36,7 @@ const CommentsForm = () => {
 						className={ classnames(
 							'submit',
 							'wp-block-button__link',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }

package/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-featured-image/index.php

@@ -19,14 +19,16 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, array( 'alt' => $post_title ) );
+	$attr           = $is_link ? array( 'alt' => $post_title ) : array();
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
 	}
 	$wrapper_attributes = get_block_wrapper_attributes();
-	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+	if ( $is_link ) {
 		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
 	}
 

package/src/post-template/index.php

@@ -82,17 +82,29 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$content = '';
 	while ( $query->have_posts() ) {
 		$query->the_post();
+
+		// Get an instance of the current Post Template block.
+		$block_instance = $block->parsed_block;
+
+		// Set the block name to one that does not correspond to an existing registered block.
+		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
+		$block_instance['blockName'] = 'core/null';
+
+		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
+		// `render_callback` and ensure that no wrapper markup is included.
 		$block_content = (
 			new WP_Block(
-				$block->parsed_block,
+				$block_instance,
 				array(
 					'postType' => get_post_type(),
 					'postId'   => get_the_ID(),
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
-		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
+
+		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
+		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content     .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();

package/src/post-template/style.scss

@@ -1,10 +1,4 @@
-.wp-block-post-template,
-// We have kept `wp-block-query-loop` class as well for backwards
-// compatibility with existing `QueryLoop` blocks that haven't been
-// updated, after the renaming of the block to `Post Template`.
-// See: https://github.com/WordPress/gutenberg/pull/32514.
-// TODO: Remove this class when WordPress 5.9 is released.
-.wp-block-query-loop {
+.wp-block-post-template {
 	margin-top: 0;
 	margin-bottom: 0;
 	max-width: 100%;

package/src/search/edit.js

@@ -14,7 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -241,7 +241,7 @@ export default function SearchEdit( {
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
 			buttonUseIcon ? 'has-icon' : undefined,
-			__experimentalElementButtonClassName
+			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,