@wordpress/block-editor 8.1.2 → 8.3.0-next.e230fbab09.0

package/src/autocompleters/link.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { Icon, page, post } from '@wordpress/icons';
+
+const SHOWN_SUGGESTIONS = 10;
+
+/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
+
+/**
+ * Creates a suggestion list for links to posts or pages.
+ *
+ * @return {WPCompleter} A links completer.
+ */
+function createLinkCompleter() {
+	return {
+		name: 'links',
+		className: 'block-editor-autocompleters__link',
+		triggerPrefix: '[[',
+		options: async ( letters ) => {
+			let options = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					per_page: SHOWN_SUGGESTIONS,
+					search: letters,
+					type: 'post',
+					order_by: 'menu_order',
+				} ),
+			} );
+
+			options = options.filter( ( option ) => option.title !== '' );
+
+			return options;
+		},
+		getOptionKeywords( item ) {
+			const expansionWords = item.title.split( /\s+/ );
+			return [ ...expansionWords ];
+		},
+		getOptionLabel( item ) {
+			return (
+				<>
+					<Icon
+						key="icon"
+						icon={ item.subtype === 'page' ? page : post }
+					/>
+					{ item.title }
+				</>
+			);
+		},
+		getOptionCompletion( item ) {
+			return <a href={ item.url }>{ item.title }</a>;
+		},
+	};
+}
+
+/**
+ * Creates a suggestion list for links to posts or pages..
+ *
+ * @return {WPCompleter} A link completer.
+ */
+export default createLinkCompleter();

package/src/autocompleters/style.scss

@@ -5,3 +5,11 @@
 		margin-right: $grid-unit-10;
 	}
 }
+
+.block-editor-autocompleters__link {
+	white-space: nowrap;
+
+	.block-editor-block-icon {
+		margin-right: $grid-unit-10;
+	}
+}

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

