@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/components/inserter-button/style.native.scss

@@ -0,0 +1,72 @@
+/** @format */
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.disabled {
+	opacity: 0.3;
+}
+
+.modalIconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
+.newIndicator {
+	height: 22;
+	left: 6;
+	position: absolute;
+	top: 6;
+	width: 22;
+}
+
+.modalIcon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalItemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	text-align: center;
+	font-size: 12;
+	color: $gray-dark;
+}
+
+.modalItemLabelDark {
+	color: $white;
+}
+
+.clipboardBlock {
+	background-color: transparent;
+	border-width: 1px;
+	border-color: $light-gray-400;
+}
+
+.clipboardBlockDark {
+	border-color: $gray-70;
+}
+
+.modalItem {
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: $grid-unit-20 * 0.5;
+	padding-right: $grid-unit-20 * 0.5;
+	padding-top: 0;
+	padding-bottom: 0;
+}

package/src/components/inserter-draggable-blocks/index.js

@@ -2,19 +2,24 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { serialize, store as blocksStore } from '@wordpress/blocks';
+import {
+	createBlock,
+	serialize,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
 	blocks,
 	icon,
 	children,
-	isPattern,
+	pattern,
 } ) => {
 	const transferData = {
 		type: 'inserter',
@@ -36,13 +41,21 @@ const InserterDraggableBlocks = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+				const parsedBlocks =
+					pattern?.type === INSERTER_PATTERN_TYPES.user &&
+					pattern?.syncStatus !== 'unsynced'
+						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+						: blocks;
+				event.dataTransfer.setData(
+					'text/html',
+					serialize( parsedBlocks )
+				);
 			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon || ( ! isPattern && blockTypeIcon ) }
-					isPattern={ isPattern }
+					icon={ icon || ( ! pattern && blockTypeIcon ) }
+					isPattern={ !! pattern }
 				/>
 			}
 		>

package/src/components/inserter-list-item/index.js

