@wordpress/block-editor 12.8.0 → 12.9.0

package/build-style/content-rtl.css

@@ -181,12 +181,12 @@
   box-shadow: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -201,14 +201,10 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
-  box-shadow: none;
-  outline: none;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -220,6 +216,8 @@
   top: -14px;
   border-radius: 2px;
   border-top: 4px solid #ccc;
+  bottom: auto;
+  box-shadow: none;
 }
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
@@ -675,6 +673,9 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
+.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
+  border: none;
+}
 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
   background-color: var(--wp-admin-theme-color);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);

package/build-style/content.css

@@ -181,12 +181,12 @@
   box-shadow: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
   outline: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   content: "";
   position: absolute;
@@ -201,14 +201,10 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected {
-  box-shadow: none;
-  outline: none;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -220,6 +216,8 @@
   top: -14px;
   border-radius: 2px;
   border-top: 4px solid #ccc;
+  bottom: auto;
+  box-shadow: none;
 }
 .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
   border-color: var(--wp-admin-theme-color);
@@ -675,6 +673,9 @@
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
   visibility: visible;
 }
+.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
+  border: none;
+}
 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
   background-color: var(--wp-admin-theme-color);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);

package/build-style/style-rtl.css

@@ -1072,9 +1072,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 
 .block-editor-block-styles__preview-panel {
   display: none;
-  position: absolute;
-  left: 16px;
-  right: auto;
   z-index: 90;
 }
 @media (min-width: 782px) {

package/build-style/style.css

@@ -1072,9 +1072,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 
 .block-editor-block-styles__preview-panel {
   display: none;
-  position: absolute;
-  right: 16px;
-  left: auto;
   z-index: 90;
 }
 @media (min-width: 782px) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.8.0",
+	"version": "12.9.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.40.0",
-		"@wordpress/api-fetch": "^6.37.0",
-		"@wordpress/blob": "^3.40.0",
-		"@wordpress/blocks": "^12.17.0",
-		"@wordpress/commands": "^0.11.0",
-		"@wordpress/components": "^25.6.0",
-		"@wordpress/compose": "^6.17.0",
-		"@wordpress/data": "^9.10.0",
-		"@wordpress/date": "^4.40.0",
-		"@wordpress/deprecated": "^3.40.0",
-		"@wordpress/dom": "^3.40.0",
-		"@wordpress/element": "^5.17.0",
-		"@wordpress/escape-html": "^2.40.0",
-		"@wordpress/hooks": "^3.40.0",
-		"@wordpress/html-entities": "^3.40.0",
-		"@wordpress/i18n": "^4.40.0",
-		"@wordpress/icons": "^9.31.0",
-		"@wordpress/is-shallow-equal": "^4.40.0",
-		"@wordpress/keyboard-shortcuts": "^4.17.0",
-		"@wordpress/keycodes": "^3.40.0",
-		"@wordpress/notices": "^4.8.0",
-		"@wordpress/preferences": "^3.17.0",
-		"@wordpress/private-apis": "^0.22.0",
-		"@wordpress/rich-text": "^6.17.0",
-		"@wordpress/shortcode": "^3.40.0",
-		"@wordpress/style-engine": "^1.23.0",
-		"@wordpress/token-list": "^2.40.0",
-		"@wordpress/url": "^3.41.0",
-		"@wordpress/warning": "^2.40.0",
-		"@wordpress/wordcount": "^3.40.0",
+		"@wordpress/a11y": "^3.41.0",
+		"@wordpress/api-fetch": "^6.38.0",
+		"@wordpress/blob": "^3.41.0",
+		"@wordpress/blocks": "^12.18.0",
+		"@wordpress/commands": "^0.12.0",
+		"@wordpress/components": "^25.7.0",
+		"@wordpress/compose": "^6.18.0",
+		"@wordpress/data": "^9.11.0",
+		"@wordpress/date": "^4.41.0",
+		"@wordpress/deprecated": "^3.41.0",
+		"@wordpress/dom": "^3.41.0",
+		"@wordpress/element": "^5.18.0",
+		"@wordpress/escape-html": "^2.41.0",
+		"@wordpress/hooks": "^3.41.0",
+		"@wordpress/html-entities": "^3.41.0",
+		"@wordpress/i18n": "^4.41.0",
+		"@wordpress/icons": "^9.32.0",
+		"@wordpress/is-shallow-equal": "^4.41.0",
+		"@wordpress/keyboard-shortcuts": "^4.18.0",
+		"@wordpress/keycodes": "^3.41.0",
+		"@wordpress/notices": "^4.9.0",
+		"@wordpress/preferences": "^3.18.0",
+		"@wordpress/private-apis": "^0.23.0",
+		"@wordpress/rich-text": "^6.18.0",
+		"@wordpress/shortcode": "^3.41.0",
+		"@wordpress/style-engine": "^1.24.0",
+		"@wordpress/token-list": "^2.41.0",
+		"@wordpress/url": "^3.42.0",
+		"@wordpress/warning": "^2.41.0",
+		"@wordpress/wordcount": "^3.41.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
+	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
 }

