@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-draggable/use-scroll-when-dragging.native.js

@@ -1,135 +0,0 @@
-/**
- * External dependencies
- */
-import { useWindowDimensions } from 'react-native';
-import {
-	useSharedValue,
-	useAnimatedRef,
-	scrollTo,
-	useAnimatedReaction,
-	withTiming,
-	withRepeat,
-	cancelAnimation,
-	Easing,
-} from 'react-native-reanimated';
-
-/**
- * Internal dependencies
- */
-import { useBlockListContext } from '../block-list/block-list-context';
-
-const SCROLL_INACTIVE_DISTANCE_PX = 50;
-const SCROLL_INTERVAL_MS = 1000;
-const VELOCITY_MULTIPLIER = 5000;
-
-/**
- * React hook that scrolls the scroll container when a block is being dragged.
- *
- * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
- *                      functions to be called in `onDragStart`, `onDragOver`
- *                      and `onDragEnd` events respectively. Additionally,
- * 						`scrollHandler` function is returned which should be
- * 						called in the `onScroll` event of the block list.
- */
-export default function useScrollWhenDragging() {
-	const { scrollRef } = useBlockListContext();
-	const animatedScrollRef = useAnimatedRef();
-	animatedScrollRef( scrollRef?.scrollViewRef );
-
-	const { height: windowHeight } = useWindowDimensions();
-
-	const velocityY = useSharedValue( 0 );
-	const offsetY = useSharedValue( 0 );
-	const dragStartY = useSharedValue( 0 );
-	const animationTimer = useSharedValue( 0 );
-	const isAnimationTimerActive = useSharedValue( false );
-	const isScrollActive = useSharedValue( false );
-
-	const scroll = {
-		offsetY: useSharedValue( 0 ),
-		maxOffsetY: useSharedValue( 0 ),
-	};
-	const scrollHandler = ( event ) => {
-		'worklet';
-		const { contentSize, contentOffset, layoutMeasurement } = event;
-		scroll.offsetY.value = contentOffset.y;
-		scroll.maxOffsetY.value = contentSize.height - layoutMeasurement.height;
-	};
-
-	const stopScrolling = () => {
-		'worklet';
-		cancelAnimation( animationTimer );
-
-		isAnimationTimerActive.value = false;
-		isScrollActive.value = false;
-		velocityY.value = 0;
-	};
-
-	const startScrolling = ( y ) => {
-		'worklet';
-		stopScrolling();
-		offsetY.value = scroll.offsetY.value;
-		dragStartY.value = y;
-
-		animationTimer.value = 0;
-		animationTimer.value = withRepeat(
-			withTiming( 1, {
-				duration: SCROLL_INTERVAL_MS,
-				easing: Easing.linear,
-			} ),
-			-1,
-			true
-		);
-		isAnimationTimerActive.value = true;
-	};
-
-	const scrollOnDragOver = ( y ) => {
-		'worklet';
-		const dragDistance = Math.max(
-			Math.abs( y - dragStartY.value ) - SCROLL_INACTIVE_DISTANCE_PX,
-			0
-		);
-		const distancePercentage = dragDistance / windowHeight;
-
-		if ( ! isScrollActive.value ) {
-			isScrollActive.value = dragDistance > 0;
-		} else if ( y > dragStartY.value ) {
-			// User is dragging downwards.
-			velocityY.value = VELOCITY_MULTIPLIER * distancePercentage;
-		} else if ( y < dragStartY.value ) {
-			// User is dragging upwards.
-			velocityY.value = -VELOCITY_MULTIPLIER * distancePercentage;
-		} else {
-			velocityY.value = 0;
-		}
-	};
-
-	useAnimatedReaction(
-		() => animationTimer.value,
-		( value, previous ) => {
-			if ( velocityY.value === 0 ) {
-				return;
-			}
-
-			const delta = Math.abs( value - previous );
-			let newOffset = offsetY.value + delta * velocityY.value;
-
-			if ( scroll.maxOffsetY.value !== 0 ) {
-				newOffset = Math.max(
-					0,
-					Math.min( scroll.maxOffsetY.value, newOffset )
-				);
-			} else {
-				// Scroll values are empty until receiving the first scroll event.
-				// In that case, the max offset is unknown and we can't clamp the
-				// new offset value.
-				newOffset = Math.max( 0, newOffset );
-			}
-
-			offsetY.value = newOffset;
-			scrollTo( animatedScrollRef, 0, offsetY.value, false );
-		}
-	);
-
-	return [ startScrolling, scrollOnDragOver, stopScrolling, scrollHandler ];
-}