@@ -39,15 +39,16 @@ function InserterListItem( {
 				color: item.icon.foreground,
 		  }
 		: {};
-	const blocks = useMemo( () => {
-		return [
+	const blocks = useMemo(
+		() => [
 			createBlock(
 				item.name,
 				item.initialAttributes,
 				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
 			),
-		];
-	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
+		],
+		[ item.name, item.initialAttributes, item.innerBlocks ]
+	);
 
 	const isSynced =
 		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
@@ -55,7 +56,7 @@ function InserterListItem( {
 
 	return (
 		<InserterDraggableBlocks
-			isEnabled={ isDraggable && ! item.disabled }
+			isEnabled={ isDraggable && ! item.isDisabled }
 			blocks={ blocks }
 			icon={ item.icon }
 		>
@@ -63,7 +64,6 @@ function InserterListItem( {
 				<div
 					className={ classnames(
 						'block-editor-block-types-list__list-item',
-
 						{
 							'is-synced': isSynced,
 						}

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

@@ -10,6 +10,7 @@ import { useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../global-styles/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -71,6 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

package/src/components/inspector-controls/fill.js

@@ -12,7 +12,10 @@ import { useEffect, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
@@ -33,13 +36,13 @@ export default function InspectorControlsFill( {
 		group = __experimentalGroup;
 	}
 
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

package/src/components/inspector-controls/fill.native.js

@@ -15,7 +15,10 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import groups from './groups';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -35,14 +38,14 @@ export default function InspectorControlsFill( {
 		);
 		group = __experimentalGroup;
 	}
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

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

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { TabPanel } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,6 +14,9 @@ import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
 import InspectorControls from '../inspector-controls';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 export default function InspectorControlsTabs( {
 	blockName,
@@ -26,34 +32,39 @@ export default function InspectorControlsTabs( {
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
 		? TAB_LIST_VIEW.name
 		: undefined;
-	return (
-		<TabPanel
-			className="block-editor-block-inspector__tabs"
-			tabs={ tabs }
-			initialTabName={ initialTabName }
-			key={ clientId }
-		>
-			{ ( tab ) => {
-				if ( tab.name === TAB_SETTINGS.name ) {
-					return (
-						<SettingsTab showAdvancedControls={ !! blockName } />
-					);
-				}
 
-				if ( tab.name === TAB_STYLES.name ) {
-					return (
-						<StylesTab
-							blockName={ blockName }
-							clientId={ clientId }
-							hasBlockStyles={ hasBlockStyles }
+	return (
+		<div className="block-editor-block-inspector__tabs">
+			<Tabs initialTabId={ initialTabName } key={ clientId }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab
+							key={ tab.name }
+							tabId={ tab.name }
+							render={
+								<Button
+									icon={ tab.icon }
+									label={ tab.title }
+									className={ tab.className }
+								/>
+							}
 						/>
-					);
-				}
-
-				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return <InspectorControls.Slot group="list" />;
-				}
-			} }
-		</TabPanel>
+					) ) }
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
+					<SettingsTab showAdvancedControls={ !! blockName } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_STYLES.name } focusable={ false }>
+					<StylesTab
+						blockName={ blockName }
+						clientId={ clientId }
+						hasBlockStyles={ hasBlockStyles }
+					/>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
+					<InspectorControls.Slot group="list" />
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
 	);
 }

package/src/components/inspector-controls-tabs/style.scss

@@ -1,5 +1,5 @@
 .show-icon-labels {
-	.block-editor-block-inspector__tabs .components-tab-panel__tabs {
+	.block-editor-block-inspector__tabs [role="tablist"] {
 		.components-button.has-icon {
 			// Hide the button icons when labels are set to display...
 			svg {
@@ -15,13 +15,14 @@
 }
 
 .block-editor-inspector-controls-tabs__hint {
-	align-items: top;
+	align-items: flex-start;
 	background: $gray-100;
 	border-radius: $radius-block-ui;
 	color: $gray-900;
 	display: flex;
 	flex-direction: row;
 	margin: $grid-unit-20;
+	font-size: $default-font-size;
 }
 
 .block-editor-inspector-controls-tabs__hint-content {

package/src/components/letter-spacing-control/README.md

@@ -5,11 +5,6 @@ The `LetterSpacingControl` component renders a [`UnitControl`](https://github.co
 This component is used for blocks that display text, commonly inside a 
 [`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md).
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -6,11 +6,6 @@ The `LineHeightControl` component adds a lineHeight attribute to the core Paragr
 
 _Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -74,7 +74,7 @@ $preview-image-height: 140px;
 		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
-		padding: $grid-unit-10 $grid-unit-20;
+		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
 		position: relative;
 		width: 100%;
 	}

package/src/components/link-control/test/index.js

@@ -2140,7 +2140,7 @@ describe( 'Post types', () => {
 describe( 'Rich link previews', () => {
 	const selectedLink = {
 		id: '1',
-		title: 'Wordpress.org', // Customize this for differentiation in assertions.
+		title: 'WordPress.org', // Customize this for differentiation in assertions.
 		url: 'https://www.wordpress.org',
 		type: 'URL',
 	};

package/src/components/list-view/README.md

@@ -11,11 +11,6 @@ In addition to presenting the structure of the blocks in the editor, the ListVie
 ![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png)
 ![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -38,6 +38,8 @@ function ListViewBlockSelectButton(
 		className,
 		block: { clientId },
 		onClick,
+		onContextMenu,
+		onMouseDown,
 		onToggleExpanded,
 		tabIndex,
 		onFocus,
@@ -237,7 +239,9 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onContextMenu={ onContextMenu }
 				onKeyDown={ onKeyDownHandler }
+				onMouseDown={ onMouseDown }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }

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

@@ -13,7 +13,13 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
-import { useState, useRef, useCallback, memo } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	memo,
+} from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -53,9 +59,11 @@ function ListViewBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const rowRef = useRef( null );
+	const settingsRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
+	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 
-	const { isLocked, canEdit } = useBlockLock( clientId );
+	const { isLocked, canEdit, canMove } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
@@ -82,6 +90,11 @@ function ListViewBlock( {
 		},
 		[ clientId ]
 	);
+	const allowRightClickOverrides = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().allowRightClickOverrides,
+		[]
+	);
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
@@ -190,6 +203,56 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
+	// Allow right-clicking an item in the List View to open up the block settings dropdown.
+	const onContextMenu = useCallback(
+		( event ) => {
+			if ( showBlockActions && allowRightClickOverrides ) {
+				settingsRef.current?.click();
+				// Ensure the position of the settings dropdown is at the cursor.
+				setSettingsAnchorRect(
+					new window.DOMRect( event.clientX, event.clientY, 0, 0 )
+				);
+				event.preventDefault();
+			}
+		},
+		[ allowRightClickOverrides, settingsRef, showBlockActions ]
+	);
+
+	const onMouseDown = useCallback(
+		( event ) => {
+			// Prevent right-click from focusing the block,
+			// because focus will be handled when opening the block settings dropdown.
+			if ( allowRightClickOverrides && event.button === 2 ) {
+				event.preventDefault();
+			}
+		},
+		[ allowRightClickOverrides ]
+	);
+
+	const settingsPopoverAnchor = useMemo( () => {
+		const { ownerDocument } = rowRef?.current || {};
+
+		// If no custom position is set, the settings dropdown will be anchored to the
+		// DropdownMenu toggle button.
+		if ( ! settingsAnchorRect || ! ownerDocument ) {
+			return undefined;
+		}
+
+		// Position the settings dropdown at the cursor when right-clicking a block.
+		return {
+			ownerDocument,
+			getBoundingClientRect() {
+				return settingsAnchorRect;
+			},
+		};
+	}, [ settingsAnchorRect ] );
+
+	const clearSettingsAnchorRect = useCallback( () => {
+		// Clear the custom position for the settings dropdown so that it is restored back
+		// to being anchored to the DropdownMenu toggle button.
+		setSettingsAnchorRect( undefined );
+	}, [ setSettingsAnchorRect ] );
+
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -206,6 +269,7 @@ function ListViewBlock( {
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
+		'is-draggable': canMove,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -257,6 +321,8 @@ function ListViewBlock( {
 						<ListViewBlockContents
 							block={ block }
 							onClick={ selectEditorBlock }
+							onContextMenu={ onContextMenu }
+							onMouseDown={ onMouseDown }
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
@@ -315,6 +381,7 @@ function ListViewBlock( {
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected }
+					ref={ settingsRef }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsMenu
@@ -322,10 +389,14 @@ function ListViewBlock( {
 							block={ block }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
+							popoverProps={ {
+								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
+							} }
 							toggleProps={ {
 								ref,
 								className: 'block-editor-list-view-block__menu',
 								tabIndex,
+								onClick: clearSettingsAnchorRect,
 								onFocus,
 							} }
 							disableOpenOnArrowDown

package/src/components/list-view/style.scss

@@ -15,6 +15,11 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	&.is-draggable,
+	&.is-draggable .block-editor-list-view-block-contents {
+		cursor: grab;
+	}
+
 	.block-editor-list-view-block-select-button {
 		// When a row is expanded, retain the dark color.
 		&[aria-expanded="true"] {
@@ -378,6 +383,7 @@
 	height: $icon-size;
 	margin-left: $grid-unit-05;
 	width: $icon-size;
+	cursor: pointer;
 }
 
 // First level of indentation is aria-level 2, max indent is 8.

package/src/components/media-upload-progress/constants.js

@@ -0,0 +1,6 @@
+export const MEDIA_UPLOAD_STATE_IDLE = 0;
+export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
+export const MEDIA_UPLOAD_STATE_FAILED = 3;
+export const MEDIA_UPLOAD_STATE_RESET = 4;
+export const MEDIA_UPLOAD_STATE_PAUSED = 11;