package/src/components/block-icon/test/index.js

@@ -71,8 +71,8 @@ describe( 'BlockIcon', () => {
 		);
 
 		expect( getIconWrapper( container ) ).toHaveStyle( {
-			backgroundColor: 'white',
-			color: 'black',
+			backgroundColor: 'rgb(255, 255, 255)',
+			color: 'rgb(0, 0, 0)',
 		} );
 	} );
 } );

package/src/components/block-list/block-outline.native.js

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const BLOCKS_WITH_OUTLINE = [ 'core/social-link', 'core/missing' ];
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
 
 function BlockOutline( {
 	blockCategory,
@@ -22,7 +22,9 @@ function BlockOutline( {
 	isSelected,
 	name,
 } ) {
-	const textBlockWithOutline = BLOCKS_WITH_OUTLINE.includes( name );
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const socialBlockWithOutline = name.includes( 'core/social-link' );
+
 	const hasBlockTextCategory =
 		blockCategory === 'text' && ! textBlockWithOutline;
 	const hasBlockMediaCategory =
@@ -47,6 +49,7 @@ function BlockOutline( {
 		( ( hasBlockTextCategory && hasInnerBlocks ) ||
 			( ! hasBlockTextCategory && hasInnerBlocks ) ||
 			( ! hasBlockTextCategory && isRootList ) ||
+			socialBlockWithOutline ||
 			textBlockWithOutline );
 
 	return (

package/src/components/block-list/content.scss

@@ -85,7 +85,6 @@
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;
 
@@ -113,8 +112,6 @@
 
 	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-		box-shadow: none;
-		outline: none;
 
 		&::after {
 			content: "";
@@ -130,6 +127,8 @@
 			top: -$default-block-margin * 0.5;
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
+			bottom: auto;
+			box-shadow: none;
 		}
 	}
 

package/src/components/block-list/index.js

@@ -31,7 +31,6 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
-import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
@@ -39,6 +38,7 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
+import { useTypingObserver } from '../observe-typing';
 
 const elementContext = createContext();
 
@@ -104,7 +104,7 @@ function Root( { className, ...settings } ) {
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
-				setElement,
+				useTypingObserver(),
 			] ),
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
@@ -118,13 +118,14 @@ function Root( { className, ...settings } ) {
 		<elementContext.Provider value={ element }>
 			<IntersectionObserver.Provider value={ intersectionObserver }>
 				<div { ...innerBlocksProps } />
+				{ /* Ensure element and layout styles are always at the end of the document */ }
+				<div ref={ setElement } />
 			</IntersectionObserver.Provider>
 		</elementContext.Provider>
 	);
 }
 
 export default function BlockList( settings ) {
-	usePreParsePatterns();
 	return (
 		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
 			<Root { ...settings } />

package/src/components/block-list/use-block-props/index.js

@@ -53,6 +53,32 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
+ * Use of this hook on the outermost element of a block is required if using API >= v2.
+ *
+ * @example
+ * ```js
+ * import { useBlockProps } from '@wordpress/block-editor';
+ *
+ * export default function Edit() {
+ *
+ *   const blockProps = useBlockProps(
+ *     className: 'my-custom-class',
+ *     style: {
+ *       color: '#222222',
+ *       backgroundColor: '#eeeeee'
+ *     }
+ *   )
+ *
+ *   return (
+ *	    <div { ...blockProps }>
+ *
+ *     </div>
+ *   )
+ * }
+ *
+ * ```
+ *
+ *
  * @param {Object}  props                    Optional. Props to pass to the element. Must contain
  *                                           the ref if one is defined.
  * @param {Object}  options                  Options for internal use only.

package/src/components/block-list/use-block-props/use-nav-mode-exit.js

@@ -38,7 +38,7 @@ export function useNavModeExit( clientId ) {
 			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
-				node.addEventListener( 'mousedown', onMouseDown );
+				node.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
 		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]

package/src/components/block-lock/menu-item.js

@@ -31,6 +31,8 @@ export default function BlockLockMenuItem( { clientId } ) {
 			<MenuItem
 				icon={ isLocked ? unlock : lockOutline }
 				onClick={ toggleModal }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
 			>
 				{ label }
 			</MenuItem>

package/src/components/block-lock/toolbar.js

@@ -59,10 +59,12 @@ export default function BlockLockToolbar( { clientId, wrapperRef } ) {
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
+					ref={ lockButtonRef }
 					icon={ lock }
 					label={ __( 'Unlock' ) }
 					onClick={ toggleModal }
-					ref={ lockButtonRef }
+					aria-expanded={ isModalOpen }
+					aria-haspopup="dialog"
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

package/src/components/block-popover/inbetween.js

@@ -81,10 +81,10 @@ function BlockPopoverInbetween( {
 			return undefined;
 		}
 
-		const { ownerDocument } = previousElement || nextElement;
+		const contextElement = previousElement || nextElement;
 
 		return {
-			ownerDocument,
+			contextElement,
 			getBoundingClientRect() {
 				const previousRect = previousElement
 					? previousElement.getBoundingClientRect()
@@ -215,7 +215,8 @@ function BlockPopoverInbetween( {
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }

package/src/components/block-popover/index.js

@@ -142,7 +142,7 @@ function BlockPopover(
 
 				return new window.DOMRect( left, top, width, height );
 			},
-			ownerDocument: selectedElement.ownerDocument,
+			contextElement: selectedElement,
 		};
 	}, [
 		bottomClientId,
@@ -163,7 +163,8 @@ function BlockPopover(
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			placement="top-start"
 			resize={ false }
 			flip={ false }

package/src/components/block-styles/style.scss

@@ -4,9 +4,6 @@
 
 .block-editor-block-styles__preview-panel {
 	display: none;
-	position: absolute;
-	right: $grid-unit-20;
-	left: auto;
 	// Same layer as the sidebar from which it's triggered.
 	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 

package/src/components/button-block-appender/content.scss

@@ -35,6 +35,7 @@
 
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
+	// One level of nesting
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// Legacy groups have an inner container so need to be targeted separately
@@ -69,6 +70,13 @@
 		}
 	}
 
+	// Hide the dashed outline in 2-level nested cases, so for example the dashed
+	// empty column is only shown when the columns block is selected.
+	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
+		border: none;
+	}
+
+	// Drop zone.
 	&.is-drag-over .block-editor-button-block-appender {
 		background-color: var(--wp-admin-theme-color);
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

package/src/components/color-style-selector/index.js

@@ -13,7 +13,7 @@ import { DOWN } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 		<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
 	</SVG>
 );

package/src/components/iframe/index.js

@@ -194,6 +194,7 @@ function Iframe( {
 	const html = `<!doctype html>
 <html>
 	<head>
+		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
 		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
 		${ styles }

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,18 +13,22 @@ import { store as blockEditorStore } from '../../store';
 import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { items } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
 
 			return {
-				items: filterInserterItems( allItems, { onlyReusable: true } ),
+				inserterItems: allItems,
 			};
 		},
 		[ rootClientId ]
 	);
 
+	const items = useMemo( () => {
+		return filterInserterItems( inserterItems, { onlyReusable: true } );
+	}, [ inserterItems ] );
+
 	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
 
 	return (

package/src/components/inserter/search-results.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,21 +22,24 @@ function InserterSearchResults( {
 	rootClientId,
 	isFullScreen,
 } ) {
-	const { blockTypes } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
-			const allItems =
+			const items =
 				select( blockEditorStore ).getInserterItems( rootClientId );
 
-			const availableItems = filterInserterItems( allItems, {
-				allowReusable: true,
-			} );
-			const filteredItems = searchItems( availableItems, filterValue );
-
-			return { blockTypes: filteredItems };
+			return { inserterItems: items };
 		},
-		[ rootClientId, filterValue ]
+		[ rootClientId ]
 	);
 
+	const blockTypes = useMemo( () => {
+		const availableItems = filterInserterItems( inserterItems, {
+			allowReusable: true,
+		} );
+
+		return searchItems( availableItems, filterValue );
+	}, [ inserterItems, filterValue ] );
+
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 

package/src/components/link-control/index.js

@@ -422,11 +422,7 @@ function LinkControl( {
 									settings={ settings?.filter(
 										( { id } ) => id === 'opensInNewTab'
 									) }
-									onChange={ ( { opensInNewTab } ) => {
-										onChange( {
-											opensInNewTab,
-										} );
-									} }
+									onChange={ onChange }
 								/>
 							);
 						}

package/src/components/link-control/test/index.js

@@ -1789,6 +1789,7 @@ describe( 'Addition Settings UI', () => {
 
 		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
 		expect( mockOnChange ).toHaveBeenCalledWith( {
+			...selectedLink,
 			opensInNewTab: true,
 		} );
 	} );