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

package/src/components/inserter/tabs.js

@@ -1,10 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
 const blocksTab = {
 	name: 'blocks',
 	/* translators: Blocks tab title in the block inserter. */
@@ -23,35 +29,38 @@ const mediaTab = {
 };
 
 function InserterTabs( {
-	children,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
-	prioritizePatterns,
+	tabsContents,
 } ) {
-	const tabs = useMemo( () => {
-		const tempTabs = [];
-		if ( prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		tempTabs.push( blocksTab );
-		if ( ! prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		if ( showMedia ) {
-			tempTabs.push( mediaTab );
-		}
-		return tempTabs;
-	}, [ prioritizePatterns, showPatterns, showMedia ] );
+	const tabs = [
+		blocksTab,
+		showPatterns && patternsTab,
+		showMedia && mediaTab,
+	].filter( Boolean );
 
 	return (
-		<TabPanel
-			className="block-editor-inserter__tabs"
-			tabs={ tabs }
-			onSelect={ onSelect }
-		>
-			{ children }
-		</TabPanel>
+		<div className="block-editor-inserter__tabs">
+			<Tabs onSelect={ onSelect }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab key={ tab.name } tabId={ tab.name }>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+					>
+						{ tabsContents[ tab.name ] }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
 	);
 }
 

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

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
-import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
@@ -42,7 +42,7 @@ const InserterDraggableBlocks = ( {
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
 				const parsedBlocks =
-					pattern?.type === PATTERN_TYPES.user &&
+					pattern?.type === INSERTER_PATTERN_TYPES.user &&
 					pattern?.syncStatus !== 'unsynced'
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;

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-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/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;

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

@@ -15,23 +15,28 @@ import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
  * Internal dependencies
  */
 import styles from './styles.scss';
-
-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;
+import {
+	MEDIA_UPLOAD_STATE_IDLE,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+	MEDIA_UPLOAD_STATE_PAUSED,
+} from './constants';
 
 export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
+			uploadState: MEDIA_UPLOAD_STATE_IDLE,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
+		this.getRetryMessage = this.getRetryMessage.bind( this );
 	}
 
 	componentDidMount() {
@@ -45,7 +50,11 @@ export class MediaUploadProgress extends Component {
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
 
-		if ( payload.mediaId !== mediaId ) {
+		if (
+			payload.mediaId !== mediaId ||
+			( payload.state === this.state.uploadState &&
+				payload.progress === this.state.progress )
+		) {
 			return;
 		}
 
@@ -56,6 +65,9 @@ export class MediaUploadProgress extends Component {
 			case MEDIA_UPLOAD_STATE_SUCCEEDED:
 				this.finishMediaUploadWithSuccess( payload );
 				break;
+			case MEDIA_UPLOAD_STATE_PAUSED:
+				this.finishMediaUploadWithPause( payload );
+				break;
 			case MEDIA_UPLOAD_STATE_FAILED:
 				this.finishMediaUploadWithFailure( payload );
 				break;
@@ -68,6 +80,7 @@ export class MediaUploadProgress extends Component {
 	updateMediaProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
+			uploadState: payload.state,
 			isUploadInProgress: true,
 			isUploadFailed: false,
 		} );
@@ -77,21 +90,48 @@ export class MediaUploadProgress extends Component {
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
-		this.setState( { isUploadInProgress: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+		} );
 		if ( this.props.onFinishMediaUploadWithSuccess ) {
 			this.props.onFinishMediaUploadWithSuccess( payload );
 		}
 	}
 
+	finishMediaUploadWithPause( payload ) {
+		if ( ! this.props.enablePausedUploads ) {
+			this.finishMediaUploadWithFailure( payload );
+			return;
+		}
+
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: true,
+			isUploadFailed: false,
+		} );
+		if ( this.props.onFinishMediaUploadWithFailure ) {
+			this.props.onFinishMediaUploadWithFailure( payload );
+		}
+	}
+
 	finishMediaUploadWithFailure( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: true } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: true,
+		} );
 		if ( this.props.onFinishMediaUploadWithFailure ) {
 			this.props.onFinishMediaUploadWithFailure( payload );
 		}
 	}
 
 	mediaUploadStateReset( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: false,
+		} );
 		if ( this.props.onMediaUploadStateReset ) {
 			this.props.onMediaUploadStateReset( payload );
 		}
@@ -115,15 +155,24 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	getRetryMessage() {
+		if (
+			this.state.uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+			this.props.enablePausedUploads
+		) {
+			return __( 'Waiting for connection' );
+		}
+
+		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+		return __( 'Failed to insert media.\nTap for more info.' );
+	}
+
 	render() {
 		const { renderContent = () => null } = this.props;
-		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { isUploadInProgress, isUploadFailed, uploadState } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
-		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-		const retryMessage = __(
-			'Failed to insert media.\nTap for more info.'
-		);
+		const retryMessage = this.getRetryMessage();
 
 		const progressBarStyle = [
 			styles.progressBar,
@@ -149,6 +198,9 @@ export class MediaUploadProgress extends Component {
 					) }
 				</View>
 				{ renderContent( {
+					isUploadPaused:
+						uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+						this.props.enablePausedUploads,
 					isUploadInProgress,
 					isUploadFailed,
 					retryMessage,

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

@@ -14,13 +14,13 @@ import {
 /**
  * Internal dependencies
  */
+import { MediaUploadProgress } from '../';
 import {
-	MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from '../';
+} from '../constants';
 
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {

package/src/components/multi-selection-inspector/README.md

@@ -6,11 +6,6 @@ This card contains information on the number of blocks selected, and in the case
 
 ![Multi selection inspector card](https://make.wordpress.org/core/files/2020/09/multi-selection-inspector-card.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage