@wordpress/block-editor 12.10.2 → 12.11.0

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+import UnsupportedBlockDetails from '../unsupported-block-details';
+import { store as blockEditorStore } from '../../store';
+import { MAX_NESTING_DEPTH } from './constants';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+
+const WarningMaxDepthExceeded = ( { clientId } ) => {
+	const [ showDetails, setShowDetails ] = useState( false );
+
+	const { isSelected, innerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock, isBlockSelected } = select( blockEditorStore );
+			return {
+				innerBlocks: getBlock( clientId )?.innerBlocks || [],
+				isSelected: isBlockSelected( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const {
+		isUnsupportedBlockEditorSupported,
+		canEnableUnsupportedBlockEditor,
+	} = useUnsupportedBlockEditor( clientId );
+
+	const onUngroup = () => {
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+
+		replaceBlocks( clientId, innerBlocks );
+	};
+
+	let description;
+	// When UBE can't be used, the description mentions using the web browser to edit the block.
+	if (
+		! isUnsupportedBlockEditorSupported &&
+		! canEnableUnsupportedBlockEditor
+	) {
+		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+		const descriptionFormat = __(
+			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using your web browser.'
+		);
+		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+	}
+	// Otherwise, the description mentions using the web editor (i.e. UBE).
+	else {
+		/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+		const descriptionFormat = __(
+			'Blocks nested deeper than %d levels may not render properly in the mobile editor. For this reason, we recommend flattening the content by ungrouping the block or editing the block using the web editor.'
+		);
+		description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+	}
+
+	return (
+		<TouchableWithoutFeedback
+			disabled={ ! isSelected }
+			accessibilityLabel={ __( 'Warning message' ) }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ __( 'Tap here to show more details.' ) }
+			onPress={ () => setShowDetails( true ) }
+		>
+			<View>
+				<Warning
+					message={ __(
+						'Block cannot be rendered because it is deeply nested. Tap here for more details.'
+					) }
+				/>
+				<UnsupportedBlockDetails
+					clientId={ clientId }
+					showSheet={ showDetails }
+					onCloseSheet={ () => setShowDetails( false ) }
+					title={ __( 'Deeply nested block' ) }
+					description={ description }
+					customActions={ [
+						{ label: __( 'Ungroup block' ), onPress: onUngroup },
+					] }
+				/>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+};
+
+export default WarningMaxDepthExceeded;

package/src/components/inserter/block-patterns-filter.js

@@ -7,10 +7,11 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	ExternalLink,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,13 +74,11 @@ export function BlockPatternsSyncFilter( {
 			{
 				value: SYNC_TYPES.full,
 				label: __( 'Synced' ),
-				info: __( 'Updated everywhere' ),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Standard' ),
-				info: __( 'Edit freely' ),
+				label: __( 'Not synced' ),
 				disabled: shouldDisableSyncFilter,
 			},
 		],
@@ -95,20 +94,17 @@ export function BlockPatternsSyncFilter( {
 			},
 			{
 				value: PATTERN_TYPES.directory,
-				label: __( 'Directory' ),
-				info: __( 'Pattern directory & core' ),
+				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.theme,
-				label: __( 'Theme' ),
-				info: __( 'Bundled with the theme' ),
+				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.user,
 				label: __( 'User' ),
-				info: __( 'Custom created' ),
 			},
 		],
 		[ shouldDisableNonUserSources ]
@@ -149,7 +145,7 @@ export function BlockPatternsSyncFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Author' ) }>
+						<MenuGroup label={ __( 'Source' ) }>
 							<MenuItemsChoice
 								choices={ patternSourceMenuOptions }
 								onSelect={ ( value ) => {
@@ -175,6 +171,22 @@ export function BlockPatternsSyncFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
+						<div className="block-editor-tool-selector__help">
+							{ createInterpolateElement(
+								__(
+									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'
+								),
+								{
+									Link: (
+										<ExternalLink
+											href={ __(
+												'https://wordpress.org/patterns/'
+											) }
+										/>
+									),
+								}
+							) }
+						</div>
 					</>
 				) }
 			</DropdownMenu>

package/src/components/inserter/block-patterns-tab.js

@@ -321,9 +321,6 @@ export function BlockPatternsCategoryPanel( {
 						category={ category }
 					/>
 				</HStack>
-				{ category.description && (
-					<Text>{ category.description }</Text>
-				) }
 				{ ! currentCategoryPatterns.length && (
 					<Text
 						variant="muted"

package/src/components/inserter/index.js

@@ -102,7 +102,7 @@ class PrivateInserter extends Component {
 	 *                                    pressed.
 	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown toggle element.
+	 * @return {Element} Dropdown toggle element.
 	 */
 	renderToggle( { onToggle, isOpen } ) {
 		const {
@@ -135,7 +135,7 @@ class PrivateInserter extends Component {
 	 * @param {Function} options.onClose Callback to invoke when dropdown is
 	 *                                   closed.
 	 *
-	 * @return {WPElement} Dropdown content element.
+	 * @return {Element} Dropdown content element.
 	 */
 	renderContent( { onClose } ) {
 		const {

package/src/components/inserter/index.native.js

@@ -225,7 +225,7 @@ export class Inserter extends Component {
 	 *                                    pressed.
 	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown toggle element.
+	 * @return {Element} Dropdown toggle element.
 	 */
 	renderInserterToggle( { onToggle, isOpen } ) {
 		const {
@@ -305,7 +305,7 @@ export class Inserter extends Component {
 	 *                                   closed.
 	 * @param {boolean}  options.isOpen  Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown content element.
+	 * @return {Element} Dropdown content element.
 	 */
 	renderContent( { onClose, isOpen } ) {
 		const { clientId, isAppender } = this.props;

package/src/components/inserter/media-tab/hooks.js

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
-/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
-/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.
@@ -50,48 +51,14 @@ export function useMediaResults( category, query = {} ) {
 	return { mediaList, isLoading };
 }
 
-function useInserterMediaCategories() {
-	const {
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			inserterMediaCategories: settings.inserterMediaCategories,
-			allowedMimeTypes: settings.allowedMimeTypes,
-			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
-		};
-	}, [] );
-	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
-	// some of them. In this case we shouldn't add the category to the available media
-	// categories list in the inserter.
-	const allowedCategories = useMemo( () => {
-		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
-			return;
-		}
-		return inserterMediaCategories.filter( ( category ) => {
-			// Check if Openverse category is enabled.
-			if (
-				! enableOpenverseMediaCategory &&
-				category.name === 'openverse'
-			) {
-				return false;
-			}
-			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
-				mimeType.startsWith( `${ category.mediaType }/` )
-			);
-		} );
-	}, [
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	] );
-	return allowedCategories;
-}
-
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
 	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
 		( select ) => {
 			const { canInsertBlockType } = select( blockEditorStore );
@@ -112,7 +79,6 @@ export function useMediaCategories( rootClientId ) {
 		},
 		[ rootClientId ]
 	);
-	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
 			const _categories = [];

package/src/components/inserter/style.scss

@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 		overflow-y: auto;
 		flex-grow: 1;
 		height: 100%;
-		padding: $grid-unit-40 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 

package/src/components/letter-spacing-control/index.js

@@ -20,7 +20,7 @@ import useSetting from '../../components/use-setting';
  * @param {Function}                props.onChange             Handles change in letter-spacing selection.
  * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement} Letter-spacing control.
+ * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,

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

@@ -13,7 +13,8 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
+import { pipe } from '@wordpress/compose';
 
 const ICONS_MAP = {
 	post: postList,
@@ -44,6 +45,58 @@ function SearchItemIcon( { isURL, suggestion } ) {
 	return null;
 }
 
+/**
+ * Adds a leading slash to a url if it doesn't already have one.
+ * @param {string} url the url to add a leading slash to.
+ * @return {string} the url with a leading slash.
+ */
+function addLeadingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /^\/?/, '/' );
+}
+
+function removeTrailingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) return url;
+
+	return url?.replace( /\/$/, '' );
+}
+
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
+const defaultTo = ( d ) => ( v ) => {
+	return v === null || v === undefined || v !== v ? d : v;
+};
+
+/**
+ * Prepares a URL for display in the UI.
+ * - decodes the URL.
+ * - filters it (removes protocol, www, etc.).
+ * - truncates it if necessary.
+ * - adds a leading slash.
+ * @param {string} url the url.
+ * @return {string} the processed url to display.
+ */
+function getURLForDisplay( url ) {
+	if ( ! url ) return url;
+
+	return pipe(
+		safeDecodeURI,
+		getPath,
+		defaultTo( '' ),
+		partialRight( filterURLForDisplay, 24 ),
+		removeTrailingSlash,
+		addLeadingSlash
+	)( url );
+}
+
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
@@ -54,7 +107,7 @@ export const LinkControlSearchItem = ( {
 } ) => {
 	const info = isURL
 		? __( 'Press ENTER to add this link' )
-		: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );
+		: getURLForDisplay( suggestion.url );
 
 	return (
 		<MenuItem

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

@@ -13,16 +13,9 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
-import {
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	memo,
-} from '@wordpress/element';
+import { useState, useRef, useCallback, memo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -36,7 +29,7 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
+import { getBlockPositionDescription, focusListItem } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -120,7 +113,6 @@ function ListViewBlock( {
 	);
 
 	const {
-		isTreeGridMounted,
 		expand,
 		collapse,
 		BlockSettingsMenu,
@@ -142,15 +134,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
 	// If multiple blocks are selected, deselect all blocks when the user
 	// presses the escape key.
 	const onKeyDown = ( event ) => {
@@ -188,30 +171,7 @@ function ListViewBlock( {
 				selectBlock( undefined, focusClientId, null, null );
 			}
 
-			const getFocusElement = () => {
-				const row = treeGridElementRef.current?.querySelector(
-					`[role=row][data-block="${ focusClientId }"]`
-				);
-				if ( ! row ) return null;
-				// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-				return focus.focusable.find( row )[ 0 ];
-			};
-
-			let focusElement = getFocusElement();
-			if ( focusElement ) {
-				focusElement.focus();
-			} else {
-				// The element hasn't been painted yet. Defer focusing on the next frame.
-				// This could happen when all blocks have been deleted and the default block
-				// hasn't been added to the editor yet.
-				window.requestAnimationFrame( () => {
-					focusElement = getFocusElement();
-					// Ignore if the element still doesn't exist.
-					if ( focusElement ) {
-						focusElement.focus();
-					}
-				} );
-			}
+			focusListItem( focusClientId, treeGridElementRef );
 		},
 		[ selectBlock, treeGridElementRef ]
 	);

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

@@ -168,8 +168,18 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+
+				// To avoid performance issues, we only render blocks that are in view,
+				// or blocks that are selected or dragged. If a block is selected,
+				// it is only counted if it is the first of the block selection.
+				// This prevents the entire tree from being rendered when a branch is
+				// selected, or a user selects all blocks, while still enabling scroll
+				// into view behavior when selecting a block or opening the list view.
 				const showBlock =
-					isDragged || blockInView || isSelected || isBranchDragged;
+					isDragged ||
+					blockInView ||
+					isBranchDragged ||
+					( isSelected && clientId === selectedClientIds[ 0 ] );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

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

@@ -32,6 +32,7 @@ import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
 import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
+import { focusListItem } from './utils';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -132,8 +133,6 @@ function ListViewComponent(
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
-	const isMounted = useRef( false );
-
 	const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
@@ -156,7 +155,13 @@ function ListViewComponent(
 		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
-		isMounted.current = true;
+		// If a blocks are already selected when the list view is initially
+		// mounted, shift focus to the first selected block.
+		if ( selectedClientIds?.length ) {
+			focusListItem( selectedClientIds[ 0 ], elementRef );
+		}
+		// Disable reason: Only focus on the selected item when the list view is mounted.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const expand = useCallback(
@@ -204,7 +209,6 @@ function ListViewComponent(
 
 	const contextValue = useMemo(
 		() => ( {
-			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
@@ -56,3 +57,39 @@ export function getCommonDepthClientIds(
 		end,
 	};
 }
+
+/**
+ * Shift focus to the list view item associated with a particular clientId.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {string}                 focusClientId      The client ID of the block to focus.
+ * @param {RefObject<HTMLElement>} treeGridElementRef The container element to search within.
+ */
+export function focusListItem( focusClientId, treeGridElementRef ) {
+	const getFocusElement = () => {
+		const row = treeGridElementRef.current?.querySelector(
+			`[role=row][data-block="${ focusClientId }"]`
+		);
+		if ( ! row ) return null;
+		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+		return focus.focusable.find( row )[ 0 ];
+	};
+
+	let focusElement = getFocusElement();
+	if ( focusElement ) {
+		focusElement.focus();
+	} else {
+		// The element hasn't been painted yet. Defer focusing on the next frame.
+		// This could happen when all blocks have been deleted and the default block
+		// hasn't been added to the editor yet.
+		window.requestAnimationFrame( () => {
+			focusElement = getFocusElement();
+
+			// Ignore if the element still doesn't exist.
+			if ( focusElement ) {
+				focusElement.focus();
+			}
+		} );
+	}
+}

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

@@ -98,9 +98,9 @@ The `disableDropZone` prop still takes precedence over `dropZoneUIOnly` – spec
 
 ### icon
 
-Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `WPComponent` such as `BlockIcon`to render instead.
+Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `Component` such as `BlockIcon`to render instead.
 
--   Type: `String|WPComponent`
+-   Type: `String|Component`
 -   Required: No
 -   Platform: Web | Mobile
 
@@ -216,7 +216,7 @@ Replace implementation of the placeholder:
 ```js
 function replaceMediaPlaceholder() {
 	return function () {
-		return wp.element.createElement(
+		return React.createElement(
 			'div',
 			{},
 			'The replacement contents or components.'

package/src/components/media-upload/{constants.js → constants.native.js}

@@ -10,6 +10,5 @@ export const MEDIA_TYPE_ANY = 'any';
 
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
 export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );

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

@@ -8,7 +8,7 @@ import { withFilters } from '@wordpress/components';
  * an integration with the core blocks that handle media files. By default it renders nothing but
  * it provides a way to have it overridden with the `editor.MediaUpload` filter.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const MediaUpload = () => null;