@wordpress/block-editor 14.0.0 → 14.1.0

package/src/components/grid/grid-visualizer.js

@@ -19,6 +19,7 @@ import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
 import ButtonBlockAppender from '../button-block-appender';
+import { unlock } from '../../lock-unlock';
 
 export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	const isDistractionFree = useSelect(
@@ -118,19 +119,25 @@ const GridVisualizerGrid = forwardRef(
 function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 	const [ highlightedRect, setHighlightedRect ] = useState( null );
 
-	const gridItems = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
+	const gridItemStyles = useSelect(
+		( select ) => {
+			const { getBlockOrder, getBlockStyles } = unlock(
+				select( blockEditorStore )
+			);
+			const blockOrder = getBlockOrder( gridClientId );
+			return getBlockStyles( blockOrder );
+		},
 		[ gridClientId ]
 	);
 	const occupiedRects = useMemo( () => {
 		const rects = [];
-		for ( const block of gridItems ) {
+		for ( const style of Object.values( gridItemStyles ) ) {
 			const {
 				columnStart,
 				rowStart,
 				columnSpan = 1,
 				rowSpan = 1,
-			} = block.attributes.style?.layout || {};
+			} = style?.layout ?? {};
 			if ( ! columnStart || ! rowStart ) {
 				continue;
 			}
@@ -144,7 +151,7 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 			);
 		}
 		return rects;
-	}, [ gridItems ] );
+	}, [ gridItemStyles ] );
 
 	return range( 1, gridInfo.numRows ).map( ( row ) =>
 		range( 1, gridInfo.numColumns ).map( ( column ) => {
@@ -206,8 +213,12 @@ function useGridVisualizerDropZone(
 	gridInfo,
 	setHighlightedRect
 ) {
-	const { getBlockAttributes, getBlockRootClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getBlockRootClientId,
+		canInsertBlockType,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const {
 		updateBlockAttributes,
 		moveBlocksToPosition,
@@ -221,6 +232,10 @@ function useGridVisualizerDropZone(
 
 	return useDropZoneWithValidation( {
 		validateDrag( srcClientId ) {
+			const blockName = getBlockName( srcClientId );
+			if ( ! canInsertBlockType( blockName, gridClientId ) ) {
+				return false;
+			}
 			const attributes = getBlockAttributes( srcClientId );
 			const rect = new GridRect( {
 				columnStart: column,

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

@@ -164,6 +164,7 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
+							__next40pxDefaultSize
 							value={ customRangeValue }
 							min={ 0 }
 							max={

package/src/components/iframe/index.js

@@ -242,8 +242,10 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		prevContainerWidth.current = containerWidth;
-	}, [ containerWidth ] );
+		if ( ! isZoomedOut ) {
+			prevContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [

package/src/components/image-editor/zoom-dropdown.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
+import {
+	ToolbarButton,
+	RangeControl,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
 
@@ -27,14 +32,17 @@ export default function ZoomDropdown() {
 				/>
 			) }
 			renderContent={ () => (
-				<RangeControl
-					__nextHasNoMarginBottom
-					label={ __( 'Zoom' ) }
-					min={ MIN_ZOOM }
-					max={ MAX_ZOOM }
-					value={ Math.round( zoom ) }
-					onChange={ setZoom }
-				/>
+				<DropdownContentWrapper paddingSize="medium">
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Zoom' ) }
+						min={ MIN_ZOOM }
+						max={ MAX_ZOOM }
+						value={ Math.round( zoom ) }
+						onChange={ setZoom }
+					/>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);

package/src/components/inner-blocks/button-block-appender.js

@@ -7,15 +7,15 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import BaseButtonBlockAppender from '../button-block-appender';
-import withClientId from './with-client-id';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const ButtonBlockAppender = ( {
-	clientId,
+export default function ButtonBlockAppender( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
 	isToggle,
-} ) => {
+} ) {
+	const { clientId } = useBlockEditContext();
 	return (
 		<BaseButtonBlockAppender
 			className={ clsx( {
@@ -27,6 +27,4 @@ export const ButtonBlockAppender = ( {
 			onAddBlock={ onAddBlock }
 		/>
 	);
-};
-
-export default withClientId( ButtonBlockAppender );
+}

package/src/components/inner-blocks/default-block-appender.js

@@ -1,29 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import BaseDefaultBlockAppender from '../default-block-appender';
-import withClientId from './with-client-id';
-import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const DefaultBlockAppender = ( { clientId } ) => {
+export default function DefaultBlockAppender() {
+	const { clientId } = useBlockEditContext();
 	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
-};
-
-export default compose( [
-	withClientId,
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockOrder } = select( blockEditorStore );
-
-		const blockClientIds = getBlockOrder( clientId );
-
-		return {
-			lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
-		};
-	} ),
-] )( DefaultBlockAppender );
+}

package/src/components/inner-blocks/index.js

@@ -206,13 +206,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getSettings,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
-			// In zoom out mode, we want to disable the drop zone for the sections.
-			// The inner blocks belonging to the section drop zone is
-			// already disabled by the blocks themselves being disabled.
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
-				_isDropZoneDisabled = clientId !== sectionRootClientId;
-			}
+
 			if ( ! clientId ) {
 				return { isDropZoneDisabled: _isDropZoneDisabled };
 			}
@@ -225,8 +219,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			if ( _isDropZoneDisabled !== undefined ) {
-				_isDropZoneDisabled = blockEditingMode === 'disabled';
+			_isDropZoneDisabled = blockEditingMode === 'disabled';
+
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				// In zoom out mode, we want to disable the drop zone for the sections.
+				// The inner blocks belonging to the section drop zone is
+				// already disabled by the blocks themselves being disabled.
+				const { sectionRootClientId } = unlock( getSettings() );
+
+				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 
 			return {

package/src/components/inserter/library.js

@@ -27,6 +27,7 @@ function InserterLibrary(
 		onSelect = noop,
 		shouldFocusBlock = false,
 		onClose,
+		__experimentalSearchInputRef,
 	},
 	ref
 ) {
@@ -58,6 +59,7 @@ function InserterLibrary(
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 			onClose={ onClose }
+			__experimentalSearchInputRef={ __experimentalSearchInputRef }
 		/>
 	);
 }

package/src/components/inserter/menu.js

@@ -33,6 +33,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -53,11 +54,16 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
-		[]
-	);
+	const { isZoomOutMode, inserterSearchInputRef } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getInserterSearchInputRef } = unlock(
+			select( blockEditorStore )
+		);
+		return {
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			inserterSearchInputRef: getInserterSearchInputRef(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -67,9 +73,16 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState(
-		__experimentalInitialTab
-	);
+	function getInitialTab() {
+		if ( __experimentalInitialTab ) {
+			return __experimentalInitialTab;
+		}
+
+		if ( isZoomOutMode ) {
+			return 'patterns';
+		}
+	}
+	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -104,15 +117,16 @@ function InserterMenu(
 				}
 			} );
 		},
-		[ onInsertBlocks, onSelect, shouldFocusBlock ]
+		[ onInsertBlocks, onSelect, ref, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
 		( blocks, patternName ) => {
+			onToggleInsertionPoint( false );
 			onInsertBlocks( blocks, { patternName } );
 			onSelect();
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, onToggleInsertionPoint ]
 	);
 
 	const onHover = useCallback(
@@ -123,13 +137,6 @@ function InserterMenu(
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
-	const onHoverPattern = useCallback(
-		( item ) => {
-			onToggleInsertionPoint( !! item );
-		},
-		[ onToggleInsertionPoint ]
-	);
-
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
@@ -170,13 +177,14 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
+					ref={ inserterSearchInputRef }
 				/>
+
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
 						filterValue={ delayedFilterValue }
 						onSelect={ onSelect }
 						onHover={ onHover }
-						onHoverPattern={ onHoverPattern }
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 						isAppender={ isAppender }
@@ -192,19 +200,18 @@ function InserterMenu(
 		);
 	}, [
 		selectedTab,
-		hoveredItem,
-		setHoveredItem,
-		setFilterValue,
 		filterValue,
+		inserterSearchInputRef,
 		delayedFilterValue,
 		onSelect,
 		onHover,
-		onHoverPattern,
-		shouldFocusBlock,
-		clientId,
 		rootClientId,
-		__experimentalInsertionIndex,
+		clientId,
 		isAppender,
+		__experimentalInsertionIndex,
+		shouldFocusBlock,
+		hoveredItem,
+		setFilterValue,
 	] );
 
 	const blocksTab = useMemo( () => {
@@ -249,7 +256,6 @@ function InserterMenu(
 					<PatternCategoryPreviews
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
-						onHover={ onHoverPattern }
 						category={ selectedPatternCategory }
 						patternFilter={ patternFilter }
 						showTitlesAsTooltip
@@ -259,7 +265,6 @@ function InserterMenu(
 		);
 	}, [
 		destinationRootClientId,
-		onHoverPattern,
 		onInsertPattern,
 		onClickPatternCategory,
 		patternFilter,

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

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, SearchControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -82,6 +82,8 @@ export default function QuickInserter( {
 		}
 	}, [ setInserterIsOpened ] );
 
+	const { showInsertionPoint } = useDispatch( blockEditorStore );
+
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
@@ -91,6 +93,7 @@ export default function QuickInserter( {
 			filterValue,
 			onSelect,
 		} );
+		showInsertionPoint( rootClientId, insertionIndex );
 	};
 
 	let maxBlockPatterns = 0;

package/src/components/inserter/style.scss

@@ -36,7 +36,7 @@ $block-inserter-tabs-height: 44px;
 	.components-popover__content {
 		border: none;
 		outline: none;
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;

package/src/components/inserter-list-item/style.scss

@@ -120,4 +120,5 @@
 .block-editor-block-types-list__item-title {
 	padding: 4px 2px 8px;
 	font-size: 12px;
+	hyphens: auto;
 }

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

@@ -36,6 +36,13 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
+#### `__next40pxDefaultSize`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
 ## 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

@@ -16,6 +16,8 @@ import {
 } from './utils';
 
 const LineHeightControl = ( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
 	value: lineHeight,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -91,6 +93,7 @@ const LineHeightControl = ( {
 		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }

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

@@ -77,7 +77,7 @@ $block-editor-link-control-number-of-actions: 1;
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
 		display: block;
-		border: 1px solid $gray-600;
+		border: $border-width solid $gray-600;
 		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;

package/src/components/media-placeholder/index.js

@@ -491,17 +491,22 @@ export function MediaPlaceholder( {
 				<>
 					{ renderDropZone() }
 					<FormFileUpload
-						variant="primary"
-						className={ clsx(
-							'block-editor-media-placeholder__button',
-							'block-editor-media-placeholder__upload-button'
+						render={ ( { openFileDialog } ) => (
+							<Button
+								onClick={ openFileDialog }
+								variant="primary"
+								className={ clsx(
+									'block-editor-media-placeholder__button',
+									'block-editor-media-placeholder__upload-button'
+								) }
+							>
+								{ __( 'Upload' ) }
+							</Button>
 						) }
 						onChange={ onUpload }
 						accept={ accept }
 						multiple={ !! multiple }
-					>
-						{ __( 'Upload' ) }
-					</FormFileUpload>
+					/>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderFeaturedImageToggle() }

package/src/components/media-upload/README.md

@@ -105,6 +105,8 @@ Callback called when the media modal is closed after media is selected.
 
 This is called subsequent to `onClose` when media is selected. The selected media are passed as an argument.
 
+The `image.sizes.full` resolution does always exist. Other defined sizes are only available when the image is larger and thus could be scaled down.
+
 -   Type: `Function`
 -   Required: Yes
 -   Platform: Web | Mobile

package/src/components/media-upload/index.native.js

@@ -327,6 +327,8 @@ function URLInput( props ) {
 		>
 			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus
 					autoCapitalize="none"

package/src/components/multi-selection-inspector/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { sprintf, _n } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
@@ -13,7 +13,13 @@ import { copy } from '@wordpress/icons';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function MultiSelectionInspector( { blocks } ) {
+export default function MultiSelectionInspector() {
+	const { blocks } = useSelect( ( select ) => {
+		const { getMultiSelectedBlocks } = select( blockEditorStore );
+		return {
+			blocks: getMultiSelectedBlocks(),
+		};
+	}, [] );
 	const words = wordCount( serialize( blocks ), 'words' );
 
 	return (
@@ -38,10 +44,3 @@ function MultiSelectionInspector( { blocks } ) {
 		</div>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getMultiSelectedBlocks } = select( blockEditorStore );
-	return {
-		blocks: getMultiSelectedBlocks(),
-	};
-} )( MultiSelectionInspector );

package/src/components/responsive-block-control/README.md

@@ -64,6 +64,7 @@ registerBlockType( 'my-plugin/my-block', {
 		const paddingControl = ( labelComponent, viewport ) => {
 			return (
 				<DimensionControl
+					__nextHasNoMarginBottom
 					label={ viewport.label }
 					onChange={ // handle update to padding value here  }
 					value={ paddingSize }

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

@@ -40,6 +40,7 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
 			<SelectControl
+				__next40pxDefaultSize
 				label={ labelComponent }
 				options={ sizeOptions }
 				__nextHasNoMarginBottom

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -188,10 +188,12 @@ export default function SpacingInputControl( {
 		name: size.name,
 	} ) );
 
-	const marks = spacingSizes.map( ( _newValue, index ) => ( {
-		value: index,
-		label: undefined,
-	} ) );
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
 
 	const sideLabel =
 		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
@@ -247,6 +249,7 @@ export default function SpacingInputControl( {
 						} }
 					/>
 					<RangeControl
+						__next40pxDefaultSize
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
 						onFocus={ onMouseOver }
@@ -268,6 +271,7 @@ export default function SpacingInputControl( {
 			) }
 			{ showRangeControl && ! showCustomValueControl && (
 				<RangeControl
+					__next40pxDefaultSize
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					className="spacing-sizes-control__range-control"

package/src/components/spacing-sizes-control/style.scss

@@ -4,34 +4,34 @@
 		margin-bottom: 0;
 	}
 
+	.is-marked {
+		.components-range-control__track {
+			transition: width ease 0.1s;
+			@include reduce-motion("transition");
+		}
+
+		.components-range-control__thumb-wrapper {
+			transition: left ease 0.1s;
+			@include reduce-motion("transition");
+		}
+	}
+
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
-		height: 40px;
-		/* Vertically center the RangeControl until it has true 40px height. */
-		display: flex;
-		align-items: center;
-		margin-bottom: 0;
 		flex: 1;
-
-		> .components-base-control__field {
-			/* Fixes RangeControl contents when the outer wrapper is flex */
-			flex: 1;
-		}
 	}
 
 	.components-range-control__mark {
+		transform: translateX(-50%);
 		height: $grid-unit-05;
-		width: 3px;
-		background-color: #fff;
+		width: math.div($grid-unit-05, 2);
+		background-color: $white;
 		z-index: 1;
+		top: -#{$grid-unit-05};
 	}
 
 	.components-range-control__marks {
 		margin-top: 17px;
-
-		:first-child {
-			display: none;
-		}
 	}
 
 	.components-range-control__thumb-wrapper {