@wordpress/block-editor 8.0.11 → 8.0.12-next.33ec3857e2.0

package/src/components/default-block-appender/index.js

@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -26,13 +26,12 @@ export const ZWNBSP = '\ufeff';
 
 export function DefaultBlockAppender( {
 	isLocked,
-	isVisible,
 	onAppend,
 	showPrompt,
 	placeholder,
 	rootClientId,
 } ) {
-	if ( isLocked || ! isVisible ) {
+	if ( isLocked ) {
 		return null;
 	}
 
@@ -48,20 +47,23 @@ export function DefaultBlockAppender( {
 		>
 			<p
 				tabIndex="0"
-				// Only necessary for `useCanvasClickRedirect` to consider it
-				// as a target. Ideally it should consider any tabbable target,
-				// but the inserter is rendered in place while it should be
-				// rendered in a popover, just like it does for an empty
-				// paragraph block.
-				contentEditable
-				suppressContentEditableWarning
 				// We want this element to be styled as a paragraph by themes.
 				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
-				aria-label={ __( 'Add block' ) }
+				aria-label={ __( 'Add default block' ) }
 				// A wrapping container for this one already has the wp-block className.
 				className="block-editor-default-block-appender__content"
-				onFocus={ onAppend }
+				onKeyDown={ ( event ) => {
+					if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+						onAppend();
+					}
+				} }
+				onClick={ () => onAppend() }
+				onFocus={ () => {
+					if ( showPrompt ) {
+						onAppend();
+					}
+				} }
 			>
 				{ showPrompt ? value : ZWNBSP }
 			</p>
@@ -77,23 +79,14 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockCount,
-			getBlockName,
-			isBlockValid,
-			getSettings,
-			getTemplateLock,
-		} = select( blockEditorStore );
+		const { getBlockCount, getSettings, getTemplateLock } = select(
+			blockEditorStore
+		);
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const isLastBlockDefault =
-			getBlockName( ownProps.lastBlockClientId ) ===
-			getDefaultBlockName();
-		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
 		const { bodyPlaceholder } = getSettings();
 
 		return {
-			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			showPrompt: isEmpty,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 			placeholder: bodyPlaceholder,

package/src/components/default-block-appender/style.scss

@@ -126,3 +126,7 @@
 		display: flex;
 	}
 }
+
+.block-editor-default-block-appender__content {
+	cursor: text;
+}

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -6,24 +6,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={
-      [MockFunction] {
-        "calls": Array [
-          Array [],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -42,12 +30,12 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={[MockFunction]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -66,12 +54,12 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={[MockFunction]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     

package/src/components/default-block-appender/test/index.js

@@ -14,16 +14,10 @@ describe( 'DefaultBlockAppender', () => {
 		expect( onAppend ).toHaveBeenCalledWith();
 	};
 
-	it( 'should render nothing if not visible', () => {
-		const wrapper = shallow( <DefaultBlockAppender /> );
-
-		expect( wrapper.type() ).toBe( null );
-	} );
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
 		expect( wrapper ).toMatchSnapshot();
@@ -32,10 +26,10 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should append a default block when input focused', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'focus' );
+		wrapper.find( 'p' ).simulate( 'click' );
 
 		expect( wrapper ).toMatchSnapshot();
 
@@ -45,11 +39,7 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should optionally show without prompt', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender
-				isVisible
-				onAppend={ onAppend }
-				showPrompt={ false }
-			/>
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
 		const input = wrapper.find( 'p' );
 

package/src/components/default-style-picker/index.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getDefaultStyle } from '../block-styles/utils';
 
 export default function DefaultStylePicker( { blockName } ) {
 	const {
@@ -38,6 +39,9 @@ export default function DefaultStylePicker( { blockName } ) {
 		],
 		[ styles ]
 	);
+	const defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [
+		styles,
+	] );
 	const selectOnChange = useCallback(
 		( blockStyle ) => {
 			onUpdatePreferredStyleVariations( blockName, blockStyle );
@@ -45,14 +49,22 @@ export default function DefaultStylePicker( { blockName } ) {
 		[ blockName, onUpdatePreferredStyleVariations ]
 	);
 
+	// Until the functionality is migrated to global styles,
+	// only show the default style picker if a non-default style has already been selected.
+	if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
+		return null;
+	}
+
 	return (
 		onUpdatePreferredStyleVariations && (
-			<SelectControl
-				options={ selectOptions }
-				value={ preferredStyle || '' }
-				label={ __( 'Default Style' ) }
-				onChange={ selectOnChange }
-			/>
+			<div className="default-style-picker__default-switcher">
+				<SelectControl
+					options={ selectOptions }
+					value={ preferredStyle || '' }
+					label={ __( 'Default Style' ) }
+					onChange={ selectOnChange }
+				/>
+			</div>
 		)
 	);
 }

package/src/components/iframe/index.js

@@ -164,12 +164,15 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
+function Iframe(
+	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	ref
+) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( window.__editorAssets?.styles );
-	const scripts = useParsedAssets( window.__editorAssets?.scripts );
+	const styles = useParsedAssets( assets?.styles );
+	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {

package/src/components/index.js

@@ -24,6 +24,7 @@ export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as BlockStyles } from './block-styles';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -103,7 +104,10 @@ export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
 export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
-export { default as BlockPreview } from './block-preview';
+export {
+	default as BlockPreview,
+	useBlockPreview as __experimentalUseBlockPreview,
+} from './block-preview';
 export {
 	default as BlockSelectionClearer,
 	useBlockSelectionClearer as __unstableUseBlockSelectionClearer,
@@ -137,7 +141,6 @@ export {
 } from './typewriter';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
-export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';

package/src/components/inner-blocks/README.md

@@ -41,6 +41,8 @@ _Note:_ A block can render at most a single `InnerBlocks` and `InnerBlocks.Conte
 
 _Note:_ Because the save step will automatically apply props to the element returned by `save`, it is important to include the wrapping `div` in the above simple example even though we are applying no props of our own. In a real-world example, you may have your own attributes to apply to the saved markup, or sibling content adjacent to the rendered nested blocks.
 
+_Note:_ Inner blocks, by default, are not visible inside a WordPress excerpt. If you wish your block to appear then it needs to be returned from the `excerpt_allowed_wrapper_blocks` filter. More details can be found on the [filter reference page](https://developer.wordpress.org/reference/hooks/excerpt_allowed_wrapper_blocks/) page, as well as the [excerpt_remove_blocks](https://developer.wordpress.org/reference/functions/excerpt_remove_blocks/) page.
+
 ## Props
 
 ### `allowedBlocks`

package/src/components/inner-blocks/default-block-appender.js

@@ -16,13 +16,8 @@ import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 import { store as blockEditorStore } from '../../store';
 
-export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
-	return (
-		<BaseDefaultBlockAppender
-			rootClientId={ clientId }
-			lastBlockClientId={ lastBlockClientId }
-		/>
-	);
+export const DefaultBlockAppender = ( { clientId } ) => {
+	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
 };
 
 export default compose( [

package/src/components/inserter/index.native.js

@@ -7,7 +7,7 @@ import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -34,7 +34,7 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
 const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={ __( 'Add block' ) }
+		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }

package/src/components/inserter/tabs.native.js

@@ -63,7 +63,7 @@ function InserterTabs( {
 	}, [ tabIndex ] );
 
 	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = InserterTabs.getTabs().filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return {
@@ -114,8 +114,9 @@ function InserterTabs( {
 }
 
 function TabsControl( { onChangeTab, showReusableBlocks } ) {
+	const tabs = InserterTabs.getTabs();
 	const segments = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = tabs.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return filteredTabs.map( ( { title } ) => title );
@@ -123,7 +124,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 	const segmentHandler = useCallback(
 		( selectedTab ) => {
-			const tabTitles = InserterTabs.TABS.map( ( { title } ) => title );
+			const tabTitles = tabs.map( ( { title } ) => title );
 			onChangeTab( tabTitles.indexOf( selectedTab ) );
 		},
 		[ onChangeTab ]
@@ -139,7 +140,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 InserterTabs.Control = TabsControl;
 
-InserterTabs.TABS = [
+InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
 	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
 ];

package/src/components/inspector-controls/block-support-slot-container.js

@@ -6,5 +6,7 @@ import { useContext } from '@wordpress/element';
 
 export default function BlockSupportSlotContainer( { Slot, ...props } ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
-	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+	return (
+		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+	);
 }

package/src/components/inspector-controls/fill.native.js

@@ -14,7 +14,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
-import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -22,13 +22,14 @@ export default function InspectorControlsFill( {
 	__experimentalGroup: group = 'default',
 	...props
 } ) {
-	const { isSelected } = useBlockEditContext();
+	const isDisplayed = useDisplayBlockControls();
+
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isSelected ) {
+	if ( ! isDisplayed ) {
 		return null;
 	}
 

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

@@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -15,6 +16,7 @@ const InspectorControlsTypography = createSlotFill(
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	border: InspectorControlsBorder,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

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

@@ -13,7 +13,6 @@ import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
-	bubblesVirtually = true,
 	label,
 	...props
 } ) {
@@ -32,14 +31,10 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer
-					{ ...props }
-					bubblesVirtually={ bubblesVirtually }
-					Slot={ Slot }
-				/>
+				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
+	return <Slot { ...props } bubblesVirtually />;
 }

package/src/components/letter-spacing-control/index.js

@@ -15,12 +15,12 @@ import useSetting from '../../components/use-setting';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props                      Component props.
- * @param {string}   props.value                Currently selected letter-spacing.
- * @param {Function} props.onChange             Handles change in letter-spacing selection.
- * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected letter-spacing.
+ * @param {Function}                props.onChange             Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement}                          Letter-spacing control.
+ * @return {WPElement} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,
@@ -33,7 +33,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
-			label={ __( 'Letter-spacing' ) }
+			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }

package/src/components/link-control/README.md

@@ -114,7 +114,7 @@ Controls the query parameters used to search for suggestions. For example, to li
 
 ```jsx
 <LinkControl
-	suggestionQuery={ {
+	suggestionsQuery={ {
 		type: 'post',
 		subtype: 'page',
 	} }

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

@@ -1634,6 +1634,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should have highlighted the first item using the keyboard
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						secondSearchSuggestion
 					);
@@ -1648,6 +1649,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should be back to highlighting the first search result again
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						firstSearchSuggestion
 					);

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

@@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 function ListViewBlockSelectButton(
 	{
@@ -47,6 +48,22 @@ function ListViewBlockSelectButton(
 		level
 	);
 
+	// The `href` attribute triggers the browser's native HTML drag operations.
+	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
+	// inside the `useOnBlockDrop` hook.
+	const onDragStartHandler = ( event ) => {
+		event.dataTransfer.clearData();
+		onDragStart( event );
+	};
+
+	function onKeyDownHandler( event ) {
+		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
+			event.preventDefault();
+			onClick( event );
+		}
+	}
+
 	return (
 		<>
 			<Button
@@ -55,13 +72,15 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onKeyDown={ onKeyDownHandler }
 				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
-				onDragStart={ onDragStart }
+				onDragStart={ onDragStartHandler }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
+				href={ `#block-${ clientId }` }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

package/src/components/media-placeholder/index.js

@@ -75,6 +75,7 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
+	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -328,6 +329,7 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
+				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

package/src/components/media-replace-flow/index.js

@@ -39,6 +39,7 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
+	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -136,6 +137,7 @@ const MediaReplaceFlow = ( {
 							value={ mediaId }
 							onSelect={ ( media ) => selectMedia( media ) }
 							allowedTypes={ allowedTypes }
+							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }

package/src/components/rich-text/file-paste-handler.js

@@ -5,7 +5,9 @@ import { createBlobURL } from '@wordpress/blob';
 
 export function filePasteHandler( files ) {
 	return files
-		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
+		.filter( ( { type } ) =>
+			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
+		)
 		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
 		.join( '' );
 }

package/src/components/rich-text/prevent-event-discovery.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { insert } from '@wordpress/rich-text';
+
+export function preventEventDiscovery( value ) {
+	const searchText = 'tales of gutenberg';
+	const addText =
+		' 🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️';
+	const { start, text } = value;
+
+	if ( start < searchText.length ) {
+		return value;
+	}
+
+	const charactersBefore = text.slice( start - searchText.length, start );
+
+	if ( charactersBefore.toLowerCase() !== searchText ) {
+		return value;
+	}
+
+	return insert( value, addText );
+}

package/src/components/rich-text/use-input-rules.js

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { preventEventDiscovery } from './prevent-event-discovery';
 
 export function useInputRules( props ) {
 	const {
@@ -85,7 +86,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				value
+				preventEventDiscovery( value )
 			);
 
 			if ( transformed !== value ) {

package/src/components/selection-scroll-into-view/index.js

@@ -12,6 +12,7 @@ import deprecated from '@wordpress/deprecated';
 export function MultiSelectScrollIntoView() {
 	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
 		hint: 'This behaviour is now built-in.',
+		since: '5.8',
 	} );
 	return null;
 }