package/src/components/block-edit/edit.native.js

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withFilters } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockContext from '../block-context';
-
-/**
- * Default value used for blocks which do not define their own context needs,
- * used to guarantee that a block's `context` prop will always be an object. It
- * is assigned as a constant since it is always expected to be an empty object,
- * and in order to avoid unnecessary React reconciliations of a changing object.
- *
- * @type {{}}
- */
-const DEFAULT_BLOCK_CONTEXT = {};
-
-export const Edit = ( props ) => {
-	const { name } = props;
-	const blockType = getBlockType( name );
-
-	const blockContext = useContext( BlockContext );
-
-	// Assign context values using the block type's declared context needs.
-	const context = useMemo( () => {
-		return blockType && blockType.usesContext
-			? Object.fromEntries(
-					Object.entries( blockContext ).filter( ( [ key ] ) =>
-						blockType.usesContext.includes( key )
-					)
-			  )
-			: DEFAULT_BLOCK_CONTEXT;
-	}, [ blockType, blockContext ] );
-
-	if ( ! blockType ) {
-		return null;
-	}
-
-	const Component = blockType.edit;
-
-	return <Component { ...props } context={ context } />;
-};
-
-export default withFilters( 'editor.BlockEdit' )( Edit );

package/src/components/block-edit/test/edit.native.js

@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-import { Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	registerBlockType,
-	unregisterBlockType,
-	getBlockTypes,
-} from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { Edit } from '../edit';
-import { BlockContextProvider } from '../../block-context';
-
-describe( 'Edit', () => {
-	afterEach( () => {
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
-	} );
-
-	it( 'should return null if block type not defined', () => {
-		const screen = render( <Edit name="core/test-block" /> );
-
-		expect( screen.toJSON() ).toBe( null );
-	} );
-
-	it( 'should use edit implementation of block', () => {
-		const edit = () => <Text>core/test-block</Text>;
-		registerBlockType( 'core/test-block', {
-			category: 'text',
-			title: 'block title',
-			edit,
-		} );
-
-		const screen = render( <Edit name="core/test-block" /> );
-
-		expect( screen.getByText( 'core/test-block' ) ).toBeDefined();
-	} );
-
-	it( 'should assign context', () => {
-		const edit = ( { context } ) => <Text>{ context.value }</Text>;
-		registerBlockType( 'core/test-block', {
-			category: 'text',
-			title: 'block title',
-			usesContext: [ 'value' ],
-			edit,
-		} );
-
-		const screen = render(
-			<BlockContextProvider value={ { value: 'Ok' } }>
-				<Edit name="core/test-block" />
-			</BlockContextProvider>
-		);
-
-		expect( screen.getByText( 'Ok' ) ).toBeDefined();
-	} );
-} );

package/src/components/block-heading-level-dropdown/index.native.js

@@ -1,68 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { DropdownMenu } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import HeadingLevelIcon from './heading-level-icon';
-
-const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
-
-/** @typedef {React.ComponentType} ComponentType */
-
-/**
- * HeadingLevelDropdown props.
- *
- * @typedef WPHeadingLevelDropdownProps
- *
- * @property {number}     value    The chosen heading level.
- * @property {number[]}   options  An array of supported heading levels.
- * @property {()=>number} onChange Function called with
- *                                 the selected value changes.
- */
-
-/**
- * Dropdown for selecting a heading level (1 through 6).
- *
- * @param {WPHeadingLevelDropdownProps} props Component props.
- *
- * @return {ComponentType} The toolbar.
- */
-export default function HeadingLevelDropdown( {
-	options = HEADING_LEVELS,
-	value,
-	onChange,
-} ) {
-	const createLevelControl = (
-		targetLevel,
-		currentLevel,
-		onChangeCallback
-	) => {
-		const isActive = targetLevel === currentLevel;
-		return {
-			icon: (
-				<HeadingLevelIcon
-					level={ targetLevel }
-					isPressed={ isActive }
-				/>
-			),
-			// translators: %d: heading level e.g: "1", "2", "3"
-			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive,
-			onClick: () => onChangeCallback( targetLevel ),
-		};
-	};
-
-	return (
-		<DropdownMenu
-			icon={ <HeadingLevelIcon level={ value } /> }
-			controls={ options.map( ( index ) =>
-				createLevelControl( index, value, onChange )
-			) }
-			label={ __( 'Change level' ) }
-		/>
-	);
-}

