@wordpress/block-editor 15.20.0 → 15.21.1

package/src/components/block-caption/README.md

@@ -1,104 +0,0 @@
-## Block Caption
-
-The `BlockCaption` component renders block-level UI for adding and editing captions. It wraps logic around the more generic `Caption` component to provide an editable caption field that is designed specifically for block-level use.
-
-`BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc.
-
-## Development guidelines
-
-### Usage
-
-Renders an editable caption field designed specifically for block-level use.
-
-```jsx
-import { BlockCaption, RichText } from '@wordpress/block-editor';
-
-const MyBlockCaption = (
-	clientId,
-	isCaptionSelected,
-	onFocusCaption,
-	onBlur,
-	insertBlocksAfter
-) => (
-	<BlockCaption
-		clientId={ clientId }
-		accessible={ true }
-		accessibilityLabelCreator={ ( caption ) =>
-			RichText.isEmpty( caption )
-				? /* translators: accessibility text. Empty caption. */
-				  'Caption. Empty'
-				: sprintf(
-						/* translators: accessibility text. %s: caption. */
-						__( 'Caption. %s' ),
-						caption
-				  )
-		}
-		isSelected={ isCaptionSelected }
-		onFocus={ onFocusCaption }
-		onBlur={ onBlur }
-		insertBlocksAfter={ insertBlocksAfter }
-	/>
-);
-```
-
-### Props
-
-The `clientId` prop is the only required prop.
-
-The `onBlur`, `onFocus`, `isSelected`, and `insertBlocksAfter` props are all passed directly to the `Caption` component, which then passes them to the inner `RichText` component. ([See detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)). These props are not strictly required, but necessary for many implementations of the component to function as expected.
-
-The `accessible` prop is `false` by default and must be set to `true` in order to set an accessibility label via the `accessibilityLabelCreator` prop.
-
-### `clientId`
-
--   **Type:** `String`
--   **Required:** `Yes`
-
-The client ID of the block that the caption is associated with. This is prop is required in order for the component to perform key functionality, including retrieving the current caption from the block attributes.
-
-### `accessible`
-
--   **Type:** `Boolean`
--   **Default:** `false`
--   **Required:** `No`
-
-Boolean to indicate whether component is an accessibility element. When set to true, the component and all of its children will be treated as a single accessible element. Refer to [the relevant React Native documentation](https://reactnative.dev/docs/accessibility#accessible) for the most up-to-date information on this prop.
-
-### `accessibilityLabelCreator`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Function that returns an accessibility label, which screen readers will use for the component. The `accessible` prop must be set to `true` in order for this prop to have any effect.
-
-### `onBlur`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Handler for `onBlur` events, called when the component loses focus. Although not required, it's highly recommended to pass down the component's `onBlur` function to ensure that loss of focus is always handled correctly.
-
-### `onFocus`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Handler for `onFocus` events, called when the component is brought into focus. Similar to `onBlur`, it's not required but recommended. Passing down this prop helps to ensure focus is always handled as expected on the native side.
-
-### `isSelected`
-
--   **Type:** `Boolean`
--   **Required:** `No`
-
-Boolean that indicates whether the caption is currently selected. This is used by the child `RichText` component to determine whether to display formatting controls.
-
-### `insertBlocksAfter`
-
--   **Type:** `Function`
--   **Required:** `No`
-
-Function to handle how blocks are inserted after pressing enter at the end of the component.
-
-## Related components
-
-`BlockCaption` passes props directly to the [`Caption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/caption) component. In turn, the `Caption` component uses the [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/) component. It is recommended to refer to each of those components' documentation for more information on their props and usage.

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