@wordpress/block-editor 12.7.0 → 12.8.0

package/src/components/inserter/preview-panel.js

@@ -6,6 +6,7 @@ import {
 	createBlock,
 	getBlockFromExample,
 } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,23 +18,26 @@ import BlockPreview from '../block-preview';
 function InserterPreviewPanel( { item } ) {
 	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
+	const blocks = useMemo( () => {
+		if ( ! example ) {
+			return createBlock( name, initialAttributes );
+		}
+		return getBlockFromExample( name, {
+			attributes: {
+				...example.attributes,
+				...initialAttributes,
+			},
+			innerBlocks: example.innerBlocks,
+		} );
+	}, [ name, example, initialAttributes ] );
+
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
 				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							blocks={
-								example
-									? getBlockFromExample( name, {
-											attributes: {
-												...example.attributes,
-												...initialAttributes,
-											},
-											innerBlocks: example.innerBlocks,
-									  } )
-									: createBlock( name, initialAttributes )
-							}
+							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
 								{ css: 'body { padding: 16px; }' },

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

@@ -38,6 +38,7 @@ function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	onHover,
+	onHoverPattern,
 	rootClientId,
 	clientId,
 	isAppender,
@@ -189,7 +190,7 @@ function InserterSearchResults( {
 					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onSelectBlockPattern }
-					onHover={ onHover }
+					onHover={ onHoverPattern }
 					isDraggable={ isDraggable }
 				/>
 			</div>

package/src/components/inserter/stories/{index.js → index.story.js}

@@ -8,7 +8,7 @@ import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };
 
-export const libraryWithoutPatterns = () => {
+export const LibraryWithoutPatterns = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -24,7 +24,7 @@ export const libraryWithoutPatterns = () => {
 	);
 };
 
-export const libraryWithPatterns = () => {
+export const LibraryWithPatterns = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -45,7 +45,7 @@ export const libraryWithPatterns = () => {
 	);
 };
 
-export const libraryWithPatternsAndReusableBlocks = () => {
+export const LibraryWithPatternsAndReusableBlocks = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -67,7 +67,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 	);
 };
 
-export const quickInserter = () => {
+export const QuickInserter = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,

package/src/components/inserter/test/search-items.js

@@ -50,7 +50,10 @@ describe( 'getNormalizedSearchTerms', () => {
 		).toEqual( [ '师父领进门', '修行在个人' ] );
 		expect(
 			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
-		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'маистора' ] );
+		expect(
+			getNormalizedSearchTerms( 'Cảm ơn sự giúp đỡ của bạn.' )
+		).toEqual( [ 'cam', 'on', 'su', 'giup', 'do', 'cua', 'ban' ] );
 	} );
 } );
 

package/src/components/keyboard-shortcuts/index.js

@@ -93,6 +93,16 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/multi-text-selection',
+			category: 'selection',
+			description: __( 'Select text across multiple blocks.' ),
+			keyCombination: {
+				modifier: 'shift',
+				character: 'arrow',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/focus-toolbar',
 			category: 'global',

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

@@ -12,6 +12,7 @@ import {
 	BASE_DEFAULT_VALUE,
 	RESET_VALUE,
 	STEP,
+	SPIN_FACTOR,
 	isLineHeightDefined,
 } from './utils';
 
@@ -30,24 +31,25 @@ const LineHeightControl = ( {
 		if ( isDefined ) return nextValue;
 
 		/**
-		 * The following logic handles the initial step up/down action
+		 * The following logic handles the initial spin up/down action
 		 * (from an undefined value state) so that the next values are better suited for
-		 * line-height rendering. For example, the first step up should immediately
+		 * line-height rendering. For example, the first spin up should immediately
 		 * go to 1.6, rather than the normally expected 0.1.
 		 *
-		 * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
-		 * or by clicking the spin buttons.
+		 * Spin up/down actions can be triggered by keydowns of the up/down arrow keys,
+		 * dragging the input or by clicking the spin buttons.
 		 */
+		const spin = STEP * SPIN_FACTOR;
 		switch ( `${ nextValue }` ) {
-			case `${ STEP }`:
-				// Increment by step value.
-				return BASE_DEFAULT_VALUE + STEP;
+			case `${ spin }`:
+				// Increment by spin value.
+				return BASE_DEFAULT_VALUE + spin;
 			case '0': {
-				// This means the user explicitly input '0', rather than stepped down
-				// from an undefined value state.
+				// This means the user explicitly input '0', rather than using the
+				// spin down action from an undefined value state.
 				if ( wasTypedOrPasted ) return nextValue;
-				// Decrement by step value.
-				return BASE_DEFAULT_VALUE - STEP;
+				// Decrement by spin value.
+				return BASE_DEFAULT_VALUE - spin;
 			}
 			case '':
 				return BASE_DEFAULT_VALUE;
@@ -111,6 +113,7 @@ const LineHeightControl = ( {
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
+				spinFactor={ SPIN_FACTOR }
 				value={ value }
 				min={ 0 }
 				spinControls="custom"

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

@@ -13,7 +13,9 @@ import { UP, DOWN } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import LineHeightControl from '../';
-import { BASE_DEFAULT_VALUE, STEP } from '../utils';
+import { BASE_DEFAULT_VALUE, SPIN_FACTOR, STEP } from '../utils';
+
+const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
@@ -32,7 +34,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: UP } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
 	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
@@ -40,7 +42,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: DOWN } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
 	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
@@ -48,7 +50,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
 	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
@@ -56,6 +58,6 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );

package/src/components/line-height-control/utils.js

@@ -1,5 +1,10 @@
 export const BASE_DEFAULT_VALUE = 1.5;
-export const STEP = 0.1;
+export const STEP = 0.01;
+/**
+ * A spin factor of 10 allows the spin controls to increment/decrement by 0.1.
+ * e.g. A line-height value of 1.55 will increment to 1.65.
+ */
+export const SPIN_FACTOR = 10;
 /**
  * There are varying value types within LineHeightControl:
  *

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

@@ -201,14 +201,11 @@ function LinkControl( {
 		useCreatePage( createSuggestion );
 
 	useEffect( () => {
-		if (
-			forceIsEditingLink !== undefined &&
-			forceIsEditingLink !== isEditingLink
-		) {
-			setIsEditingLink( forceIsEditingLink );
+		if ( forceIsEditingLink === undefined ) {
+			return;
 		}
-		// Todo: bug if the missing dep is introduced. Will need a fix.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+
+		setIsEditingLink( forceIsEditingLink );
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
@@ -411,6 +408,29 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
+					additionalControls={ () => {
+						// Expose the "Opens in new tab" settings in the preview
+						// as it is the most common setting to change.
+						if (
+							settings?.find(
+								( setting ) => setting.id === 'opensInNewTab'
+							)
+						) {
+							return (
+								<LinkSettings
+									value={ internalControlValue }
+									settings={ settings?.filter(
+										( { id } ) => id === 'opensInNewTab'
+									) }
+									onChange={ ( { opensInNewTab } ) => {
+										onChange( {
+											opensInNewTab,
+										} );
+									} }
+								/>
+							);
+						}
+					} }
 					onRemove={ () => {
 						onRemove();
 						setIsEditingLink( true );

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

@@ -29,6 +29,7 @@ export default function LinkPreview( {
 	hasRichPreviews = false,
 	hasUnlinkControl = false,
 	onRemove,
+	additionalControls,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -68,6 +69,7 @@ export default function LinkPreview( {
 				'is-fetching': !! isFetching,
 				'is-preview': true,
 				'is-error': isEmptyURL,
+				'is-url-title': displayTitle === displayURL,
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
@@ -166,6 +168,8 @@ export default function LinkPreview( {
 					) }
 				</div>
 			) }
+
+			{ additionalControls && additionalControls() }
 		</div>
 	);
 }

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

@@ -193,6 +193,11 @@ $preview-image-height: 140px;
 		align-items: center;
 	}
 
+	&.is-url-title .block-editor-link-control__search-item-title {
+		// To prevent overflow when the title is a URL
+		word-break: break-all;
+	}
+
 	.block-editor-link-control__search-item-icon {
 		position: relative;
 		margin-right: $grid-unit-10;
@@ -408,6 +413,10 @@ $preview-image-height: 140px;
 	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}
+
+	.is-preview & {
+		padding: 20px $grid-unit-10 $grid-unit-10 0;
+	}
 }
 
 .block-editor-link-control__tools {

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

@@ -1734,7 +1734,66 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should hide advanced link settings when not editing a link', async () => {
+	it( 'should allow toggling the "Opens in new tab" setting control (only) on the link preview', async () => {
+		const user = userEvent.setup();
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+		const mockOnChange = jest.fn();
+
+		const customSettings = [
+			{
+				id: 'opensInNewTab',
+				title: 'Open in new tab',
+			},
+			{
+				id: 'noFollow',
+				title: 'No follow',
+			},
+		];
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( selectedLink );
+
+			return (
+				<LinkControl
+					value={ link }
+					settings={ customSettings }
+					onChange={ ( newVal ) => {
+						mockOnChange( newVal );
+						setLink( newVal );
+					} }
+				/>
+			);
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const opensInNewTabField = screen.queryByRole( 'checkbox', {
+			name: 'Open in new tab',
+			checked: false,
+		} );
+
+		expect( opensInNewTabField ).toBeInTheDocument();
+
+		// No matter which settings are passed in only the `Opens in new tab`
+		// setting should be shown on the link preview (non-editing) state.
+		const noFollowField = screen.queryByRole( 'checkbox', {
+			name: 'No follow',
+		} );
+		expect( noFollowField ).not.toBeInTheDocument();
+
+		// Check that the link value is updated immediately upon checking
+		// the checkbox.
+		await user.click( opensInNewTabField );
+
+		expect( opensInNewTabField ).toBeChecked();
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenCalledWith( {
+			opensInNewTab: true,
+		} );
+	} );
+
+	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1750,7 +1809,7 @@ describe( 'Addition Settings UI', () => {
 		expect( settingsToggle ).not.toBeInTheDocument();
 	} );
 
-	it( 'should provides a means to toggle the link settings', async () => {
+	it( 'should provides a means to toggle the advanced link settings when editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1785,7 +1844,7 @@ describe( 'Addition Settings UI', () => {
 		expect( newTabSettingInput ).not.toBeVisible();
 	} );
 
-	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
+	it( 'should display "New Tab" setting (in "off" mode) by default when a link is edited', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
 
@@ -1817,7 +1876,7 @@ describe( 'Addition Settings UI', () => {
 
 		const customSettings = [
 			{
-				id: 'newTab',
+				id: 'opensInNewTab',
 				title: 'Open in new tab',
 			},
 			{

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

@@ -28,6 +28,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
+import useListViewImages from './use-list-view-images';
 
 function ListViewBlockSelectButton(
 	{
@@ -63,6 +64,7 @@ function ListViewBlockSelectButton(
 	const { removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
+	const images = useListViewImages( { clientId, isExpanded } );
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -184,6 +186,23 @@ function ListViewBlockSelectButton(
 							</span>
 						</Tooltip>
 					) }
+					{ images.length ? (
+						<span
+							className="block-editor-list-view-block-select-button__images"
+							aria-hidden
+						>
+							{ images.map( ( image, index ) => (
+								<span
+									className="block-editor-list-view-block-select-button__image"
+									key={ `img-${ image.url }` }
+									style={ {
+										backgroundImage: `url(${ image.url })`,
+										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+									} }
+								/>
+							) ) }
+						</span>
+					) : null }
 					{ isLocked && (
 						<span className="block-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />

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

@@ -39,7 +39,6 @@ import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
-import { unlock } from '../../lock-unlock';
 import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
@@ -84,9 +83,7 @@ function ListViewBlock( {
 	);
 	const blockEditingMode = useSelect(
 		( select ) =>
-			unlock( select( blockEditorStore ) ).getBlockEditingMode(
-				clientId
-			),
+			select( blockEditorStore ).getBlockEditingMode( clientId ),
 		[ clientId ]
 	);
 

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

@@ -339,6 +339,31 @@
 	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
+
+	.block-editor-list-view-block-select-button__images {
+		display: flex;
+	}
+
+	.block-editor-list-view-block-select-button__image {
+		background-size: cover;
+		width: 18px;
+		height: 18px;
+		border-radius: $radius-block-ui;
+
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-block-ui $white;
+		}
+
+		&:not(:first-child) {
+			margin-left: #{$grid-unit-15 * -0.5};
+		}
+	}
+
+	&.is-selected .block-editor-list-view-block-select-button__image {
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-block-ui var(--wp-admin-theme-color);
+		}
+	}
 }
 
 .block-editor-list-view-block__contents-cell,

package/src/components/list-view/use-list-view-images.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Maximum number of images to display in a list view row.
+const MAX_IMAGES = 3;
+
+function getImageUrl( block ) {
+	if ( block.name !== 'core/image' ) {
+		return;
+	}
+
+	if ( block.attributes?.url ) {
+		return { url: block.attributes.url, alt: block.attributes.alt };
+	}
+}
+
+function getImagesFromGallery( block ) {
+	if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
+		return [];
+	}
+
+	const images = [];
+
+	for ( const innerBlock of block.innerBlocks ) {
+		const img = getImageUrl( innerBlock );
+		if ( img ) {
+			images.push( img );
+		}
+		if ( images.length >= MAX_IMAGES ) {
+			return images;
+		}
+	}
+
+	return images;
+}
+
+function getImagesFromBlock( block, isExpanded ) {
+	const img = getImageUrl( block );
+	if ( img ) {
+		return [ img ];
+	}
+	return isExpanded ? [] : getImagesFromGallery( block );
+}
+
+/**
+ * Get a block's preview images for display within a list view row.
+ *
+ * TODO: Currently only supports images from the core/image and core/gallery
+ * blocks. This should be expanded to support other blocks that have images,
+ * potentially via an API that blocks can opt into / provide their own logic.
+ *
+ * @param {Object}  props            Hook properties.
+ * @param {string}  props.clientId   The block's clientId.
+ * @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
+ * @return {Array} Images.
+ */
+export default function useListViewImages( { clientId, isExpanded } ) {
+	const { block } = useSelect(
+		( select ) => {
+			const _block = select( blockEditorStore ).getBlock( clientId );
+			return { block: _block };
+		},
+		[ clientId ]
+	);
+
+	const images = useMemo( () => {
+		return getImagesFromBlock( block, isExpanded );
+	}, [ block, isExpanded ] );
+
+	return images;
+}

package/src/components/rich-text/index.js

@@ -402,7 +402,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
-					useFirefoxCompat( { value, onChange } ),
+					useFirefoxCompat(),
 					anchorRef,
 				] ) }
 				contentEditable={ true }