package/src/components/block-icon/index.native.js

@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { blockDefault } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export function BlockIcon( { icon, fill, size, showColors = false } ) {
-	if ( icon?.src === 'block-default' ) {
-		icon = {
-			src: blockDefault,
-		};
-	}
-
-	const defaultFill = usePreferredColorSchemeStyle(
-		styles.iconPlaceholder,
-		styles.iconPlaceholderDark
-	)?.fill;
-	const iconForeground = showColors ? icon?.foreground : undefined;
-
-	const renderedIcon = (
-		<WCIcon
-			icon={ icon && icon.src ? icon.src : icon }
-			fill={ fill || iconForeground || defaultFill }
-			{ ...( size && { size } ) }
-		/>
-	);
-	const style = showColors
-		? {
-				backgroundColor: icon && icon.background,
-		  }
-		: {};
-
-	return <View style={ style }>{ renderedIcon }</View>;
-}
-
-export default BlockIcon;

package/src/components/block-icon/style.native.scss

@@ -1,7 +0,0 @@
-.iconPlaceholder {
-	fill: $gray-dark;
-}
-
-.iconPlaceholderDark {
-	fill: $white;
-}

package/src/components/block-list/block-crash-boundary.native.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { logException } from '@wordpress/react-native-bridge';
-
-class BlockCrashBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	static getDerivedStateFromError( error ) {
-		return { error };
-	}
-
-	componentDidCatch( error ) {
-		const { blockName } = this.props;
-
-		logException( error, {
-			context: {
-				component_stack: error.componentStack,
-				block_name: blockName,
-			},
-			isHandled: true,
-			handledBy: 'Block-level Error Boundary',
-		} );
-	}
-
-	render() {
-		const { error } = this.state;
-		if ( ! error ) {
-			return this.props.children;
-		}
-
-		return this.props.fallback;
-	}
-}
-
-export default BlockCrashBoundary;

package/src/components/block-list/block-crash-warning.native.js

@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Warning from '../warning';
-
-const warning = (
-	<Warning
-		message={ __(
-			'This block has encountered an error and cannot be previewed.'
-		) }
-	/>
-);
-
-export default function BlockCrashWarning() {
-	return warning;
-}

package/src/components/block-list/block-invalid-warning.native.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock, getBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import Warning from '../warning';
-import { store as blockEditorStore } from '../../store';
-
-export default function BlockInvalidWarning( { clientId } ) {
-	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
-		const block = getBlock( clientId );
-		const { name } = block || {};
-
-		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType?.title;
-		const blockIcon = blockType?.icon;
-
-		return {
-			block,
-			blockTitle: title,
-			icon: blockIcon,
-		};
-	};
-
-	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
-
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %s: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
-	const { replaceBlock } = useDispatch( blockEditorStore );
-
-	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
-		createBlock( name, attributes, innerBlocks );
-
-	const attemptBlockRecovery = () => {
-		replaceBlock( block.clientId, recoverBlock( block ) );
-	};
-
-	return (
-		<TouchableWithoutFeedback
-			onPress={ attemptBlockRecovery }
-			accessible
-			accessibilityRole="button"
-		>
-			<Warning
-				title={ blockTitle }
-				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-				message={ __(
-					'Problem displaying block. \nTap to attempt block recovery.'
-				) }
-				icon={ icon }
-				accessibilityLabel={ accessibilityLabel }
-			/>
-		</TouchableWithoutFeedback>
-	);
-}

package/src/components/block-list/block-list-context.native.js