@@ -75,7 +75,7 @@ describe( 'AlignmentUI', () => {
 		const customControls = wrapperCustomControls.props().controls;
 		expect( customControls ).toHaveLength( 2 );
 
-		// should correctly call on change when right alignment is pressed (active alignment)
+		// Should correctly call on change when right alignment is pressed (active alignment)
 		const rightControl = customControls.find(
 			( { align } ) => align === 'custom-right'
 		);
@@ -85,7 +85,7 @@ describe( 'AlignmentUI', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 		onChangeSpy.mockClear();
 
-		// should correctly call on change when right alignment is pressed (inactive alignment)
+		// Should correctly call on change when right alignment is pressed (inactive alignment)
 		const leftControl = customControls.find(
 			( { align } ) => align === 'custom-left'
 		);

package/src/components/autocomplete/index.js

@@ -19,6 +19,7 @@ import { getDefaultBlockName, getBlockSupport } from '@wordpress/blocks';
  */
 import { useBlockEditContext } from '../block-edit/context';
 import blockAutocompleter from '../../autocompleters/block';
+import linkAutocompleter from '../../autocompleters/link';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -39,6 +40,7 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		) {
 			filteredCompleters = filteredCompleters.concat( [
 				blockAutocompleter,
+				linkAutocompleter,
 			] );
 		}
 

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

@@ -98,7 +98,7 @@ export default function BlockActions( {
 
 			const groupingBlockName = getGroupingBlockName();
 
-			// Activate the `transform` on `core/group` which does the conversion
+			// Activate the `transform` on `core/group` which does the conversion.
 			const newBlocks = switchToBlockType( blocks, groupingBlockName );
 
 			if ( ! newBlocks ) {

package/src/components/block-alignment-control/test/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import BlockAlignmentUI from '../ui';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

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

@@ -80,7 +80,10 @@ function BlockBreadcrumb( { rootLabelText } ) {
 						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
-						<BlockTitle clientId={ parentClientId } />
+						<BlockTitle
+							clientId={ parentClientId }
+							maximumLength={ 35 }
+						/>
 					</Button>
 					<Icon
 						icon={ chevronRightSmall }
@@ -93,7 +96,7 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					className="block-editor-block-breadcrumb__current"
 					aria-current="true"
 				>
-					<BlockTitle clientId={ clientId } />
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
 				</li>
 			) }
 		</ul>

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

@@ -43,10 +43,10 @@ function BlockCompare( {
 	}
 
 	function getConvertedContent( convertedBlock ) {
-		// The convertor may return an array of items or a single item
+		// The convertor may return an array of items or a single item.
 		const newBlocks = castArray( convertedBlock );
 
-		// Get converted block details
+		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>
 			getSaveContent( item.name, item.attributes, item.innerBlocks )
 		);

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

@@ -8,7 +8,7 @@ const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;
 
-// This is just here for backward compatibility
+// This is just here for backward compatibility.
 export const BlockFormatControls = ( props ) => {
 	return <BlockControlsFill group="inline" { ...props } />;
 };

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

@@ -52,7 +52,7 @@ const BlockDraggable = ( {
 		blockEditorStore
 	);
 
-	// Stop dragging blocks if the block draggable is unmounted
+	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
 		return () => {
 			if ( isDragging.current ) {

package/src/components/block-draggable/stories/index.js

@@ -6,7 +6,7 @@ import BlockDraggableChip from '../draggable-chip';
 export default { title: 'BlockEditor/BlockDraggable' };
 
 export const _default = () => {
-	// create a wrapper box for the absolutely-positioned child component
+	// Create a wrapper box for the absolutely-positioned child component.
 	const wrapperStyle = { margin: '24px 0', position: 'relative' };
 	return (
 		<div style={ wrapperStyle }>

package/src/components/block-edit/edit.js

@@ -55,7 +55,7 @@ export const Edit = ( props ) => {
 		return <Component { ...props } context={ context } />;
 	}
 
-	// Generate a class name for the block's editable form
+	// Generate a class name for the block's editable form.
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;

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

@@ -53,7 +53,7 @@ function BlockHTML( { clientId } ) {
 			isValid,
 		} );
 
-		// Ensure the state is updated if we reset so it displays the default content
+		// Ensure the state is updated if we reset so it displays the default content.
 		if ( ! html ) {
 			setHtml( { content } );
 		}

package/src/components/block-list/block-invalid-warning.js

@@ -28,7 +28,7 @@ export function BlockInvalidWarning( {
 	const onCompare = useCallback( () => setCompare( true ), [] );
 	const onCompareClose = useCallback( () => setCompare( false ), [] );
 
-	// We memo the array here to prevent the children components from being updated unexpectedly
+	// We memo the array here to prevent the children components from being updated unexpectedly.
 	const hiddenActions = useMemo(
 		() =>
 			[

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

@@ -209,18 +209,18 @@ export default compose( [
 				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
-				// if list is empty, show the insertion point (via the default appender)
+				// If list is empty, show the insertion point (via the default appender)
 				( blockClientIds.length === 0 ||
-					// or if the insertion point is right before the denoted block
+					// Or if the insertion point is right before the denoted block.
 					blockClientIds[ insertionPoint.index ] === clientId );
 
 			const shouldShowInsertionPointAfter =
 				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
-				// if the insertion point is at the end of the list
+				// If the insertion point is at the end of the list.
 				blockClientIds.length === insertionPoint.index &&
-				// and the denoted block is the last one on the list, show the indicator at the end of the block
+				// And the denoted block is the last one on the list, show the indicator at the end of the block.
 				blockClientIds[ insertionPoint.index - 1 ] === clientId;
 
 			const isReadOnly = getSettings().readOnly;

package/src/components/block-list/block-selection-button.native.js

@@ -38,11 +38,11 @@ const BlockSelectionButton = ( {
 			<TouchableOpacity
 				style={ styles.button }
 				onPress={ () => {
-					/* Open BottomSheet with markup */
+					/* Open BottomSheet with markup. */
 				} }
 				disabled={
 					true
-				} /* Disable temporarily since onPress function is empty */
+				} /* Disable temporarily since onPress function is empty. */
 			>
 				{ rootClientId &&
 					rootBlockIcon && [
@@ -72,7 +72,7 @@ const BlockSelectionButton = ( {
 					numberOfLines={ 1 }
 					style={ styles.selectionButtonTitle }
 				>
-					<BlockTitle clientId={ clientId } />
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
 				</Text>
 			</TouchableOpacity>
 		</View>

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

@@ -19,7 +19,12 @@ import {
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+	useDispatch,
+	useSelect,
+} from '@wordpress/data';
 import { compose, pure, ifCondition } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
@@ -86,6 +91,10 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().supportsLayout;
+	}, [] );
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -119,10 +128,19 @@ function BlockListBlock( {
 		);
 	}
 
-	const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
+	const isAligned =
+		wrapperProps &&
+		!! wrapperProps[ 'data-align' ] &&
+		! themeSupportsLayout;
 
 	// For aligned blocks, provide a wrapper element so the block can be
 	// positioned relative to the block column.
+	// This is only kept for classic themes that don't support layout
+	// Historically we used to rely on extra divs and data-align to
+	// provide the alignments styles in the editor.
+	// Due to the differences between frontend and backend, we migrated
+	// to the layout feature, and we're now aligning the markup of frontend
+	// and backend.
 	if ( isAligned ) {
 		blockEdit = (
 			<div
@@ -164,7 +182,13 @@ function BlockListBlock( {
 
 	const value = {
 		clientId,
-		className,
+		className:
+			wrapperProps?.[ 'data-align' ] && themeSupportsLayout
+				? classnames(
+						className,
+						`align${ wrapperProps[ 'data-align' ] }`
+				  )
+				: className,
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 		isAligned,
 	};
@@ -306,7 +330,7 @@ export default compose(
 	pure,
 	applyWithSelect,
 	applyWithDispatch,
-	// block is sometimes not mounted at the right time, causing it be undefined
+	// Block is sometimes not mounted at the right time, causing it be undefined
 	// see issue for more info
 	// https://github.com/WordPress/gutenberg/issues/17013
 	ifCondition( ( { block } ) => !! block ),

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

@@ -11,6 +11,7 @@ import { Component, createRef, useMemo } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
+	useMobileGlobalStylesColors,
 	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
@@ -50,7 +51,7 @@ function BlockForType( {
 	blockWidth,
 	baseGlobalStyles,
 } ) {
-	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
+	const defaultColors = useMobileGlobalStylesColors();
 	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
@@ -85,9 +86,9 @@ function BlockForType( {
 				onReplace={ onReplace }
 				insertBlocksAfter={ insertBlocksAfter }
 				mergeBlocks={ mergeBlocks }
-				// Block level styles
+				// Block level styles.
 				wrapperProps={ wrapperProps }
-				// inherited styles merged with block level styles
+				// Inherited styles merged with block level styles.
 				style={ mergedStyle }
 				clientId={ clientId }
 				parentWidth={ parentWidth }
@@ -126,7 +127,7 @@ class BlockListBlock extends Component {
 		this.props.onInsertBlocks( blocks, this.props.order + 1 );
 
 		if ( blocks[ 0 ] ) {
-			// focus on the first block inserted
+			// Focus on the first block inserted.
 			this.props.onSelect( blocks[ 0 ].clientId );
 		}
 	}
@@ -285,7 +286,7 @@ class BlockListBlock extends Component {
 	}
 }
 
-// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference
+// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
 const wrapperPropsCache = new WeakMap();
 const emptyObj = {};
 function getWrapperProps( value, getWrapperPropsFunction ) {
@@ -338,7 +339,7 @@ export default compose( [
 			: parents[ parents.length - 1 ];
 
 		const isParentSelected =
-			// set false as a default value to prevent re-render when it's changed from null to false
+			// Set false as a default value to prevent re-render when it's changed from null to false.
 			( selectedBlockClientId || false ) &&
 			selectedBlockClientId === parentId;
 

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

@@ -171,7 +171,7 @@ export class BlockList extends Component {
 
 	render() {
 		const { isRootList } = this.props;
-		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks
+		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 		const blockList = isRootList ? (
 			<BlockListContext.Provider value={ this.scrollViewRef }>
 				{ this.renderList() }
@@ -223,7 +223,7 @@ export class BlockList extends Component {
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
-			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks
+			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
 			marginVertical: isRootList ? 0 : -marginVertical,
 			marginHorizontal: isRootList ? 0 : -marginHorizontal,
 		};
@@ -388,7 +388,7 @@ export default compose( [
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			let blockClientIds = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function
+			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
 			if ( filterInnerBlocks ) {
 				blockClientIds = filterInnerBlocks( blockClientIds );
 			}
@@ -477,9 +477,9 @@ const EmptyListComponentCompose = compose( [
 			! isStackedHorizontally &&
 			blockInsertionPointIsVisible &&
 			insertionPoint.rootClientId === rootClientId &&
-			// if list is empty, show the insertion point (via the default appender)
+			// If list is empty, show the insertion point (via the default appender)
 			( blockClientIds.length === 0 ||
-				// or if the insertion point is right before the denoted block
+				// Or if the insertion point is right before the denoted block.
 				! blockClientIds[ insertionPoint.index ] );
 
 		return {

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

@@ -321,7 +321,9 @@
 }
 
 .wp-block[data-align="left"] > *,
-.wp-block[data-align="right"] > * {
+.wp-block[data-align="right"] > *,
+.wp-block.alignleft,
+.wp-block.alignright {
 	// Without z-index, won't be clickable as "above" adjacent content.
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -43,7 +43,7 @@ export function useBlockClassNames( clientId ) {
 			const isSelected = isBlockSelected( clientId );
 			const name = getBlockName( clientId );
 			const checkDeep = true;
-			// "ancestor" is the more appropriate label due to "deep" check
+			// "ancestor" is the more appropriate label due to "deep" check.
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
 				clientId,
 				checkDeep

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { setContentEditableWrapper } from './use-multi-selection';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -95,6 +96,8 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
+		setContentEditableWrapper( ref.current, false );
+
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition ] );
 

package/src/components/block-list/use-block-props/use-multi-selection.js

@@ -10,18 +10,15 @@ import { useRefEffect } from '@wordpress/compose';
 import { store as blockEditorStore } from '../../../store';
 import { getBlockClientId } from '../../../utils/dom';
 
-function toggleRichText( container, toggle ) {
-	Array.from(
-		container
-			.closest( '.is-root-container' )
-			.querySelectorAll( '.rich-text' )
-	).forEach( ( node ) => {
-		if ( toggle ) {
-			node.setAttribute( 'contenteditable', true );
-		} else {
-			node.removeAttribute( 'contenteditable' );
-		}
-	} );
+/**
+ * Sets the `contenteditable` wrapper element to `value`.
+ *
+ * @param {HTMLElement} node  Block element.
+ * @param {boolean}     value `contentEditable` value (true or false)
+ */
+export function setContentEditableWrapper( node, value ) {
+	// Since `closest` considers `node` as a candidate, use `parentElement`.
+	node.parentElement.closest( '[contenteditable]' ).contentEditable = value;
 }
 
 /**
@@ -54,10 +51,10 @@ export function useMultiSelection( clientId ) {
 			function onSelectionChange( { isSelectionEnd } ) {
 				const selection = defaultView.getSelection();
 
-				// If no selection is found, end multi selection and enable all rich
-				// text areas.
+				// If no selection is found, end multi selection and disable the
+				// contentEditable wrapper.
 				if ( ! selection.rangeCount || selection.isCollapsed ) {
-					toggleRichText( node, true );
+					setContentEditableWrapper( node, false );
 					return;
 				}
 
@@ -70,10 +67,10 @@ export function useMultiSelection( clientId ) {
 					// If the selection is complete (on mouse up), and no
 					// multiple blocks have been selected, set focus back to the
 					// anchor element. if the anchor element contains the
-					// selection. Additionally, rich text elements that were
-					// previously disabled can now be enabled again.
+					// selection. Additionally, the contentEditable wrapper can
+					// now be disabled again.
 					if ( isSelectionEnd ) {
-						toggleRichText( node, true );
+						setContentEditableWrapper( node, false );
 
 						if ( selection.rangeCount ) {
 							const {
@@ -144,16 +141,11 @@ export function useMultiSelection( clientId ) {
 				);
 				defaultView.addEventListener( 'mouseup', onSelectionEnd );
 
-				// Removing the contenteditable attributes within the block
-				// editor is essential for selection to work across editable
-				// areas. The edible hosts are removed, allowing selection to be
-				// extended outside the DOM element. `startMultiSelect` sets a
-				// flag in the store so the rich text components are updated,
-				// but the rerender may happen very slowly, especially in Safari
-				// for the blocks that are asynchonously rendered. To ensure the
-				// browser instantly removes the selection boundaries, we remove
-				// the contenteditable attributes manually.
-				toggleRichText( node, false );
+				// Allow cross contentEditable selection by temporarily making
+				// all content editable. We can't rely on using the store and
+				// React because re-rending happens too slowly. We need to be
+				// able to select across instances immediately.
+				setContentEditableWrapper( node, true );
 			}
 
 			function onMouseDown( event ) {
@@ -189,9 +181,9 @@ export function useMultiSelection( clientId ) {
 						const start = startPath[ depth ];
 						const end = endPath[ depth ];
 						// Handle the case of having selected a parent block and
-						// then sfift+click on a child.
+						// then shift+click on a child.
 						if ( start !== end ) {
-							toggleRichText( node, false );
+							setContentEditableWrapper( node, true );
 							multiSelect( start, end );
 							event.preventDefault();
 						}

package/src/components/block-media-update-progress/index.native.js

@@ -124,7 +124,7 @@ export class BlockMediaUpdateProgress extends Component {
 		}
 	}
 
-	// ---- Block media save actions
+	// ---- Block media save actions.
 	updateMediaSaveProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
@@ -184,7 +184,7 @@ export class BlockMediaUpdateProgress extends Component {
 		}
 	}
 
-	// ---- Block media upload actions
+	// ---- Block media upload actions.
 	updateMediaUploadProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
@@ -220,7 +220,7 @@ export class BlockMediaUpdateProgress extends Component {
 	}
 
 	addMediaUploadListener() {
-		//if we already have a subscription not worth doing it again
+		// If we already have a subscription not worth doing it again.
 		if ( this.subscriptionParentMediaUpload ) {
 			return;
 		}
@@ -238,7 +238,7 @@ export class BlockMediaUpdateProgress extends Component {
 	}
 
 	addMediaSaveListener() {
-		//if we already have a subscription not worth doing it again
+		// If we already have a subscription not worth doing it again.
 		if ( this.subscriptionParentMediaSave ) {
 			return;
 		}

package/src/components/block-media-update-progress/test/index.native.js

@@ -130,7 +130,7 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		expect( onUpdateMediaUploadProgress ).toHaveBeenCalledWith( payload );
 	} );
 
-	// UPLOAD tests
+	// UPLOAD tests.
 	it( 'upload does not get affected by unrelated media uploads', () => {
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
@@ -276,7 +276,7 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
 	} );
 
-	// SAVE tests
+	// SAVE tests.
 	it( 'save does not get affected by unrelated media save events', () => {
 		const payload = {
 			state: MEDIA_SAVE_STATE_SAVING,

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -39,7 +39,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
 
 const BlockActionsMenu = ( {
-	// Select
+	// Select.
 	blockTitle,
 	canInsertBlockType,
 	getBlocksByClientId,
@@ -53,7 +53,7 @@ const BlockActionsMenu = ( {
 	rootClientId,
 	selectedBlockClientId,
 	selectedBlockPossibleTransformations,
-	// Dispatch
+	// Dispatch.
 	createSuccessNotice,
 	convertToRegularBlocks,
 	duplicateBlock,
@@ -62,7 +62,7 @@ const BlockActionsMenu = ( {
 	openGeneralSidebar,
 	pasteBlock,
 	removeBlocks,
-	// Passed in
+	// Passed in.
 	anchorNodeRef,
 	isStackedHorizontally,
 	onDelete,