@wordpress/block-editor 8.1.2-next.f435e9e01b.0 → 8.2.1-next.a55ed9455a.0

package/src/components/copy-handler/index.js

@@ -19,7 +19,7 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getPasteEventData } from '../../utils/get-paste-event-data';
+import { getPasteEventData } from '../../utils/pasting';
 import { store as blockEditorStore } from '../../store';
 
 export function useNotifyCopy() {
@@ -132,7 +132,7 @@ export function useClipboardHandler() {
 				removeBlocks( selectedBlockClientIds );
 			} else if ( event.type === 'paste' ) {
 				if ( eventDefaultPrevented ) {
-					// This was likely already handled in rich-text/use-paste-handler.js
+					// This was likely already handled in rich-text/use-paste-handler.js.
 					return;
 				}
 				const {

package/src/components/font-sizes/with-font-sizes.js

@@ -123,7 +123,7 @@ export default ( ...fontSizeNames ) => {
 							fontSizeAttributeName
 						) => {
 							if ( previousState[ fontSizeAttributeName ] ) {
-								// if new font size is name compare with the previous slug
+								// If new font size is name compare with the previous slug.
 								if ( attributes[ fontSizeAttributeName ] ) {
 									return (
 										attributes[ fontSizeAttributeName ] !==
@@ -131,14 +131,14 @@ export default ( ...fontSizeNames ) => {
 											.slug
 									);
 								}
-								// if font size is not named, update when the font size value changes.
+								// If font size is not named, update when the font size value changes.
 								return (
 									previousState[ fontSizeAttributeName ]
 										.size !==
 									attributes[ customFontSizeAttributeName ]
 								);
 							}
-							// in this case we need to build the font size object
+							// In this case we need to build the font size object.
 							return true;
 						};
 

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

@@ -15,7 +15,7 @@ describe( 'ImageSizeControl', () => {
 	const getWidthInput = () => screen.getByLabelText( 'Width' );
 
 	afterEach( () => {
-		// cleanup on exiting
+		// Cleanup on exiting.
 		jest.clearAllMocks();
 	} );
 

package/src/components/index.js

@@ -145,6 +145,7 @@ export { default as WritingFlow } from './writing-flow';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 
 /*
  * State Related Components

package/src/components/index.native.js

@@ -1,4 +1,4 @@
-// Block Creation Components
+// Block Creation Components.
 export {
 	BlockAlignmentControl,
 	BlockAlignmentToolbar,
@@ -44,7 +44,13 @@ export {
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload';
-export { default as MediaUploadProgress } from './media-upload-progress';
+export {
+	default as MediaUploadProgress,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+} from './media-upload-progress';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
@@ -56,6 +62,7 @@ export { default as useSetting } from './use-setting';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 
 export {
 	BottomSheetSettings,
@@ -64,7 +71,7 @@ export {
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 
-// Content Related Components
+// Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
@@ -76,5 +83,5 @@ export { default as Inserter } from './inserter';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 
-// State Related Components
+// State Related Components.
 export { default as BlockEditorProvider } from './provider';

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

@@ -106,7 +106,7 @@ function BlockPatternsTabs( {
 		[ allCategories ]
 	);
 
-	// Remove any empty categories
+	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
 		const categories = allCategories
 			.filter( ( category ) =>
@@ -144,23 +144,19 @@ function BlockPatternsTabs( {
 
 	return (
 		<>
+			<PatternInserterPanel
+				selectedCategory={ patternCategory }
+				patternCategories={ populatedCategories }
+				onClickCategory={ onClickCategory }
+				openPatternExplorer={ () => setShowPatternsExplorer( true ) }
+			/>
 			{ ! showPatternsExplorer && (
-				<>
-					<PatternInserterPanel
-						selectedCategory={ patternCategory }
-						patternCategories={ populatedCategories }
-						onClickCategory={ onClickCategory }
-						openPatternExplorer={ () =>
-							setShowPatternsExplorer( true )
-						}
-					/>
-					<BlockPatternsCategory
-						rootClientId={ rootClientId }
-						onInsert={ onInsert }
-						selectedCategory={ patternCategory }
-						populatedCategories={ populatedCategories }
-					/>
-				</>
+				<BlockPatternsCategory
+					rootClientId={ rootClientId }
+					onInsert={ onInsert }
+					selectedCategory={ patternCategory }
+					populatedCategories={ populatedCategories }
+				/>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal

package/src/components/inserter/block-types-tab.js

@@ -90,7 +90,7 @@ export function BlockTypesTab( {
 	const didRenderAllCategories =
 		categories.length === currentlyRenderedCategories.length;
 
-	// Async List requires an array
+	// Async List requires an array.
 	const collectionEntries = useMemo( () => {
 		return Object.entries( collections );
 	}, [ collections ] );

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -32,12 +32,12 @@ function useBlockTypeImpressions( blockTypes ) {
 				...blockTypeImpressions,
 				[ name ]: 0,
 			};
-			// Persist block type impression to JavaScript store
+			// Persist block type impression to JavaScript store.
 			updateSettings( {
 				impressions: updatedBlockTypeImpressions,
 			} );
 
-			// Persist block type impression count to native app store
+			// Persist block type impression count to native app store.
 			setBlockTypeImpressions( updatedBlockTypeImpressions );
 		}
 	};

package/src/components/inserter/index.js

@@ -44,7 +44,7 @@ const defaultRenderToggle = ( {
 
 	const { onClick, ...rest } = toggleProps;
 
-	// Handle both onClick functions from the toggle and the parent component
+	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
 			onToggle( event );
@@ -81,7 +81,7 @@ class Inserter extends Component {
 	onToggle( isOpen ) {
 		const { onToggle } = this.props;
 
-		// Surface toggle callback to parent component
+		// Surface toggle callback to parent component.
 		if ( onToggle ) {
 			onToggle( isOpen );
 		}
@@ -336,7 +336,7 @@ export default compose( [
 						return getBlockIndex( end ) + 1;
 					}
 
-					// Otherwise, we insert at the end of the current rootClientId
+					// Otherwise, we insert at the end of the current rootClientId.
 					return getBlockOrder( rootClientId ).length;
 				}
 

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

@@ -168,17 +168,17 @@ export class Inserter extends Component {
 					{}
 				);
 
-				// Persist block type impression to JavaScript store
+				// Persist block type impression to JavaScript store.
 				updateSettings( {
 					impressions: decrementedImpressions,
 				} );
 
-				// Persist block type impression count to native app store
+				// Persist block type impression count to native app store.
 				setBlockTypeImpressions( decrementedImpressions );
 			}
 		}
 
-		// Surface toggle callback to parent component
+		// Surface toggle callback to parent component.
 		if ( onToggle ) {
 			onToggle( isOpen );
 		}
@@ -354,7 +354,7 @@ export default compose( [
 				__experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
 			} = getBlockEditorSettings();
 
-			// if post title is selected insert as first block
+			// If post title is selected insert as first block.
 			if ( shouldInsertAtTheTop ) {
 				return 0;
 			}
@@ -366,16 +366,16 @@ export default compose( [
 
 			// If there is a selected block,
 			if ( isAnyBlockSelected ) {
-				// and the last selected block is unmodified (empty), it will be replaced
+				// And the last selected block is unmodified (empty), it will be replaced.
 				if ( isSelectedUnmodifiedDefaultBlock ) {
 					return selectedBlockIndex;
 				}
 
-				// we insert after the selected block.
+				// We insert after the selected block.
 				return selectedBlockIndex + 1;
 			}
 
-			// Otherwise, we insert at the end of the current rootClientId
+			// Otherwise, we insert at the end of the current rootClientId.
 			return endOfRootIndex;
 		}
 

package/src/components/inserter/menu.js

@@ -188,7 +188,7 @@ function InserterMenu(
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
-				{ /* the following div is necessary to fix the sticky position of the search form */ }
+				{ /* The following div is necessary to fix the sticky position of the search form. */ }
 				<div className="block-editor-inserter__content">
 					<SearchControl
 						className="block-editor-inserter__search"

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

@@ -106,8 +106,8 @@ function InserterMenu( {
 	}, [] );
 
 	const onClose = useCallback( () => {
-		// if should replace but didn't insert any block
-		// re-insert default block
+		// If should replace but didn't insert any block
+		// re-insert default block.
 		if ( shouldReplaceBlock ) {
 			insertDefaultBlock( {}, destinationRootClientId, insertionIndex );
 		}
@@ -140,7 +140,7 @@ function InserterMenu( {
 			// Avoid a focus loop, see https://github.com/WordPress/gutenberg/issues/30562
 			if ( Platform.OS === 'ios' ) {
 				AccessibilityInfo.isScreenReaderEnabled().then( ( enabled ) => {
-					// In testing, the bug focus loop needed a longer timeout when VoiceOver was enabled
+					// In testing, the bug focus loop needed a longer timeout when VoiceOver was enabled.
 					const timeout = enabled ? 200 : 100;
 					// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 					setTimeout( () => {

package/src/components/inserter/quick-inserter.js

@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../../store';
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
 const SHOWN_BLOCK_PATTERNS = 2;
+const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4;
 
 export default function QuickInserter( {
 	onSelect,
@@ -46,26 +47,39 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		destinationRootClientId
 	);
-	const showPatterns = patterns.length && !! filterValue;
-	const showSearch =
-		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-		blockTypes.length > SEARCH_THRESHOLD;
 
-	const { setInserterIsOpened, insertionIndex } = useSelect(
+	const {
+		setInserterIsOpened,
+		insertionIndex,
+		prioritizePatterns,
+	} = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
 			);
+			const settings = getSettings();
 			const index = getBlockIndex( clientId );
+			const blockCount = getBlockCount();
+
 			return {
-				setInserterIsOpened: getSettings()
-					.__experimentalSetIsInserterOpened,
-				insertionIndex: index === -1 ? getBlockCount() : index,
+				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId &&
+					index > 0 &&
+					( index < blockCount || blockCount === 0 ),
+				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
 
+	const showPatterns =
+		patterns.length && ( !! filterValue || prioritizePatterns );
+	const showSearch =
+		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+		blockTypes.length > SEARCH_THRESHOLD;
+
 	useEffect( () => {
 		if ( setInserterIsOpened ) {
 			setInserterIsOpened( false );
@@ -73,11 +87,18 @@ export default function QuickInserter( {
 	}, [ setInserterIsOpened ] );
 
 	// When clicking Browse All select the appropriate block so as
-	// the insertion point can work as expected
+	// the insertion point can work as expected.
 	const onBrowseAll = () => {
 		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
 	};
 
+	let maxBlockPatterns = 0;
+	if ( showPatterns ) {
+		maxBlockPatterns = prioritizePatterns
+			? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION
+			: SHOWN_BLOCK_PATTERNS;
+	}
+
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__quick-inserter', {
@@ -104,9 +125,10 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
+					maxBlockPatterns={ maxBlockPatterns }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
+					prioritizePatterns={ prioritizePatterns }
 				/>
 			</div>
 

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

@@ -3,7 +3,7 @@
  */
 import { deburr, differenceWith, find, words } from 'lodash';
 
-// Default search helpers
+// Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
 const defaultGetTitle = ( item ) => item.title;
 const defaultGetDescription = ( item ) => item.description || '';

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

@@ -48,6 +48,7 @@ function InserterSearchResults( {
 	showBlockDirectory = false,
 	isDraggable = true,
 	shouldFocusBlock = true,
+	prioritizePatterns,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -70,7 +71,25 @@ function InserterSearchResults( {
 		destinationRootClientId
 	);
 
+	const filteredBlockPatterns = useMemo( () => {
+		if ( maxBlockPatterns === 0 ) {
+			return [];
+		}
+		const results = searchItems( patterns, filterValue );
+		return maxBlockPatterns !== undefined
+			? results.slice( 0, maxBlockPatterns )
+			: results;
+	}, [ filterValue, patterns, maxBlockPatterns ] );
+
+	let maxBlockTypesToShow = maxBlockTypes;
+	if ( prioritizePatterns && filteredBlockPatterns.length > 2 ) {
+		maxBlockTypesToShow = 0;
+	}
+
 	const filteredBlockTypes = useMemo( () => {
+		if ( maxBlockTypesToShow === 0 ) {
+			return [];
+		}
 		const results = searchBlockItems(
 			orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ),
 			blockTypeCategories,
@@ -78,8 +97,8 @@ function InserterSearchResults( {
 			filterValue
 		);
 
-		return maxBlockTypes !== undefined
-			? results.slice( 0, maxBlockTypes )
+		return maxBlockTypesToShow !== undefined
+			? results.slice( 0, maxBlockTypesToShow )
 			: results;
 	}, [
 		filterValue,
@@ -89,14 +108,7 @@ function InserterSearchResults( {
 		maxBlockTypes,
 	] );
 
-	const filteredBlockPatterns = useMemo( () => {
-		const results = searchItems( patterns, filterValue );
-		return maxBlockPatterns !== undefined
-			? results.slice( 0, maxBlockPatterns )
-			: results;
-	}, [ filterValue, patterns, maxBlockPatterns ] );
-
-	// Announce search results on change
+	// Announce search results on change.
 	useEffect( () => {
 		if ( ! filterValue ) {
 			return;
@@ -122,49 +134,49 @@ function InserterSearchResults( {
 	const hasItems =
 		! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns );
 
+	const blocksUI = !! filteredBlockTypes.length && (
+		<InserterPanel
+			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
+		>
+			<BlockTypesList
+				items={ currentShownBlockTypes }
+				onSelect={ onSelectBlockType }
+				onHover={ onHover }
+				label={ __( 'Blocks' ) }
+				isDraggable={ isDraggable }
+			/>
+		</InserterPanel>
+	);
+
+	const patternsUI = !! filteredBlockPatterns.length && (
+		<InserterPanel
+			title={
+				<VisuallyHidden>{ __( 'Block Patterns' ) }</VisuallyHidden>
+			}
+		>
+			<div className="block-editor-inserter__quick-inserter-patterns">
+				<BlockPatternsList
+					shownPatterns={ currentShownPatterns }
+					blockPatterns={ filteredBlockPatterns }
+					onClickPattern={ onSelectBlockPattern }
+					isDraggable={ isDraggable }
+				/>
+			</div>
+		</InserterPanel>
+	);
+
 	return (
 		<InserterListbox>
 			{ ! showBlockDirectory && ! hasItems && <InserterNoResults /> }
 
-			{ !! filteredBlockTypes.length && (
-				<InserterPanel
-					title={
-						<VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden>
-					}
-				>
-					<BlockTypesList
-						items={ currentShownBlockTypes }
-						onSelect={ onSelectBlockType }
-						onHover={ onHover }
-						label={ __( 'Blocks' ) }
-						isDraggable={ isDraggable }
-					/>
-				</InserterPanel>
-			) }
+			{ prioritizePatterns ? patternsUI : blocksUI }
 
 			{ !! filteredBlockTypes.length &&
 				!! filteredBlockPatterns.length && (
 					<div className="block-editor-inserter__quick-inserter-separator" />
 				) }
 
-			{ !! filteredBlockPatterns.length && (
-				<InserterPanel
-					title={
-						<VisuallyHidden>
-							{ __( 'Block Patterns' ) }
-						</VisuallyHidden>
-					}
-				>
-					<div className="block-editor-inserter__quick-inserter-patterns">
-						<BlockPatternsList
-							shownPatterns={ currentShownPatterns }
-							blockPatterns={ filteredBlockPatterns }
-							onClickPattern={ onSelectBlockPattern }
-							isDraggable={ isDraggable }
-						/>
-					</div>
-				</InserterPanel>
-			) }
+			{ prioritizePatterns ? blocksUI : patternsUI }
 
 			{ showBlockDirectory && (
 				<__unstableInserterMenuExtension.Slot

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

@@ -7,6 +7,6 @@ export * from './index';
 
 export default fixtures.map( ( filteredItems ) => ( {
 	...filteredItems,
-	// Set `isNew` property expected from block type impressions
+	// Set `isNew` property expected from block type impressions.
 	isNew: false,
 } ) );

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

@@ -17,13 +17,13 @@ import items, { categories, collections } from './fixtures';
 import useBlockTypesState from '../hooks/use-block-types-state';
 
 jest.mock( '../hooks/use-block-types-state', () => {
-	// 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;
 } );
 
 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/justify-content-control/README.md

@@ -20,7 +20,7 @@ const MyJustifyToolbar = ( { attributes, setAttributes } ) => (
 		<JustifyContentControl
 			value={ attributes.justification }
 			onChange={ ( next ) => {
-				setAttributes( { justfication: next } );
+				setAttributes( { justification: next } );
 			} }
 		/>
 	</BlockControls>

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

@@ -11,7 +11,7 @@ function KeyboardShortcuts() {
 }
 
 function KeyboardShortcutsRegister() {
-	// Registering the shortcuts
+	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
 		registerShortcut( {

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

@@ -29,7 +29,7 @@ export default function LetterSpacingControl( {
 } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
-		defaultValues: { px: '2', em: '.2', rem: '.2' },
+		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
 	return (
 		<UnitControl

package/src/components/line-height-control/README.md

@@ -18,9 +18,13 @@ _Note:_ It is worth noting that the line height setting option is an opt-in feat
 Renders the markup for the line height setting option in the block inspector.
 
 ```jsx
-import { KeyboardShortcuts } from '@wordpress/block-editor';
+import { LineHeightControl } from '@wordpress/block-editor';
 const MyLineHeightControl = () => (
-	<LineHeightControl value={ lineHeight } onChange={ onChange } />
+	<LineHeightControl
+		value={ lineHeight }
+		onChange={ onChange }
+		__nextHasNoMarginBottom={ true }
+	/>
 );
 ```
 
@@ -38,6 +42,13 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
+#### `__nextHasNoMarginBottom`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.