@wordpress/block-editor 12.20.0 → 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

@@ -9,10 +9,10 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<>

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/link-preview.js

@@ -16,8 +16,9 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -139,7 +146,7 @@ export default function LinkPreview( {
 					label={ sprintf(
 						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
 						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL ? '' : ': ' + value.url
+						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
 					disabled={ isEmptyURL }

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/link-control/style.scss

@@ -34,6 +34,15 @@ $block-editor-link-control-number-of-actions: 1;
 				content: attr(aria-label);
 			}
 		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-10;
+
+			.components-button.has-icon {
+				min-width: inherit;
+				width: min-content;
+			}
+		}
 	}
 }
 

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

@@ -14,7 +14,12 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import {
+	Icon,
+	connection,
+	lockSmall as lock,
+	pinSmall,
+} from '@wordpress/icons';
 import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -32,11 +37,12 @@ import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
 import { useListViewContext } from './context';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		block: { clientId, name: blockName },
 		onClick,
 		onContextMenu,
 		onMouseDown,
@@ -66,6 +72,7 @@ function ListViewBlockSelectButton(
 		getBlockRootClientId,
 		getBlockOrder,
 		getBlocksByClientId,
+		getBlockAttributes,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
 	const { duplicateBlocks, multiSelect, removeBlocks } =
@@ -75,6 +82,8 @@ function ListViewBlockSelectButton(
 	const images = useListViewImages( { clientId, isExpanded } );
 	const { rootClientId } = useListViewContext();
 
+	const isConnected = getBlockAttributes( clientId )?.metadata?.bindings;
+
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
 				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
@@ -278,6 +287,11 @@ function ListViewBlockSelectButton(
 							</Truncate>
 						</span>
 					) }
+					{ isConnected && canBindBlock( blockName ) && (
+						<span className="block-editor-list-view-block-select-button__bindings">
+							<Icon icon={ connection } />
+						</span>
+					) }
 					{ positionLabel && isSticky && (
 						<Tooltip text={ positionLabel }>
 							<Icon icon={ pinSmall } />

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/list-view/style.scss

@@ -557,3 +557,11 @@ $block-navigation-max-indent: 8;
 .list-view-appender__description {
 	display: none;
 }
+
+.block-editor-list-view-block-select-button__bindings svg g {
+	stroke: var(--wp-bound-block-color);
+	fill: transparent;
+	stroke-width: 1.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}

package/src/components/list-view/use-clipboard-handler.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -15,6 +15,7 @@ import { getPasteBlocks, setClipboardBlocks } from '../writing-flow/utils';
 // This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
 // and adds behaviour for the list view, while skipping partial selection.
 export default function useClipboardHandler( { selectBlock } ) {
+	const registry = useRegistry();
 	const {
 		getBlockOrder,
 		getBlockRootClientId,
@@ -106,7 +107,7 @@ export default function useClipboardHandler( { selectBlock } ) {
 
 				notifyCopy( event.type, selectedBlockClientIds );
 				const blocks = getBlocksByClientId( selectedBlockClientIds );
-				setClipboardBlocks( event, blocks );
+				setClipboardBlocks( event, blocks, registry );
 			}
 
 			if ( event.type === 'cut' ) {

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/index.js

@@ -19,13 +19,14 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
+import { blockBindingsKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
@@ -46,7 +47,7 @@ import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
-import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -109,6 +110,7 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
+		disableEditing,
 		...props
 	},
 	forwardedRef
@@ -116,11 +118,9 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const {
-		clientId,
-		isSelected: isBlockSelected,
-		name: blockName,
-	} = useBlockEditContext();
+	const context = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const blockBindings = context[ blockBindingsKey ];
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -128,12 +128,10 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd, getBlockAttributes } =
+		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
-		const blockBindings =
-			getBlockAttributes( clientId )?.metadata?.bindings;
 
 		let isSelected;
 
@@ -146,50 +144,60 @@ export function RichTextWrapper(
 			isSelected = selectionStart.clientId === clientId;
 		}
 
-		// Disable Rich Text editing if block bindings specify that.
-		let shouldDisableEditing = false;
-		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
-			const blockTypeAttributes = getBlockType( blockName ).attributes;
-			const { getBlockBindingsSource } = unlock(
-				select( blockEditorStore )
-			);
-			for ( const [ attribute, args ] of Object.entries(
-				blockBindings
-			) ) {
-				if (
-					blockTypeAttributes?.[ attribute ]?.source !== 'rich-text'
-				) {
-					break;
-				}
-
-				// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
-				const blockBindingsSource = getBlockBindingsSource(
-					args.source
-				);
-				if (
-					! blockBindingsSource ||
-					blockBindingsSource.lockAttributesEditing
-				) {
-					shouldDisableEditing = true;
-					break;
-				}
-			}
-		}
-
 		return {
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			shouldDisableEditing,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
-		useSelect( selector, [
-			clientId,
-			identifier,
-			originalIsSelected,
-			isBlockSelected,
-		] );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		originalIsSelected,
+		isBlockSelected,
+	] );
+
+	const disableBoundBlocks = useSelect(
+		( select ) => {
+			// Disable Rich Text editing if block bindings specify that.
+			let _disableBoundBlocks = false;
+			if ( blockBindings && canBindBlock( blockName ) ) {
+				const blockTypeAttributes =
+					getBlockType( blockName ).attributes;
+				const { getBlockBindingsSource } = unlock(
+					select( blocksStore )
+				);
+				for ( const [ attribute, args ] of Object.entries(
+					blockBindings
+				) ) {
+					if (
+						blockTypeAttributes?.[ attribute ]?.source !==
+						'rich-text'
+					) {
+						break;
+					}
+
+					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					const blockBindingsSource = getBlockBindingsSource(
+						args.source
+					);
+					if (
+						! blockBindingsSource ||
+						blockBindingsSource.lockAttributesEditing
+					) {
+						_disableBoundBlocks = true;
+						break;
+					}
+				}
+			}
+
+			return _disableBoundBlocks;
+		},
+		[ blockBindings, blockName ]
+	);
+
+	const shouldDisableEditing = disableEditing || disableBoundBlocks;
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -418,7 +426,7 @@ export function RichTextWrapper(
 					anchorRef,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
-				suppressContentEditableWarning={ true }
+				suppressContentEditableWarning
 				className={ classnames(
 					'block-editor-rich-text__editable',
 					props.className,
@@ -441,19 +449,34 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This is the private API for the RichText component.
+// It allows access to all props, not just the public ones.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.Content = Content;
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
+// This is the public API for the RichText component.
+// We wrap the PrivateRichText component to hide some props from the public API.
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	return (
+		<PrivateRichText ref={ ref } { ...props } disableEditing={ false } />
+	);
+} );
+
+PublicForwardedRichTextContainer.Content = Content;
+PublicForwardedRichTextContainer.isEmpty = ( value ) => {
+	return ! value || value.length === 0;
+};
+
+export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/use-enter.js

@@ -21,6 +21,10 @@ export function useEnter( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
+			if ( event.target.contentEditable !== 'true' ) {
+				return;
+			}
+
 			if ( event.defaultPrevented ) {
 				return;
 			}