@@ -412,6 +412,13 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
+				// Setting tabIndex to 0 is unnecessary, the element is already
+				// focusable because it's contentEditable. This also fixes a
+				// Safari bug where it's not possible to Shift+Click multi
+				// select blocks when Shift Clicking into an element with
+				// tabIndex because Safari will focus the element. However,
+				// Safari will correctly ignore nested contentEditable elements.
+				tabIndex={ props.tabIndex === 0 ? null : props.tabIndex }
 			/>
 		</>
 	);

package/src/components/rich-text/use-firefox-compat.js

@@ -1,21 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { SPACE } from '@wordpress/keycodes';
-import { insert } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useFirefoxCompat( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-
+export function useFirefoxCompat() {
 	const { isMultiSelecting } = useSelect( blockEditorStore );
 	return useRefEffect( ( element ) => {
 		function onFocus() {
@@ -37,29 +31,9 @@ export function useFirefoxCompat( props ) {
 			}
 		}
 
-		// If a contenteditable element is inside a button/summary element,
-		// it is not possible to type a space in Firefox. Therefore, cancel
-		// the default event and insert a space explicitly.
-		// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1822860
-		function onKeyDown( event ) {
-			if ( event.keyCode !== SPACE ) {
-				return;
-			}
-
-			if ( element.closest( 'button, summary' ) === null ) {
-				return;
-			}
-
-			const { value, onChange } = propsRef.current;
-			onChange( insert( value, ' ' ) );
-			event.preventDefault();
-		}
-
 		element.addEventListener( 'focus', onFocus );
-		element.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			element.removeEventListener( 'focus', onFocus );
-			element.removeEventListener( 'keydown', onKeyDown );
 		};
 	}, [] );
 }