@wordpress/block-editor 15.20.0 → 15.21.1

package/src/components/rich-text/shortcut.native.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-export class RichTextShortcut extends Component {
-	render() {
-		return null;
-	}
-}

package/src/components/ungroup-button/README.md

@@ -1,23 +0,0 @@
-# Ungroup Button
-
-The `UngroupButton` components adds an icon on the BlockControls toolbar when a group block is selected. Then, it's possible to ungroup the inner blocks. After click on the icon, it removes the group block holding the InnerBlocks components which are moved one level up in the hierarchy.
-
-This only happens in the mobile WordPress apps.
-
-![Ungroup button icon](https://user-images.githubusercontent.com/21242757/65593577-11006000-df91-11e9-8460-1179e9ef46d2.png)
-
-## Development guidelines
-
-### Usage
-
-Display the `UngroupButton` icon.
-
-```jsx
-import { UngroupButton } from '@wordpress/block-editor';
-
-const MyUngroupButton = () => <UngroupButton />;
-```
-
-## Related components
-
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/ungroup-button/index.native.js

@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { ungroup } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-const noop = () => {};
-const EMPTY_BLOCKS_LIST = [];
-
-export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
-	if ( ! isUngroupable ) {
-		return null;
-	}
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				title={ __( 'Ungroup' ) }
-				icon={ ungroup }
-				onClick={ onConvertFromGroup }
-			/>
-		</ToolbarGroup>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlock } =
-			select( blockEditorStore );
-
-		const { getGroupingBlockName } = select( blocksStore );
-
-		const selectedId = getSelectedBlockClientId();
-		const selectedBlock = getBlock( selectedId );
-
-		const groupingBlockName = getGroupingBlockName();
-
-		const isUngroupable =
-			selectedBlock &&
-			selectedBlock.innerBlocks &&
-			selectedBlock.innerBlocks.length > 0 &&
-			selectedBlock.name === groupingBlockName;
-
-		const innerBlocks = isUngroupable
-			? selectedBlock.innerBlocks
-			: EMPTY_BLOCKS_LIST;
-
-		return {
-			isUngroupable,
-			clientId: selectedId,
-			innerBlocks,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId, innerBlocks, onToggle = noop } ) => {
-		const { replaceBlocks } = dispatch( blockEditorStore );
-
-		return {
-			onConvertFromGroup() {
-				if ( ! innerBlocks.length ) {
-					return;
-				}
-
-				replaceBlocks( clientId, innerBlocks );
-
-				onToggle();
-			},
-		};
-	} ),
-] )( UngroupButton );

package/src/components/unsupported-block-details/index.native.js

@@ -1,187 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	BottomSheet,
-	Icon as WCIcon,
-	TextControl,
-} from '@wordpress/components';
-import {
-	requestUnsupportedBlockFallback,
-	sendActionButtonPressedAction,
-	actionButtons,
-} from '@wordpress/react-native-bridge';
-import { help } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { getBlockType } from '@wordpress/blocks';
-import { useCallback, useState } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
-
-const EMPTY_ARRAY = [];
-
-const UnsupportedBlockDetails = ( {
-	clientId,
-	showSheet,
-	onCloseSheet,
-	customBlockTitle = '',
-	icon,
-	title,
-	description,
-	actionButtonLabel,
-	customActions = EMPTY_ARRAY,
-} ) => {
-	const [ sendFallbackMessage, setSendFallbackMessage ] = useState( false );
-	const [ sendButtonPressMessage, setSendButtonPressMessage ] =
-		useState( false );
-
-	const {
-		blockName,
-		blockContent,
-		isUnsupportedBlockEditorSupported,
-		canEnableUnsupportedBlockEditor,
-		isEditableInUnsupportedBlockEditor,
-	} = useUnsupportedBlockEditor( clientId );
-
-	// Styles
-	const textStyle = usePreferredColorSchemeStyle(
-		styles[ 'unsupported-block-details__text' ],
-		styles[ 'unsupported-block-details__text--dark' ]
-	);
-	const titleStyle = usePreferredColorSchemeStyle(
-		styles[ 'unsupported-block-details__title' ],
-		styles[ 'unsupported-block-details__title--dark' ]
-	);
-	const descriptionStyle = usePreferredColorSchemeStyle(
-		styles[ 'unsupported-block-details__description' ],
-		styles[ 'unsupported-block-details__description--dark' ]
-	);
-	const iconStyle = usePreferredColorSchemeStyle(
-		styles[ 'unsupported-block-details__icon' ],
-		styles[ 'unsupported-block-details__icon--dark' ]
-	);
-	const actionButtonStyle = usePreferredColorSchemeStyle(
-		styles[ 'unsupported-block-details__action-button' ],
-		styles[ 'unsupported-block-details__action-button--dark' ]
-	);
-
-	const blockTitle =
-		customBlockTitle || getBlockType( blockName )?.title || blockName;
-
-	const requestFallback = useCallback( () => {
-		if (
-			canEnableUnsupportedBlockEditor &&
-			isUnsupportedBlockEditorSupported === false
-		) {
-			onCloseSheet();
-			setSendButtonPressMessage( true );
-		} else {
-			onCloseSheet();
-			setSendFallbackMessage( true );
-		}
-	}, [
-		canEnableUnsupportedBlockEditor,
-		isUnsupportedBlockEditorSupported,
-		onCloseSheet,
-	] );
-
-	// The description can include extra notes via WP hooks.
-	const descriptionWithNotes = applyFilters(
-		'native.unsupported_block_details_extra_note',
-		description,
-		blockName
-	);
-
-	const webEditorDefaultLabel = applyFilters(
-		'native.unsupported_block_details_web_editor_action',
-		__( 'Edit using web editor' )
-	);
-
-	const canUseWebEditor =
-		( isUnsupportedBlockEditorSupported ||
-			canEnableUnsupportedBlockEditor ) &&
-		isEditableInUnsupportedBlockEditor;
-	const actions = [
-		...[
-			canUseWebEditor && {
-				label: actionButtonLabel || webEditorDefaultLabel,
-				onPress: requestFallback,
-			},
-		],
-		...customActions,
-	].filter( Boolean );
-
-	return (
-		<BottomSheet
-			isVisible={ showSheet }
-			hideHeader
-			onClose={ onCloseSheet }
-			onModalHide={ () => {
-				if ( sendFallbackMessage ) {
-					// On iOS, onModalHide is called when the controller is still part of the hierarchy.
-					// A small delay will ensure that the controller has already been removed.
-					this.timeout = setTimeout( () => {
-						// For the Classic block, the content is kept in the `content` attribute.
-						requestUnsupportedBlockFallback(
-							blockContent,
-							clientId,
-							blockName,
-							blockTitle
-						);
-					}, 100 );
-					setSendFallbackMessage( false );
-				} else if ( sendButtonPressMessage ) {
-					this.timeout = setTimeout( () => {
-						sendActionButtonPressedAction(
-							actionButtons.missingBlockAlertActionButton
-						);
-					}, 100 );
-					setSendButtonPressMessage( false );
-				}
-			} }
-		>
-			<View style={ styles[ 'unsupported-block-details__container' ] }>
-				<WCIcon
-					icon={ icon || help }
-					color={ iconStyle.color }
-					size={ iconStyle.size }
-				/>
-				<Text style={ [ textStyle, titleStyle ] }>{ title }</Text>
-				{ isEditableInUnsupportedBlockEditor &&
-					descriptionWithNotes && (
-						<Text style={ [ textStyle, descriptionStyle ] }>
-							{ descriptionWithNotes }
-						</Text>
-					) }
-			</View>
-			{ actions.map( ( { label, onPress }, index ) => (
-				<TextControl
-					key={ `${ label } - ${ index }` }
-					label={ label }
-					separatorType="topFullWidth"
-					onPress={ onPress }
-					labelStyle={ actionButtonStyle }
-				/>
-			) ) }
-			<TextControl
-				label={ __( 'Dismiss' ) }
-				separatorType="topFullWidth"
-				onPress={ onCloseSheet }
-				labelStyle={ actionButtonStyle }
-			/>
-		</BottomSheet>
-	);
-};
-
-export default UnsupportedBlockDetails;

package/src/components/unsupported-block-details/style.native.scss

