@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-list/block-list-item-cell.native.js

@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useBlockListContext } from './block-list-context';
-import { store as blockEditorStore } from '../../store';
-
-function BlockListItemCell( { children, item: clientId, onLayout } ) {
-	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
-	const { rootClientId } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-			return { rootClientId: getBlockRootClientId( clientId ) };
-		},
-		[ clientId ]
-	);
-
-	useEffect( () => {
-		return () => {
-			updateBlocksLayouts( blocksLayouts, {
-				clientId,
-				shouldRemove: true,
-			} );
-		};
-	}, [] );
-
-	const onCellLayout = useCallback(
-		( event ) => {
-			const {
-				nativeEvent: { layout },
-			} = event;
-			updateBlocksLayouts( blocksLayouts, {
-				clientId,
-				rootClientId,
-				...layout,
-			} );
-
-			if ( onLayout ) {
-				onLayout( event );
-			}
-		},
-		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
-	);
-
-	return (
-		<View testID="block-list-item-cell" onLayout={ onCellLayout }>
-			{ children }
-		</View>
-	);
-}
-
-export default BlockListItemCell;

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

@@ -1,209 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-import Grid from './grid-item';
-import BlockInsertionPoint from './insertion-point';
-import { store as blockEditorStore } from '../../store';
-import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
-
-/**
- * BlockListItemContent component. Renders a block with an optional insertion point.
- *
- * @param {Object}   props                              Component properties.
- * @param {number}   props.blockWidth                   The width of the block.
- * @param {string}   props.clientId                     The block client ID.
- * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
- * @param {Object}   props.contentStyle                 Styles for the block content
- * @param {Object}   props.index                        Block item index
- * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
- * @param {number}   props.marginHorizontal             The horizontal margin.
- * @param {number}   props.marginVertical               The vertical margin.
- * @param {Function} props.onAddBlock                   On add block callback.
- * @param {Function} props.onDeleteBlock                On delete block callback.
- * @param {number}   props.parentWidth                  The width of the parent block.
- * @param {string}   props.rootClientId                 The root client ID.
- * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
- *
- * @return {Component} The rendered block list item content.
- */
-function BlockListItemContent( {
-	blockWidth,
-	clientId,
-	contentResizeMode,
-	contentStyle,
-	index,
-	isStackedHorizontally,
-	marginHorizontal,
-	marginVertical,
-	onAddBlock,
-	onDeleteBlock,
-	parentWidth,
-	rootClientId,
-	shouldShowInnerBlockAppender,
-} ) {
-	const {
-		blockAlignment,
-		blockName,
-		hasParents,
-		parentBlockAlignment,
-		parentBlockName,
-		shouldShowInsertionPointAfter,
-		shouldShowInsertionPointBefore,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockInsertionPoint,
-				getBlockName,
-				getBlockOrder,
-				isBlockInsertionPointVisible,
-			} = select( blockEditorStore );
-			const blockClientIds = getBlockOrder( rootClientId );
-			const insertionPoint = getBlockInsertionPoint();
-
-			const insertionPointVisibleInCurrentRoot =
-				! isStackedHorizontally &&
-				isBlockInsertionPointVisible() &&
-				insertionPoint.rootClientId === rootClientId;
-
-			const isListEmpty = blockClientIds.length === 0;
-			const isInsertionPointBeforeBlock =
-				blockClientIds[ insertionPoint.index ] === clientId;
-			const isInsertionPointAtEnd =
-				blockClientIds.length === insertionPoint.index;
-			const isBlockLastInList =
-				blockClientIds[ insertionPoint.index - 1 ] === clientId;
-
-			const showInsertionPointBefore =
-				insertionPointVisibleInCurrentRoot &&
-				( isListEmpty || isInsertionPointBeforeBlock );
-
-			const showInsertionPointAfter =
-				insertionPointVisibleInCurrentRoot &&
-				isInsertionPointAtEnd &&
-				isBlockLastInList;
-
-			const blockHasParents = !! rootClientId;
-			const name = getBlockName( clientId );
-			const parentName = getBlockName( rootClientId );
-			const { align } = getBlockAttributes( clientId ) || {};
-			const { textAlign: parentBlockAlign } =
-				getBlockAttributes( rootClientId ) || {};
-
-			return {
-				blockAlignment: align,
-				blockName: name,
-				hasParents: blockHasParents,
-				parentBlockAlignment: parentBlockAlign,
-				parentBlockName: parentName,
-				shouldShowInsertionPointAfter: showInsertionPointAfter,
-				shouldShowInsertionPointBefore: showInsertionPointBefore,
-			};
-		},
-		[ isStackedHorizontally, rootClientId, clientId ]
-	);
-
-	const [ wrapperStyles, margin ] = useEditorWrapperStyles( {
-		align: blockAlignment,
-		blockName,
-		blockWidth,
-		contentResizeMode,
-		hasParents,
-		marginHorizontal,
-		parentBlockAlignment,
-		parentBlockName,
-		parentWidth,
-	} );
-
-	const shouldShowBlockInsertionPointAfter =
-		! shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
-
-	return (
-		<View style={ wrapperStyles }>
-			{ shouldShowInsertionPointBefore && (
-				<BlockInsertionPoint
-					testID={ `block-insertion-point-before-row-${ index + 1 }` }
-				/>
-			) }
-			<Block
-				blockWidth={ blockWidth }
-				clientId={ clientId }
-				contentStyle={ contentStyle }
-				isStackedHorizontally={ isStackedHorizontally }
-				marginHorizontal={ margin }
-				marginVertical={ marginVertical }
-				onAddBlock={ onAddBlock }
-				parentBlockAlignment={ parentBlockAlignment }
-				onDeleteBlock={ onDeleteBlock }
-				parentWidth={ parentWidth }
-				rootClientId={ rootClientId }
-			/>
-			{ shouldShowBlockInsertionPointAfter && (
-				<BlockInsertionPoint
-					testID={ `block-insertion-point-after-row-${ index + 1 }` }
-				/>
-			) }
-		</View>
-	);
-}
-
-/**
- * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
- *
- * @param {Object}   props                              Component properties.
- * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
- * @param {number}   props.numOfColumns                 The number of columns for grid layout.
- * @param {number}   props.parentWidth                  The width of the parent block.
- * @param {number}   props.tileCount                    The total number of tiles in the grid.
- * @param {number}   props.tileIndex                    The index of the current tile in the grid.
- * @param {number}   props.blockWidth                   The width of the block.
- * @param {string}   props.clientId                     The block client ID.
- * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
- * @param {Object}   props.contentStyle                 Styles for the block content
- * @param {Object}   props.index                        Block item index
- * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
- * @param {number}   props.marginHorizontal             The horizontal margin.
- * @param {number}   props.marginVertical               The vertical margin.
- * @param {Function} props.onAddBlock                   On add block callback.
- * @param {Function} props.onDeleteBlock                On delete block callback.
- * @param {string}   props.rootClientId                 The root client ID.
- * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
- *
- * @return {Component|null} The rendered block list item or null if the block width is not provided.
- */
-function BlockListItem( props ) {
-	const { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =
-		props;
-
-	if ( ! props?.blockWidth ) {
-		return null;
-	}
-
-	if ( isGridItem ) {
-		return (
-			<Grid
-				maxWidth={ props?.parentWidth }
-				numOfColumns={ numOfColumns }
-				tileCount={ tileCount }
-				index={ tileIndex }
-			>
-				<BlockListItemContent { ...restProps } />
-			</Grid>
-		);
-	}
-
-	return <BlockListItemContent { ...restProps } />;
-}
-
-export default BlockListItem;

package/src/components/block-list/block-list-item.native.scss

@@ -1,16 +0,0 @@
-.stretch {
-	flex: 1;
-}
-
-.fullAlignment {
-	margin-left: 0;
-	width: 100%;
-}
-
-.fullAlignmentPadding {
-	padding: $block-edge-to-content;
-}
-
-.gridItem {
-	overflow: visible;
-}

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

@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './block.scss';
-
-const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
-const DESIGN_BLOCKS_WITHOUT_OUTLINE = [ 'core/button', 'core/spacer' ];
-const MEDIA_BLOCKS_WITH_OUTLINE = [ 'core/audio', 'core/file' ];
-
-function BlockOutline( { blockCategory, hasInnerBlocks, isSelected, name } ) {
-	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
-
-	const hasBlockTextCategory =
-		blockCategory === 'text' && ! textBlockWithOutline;
-	const hasBlockMediaCategory =
-		blockCategory === 'media' ||
-		blockCategory === 'embed' ||
-		! blockCategory;
-	const shouldShowCompactOutline =
-		( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
-
-	const styleSolidBorder = [
-		styles.solidBorder,
-		usePreferredColorSchemeStyle(
-			styles.solidBorderColor,
-			styles.solidBorderColorDark
-		),
-		shouldShowCompactOutline && styles.solidBorderCompact,
-		hasBlockTextCategory && styles.solidBorderTextContent,
-	];
-
-	if ( ! isSelected ) {
-		return null;
-	}
-
-	let shouldShowOutline = true;
-	if ( hasBlockTextCategory && ! hasInnerBlocks ) {
-		shouldShowOutline = false;
-	} else if (
-		blockCategory === 'media' &&
-		! hasInnerBlocks &&
-		! MEDIA_BLOCKS_WITH_OUTLINE.includes( name )
-	) {
-		shouldShowOutline = false;
-	} else if ( blockCategory === 'media' && name === 'core/cover' ) {
-		shouldShowOutline = false;
-	} else if (
-		blockCategory === 'design' &&
-		DESIGN_BLOCKS_WITHOUT_OUTLINE.includes( name )
-	) {
-		shouldShowOutline = false;
-	}
-
-	if ( shouldShowOutline ) {
-		return (
-			<View
-				pointerEvents="box-none"
-				style={ styleSolidBorder }
-				testID="block-outline"
-			/>
-		);
-	}
-
-	return null;
-}
-
-export default BlockOutline;

package/src/components/block-list/block-selection-button.native.js

@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { getBlockType } from '@wordpress/blocks';
-import { View, Text, TouchableOpacity } from 'react-native';
-import { BlockIcon } from '@wordpress/block-editor';
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-import BlockTitle from '../block-title';
-import useBlockDisplayInformation from '../use-block-display-information';
-import SubdirectorSVG from './subdirectory-icon';
-import { store as blockEditorStore } from '../../store';
-import styles from './block-selection-button.scss';
-
-const BlockSelectionButton = ( {
-	clientId,
-	rootClientId,
-	rootBlockIcon,
-	isRTL,
-} ) => {
-	const blockInformation = useBlockDisplayInformation( clientId );
-	return (
-		<View
-			style={ [
-				styles.selectionButtonContainer,
-				rootClientId && styles.densedPaddingLeft,
-			] }
-		>
-			<TouchableOpacity
-				style={ styles.button }
-				onPress={ () => {
-					/* Open BottomSheet with markup. */
-				} }
-				disabled /* Disable temporarily since onPress function is empty. */
-			>
-				{ rootClientId &&
-					rootBlockIcon && [
-						<WCIcon
-							key="parent-icon"
-							size={ 24 }
-							icon={ rootBlockIcon.src }
-							fill={ styles.icon.color }
-						/>,
-						<View key="subdirectory-icon" style={ styles.arrow }>
-							<SubdirectorSVG
-								fill={ styles.arrow.color }
-								isRTL={ isRTL }
-							/>
-						</View>,
-					] }
-				{ blockInformation?.icon && (
-					<BlockIcon
-						size={ 24 }
-						icon={ blockInformation.icon }
-						fill={ styles.icon.color }
-					/>
-				) }
-				<Text
-					maxFontSizeMultiplier={ 1.25 }
-					ellipsizeMode="tail"
-					numberOfLines={ 1 }
-					style={ styles.selectionButtonTitle }
-				>
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
-				</Text>
-			</TouchableOpacity>
-		</View>
-	);
-};
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockRootClientId, getBlockName, getSettings } =
-			select( blockEditorStore );
-		const rootClientId = getBlockRootClientId( clientId );
-
-		if ( ! rootClientId ) {
-			return { clientId };
-		}
-		const rootBlockName = getBlockName( rootClientId );
-		const rootBlockType = getBlockType( rootBlockName );
-		const rootBlockIcon = rootBlockType ? rootBlockType.icon : {};
-
-		return {
-			clientId,
-			rootClientId,
-			rootBlockIcon,
-			isRTL: getSettings().isRTL,
-		};
-	} ),
-] )( BlockSelectionButton );

package/src/components/block-list/block-selection-button.native.scss

@@ -1,34 +0,0 @@
-.selectionButtonContainer {
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	padding-left: 15;
-	padding-right: 15;
-	flex-shrink: 1;
-}
-
-.selectionButtonTitle {
-	color: $white;
-	margin-left: 4;
-	flex-shrink: 1;
-}
-
-.icon {
-	color: $white;
-}
-
-.button {
-	flex-direction: row;
-	align-items: center;
-}
-
-.arrow {
-	color: $light-opacity-light-700;
-	margin-top: -4px;
-	margin-left: 4;
-	margin-right: 4;
-}
-
-.densedPaddingLeft {
-	padding-left: 5;
-}