@@ -1,172 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { orderBy } from '../../utils/sorting';
-
-export const DEFAULT_BLOCK_LIST_CONTEXT = {
-	scrollRef: null,
-	blocksLayouts: { current: {} },
-	findBlockLayoutByClientId,
-	getBlockLayoutsOrderedByYCoord,
-	findBlockLayoutByPosition,
-	updateBlocksLayouts,
-};
-
-const Context = createContext( DEFAULT_BLOCK_LIST_CONTEXT );
-const { Provider, Consumer } = Context;
-
-/**
- * Finds a block's layout data by position.
- *
- * @param {Object} data       Blocks layouts object.
- * @param {Object} position   Position to use for finding the block.
- * @param {number} position.x X coordinate.
- * @param {number} position.y Y coordinate.
- *
- * @return {Object|undefined} Found block layout data that matches the provided position. If none is found, `undefined` will be returned.
- */
-function findBlockLayoutByPosition( data, position ) {
-	// Only enabled for root level blocks
-	return Object.values( data ).find( ( block ) => {
-		return (
-			position.x >= block.x &&
-			position.x <= block.x + block.width &&
-			position.y >= block.y &&
-			position.y <= block.y + block.height
-		);
-	} );
-}
-
-/**
- * Finds a block's layout data by its client Id.
- *
- * @param {Object} data     Blocks layouts object.
- * @param {string} clientId Block's clientId.
- *
- * @return {Object} Found block layout data.
- */
-function findBlockLayoutByClientId( data, clientId ) {
-	return Object.entries( data ).reduce( ( acc, entry ) => {
-		const item = entry[ 1 ];
-		if ( acc ) {
-			return acc;
-		}
-		if ( item?.clientId === clientId ) {
-			return item;
-		}
-		if ( item?.innerBlocks && Object.keys( item.innerBlocks ).length > 0 ) {
-			return findBlockLayoutByClientId( item.innerBlocks, clientId );
-		}
-		return null;
-	}, null );
-}
-
-/**
- * Deletes the layout data of a block by its client Id.
- *
- * @param {Object} data     Blocks layouts object.
- * @param {string} clientId Block's clientsId.
- *
- * @return {Object} Updated data object.
- */
-export function deleteBlockLayoutByClientId( data, clientId ) {
-	return Object.keys( data ).reduce( ( acc, key ) => {
-		if ( key !== clientId ) {
-			acc[ key ] = data[ key ];
-		}
-		if (
-			data[ key ]?.innerBlocks &&
-			Object.keys( data[ key ].innerBlocks ).length > 0
-		) {
-			if ( acc[ key ] ) {
-				acc[ key ].innerBlocks = deleteBlockLayoutByClientId(
-					data[ key ].innerBlocks,
-					clientId
-				);
-			}
-		}
-		return acc;
-	}, {} );
-}
-
-/**
- * Orders the block's layout data by its Y coordinate.
- *
- * @param {Object} data Blocks layouts object.
- *
- * @return {Object} Blocks layouts object ordered by its Y coordinate.
- */
-function getBlockLayoutsOrderedByYCoord( data ) {
-	// Only enabled for root level blocks.
-	return orderBy( Object.values( data ), 'y' );
-}
-
-/**
- * Updates or deletes a block's layout data in the blocksLayouts object,
- * in case of deletion, the layout data is not required.
- *
- * @param {Object}   blocksLayouts          Blocks layouts object.
- * @param {Object}   blockData              Block's layout data to add or remove to/from the blockLayouts object.
- * @param {string}   blockData.clientId     Block's clientId.
- * @param {?string}  blockData.rootClientId Optional. Block's rootClientId.
- * @param {?boolean} blockData.shouldRemove Optional. Flag to remove it from the blocksLayout list.
- * @param {number}   blockData.width        Block's width.
- * @param {number}   blockData.height       Block's height.
- * @param {number}   blockData.x            Block's x coordinate (relative to the parent).
- * @param {number}   blockData.y            Block's y coordinate (relative to the parent).
- */
-
-function updateBlocksLayouts( blocksLayouts, blockData ) {
-	const { clientId, rootClientId, shouldRemove, ...layoutProps } = blockData;
-
-	if ( clientId && shouldRemove ) {
-		blocksLayouts.current = deleteBlockLayoutByClientId(
-			blocksLayouts.current,
-			clientId
-		);
-		return;
-	}
-
-	if ( clientId && ! rootClientId ) {
-		blocksLayouts.current[ clientId ] = {
-			clientId,
-			rootClientId,
-			...layoutProps,
-			innerBlocks: {
-				...blocksLayouts.current[ clientId ]?.innerBlocks,
-			},
-		};
-	} else if ( clientId && rootClientId ) {
-		const block = findBlockLayoutByClientId(
-			blocksLayouts.current,
-			rootClientId
-		);
-
-		if ( block ) {
-			block.innerBlocks[ clientId ] = {
-				clientId,
-				rootClientId,
-				...layoutProps,
-				innerBlocks: {
-					...block.innerBlocks[ clientId ]?.innerBlocks,
-				},
-			};
-		}
-	}
-}
-
-export { Provider as BlockListProvider, Consumer as BlockListConsumer };
-
-/**
- * Hook that returns the block list context.
- *
- * @return {Object} Block list context
- */
-export const useBlockListContext = () => {
-	return useContext( Context );
-};