@wordpress/block-editor 14.10.0 → 14.11.0

package/src/components/block-rename/modal.js

@@ -11,24 +11,44 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../store';
+import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
 
-export default function BlockRenameModal( {
-	blockName,
-	originalBlockName,
-	onClose,
-	onSave,
+export default function BlockRenameModal( { clientId, onClose } ) {
+	const [ editedBlockName, setEditedBlockName ] = useState();
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			return {
+				metadata: getBlockAttributes( clientId )?.metadata,
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const blockName = metadata?.name || '';
+	const originalBlockName = blockInformation?.title;
 	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
 	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
-	hasOverridesWarning,
-} ) {
-	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const hasOverridesWarning =
+		!! blockName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
-	const nameHasChanged = editedBlockName !== blockName;
+	const nameHasChanged =
+		editedBlockName !== undefined && editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
 	const nameIsEmpty = isEmptyString( editedBlockName );
 
@@ -37,6 +57,8 @@ export default function BlockRenameModal( {
 	const autoSelectInputText = ( event ) => event.target.select();
 
 	const handleSubmit = () => {
+		const newName =
+			nameIsOriginal || nameIsEmpty ? undefined : editedBlockName;
 		const message =
 			nameIsOriginal || nameIsEmpty
 				? sprintf(
@@ -52,7 +74,12 @@ export default function BlockRenameModal( {
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
-		onSave( editedBlockName );
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...metadata,
+				name: newName,
+			},
+		} );
 
 		// Immediate close avoids ability to hit save multiple times.
 		onClose();
@@ -81,7 +108,7 @@ export default function BlockRenameModal( {
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
-						value={ editedBlockName }
+						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }
 						help={
 							hasOverridesWarning
@@ -105,7 +132,8 @@ export default function BlockRenameModal( {
 
 						<Button
 							__next40pxDefaultSize
-							aria-disabled={ ! isNameValid }
+							accessibleWhenDisabled
+							disabled={ ! isNameValid }
 							variant="primary"
 							type="submit"
 						>

package/src/components/block-rename/rename-control.js

@@ -2,54 +2,17 @@
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
-import { useBlockDisplayInformation } from '..';
-import isEmptyString from './is-empty-string';
 import BlockRenameModal from './modal';
 
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-
-			const _metadata = getBlockAttributes( clientId )?.metadata;
-			return {
-				metadata: _metadata,
-			};
-		},
-		[ clientId ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const customName = metadata?.name;
-	const hasPatternOverrides =
-		!! customName &&
-		!! metadata?.bindings &&
-		Object.values( metadata.bindings ).some(
-			( binding ) => binding.source === 'core/pattern-overrides'
-		);
-
-	function onChange( newName ) {
-		updateBlockAttributes( [ clientId ], {
-			metadata: {
-				...metadata,
-				name: newName,
-			},
-		} );
-	}
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-
 	return (
 		<>
 			<MenuItem
@@ -63,23 +26,8 @@ export default function BlockRenameControl( { clientId } ) {
 			</MenuItem>
 			{ renamingBlock && (
 				<BlockRenameModal
-					blockName={ customName || '' }
-					originalBlockName={ blockInformation?.title }
-					hasOverridesWarning={ hasPatternOverrides }
+					clientId={ clientId }
 					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName ) => {
-						// If the new value is the block's original name (e.g. `Group`)
-						// or it is an empty string then assume the intent is to reset
-						// the value. Therefore reset the metadata.
-						if (
-							newName === blockInformation?.title ||
-							isEmptyString( newName )
-						) {
-							newName = undefined;
-						}
-
-						onChange( newName );
-					} }
 				/>
 			) }
 		</>

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -26,17 +26,30 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
+function CopyMenuItem( {
+	clientIds,
+	onCopy,
+	label,
+	shortcut,
+	eventType = 'copy',
+} ) {
 	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
 	const ref = useCopyToClipboard(
 		() => serialize( getBlocksByClientId( clientIds ) ),
-		onCopy
+		() => {
+			if ( onCopy && eventType === 'copy' ) {
+				onCopy();
+			}
+			notifyCopy( eventType, clientIds );
+		}
 	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return (
@@ -305,6 +318,7 @@ export function BlockSettingsDropdown( {
 											clientIds={ clientIds }
 											onCopy={ onCopy }
 											label={ __( 'Copy styles' ) }
+											eventType="copyStyles"
 										/>
 										<MenuItem onClick={ onPasteStyles }>
 											{ __( 'Paste styles' ) }

package/src/components/block-styles/preview.native.js

@@ -33,7 +33,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 
 	function onLayout() {
 		const columnsNum =
-			// To indicate scroll availabilty, there is a need to display additional half the column.
+			// To indicate scroll availability, there is a need to display additional half the column.
 			Math.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;
 		setItemWidth( BottomSheet.getWidth() / columnsNum );
 	}

package/src/components/block-switcher/block-transformations-menu.js

@@ -27,20 +27,20 @@ import BlockVariationTransformations from './block-variation-transformations';
  * @return {Record<string, Object[]>} The grouped block transformations.
  */
 function useGroupedTransforms( possibleBlockTransformations ) {
-	const priorityContentTranformationBlocks = {
+	const priorityContentTransformationBlocks = {
 		'core/paragraph': 1,
 		'core/heading': 2,
 		'core/list': 3,
 		'core/quote': 4,
 	};
 	const transformations = useMemo( () => {
-		const priorityTextTranformsNames = Object.keys(
-			priorityContentTranformationBlocks
+		const priorityTextTransformsNames = Object.keys(
+			priorityContentTransformationBlocks
 		);
 		const groupedPossibleTransforms = possibleBlockTransformations.reduce(
 			( accumulator, item ) => {
 				const { name } = item;
-				if ( priorityTextTranformsNames.includes( name ) ) {
+				if ( priorityTextTransformsNames.includes( name ) ) {
 					accumulator.priorityTextTransformations.push( item );
 				} else {
 					accumulator.restTransformations.push( item );
@@ -71,8 +71,8 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 	// Order the priority text transformations.
 	transformations.priorityTextTransformations.sort(
 		( { name: currentName }, { name: nextName } ) => {
-			return priorityContentTranformationBlocks[ currentName ] <
-				priorityContentTranformationBlocks[ nextName ]
+			return priorityContentTransformationBlocks[ currentName ] <
+				priorityContentTransformationBlocks[ nextName ]
 				? -1
 				: 1;
 		}
@@ -125,7 +125,7 @@ const BlockTransformationsMenu = ( {
 					/>
 				) }
 				{ priorityTextTransformations.map( ( item ) => (
-					<BlockTranformationItem
+					<BlockTransformationItem
 						key={ item.name }
 						item={ item }
 						onSelect={ onSelect }
@@ -151,7 +151,7 @@ function RestTransformationItems( {
 	setHoveredTransformItemName,
 } ) {
 	return restTransformations.map( ( item ) => (
-		<BlockTranformationItem
+		<BlockTransformationItem
 			key={ item.name }
 			item={ item }
 			onSelect={ onSelect }
@@ -160,7 +160,7 @@ function RestTransformationItems( {
 	) );
 }
 
-function BlockTranformationItem( {
+function BlockTransformationItem( {
 	item,
 	onSelect,
 	setHoveredTransformItemName,

package/src/components/block-switcher/block-variation-transformations.js

@@ -74,7 +74,7 @@ const BlockVariationTransformations = ( {
 				/>
 			) }
 			{ transformations?.map( ( item ) => (
-				<BlockVariationTranformationItem
+				<BlockVariationTransformationItem
 					key={ item.name }
 					item={ item }
 					onSelect={ onSelect }
@@ -85,7 +85,7 @@ const BlockVariationTransformations = ( {
 	);
 };
 
-function BlockVariationTranformationItem( {
+function BlockVariationTransformationItem( {
 	item,
 	onSelect,
 	setHoveredTransformItemName,

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

@@ -82,7 +82,7 @@ function BlockSwitcherDropdownMenuContents( {
 			);
 		}
 	}
-	// Simple block tranformation based on the `Block Transforms` API.
+	// Simple block transformation based on the `Block Transforms` API.
 	function onBlockTransform( name ) {
 		const newBlocks = switchToBlockType( blocks, name );
 		replaceBlocks( clientIds, newBlocks );

package/src/components/block-switcher/use-transformed-patterns.js

@@ -72,7 +72,7 @@ export const getPatternTransformedBlocks = (
 			// No need to loop through other pattern's blocks.
 			break;
 		}
-		// Bail eary if a selected block has not been matched.
+		// Bail early if a selected block has not been matched.
 		if ( ! isMatch ) {
 			return;
 		}

package/src/components/block-toolbar/index.native.js

@@ -14,7 +14,7 @@ import UngroupButton from '../ungroup-button';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-const REMOVE_EMPY_PARENT_BLOCKS = [
+const REMOVE_EMPTY_PARENT_BLOCKS = [
 	'core/buttons',
 	'core/columns',
 	'core/social-links',
@@ -69,7 +69,7 @@ export default function BlockToolbar( { anchorNodeRef } ) {
 		// have inner blocks, ideally we should match the behavior as in
 		// the Web editor and show a placeholder instead of removing the parent.
 		if (
-			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			REMOVE_EMPTY_PARENT_BLOCKS.includes( parentBlockName ) &&
 			parentNumberOfInnerBlocks === 1
 		) {
 			removeBlock( rootClientId );

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -217,7 +217,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         class="components-circular-option-picker__option-wrapper"
                       >
                         <button
-                          aria-label="Color: red"
+                          aria-label="red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"

package/src/components/colors-gradients/style.scss

@@ -111,6 +111,7 @@ $swatch-gap: 12px;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
 	}
 }
 

package/src/components/colors-gradients/test/control.js

@@ -51,7 +51,7 @@ describe( 'ColorPaletteControl', () => {
 		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -80,7 +80,7 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {

package/src/components/date-format-picker/index.js

@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 
 // So that we illustrate the different formats in the dropdown properly, show a date that is
-// somwhat recent, has a day greater than 12, and a month with more than three letters.
+// somewhat recent, has a day greater than 12, and a month with more than three letters.
 const exampleDate = new Date();
 exampleDate.setDate( 20 );
 exampleDate.setMonth( exampleDate.getMonth() - 3 );

package/src/components/duotone-control/style.scss

@@ -4,11 +4,11 @@ $swatch-size: 28px;
 $swatch-gap: 12px;
 
 $popover-width: 260px;
-$popover-padding: $grid-unit-20;
+$popover-padding: $grid-unit-10;
 
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
-.block-editor-duotone-control__popover {
+.block-editor-duotone-control__popover.components-popover {
 	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;

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

@@ -144,10 +144,12 @@ export default function FiltersPanel( {
 		const duotonePreset = duotonePalette.find( ( { colors } ) => {
 			return colors === newValue;
 		} );
-		const settedValue = duotonePreset
+		const duotoneValue = duotonePreset
 			? `var:preset|duotone|${ duotonePreset.slug }`
 			: newValue;
-		onChange( setImmutably( value, [ 'filter', 'duotone' ], settedValue ) );
+		onChange(
+			setImmutably( value, [ 'filter', 'duotone' ], duotoneValue )
+		);
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );

package/src/components/global-styles/image-settings-panel.js

@@ -61,14 +61,14 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on click' ) }
+					label={ __( 'Enlarge on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Expand on click' ) }
+						label={ __( 'Enlarge on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

package/src/components/global-styles/test/typography-utils.js

@@ -585,7 +585,7 @@ describe( 'typography utils', () => {
 					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			},
 
-			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
+			// Equivalent custom config PHP unit tests in `test_should_convert_font_sizes_to_fluid_values()`.
 			{
 				message: 'should return clamp value using custom fluid config',
 				preset: {

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

@@ -1337,12 +1337,12 @@ export function processCSSNesting( css, blockSelector ) {
 			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
 		} else {
 			// If the part contains braces, it's a nested CSS rule.
-			const splittedPart = part.replace( '}', '' ).split( '{' );
-			if ( splittedPart.length !== 2 ) {
+			const splitPart = part.replace( '}', '' ).split( '{' );
+			if ( splitPart.length !== 2 ) {
 				return;
 			}
 
-			const [ nestedSelector, cssValue ] = splittedPart;
+			const [ nestedSelector, cssValue ] = splitPart;
 
 			// Handle pseudo elements such as ::before, ::after, etc. Regex will also
 			// capture any leading combinator such as >, +, or ~, as well as spaces.

package/src/components/iframe/get-compatibility-styles.js

@@ -2,7 +2,7 @@ let compatibilityStyles = null;
 
 /**
  * Returns a list of stylesheets that target the editor canvas. A stylesheet is
- * considered targetting the editor a canvas if it contains the
+ * considered targeting the editor a canvas if it contains the
  * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
  *
  * Ideally, this hook should be removed in the future and styles should be added

package/src/components/iframe/index.js

@@ -330,7 +330,7 @@ function Iframe( {
 			>
 				{ iframeDocument &&
 					createPortal(
-						// We want to prevent React events from bubbling throught the iframe
+						// We want to prevent React events from bubbling through the iframe
 						// we bubble these manually.
 						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body

package/src/components/image-size-control/index.js

@@ -8,7 +8,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -137,7 +137,11 @@ export default function ImageSizeControl( {
 								<ToggleGroupControlOption
 									key={ scale }
 									value={ scale }
-									label={ `${ scale }%` }
+									label={ sprintf(
+										/* translators: Percentage value. */
+										__( '%d%%' ),
+										scale
+									) }
 								/>
 							);
 						} ) }

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

@@ -125,7 +125,7 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
 Template locking allows locking the `InnerBlocks` area for the current template.
 _Options:_
 
--   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
+-   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overridable by children.
 -   `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -57,7 +57,7 @@ export function PatternsFilter( {
 } ) {
 	// If the category is `myPatterns` then we need to set the source filter to `user`, but
 	// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
-	// the user may be confused when switching to another category if the haven't explicity set
+	// the user may be confused when switching to another category if the haven't explicitly set
 	// this filter themselves.
 	const currentPatternSourceFilter =
 		category?.name === myPatternsCategory.name

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

@@ -29,7 +29,7 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 		return filterInserterItems( inserterItems, { onlyReusable: true } );
 	}, [ inserterItems ] );
 
-	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
+	const sections = [ createInserterSection( { key: 'reusable', items } ) ];
 
 	return (
 		<BlockTypesList

package/src/components/line-height-control/index.native.js

@@ -14,7 +14,7 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	return (
 		<UnitControl
 			label={ __( 'Line Height' ) }
-			// Set minimun value of 1 since lower values break on Android
+			// Set minimum value of 1 since lower values break on Android
 			min={ 1 }
 			max={ 5 }
 			step={ STEP }

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

@@ -50,7 +50,7 @@ Consumers who which to take advantage of this functionality should ensure that t
 When creating links the `LinkControl` component will handle two kinds of input from users:
 
 1. Entity searches - the user may input free-text based search queries for entities retrieved from remote data sources (in the context of WordPress these are post-type entities). For example, a user might search for a `Page` they have just created by name (eg: About) and the UI will return a matching result if found.
-2. Direct entry - the user may also enter any arbitrary URL-like text. This includes full URLs (https://), URL fragements (eg: `#myinternallink`), `tel` protocol links (eg: `tel: 0800 1234`) and `mailto` protocol links (eg: `mailto: hello@wordpress.org`).
+2. Direct entry - the user may also enter any arbitrary URL-like text. This includes full URLs (https://), URL fragments (eg: `#myinternallink`), `tel` protocol links (eg: `tel: 0800 1234`) and `mailto` protocol links (eg: `mailto: hello@wordpress.org`).
 
 In addition, `<LinkControl>` also allows for on the fly creation of links based on the **current content of the `<input>` element**. When enabled, a default "Create new" search suggestion is appended to all non-URL-like search results.
 
@@ -79,7 +79,7 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
-Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stabilized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
 
 ```jsx
 const memoizedValue = useMemo(

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

@@ -265,7 +265,7 @@ function LinkControl( {
 
 	const handleSelectSuggestion = ( updatedValue ) => {
 		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
-		// which should not overide any existing settings values set by the
+		// which should not override any existing settings values set by the
 		// user. This filters out any settings values from the suggestion.
 		const nonSettingsChanges = Object.keys( updatedValue ).reduce(
 			( acc, key ) => {

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

@@ -31,7 +31,7 @@ const mockFetchSearchSuggestions = jest.fn();
 /**
  * The call to the real method `fetchRichUrlData` is wrapped in a promise in order to make it cancellable.
  * Therefore if we pass any value as the mock of `fetchRichUrlData` then ALL of the tests will require
- * addition code to handle the async nature of `fetchRichUrlData`. This is unecessary. Instead we default
+ * addition code to handle the async nature of `fetchRichUrlData`. This is unnecessary. Instead we default
  * to an undefined value which will ensure that the code under test does not call `fetchRichUrlData`. Only
  * when we are testing the "rich previews" to we update this value with a true mock.
  */
@@ -354,7 +354,7 @@ describe( 'Basic rendering', () => {
 
 		it( 'should display human friendly error message if value URL prop is empty when component is forced into no-editing (preview) mode', async () => {
 			// Why do we need this test?
-			// Occasionally `forceIsEditingLink` is set explictly to `false` which causes the Link UI to render
+			// Occasionally `forceIsEditingLink` is set explicitly to `false` which causes the Link UI to render
 			// it's preview even if the `value` has no URL.
 			// for an example of this see the usage in the following file whereby forceIsEditingLink is used to start/stop editing mode:
 			// https://github.com/WordPress/gutenberg/blob/fa5728771df7cdc86369f7157d6aa763649937a7/packages/format-library/src/link/inline.js#L151.
@@ -2422,7 +2422,7 @@ describe( 'Controlling link title text', () => {
 
 	it.each( [
 		[ '', 'Testing' ],
-		[ '(with leading and traling whitespace)', '    Testing    ' ],
+		[ '(with leading and trailing whitespace)', '    Testing    ' ],
 		[
 			// Note: link control should always preserve the original value.
 			// The consumer is responsible for filtering or otherwise handling the value.

package/src/components/link-control/use-search-handler.js

@@ -94,7 +94,7 @@ const handleEntitySearch = async (
 	return isURLLike( val ) || ! withCreateSuggestion
 		? results
 		: results.concat( {
-				// the `id` prop is intentionally ommitted here because it
+				// the `id` prop is intentionally omitted here because it
 				// is never exposed as part of the component's public API.
 				// see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316.
 				title: val, // Must match the existing `<input>`s text value.

package/src/components/list-view/README.md

@@ -15,7 +15,7 @@ In addition to presenting the structure of the blocks in the editor, the ListVie
 
 ### Usage
 
-Renders a list view with default syles.
+Renders a list view with default styles.
 
 ```jsx
 import { ListView } from '@wordpress/block-editor';