@wordpress/block-editor 12.19.5 → 12.21.0

package/src/components/inserter/style.scss

@@ -767,3 +767,13 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.is-zoom-out {
+	.block-editor-inserter__menu {
+		display: flex;
+	}
+
+	.block-editor-inserter__patterns-category-dialog {
+		position: static;
+	}
+}

package/src/components/inserter/tabs.js

@@ -29,13 +29,14 @@ const mediaTab = {
 };
 
 function InserterTabs( {
+	showBlocks = true,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
 	tabsContents,
 } ) {
 	const tabs = [
-		blocksTab,
+		showBlocks && blocksTab,
 		showPatterns && patternsTab,
 		showMedia && mediaTab,
 	].filter( Boolean );

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -68,8 +68,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			resetAll={ resetAll }
 			key={ panelId }
 			panelId={ panelId }
-			hasInnerWrapper={ true }
-			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			hasInnerWrapper
+			shouldRenderPlaceholderItems // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }

package/src/components/inspector-controls-tabs/index.js

@@ -35,7 +35,7 @@ export default function InspectorControlsTabs( {
 
 	return (
 		<div className="block-editor-block-inspector__tabs">
-			<Tabs initialTabId={ initialTabName } key={ clientId }>
+			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) => (
 						<Tabs.Tab

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -9,7 +8,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
 import { useBorderPanelLabel } from '../../hooks/border';
 
@@ -22,11 +20,6 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
 						<BlockStyles clientId={ clientId } />
-						{ hasBlockSupport(
-							blockName,
-							'defaultStylePicker',
-							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
 					</PanelBody>
 				</div>
 			) }

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

@@ -23,7 +23,7 @@ const ControlledLineHeightControl = () => {
 		<LineHeightControl
 			value={ value }
 			onChange={ setValue }
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 		/>
 	);
 };

package/src/components/link-control/search-input.js

@@ -130,7 +130,7 @@ const LinkControlSearchInput = forwardRef(
 						showSuggestions ? handleRenderSuggestions : null
 					}
 					__experimentalFetchLinkSuggestions={ searchHandler }
-					__experimentalHandleURLSuggestions={ true }
+					__experimentalHandleURLSuggestions
 					__experimentalShowInitialSuggestions={
 						showInitialSuggestions
 					}

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

@@ -251,7 +251,7 @@ function ListViewBranch( props ) {
 					level={ level }
 					setSize={ rowCount }
 					positionInSet={ rowCount }
-					isExpanded={ true }
+					isExpanded
 				>
 					<TreeGridCell>
 						{ ( treeGridCellProps ) => (

package/src/components/list-view/drop-indicator.js

@@ -298,7 +298,7 @@ export default function ListViewDropIndicatorPreview( {
 			className="block-editor-list-view-drop-indicator--preview"
 			variant="unstyled"
 			flip={ false }
-			resize={ true }
+			resize
 		>
 			<div
 				style={ style }

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

@@ -336,7 +336,7 @@ function ListViewComponent(
 		description && `block-editor-list-view-description-${ instanceId }`;
 
 	return (
-		<AsyncModeProvider value={ true }>
+		<AsyncModeProvider value>
 			<ListViewDropIndicatorPreview
 				draggedBlockClientId={ firstDraggedBlockClientId }
 				listViewRef={ elementRef }

package/src/components/observe-typing/index.js

@@ -115,11 +115,10 @@ export function useMouseMoveTypingReset() {
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {
-	const { isTyping, hasInlineToolbar } = useSelect( ( select ) => {
-		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+	const { isTyping } = useSelect( ( select ) => {
+		const { isTyping: _isTyping } = select( blockEditorStore );
 		return {
 			isTyping: _isTyping(),
-			hasInlineToolbar: getSettings().hasInlineToolbar,
 		};
 	}, [] );
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
@@ -183,12 +182,10 @@ export function useTypingObserver() {
 				node.addEventListener( 'focus', stopTypingOnNonTextField );
 				node.addEventListener( 'keydown', stopTypingOnEscapeKey );
 
-				if ( ! hasInlineToolbar ) {
-					ownerDocument.addEventListener(
-						'selectionchange',
-						stopTypingOnSelectionUncollapse
-					);
-				}
+				ownerDocument.addEventListener(
+					'selectionchange',
+					stopTypingOnSelectionUncollapse
+				);
 
 				return () => {
 					defaultView.clearTimeout( timerId );
@@ -245,7 +242,7 @@ export function useTypingObserver() {
 				node.removeEventListener( 'keydown', startTypingInTextField );
 			};
 		},
-		[ isTyping, hasInlineToolbar, startTyping, stopTyping ]
+		[ isTyping, startTyping, stopTyping ]
 	);
 
 	return useMergeRefs( [ ref1, ref2 ] );

package/src/components/panel-color-settings/index.js

@@ -19,7 +19,7 @@ const PanelColorSettings = ( { colorSettings, ...props } ) => {
 		<PanelColorGradientSettings
 			settings={ settings }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 			{ ...props }
 		/>
 	);

package/src/components/panel-color-settings/test/index.js

@@ -16,7 +16,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -39,7 +39,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -63,7 +63,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',

package/src/components/provider/index.js

@@ -57,10 +57,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 export const BlockEditorProvider = ( props ) => {
 	return (
-		<ExperimentalBlockEditorProvider
-			{ ...props }
-			stripExperimentalSettings={ true }
-		>
+		<ExperimentalBlockEditorProvider { ...props } stripExperimentalSettings>
 			{ props.children }
 		</ExperimentalBlockEditorProvider>
 	);

package/src/components/resizable-box-popover/index.js

@@ -6,7 +6,7 @@ import { ResizableBox } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 
 export default function ResizableBoxPopover( {
 	clientId,
@@ -14,14 +14,12 @@ export default function ResizableBoxPopover( {
 	...props
 } ) {
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
-			__unstablePopoverSlot="__unstable-block-tools-after"
-			shift={ false }
+			__unstablePopoverSlot="block-toolbar"
 			{ ...props }
 		>
 			<ResizableBox { ...resizableBoxProps } />
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }

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

@@ -2,7 +2,7 @@
 
 `ResponsiveBlockControl` provides a standardised interface for the creation of Block controls that require **different settings per viewport** (ie: "responsive" settings).
 
-For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screensize_.
+For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screen size_.
 
 `ResponsiveBlockControl` provides a standardised component for the creation of such interfaces within Gutenberg.
 
@@ -25,7 +25,7 @@ import { useState } from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import {
 	InspectorControls,
-	ResponsiveBlockControl,
+	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
 import {
 	DimensionControl,
@@ -194,7 +194,7 @@ const renderResponsiveControls = ( viewports ) => {
 ### `toggleLabel`
 
 -   **Type:** `String`
--   **Default:** `Use the same %s on all screensizes.` (where "%s" is the `property` prop - see above )
+-   **Default:** `Use the same %s on all screen sizes.` (where "%s" is the `property` prop - see above )
 -   **Required:** `false`
 
 Optional label used for the toggle control which switches the interface between showing responsive controls or not.
@@ -213,7 +213,7 @@ Optional label used for the toggle control which switches the interface between
 
 -   **Required:** `false`
 
-Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screensizes".
+Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screen sizes".
 
 ### `viewports`
 

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

@@ -52,7 +52,7 @@ function ResponsiveBlockControl( props ) {
 		toggleLabel ||
 		sprintf(
 			/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
-			__( 'Use the same %s on all screensizes.' ),
+			__( 'Use the same %s on all screen sizes.' ),
 			property
 		);
 

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

@@ -81,7 +81,7 @@ describe( 'Basic rendering', () => {
 		} );
 
 		const toggleState = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -177,7 +177,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ renderTestDefaultControlComponent }
 			/>
 		);
@@ -217,7 +217,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ mockRenderDefaultControl }
 				viewports={ customViewportSet }
 			/>
@@ -268,7 +268,7 @@ describe( 'Default and Responsive modes', () => {
 
 		// Select elements based on what the user can see.
 		const toggleInput = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -319,7 +319,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ spyRenderDefaultControl }
 				renderResponsiveControls={ mockRenderResponsiveControls }
 			/>

package/src/components/rich-text/format-toolbar-container.js

@@ -3,13 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import {
-	isCollapsed,
-	getActiveFormats,
-	useAnchor,
-	store as richTextStore,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -17,22 +10,6 @@ import {
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
-import { store as blockEditorStore } from '../../store';
-
-function InlineSelectionToolbar( { editableContentElement, activeFormats } ) {
-	const lastFormat = activeFormats[ activeFormats.length - 1 ];
-	const lastFormatType = lastFormat?.type;
-	const settings = useSelect(
-		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
-		[ lastFormatType ]
-	);
-	const popoverAnchor = useAnchor( {
-		editableContentElement,
-		settings,
-	} );
-
-	return <InlineToolbar popoverAnchor={ popoverAnchor } />;
-}
 
 function InlineToolbar( { popoverAnchor } ) {
 	return (
@@ -56,35 +33,11 @@ function InlineToolbar( { popoverAnchor } ) {
 	);
 }
 
-const FormatToolbarContainer = ( {
-	inline,
-	editableContentElement,
-	value,
-} ) => {
-	const hasInlineToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
-		[]
-	);
-
+const FormatToolbarContainer = ( { inline, editableContentElement } ) => {
 	if ( inline ) {
 		return <InlineToolbar popoverAnchor={ editableContentElement } />;
 	}
 
-	if ( hasInlineToolbar ) {
-		const activeFormats = getActiveFormats( value );
-
-		if ( isCollapsed( value ) && ! activeFormats.length ) {
-			return null;
-		}
-
-		return (
-			<InlineSelectionToolbar
-				editableContentElement={ editableContentElement }
-				activeFormats={ activeFormats }
-			/>
-		);
-	}
-
 	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">

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

@@ -363,7 +363,6 @@ export function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					editableContentElement={ anchorRef.current }
-					value={ value }
 				/>
 			) }
 			<TagName
@@ -427,7 +426,7 @@ export function RichTextWrapper(
 					anchorRef,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
-				suppressContentEditableWarning={ true }
+				suppressContentEditableWarning
 				className={ classnames(
 					'block-editor-rich-text__editable',
 					props.className,

package/src/components/skip-to-selected-block/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 
@@ -11,7 +11,14 @@ import { Button } from '@wordpress/components';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
+export default function SkipToSelectedBlock() {
+	const selectedBlockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
+		[]
+	);
 	const ref = useBlockRef( selectedBlockClientId );
 	const onClick = () => {
 		ref.current.focus();
@@ -26,14 +33,4 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	) : null;
-};
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
- */
-export default withSelect( ( select ) => {
-	return {
-		selectedBlockClientId:
-			select( blockEditorStore ).getBlockSelectionStart(),
-	};
-} )( SkipToSelectedBlock );
+}

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

@@ -226,7 +226,7 @@ export default function SpacingInputControl( {
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
-						hideLabelFromVision={ true }
+						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
 					/>
@@ -272,8 +272,8 @@ export default function SpacingInputControl( {
 					max={ spacingSizes.length - 1 }
 					marks={ marks }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextHasNoMarginBottom={ true }
+					hideLabelFromVision
+					__nextHasNoMarginBottom
 					onFocus={ onMouseOver }
 					onBlur={ onMouseOut }
 				/>
@@ -296,8 +296,7 @@ export default function SpacingInputControl( {
 					} }
 					options={ options }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextUnconstrainedWidth={ true }
+					hideLabelFromVision
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }

package/src/components/url-input/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import scrollIntoView from 'dom-scroll-into-view';
 
 /**
  * WordPress dependencies
@@ -83,21 +82,13 @@ class URLInput extends Component {
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
-			this.suggestionNodes[ selectedSuggestion ] &&
-			! this.scrollingIntoView
+			this.suggestionNodes[ selectedSuggestion ]
 		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.suggestionNodes[ selectedSuggestion ],
-				this.autocompleteRef.current,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
-
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
+			this.suggestionNodes[ selectedSuggestion ].scrollIntoView( {
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
 		}
 
 		// Update suggestions when the value changes.

package/src/hooks/anchor.scss

@@ -1,4 +1,4 @@
 .html-anchor-control .components-external-link {
-	display: block;
+	display: inline-block;
 	margin-top: $grid-unit-10;
 }

package/src/hooks/background.js

@@ -526,7 +526,7 @@ function BackgroundSizePanelItem( {
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
-				isBlock={ true }
+				isBlock
 				help={ backgroundSizeHelpText( sizeValue ) }
 			>
 				<ToggleGroupControlOption

package/src/hooks/block-hooks.js

@@ -191,7 +191,7 @@ function BlockHooksControlPure( {
 			<PanelBody
 				className="block-editor-hooks__block-hooks"
 				title={ __( 'Plugins' ) }
-				initialOpen={ true }
+				initialOpen
 			>
 				<p className="block-editor-hooks__block-hooks-helptext">
 					{ __(

package/src/hooks/dimensions.js

@@ -19,8 +19,7 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
-import { MarginVisualizer } from './margin';
-import { PaddingVisualizer } from './padding';
+import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';

package/src/hooks/font-size.js

@@ -21,10 +21,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from '../components/global-styles/typography-utils';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -173,18 +170,16 @@ function useBlockProps( { name, fontSize, style } ) {
 	let props;
 
 	if ( style?.typography?.fontSize ) {
-		const fluidSettings = getFluidTypographyOptionsFromSettings( {
-			typography: {
-				fluid: fluidTypographySettings,
-			},
-			layout: layoutSettings,
-		} );
-
 		props = {
 			style: {
 				fontSize: getTypographyFontSizeValue(
 					{ size: style.typography.fontSize },
-					fluidSettings
+					{
+						typography: {
+							fluid: fluidTypographySettings,
+						},
+						layout: layoutSettings,
+					}
 				),
 			},
 		};

package/src/hooks/index.js

@@ -42,6 +42,7 @@ createBlockEditFilter(
 		contentLockUI,
 		blockHooks,
 		blockRenaming,
+		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [