@wordpress/block-editor 15.21.0 → 15.21.1

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

@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Caption, RichText } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { store as blockEditorStore } from '../../store';
-
-const BlockCaption = ( {
-	accessible,
-	accessibilityLabelCreator,
-	onBlur,
-	onChange,
-	onFocus,
-	isSelected,
-	shouldDisplay,
-	text,
-	insertBlocksAfter,
-} ) => (
-	<View style={ [ styles.container, shouldDisplay && styles.padding ] }>
-		<Caption
-			accessibilityLabelCreator={ accessibilityLabelCreator }
-			accessible={ accessible }
-			isSelected={ isSelected }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			onFocus={ onFocus }
-			shouldDisplay={ shouldDisplay }
-			value={ text }
-			insertBlocksAfter={ insertBlocksAfter }
-		/>
-	</View>
-);
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockAttributes,
-			getSelectedBlockClientId,
-			getBlockName,
-			getBlockRootClientId,
-		} = select( blockEditorStore );
-		const { caption } = getBlockAttributes( clientId ) || {};
-		const isBlockSelected = getSelectedBlockClientId() === clientId;
-
-		// Detect whether the block is an inner block by checking if it has a parent block.
-		// getBlockRootClientId() will return an empty string for all top-level blocks.
-		// If the block is an inner block, its parent may explicitly hide child block controls.
-		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/4256
-		const parentId = getBlockRootClientId( clientId );
-		const parentBlockName = getBlockName( parentId );
-
-		const hideCaption = hasBlockSupport(
-			parentBlockName,
-			'__experimentalHideChildBlockControls',
-			false
-		);
-
-		// We'll render the caption so that the soft keyboard is not forced to close on Android
-		// but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
-		const shouldDisplay =
-			! hideCaption &&
-			( ! RichText.isEmpty( caption ) > 0 || isBlockSelected );
-
-		return {
-			shouldDisplay,
-			text: caption,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId } ) => {
-		const { updateBlockAttributes } = dispatch( blockEditorStore );
-		return {
-			onChange: ( caption ) => {
-				updateBlockAttributes( clientId, { caption } );
-			},
-		};
-	} ),
-] )( BlockCaption );

package/src/components/block-caption/styles.native.scss

@@ -1,7 +0,0 @@
-.container {
-	flex: 1;
-}
-
-.padding {
-	padding: $block-selected-to-content;
-}

package/src/components/block-controls/slot.native.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarGroup } from '@wordpress/components';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-
-export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const Slot = groups[ group ]?.Slot;
-	if ( ! Slot ) {
-		warning( `Unknown BlockControls group "${ group }" provided.` );
-		return null;
-	}
-
-	if ( group === 'default' ) {
-		return <Slot { ...props } />;
-	}
-
-	return (
-		<Slot { ...props }>
-			{ ( fills ) => {
-				if ( ! fills.length ) {
-					return null;
-				}
-				return <ToolbarGroup>{ fills }</ToolbarGroup>;
-			} }
-		</Slot>
-	);
-}

package/src/components/block-draggable/draggable-chip.native.js

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { dragHandle } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BlockIcon from '../block-icon';
-import styles from './style.scss';
-
-const shadowStyle = {
-	shadowColor: '#000',
-	shadowOffset: {
-		width: 0,
-		height: 2,
-	},
-	shadowOpacity: 0.25,
-	shadowRadius: 3.84,
-
-	elevation: 5,
-};
-
-/**
- * Block draggable chip component
- *
- * @param {Object} props        Component props.
- * @param {Object} [props.icon] Block icon.
- * @return {React.JSX.Element} Chip component.
- */
-export default function BlockDraggableChip( { icon } ) {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles[ 'draggable-chip__container' ],
-		styles[ 'draggable-chip__container--dark' ]
-	);
-
-	return (
-		<View style={ [ containerStyle, shadowStyle ] } testID="draggable-chip">
-			<BlockIcon icon={ dragHandle } />
-			{ icon && <BlockIcon icon={ icon } /> }
-		</View>
-	);
-}

package/src/components/block-draggable/dropping-insertion-point.native.js

@@ -1,181 +0,0 @@
-/**
- * External dependencies
- */
-import Animated, {
-	useSharedValue,
-	useAnimatedStyle,
-	withTiming,
-	useAnimatedReaction,
-	runOnJS,
-} from 'react-native-reanimated';
-import {
-	useSafeAreaInsets,
-	useSafeAreaFrame,
-} from 'react-native-safe-area-context';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { generateHapticFeedback } from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { useBlockListContext } from '../block-list/block-list-context';
-import styles from './dropping-insertion-point.scss';
-
-/**
- * Dropping zone indicator component.
- *
- * This component shows where a block can be dropped when it's being dragged.
- *
- * @param {Object}                                        props                  Component props.
- * @param {Object}                                        props.scroll           Scroll offset object.
- * @param {Object}                                        props.currentYPosition Current Y coordinate position when dragging.
- * @param {import('react-native-reanimated').SharedValue} props.isDragging       Whether or not dragging has started.
- * @param {import('react-native-reanimated').SharedValue} props.targetBlockIndex Current block target index.
- *
- * @return {React.JSX.Element} The component to be rendered.
- */
-export default function DroppingInsertionPoint( {
-	scroll,
-	currentYPosition,
-	isDragging,
-	targetBlockIndex,
-} ) {
-	const {
-		getBlockOrder,
-		isBlockBeingDragged,
-		isDraggingBlocks,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-	} = useSelect( blockEditorStore );
-
-	const { blocksLayouts, findBlockLayoutByClientId } = useBlockListContext();
-	const { top, bottom } = useSafeAreaInsets();
-	const { height } = useSafeAreaFrame();
-	const safeAreaOffset = top + bottom;
-	const maxHeight =
-		height -
-		( safeAreaOffset + styles[ 'dropping-insertion-point' ].height );
-
-	const blockYPosition = useSharedValue( 0 );
-	const opacity = useSharedValue( 0 );
-
-	useAnimatedReaction(
-		() => isDragging.value,
-		( value ) => {
-			if ( ! value ) {
-				opacity.value = 0;
-				blockYPosition.value = 0;
-			}
-		}
-	);
-
-	function getSelectedBlockIndicatorPosition( positions ) {
-		const currentYPositionWithScroll =
-			currentYPosition.value + scroll.offsetY.value;
-		const midpoint = ( positions.top + positions.bottom ) / 2;
-
-		return midpoint < currentYPositionWithScroll
-			? positions.bottom
-			: positions.top;
-	}
-
-	function setIndicatorPosition( index ) {
-		const insertionPointIndex = index;
-		const order = getBlockOrder();
-		const isDraggingAnyBlocks = isDraggingBlocks();
-
-		if (
-			! isDraggingAnyBlocks ||
-			insertionPointIndex === null ||
-			! order.length
-		) {
-			return;
-		}
-
-		let previousClientId = order[ insertionPointIndex - 1 ];
-		let nextClientId = order[ insertionPointIndex ];
-
-		while ( isBlockBeingDragged( previousClientId ) ) {
-			previousClientId = getPreviousBlockClientId( previousClientId );
-		}
-
-		while ( isBlockBeingDragged( nextClientId ) ) {
-			nextClientId = getNextBlockClientId( nextClientId );
-		}
-
-		const previousElement = previousClientId
-			? findBlockLayoutByClientId(
-					blocksLayouts.current,
-					previousClientId
-			  )
-			: null;
-		const nextElement = nextClientId
-			? findBlockLayoutByClientId( blocksLayouts.current, nextClientId )
-			: null;
-
-		const previousElementPosition = previousElement
-			? previousElement.y + previousElement.height
-			: 0;
-		const nextElementPosition = nextElement ? nextElement.y : 0;
-
-		const elementsPositions = {
-			top: Math.floor(
-				previousElement ? previousElementPosition : nextElementPosition
-			),
-			bottom: Math.floor(
-				nextElement ? nextElementPosition : previousElementPosition
-			),
-		};
-
-		const nextPosition =
-			elementsPositions.top !== elementsPositions.bottom
-				? getSelectedBlockIndicatorPosition( elementsPositions )
-				: elementsPositions.top;
-
-		if ( nextPosition && blockYPosition.value !== nextPosition ) {
-			opacity.value = 0;
-			blockYPosition.value = nextPosition;
-			opacity.value = withTiming( 1 );
-			generateHapticFeedback();
-		}
-	}
-
-	useAnimatedReaction(
-		() => targetBlockIndex.value,
-		( value, previous ) => {
-			if ( value !== previous ) {
-				runOnJS( setIndicatorPosition )( value );
-			}
-		}
-	);
-
-	const animatedStyles = useAnimatedStyle( () => {
-		const translationY = blockYPosition.value - scroll.offsetY.value;
-		// Prevents overflowing behind the header/footer
-		const shouldHideIndicator =
-			translationY < 0 || translationY > maxHeight;
-
-		return {
-			opacity: shouldHideIndicator ? 0 : opacity.value,
-			transform: [
-				{
-					translateY: translationY,
-				},
-			],
-		};
-	} );
-
-	const insertionPointStyles = [
-		styles[ 'dropping-insertion-point' ],
-		animatedStyles,
-	];
-
-	return (
-		<Animated.View pointerEvents="none" style={ insertionPointStyles } />
-	);
-}

package/src/components/block-draggable/dropping-insertion-point.native.scss

@@ -1,8 +0,0 @@
-.dropping-insertion-point {
-	position: absolute;
-	left: $dashed-border-space;
-	right: $dashed-border-space;
-	height: 3;
-	background-color: $blue-wordpress;
-	z-index: 1;
-}