@@ -1,56 +0,0 @@
-.unsupported-block-details__container {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
-.unsupported-block-details__icon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.unsupported-block-details__icon--dark {
-	color: $gray-20;
-}
-
-.unsupported-block-details__text {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.unsupported-block-details__text--dark {
-	color: $white;
-}
-
-.unsupported-block-details__title {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.unsupported-block-details__title--dark {
-	color: $white;
-}
-
-.unsupported-block-details__description {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.unsupported-block-details__description--dark {
-	color: $gray-20;
-}
-
-.unsupported-block-details__action-button {
-	color: $blue-50;
-}
-
-.unsupported-block-details__action-button--dark {
-	color: $blue-30;
-}

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

@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { TextInput } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export default function URLInput( {
-	value = '',
-	autoFocus = true,
-	onChange,
-	...extraProps
-} ) {
-	/* eslint-disable jsx-a11y/no-autofocus */
-	return (
-		<TextInput
-			autoFocus={ autoFocus }
-			editable
-			selectTextOnFocus
-			autoCapitalize="none"
-			autoCorrect={ false }
-			textContentType="URL"
-			value={ value }
-			onChangeText={ onChange }
-			placeholder={ __( 'Paste URL' ) }
-			{ ...extraProps }
-		/>
-	);
-	/* eslint-enable jsx-a11y/no-autofocus */
-}

package/src/components/use-block-drop-zone/index.native.js

@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	runOnJS,
-	useDerivedValue,
-	useSharedValue,
-} from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { useBlockListContext } from '../block-list/block-list-context';
-import { getDistanceToNearestEdge } from '../../utils/math';
-import useOnBlockDrop from '../use-on-block-drop';
-
-const UPDATE_TARGET_BLOCK_INDEX_THRESHOLD = 20; // In pixels
-
-/** @typedef {import('../../utils/math').WPPoint} WPPoint */
-
-/**
- * The orientation of a block list.
- *
- * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation
- */
-
-/**
- * Given a list of blocks layouts finds the index that a block should be dropped at.
- *
- * @param {Object}                 blocksLayouts Blocks layouts object.
- * @param {WPPoint}                position      The position of the item being dragged.
- * @param {WPBlockListOrientation} orientation   The orientation of a block list.
- * @param {boolean}                isRTL         Check if current locale is RTL.
- *
- * @return {number|undefined} The block index that's closest to the drag position.
- */
-export function getNearestBlockIndex(
-	blocksLayouts,
-	position,
-	orientation,
-	isRTL
-) {
-	const allowedEdges =
-		orientation === 'horizontal'
-			? [ 'left', 'right' ]
-			: [ 'top', 'bottom' ];
-
-	const isRightToLeft = isRTL;
-
-	let candidateIndex;
-	let candidateDistance;
-
-	// Only enabled for root level blocks.
-	blocksLayouts.forEach( ( element, index ) => {
-		const { x, y, width, height } = element;
-		const rect = {
-			x: element.x,
-			y: element.y,
-			top: y,
-			right: x + width,
-			bottom: y + height,
-			left: x,
-			width,
-			height,
-		};
-		const [ distance, edge ] = getDistanceToNearestEdge(
-			position,
-			rect,
-			allowedEdges
-		);
-
-		if ( candidateDistance === undefined || distance < candidateDistance ) {
-			// If the user is dropping to the trailing edge of the block
-			// add 1 to the index to represent dragging after.
-			// Take RTL languages into account where the left edge is
-			// the trailing edge.
-			const isTrailingEdge =
-				edge === 'bottom' ||
-				( ! isRightToLeft && edge === 'right' ) ||
-				( isRightToLeft && edge === 'left' );
-			const offset = isTrailingEdge ? 1 : 0;
-
-			// Update the currently known best candidate.
-			candidateDistance = distance;
-			candidateIndex = index + offset;
-		}
-	} );
-	return candidateIndex;
-}
-
-/**
- * @typedef  {Object} WPBlockDropZoneConfig
- * @property {string} rootClientId The root client id for the block list.
- */
-
-/**
- * A React hook that can be used to make a block list handle drag and drop.
- *
- * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
- *
- * @return {Object} An object that contains `targetBlockIndex` and the event
- * handlers `onBlockDragOver`, `onBlockDragEnd` and `onBlockDrop`.
- */
-export default function useBlockDropZone( {
-	// An undefined value represents a top-level block. Default to an empty
-	// string for this so that `targetRootClientId` can be easily compared to
-	// values returned by the `getRootBlockClientId` selector, which also uses
-	// an empty string to represent top-level blocks.
-	rootClientId: targetRootClientId = '',
-} = {} ) {
-	const targetBlockIndex = useSharedValue( null );
-	const dragPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-	const prevDragPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-
-	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
-		useBlockListContext();
-
-	const getSortedBlocksLayouts = useCallback( () => {
-		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
-		// We use the value of `blocksLayouts` as the dependency.
-	}, [ blocksLayouts.current ] );
-
-	const isRTL = getSettings().isRTL;
-
-	const onBlockDrop = useOnBlockDrop();
-
-	const updateTargetBlockIndex = useCallback(
-		( event ) => {
-			const sortedBlockLayouts = getSortedBlocksLayouts();
-
-			const targetIndex = getNearestBlockIndex(
-				sortedBlockLayouts,
-				{ x: event.x, y: event.y },
-				getBlockListSettings( targetRootClientId )?.orientation,
-				isRTL
-			);
-			if ( targetIndex !== null ) {
-				targetBlockIndex.value = targetIndex ?? 0;
-			}
-		},
-		[
-			getSortedBlocksLayouts,
-			getBlockListSettings,
-			targetRootClientId,
-			isRTL,
-			targetBlockIndex,
-		]
-	);
-
-	useDerivedValue( () => {
-		const x = dragPosition.x.value;
-		const y = dragPosition.y.value;
-		const prevX = prevDragPosition.x.value;
-		const prevY = prevDragPosition.y.value;
-		// `updateTargetBlockIndex` performs expensive calculations, so we throttle
-		// the call using a offset threshold based on the dragging position.
-		if (
-			Math.abs( x - prevX ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD ||
-			Math.abs( y - prevY ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD
-		) {
-			runOnJS( updateTargetBlockIndex )( { x, y } );
-			prevDragPosition.x.value = x;
-			prevDragPosition.y.value = y;
-			return true;
-		}
-		return false;
-	} );
-
-	return {
-		onBlockDragOver( { x, y } ) {
-			dragPosition.x.value = x;
-			dragPosition.y.value = y;
-		},
-		onBlockDragOverWorklet( { x, y } ) {
-			'worklet';
-			dragPosition.x.value = x;
-			dragPosition.y.value = y;
-		},
-		onBlockDragEnd() {
-			targetBlockIndex.value = null;
-		},
-		onBlockDrop: ( event ) => {
-			if ( targetBlockIndex.value !== null ) {
-				onBlockDrop( {
-					...event,
-					targetRootClientId,
-					targetBlockIndex: targetBlockIndex.value,
-				} );
-			}
-		},
-		targetBlockIndex,
-	};
-}

package/src/components/use-on-block-drop/index.native.js

@@ -1,115 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { cloneBlock } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-/**
- * A function that returns an event handler function for block drop events.
- *
- * @param {Function} getBlockIndex             A function that gets the index of a block.
- * @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
- * @param {Function} moveBlocksToPosition      A function that moves blocks.
- * @param {Function} insertBlocks              A function that inserts blocks.
- * @param {Function} clearSelectedBlock        A function that clears block selection.
- * @return {Function} The event handler for a block drop event.
- */
-export function onBlockDrop(
-	getBlockIndex,
-	getClientIdsOfDescendants,
-	moveBlocksToPosition,
-	insertBlocks,
-	clearSelectedBlock
-) {
-	return ( {
-		blocks,
-		srcClientIds: sourceClientIds,
-		srcRootClientId: sourceRootClientId,
-		targetBlockIndex,
-		targetRootClientId,
-		type: dropType,
-	} ) => {
-		// If the user is inserting a block.
-		if ( dropType === 'inserter' ) {
-			clearSelectedBlock();
-			const blocksToInsert = blocks.map( ( block ) =>
-				cloneBlock( block )
-			);
-			insertBlocks(
-				blocksToInsert,
-				targetBlockIndex,
-				targetRootClientId,
-				true,
-				null
-			);
-		}
-
-		// If the user is moving a block.
-		if ( dropType === 'block' ) {
-			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
-
-			// If the user is dropping to the same position, return early.
-			if (
-				sourceRootClientId === targetRootClientId &&
-				sourceBlockIndex === targetBlockIndex
-			) {
-				return;
-			}
-
-			// If the user is attempting to drop a block within its own
-			// nested blocks, return early as this would create infinite
-			// recursion.
-			if (
-				sourceClientIds.includes( targetRootClientId ) ||
-				getClientIdsOfDescendants( sourceClientIds ).some(
-					( id ) => id === targetRootClientId
-				)
-			) {
-				return;
-			}
-
-			const isAtSameLevel = sourceRootClientId === targetRootClientId;
-			const draggedBlockCount = sourceClientIds.length;
-
-			// If the block is kept at the same level and moved downwards,
-			// subtract to take into account that the blocks being dragged
-			// were removed from the block list above the insertion point.
-			const insertIndex =
-				isAtSameLevel && sourceBlockIndex < targetBlockIndex
-					? targetBlockIndex - draggedBlockCount
-					: targetBlockIndex;
-
-			moveBlocksToPosition(
-				sourceClientIds,
-				sourceRootClientId,
-				targetRootClientId,
-				insertIndex
-			);
-		}
-	};
-}
-
-/**
- * A React hook for handling block drop events.
- *
- * @return {Function} The event handler for a block drop event.
- */
-export default function useOnBlockDrop() {
-	const { getBlockIndex, getClientIdsOfDescendants } =
-		useSelect( blockEditorStore );
-	const { insertBlocks, moveBlocksToPosition, clearSelectedBlock } =
-		useDispatch( blockEditorStore );
-
-	return onBlockDrop(
-		getBlockIndex,
-		getClientIdsOfDescendants,
-		moveBlocksToPosition,
-		insertBlocks,
-		clearSelectedBlock
-	);
-}