@wordpress/block-editor 8.1.1 → 8.2.0

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( () => {

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-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-settings/container.native.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -28,13 +31,9 @@ export const blockSettingsScreens = {
 function BottomSheetSettings( {
 	editorSidebarOpened,
 	closeGeneralSidebar,
-	settings,
 	...props
 } ) {
-	const colorSettings = {
-		colors: useSetting( 'color.palette' ) || settings.colors,
-		gradients: useSetting( 'color.gradients' ) || settings.gradients,
-	};
+	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	return (
 		<BottomSheet

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

@@ -56,6 +56,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,

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

@@ -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/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 );
@@ -78,6 +92,13 @@ export default function QuickInserter( {
 		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-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,13 +108,6 @@ 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
 	useEffect( () => {
 		if ( ! filterValue ) {
@@ -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/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.

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

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { ZERO } from '@wordpress/keycodes';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,64 +15,87 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( { value: lineHeight, onChange } ) {
+export default function LineHeightControl( {
+	value: lineHeight,
+	onChange,
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
+	__unstableInputWidth = '60px',
+} ) {
 	const isDefined = isLineHeightDefined( lineHeight );
 
-	const handleOnKeyDown = ( event ) => {
-		const { keyCode } = event;
-
-		if ( keyCode === ZERO && ! isDefined ) {
-			/**
-			 * Prevents the onChange callback from firing, which prevents
-			 * the logic from assuming the change was triggered from
-			 * an input arrow CLICK.
-			 */
-			event.preventDefault();
-			onChange( '0' );
-		}
-	};
-
-	const handleOnChange = ( nextValue ) => {
+	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
 		// Set the next value without modification if lineHeight has been defined
-		if ( isDefined ) {
-			onChange( nextValue );
-			return;
-		}
+		if ( isDefined ) return nextValue;
 
-		// Otherwise...
 		/**
-		 * The following logic handles the initial up/down arrow CLICK of the
-		 * input element. This is so that the next values (from an undefined value state)
-		 * are more better suited for line-height rendering.
+		 * The following logic handles the initial step 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
+		 * 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.
 		 */
-		let adjustedNextValue = nextValue;
-
 		switch ( nextValue ) {
 			case `${ STEP }`:
 				// Increment by step value
-				adjustedNextValue = BASE_DEFAULT_VALUE + STEP;
-				break;
-			case '0':
+				return BASE_DEFAULT_VALUE + STEP;
+			case '0': {
+				// This means the user explicitly input '0', rather than stepped down
+				// from an undefined value state
+				if ( wasTypedOrPasted ) return nextValue;
 				// Decrement by step value
-				adjustedNextValue = BASE_DEFAULT_VALUE - STEP;
-				break;
+				return BASE_DEFAULT_VALUE - STEP;
+			}
+			case '':
+				return BASE_DEFAULT_VALUE;
+			default:
+				return nextValue;
 		}
+	};
 
-		onChange( adjustedNextValue );
+	const stateReducer = ( state, action ) => {
+		// Be careful when changing this — cross-browser behavior of the
+		// `inputType` field in `input` events are inconsistent.
+		// For example, Firefox emits an input event with inputType="insertReplacementText"
+		// on spin button clicks, while other browsers do not even emit an input event.
+		const wasTypedOrPasted = [ 'insertText', 'insertFromPaste' ].includes(
+			action.payload.event.nativeEvent?.inputType
+		);
+		state.value = adjustNextValue( state.value, wasTypedOrPasted );
+		return state;
 	};
 
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.blockEditor.LineHeightControl',
+			{
+				since: '6.0',
+				version: '6.4',
+				hint:
+					'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+	const deprecatedStyles = __nextHasNoMarginBottom
+		? undefined
+		: { marginBottom: 24 };
+
 	return (
-		<div className="block-editor-line-height-control">
-			<TextControl
-				autoComplete="off"
-				onKeyDown={ handleOnKeyDown }
-				onChange={ handleOnChange }
+		<div
+			className="block-editor-line-height-control"
+			style={ deprecatedStyles }
+		>
+			<NumberControl
+				__unstableInputWidth={ __unstableInputWidth }
+				__unstableStateReducer={ stateReducer }
+				onChange={ onChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
-				type="number"
 				value={ value }
 				min={ 0 }
 			/>

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import LineHeightControl from '../';
+
+export default {
+	component: LineHeightControl,
+	title: 'BlockEditor/LineHeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__unstableInputWidth: '60px',
+};
+
+export const UnconstrainedWidth = Template.bind( {} );
+UnconstrainedWidth.args = {
+	...Default.args,
+	__unstableInputWidth: '100%',
+};