@wordpress/block-editor 15.21.0 → 15.21.1

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

@@ -1,62 +0,0 @@
-.blockHolder {
-	flex: 1 1 auto;
-}
-
-.solidBorderColor {
-	border-color: $blue-40;
-}
-
-.solidBorderColorDark {
-	border-color: $blue-50;
-}
-
-.dimmed {
-	opacity: $dimmed-opacity;
-}
-
-.blockTitle {
-	background-color: $gray;
-	padding-left: 8px;
-	padding-top: 4px;
-	padding-bottom: 4px;
-}
-
-.aztec_container {
-	flex: 1;
-}
-
-.blockCode {
-	font-family: $default-monospace-font;
-}
-
-.blockText {
-	min-height: 50px;
-}
-
-.solidBorder {
-	position: absolute;
-	top: -6px;
-	bottom: -6px;
-	left: -6px;
-	right: -6px;
-	border-width: 2px;
-	border-radius: 2px;
-	border-style: solid;
-	z-index: 1;
-}
-
-.solidBorderCompact {
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-
-.solidBorderTextContent {
-	left: 0;
-	right: 0;
-}
-
-.fullWidthPadding {
-	padding: $block-selected-to-content;
-}

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

@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './block-list-item.scss';
-
-function Grid( props ) {
-	/**
-	 * Since we don't have `calc()`, we must calculate our spacings here in
-	 * order to preserve even spacing between tiles and equal width for tiles
-	 * in a given row.
-	 *
-	 * In order to ensure equal sizing of tile contents, we distribute the
-	 * spacing such that each tile has an equal "share" of the fixed spacing. To
-	 * keep the tiles properly aligned within their rows, we calculate the left
-	 * and right paddings based on the tile's relative position within the row.
-	 *
-	 * Note: we use padding instead of margins so that the fixed spacing is
-	 * included within the relative spacing (i.e. width percentage), and
-	 * wrapping behavior is preserved.
-	 *
-	 * - The left most tile in a row must have left padding of zero.
-	 * - The right most tile in a row must have a right padding of zero.
-	 *
-	 * The values of these left and right paddings are interpolated for tiles in
-	 * between. The right padding is complementary with the left padding of the
-	 * next tile (i.e. the right padding of [tile n] + the left padding of
-	 * [tile n + 1] will be equal for all tiles except the last one in a given
-	 * row).
-	 *
-	 */
-	const { numOfColumns, children, tileCount, index, maxWidth } = props;
-	const lastTile = tileCount - 1;
-	const lastRow = Math.floor( lastTile / numOfColumns );
-
-	const row = Math.floor( index / numOfColumns );
-	const rowLength =
-		row === lastRow ? ( lastTile % numOfColumns ) + 1 : numOfColumns;
-
-	return (
-		<View
-			style={ [
-				{
-					width: maxWidth / rowLength,
-				},
-				styles.gridItem,
-			] }
-		>
-			{ children }
-		</View>
-	);
-}
-
-export default Grid;

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

@@ -1,437 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Platform, Pressable } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useState, useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
-import {
-	KeyboardAwareFlatList,
-	WIDE_ALIGNMENTS,
-	alignmentHelpers,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import BlockListAppender from '../block-list-appender';
-import BlockListItem from './block-list-item';
-import BlockListItemCell from './block-list-item-cell';
-import {
-	BlockListProvider,
-	DEFAULT_BLOCK_LIST_CONTEXT,
-} from './block-list-context';
-import { BlockDraggableWrapper } from '../block-draggable';
-import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
-import { store as blockEditorStore } from '../../store';
-
-const identity = ( x ) => x;
-
-const stylesMemo = {};
-const getStyles = ( isStackedHorizontally, horizontalAlignment ) => {
-	const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`;
-	if ( stylesMemo[ styleName ] ) {
-		return stylesMemo[ styleName ];
-	}
-	const computedStyles = [
-		isStackedHorizontally && styles.horizontal,
-		horizontalAlignment && styles[ `is-aligned-${ horizontalAlignment }` ],
-		styles.overflowVisible,
-	];
-	stylesMemo[ styleName ] = computedStyles;
-	return computedStyles;
-};
-
-export default function BlockList( {
-	blockWidth: initialBlockWidth,
-	contentResizeMode,
-	contentStyle,
-	filterInnerBlocks,
-	gridProperties,
-	header,
-	horizontal,
-	horizontalAlignment,
-	marginHorizontal = styles.defaultBlock.marginLeft,
-	marginVertical = styles.defaultBlock.marginTop,
-	onAddBlock,
-	onDeleteBlock,
-	orientation,
-	parentWidth,
-	renderAppender,
-	renderFooterAppender,
-	rootClientId,
-	withFooter = true,
-} ) {
-	const {
-		blockClientIds,
-		blockCount,
-		blockInsertionPointIsVisible,
-		isReadOnly,
-		isRootList,
-		isFloatingToolbarVisible,
-		isStackedHorizontally,
-		maxWidth,
-		isRTL,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockCount,
-				getBlockHierarchyRootClientId,
-				getBlockOrder,
-				getSelectedBlockClientId,
-				isBlockInsertionPointVisible,
-				getSettings,
-			} = select( blockEditorStore );
-
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const rootBlockId = getBlockHierarchyRootClientId(
-				selectedBlockClientId
-			);
-
-			let blockOrder = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-			if ( filterInnerBlocks ) {
-				blockOrder = filterInnerBlocks( blockOrder );
-			}
-
-			const {
-				isRTL: isRTLSetting,
-				maxWidth: maxWidthSetting,
-				readOnly,
-			} = getSettings();
-
-			return {
-				blockClientIds: blockOrder,
-				blockCount: getBlockCount(),
-				blockInsertionPointIsVisible:
-					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
-				isReadOnly: readOnly,
-				isRootList: rootClientId === undefined,
-				isFloatingToolbarVisible:
-					!! selectedBlockClientId && !! getBlockCount( rootBlockId ),
-				isStackedHorizontally: orientation === 'horizontal',
-				maxWidth: maxWidthSetting,
-				isRTL: isRTLSetting,
-			};
-		},
-		[ filterInnerBlocks, orientation, rootClientId ]
-	);
-
-	const { insertBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
-
-	const extraData = useRef( {
-		parentWidth,
-		renderFooterAppender,
-		renderAppender,
-		onDeleteBlock,
-		contentStyle,
-	} );
-
-	const [ blockWidth, setBlockWidth ] = useState( initialBlockWidth || 0 );
-
-	const addBlockToEndOfPost = ( newBlock ) => {
-		insertBlock( newBlock, blockCount );
-	};
-
-	const scrollRef = useRef( null );
-
-	const shouldFlatListPreventAutomaticScroll = () =>
-		blockInsertionPointIsVisible;
-
-	const shouldShowInnerBlockAppender = () =>
-		renderAppender && blockClientIds.length > 0;
-
-	const getExtraData = () => {
-		if (
-			extraData.current.parentWidth !== parentWidth ||
-			extraData.current.renderFooterAppender !== renderFooterAppender ||
-			extraData.current.onDeleteBlock !== onDeleteBlock ||
-			extraData.current.contentStyle !== contentStyle ||
-			extraData.current.renderAppender !== renderAppender ||
-			extraData.current.blockWidth !== blockWidth ||
-			extraData.current.gridProperties !== gridProperties
-		) {
-			extraData.current = {
-				parentWidth,
-				renderFooterAppender,
-				onDeleteBlock,
-				contentStyle,
-				renderAppender,
-				blockWidth,
-				gridProperties,
-			};
-		}
-		return extraData.current;
-	};
-
-	const onLayout = ( { nativeEvent } ) => {
-		const { layout } = nativeEvent;
-
-		const layoutWidth = Math.floor( layout.width );
-		if ( isRootList && blockWidth !== layoutWidth ) {
-			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
-		} else if ( ! isRootList && ! blockWidth ) {
-			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
-		}
-	};
-
-	const renderItem = ( { item: clientId, index } ) => {
-		// Extracting the grid item properties here to avoid
-		// re-renders in the blockListItem component.
-		const isGridItem = !! gridProperties;
-		const gridItemProps = gridProperties && {
-			numOfColumns: gridProperties.numColumns,
-			tileCount: blockClientIds.length,
-			tileIndex: blockClientIds.indexOf( clientId ),
-		};
-		return (
-			<BlockListItem
-				index={ index }
-				isStackedHorizontally={ isStackedHorizontally }
-				rootClientId={ rootClientId }
-				clientId={ clientId }
-				parentWidth={ parentWidth }
-				contentResizeMode={ contentResizeMode }
-				contentStyle={ contentStyle }
-				onAddBlock={ onAddBlock }
-				marginVertical={ marginVertical }
-				marginHorizontal={ marginHorizontal }
-				onDeleteBlock={ onDeleteBlock }
-				shouldShowInnerBlockAppender={ shouldShowInnerBlockAppender }
-				blockWidth={ blockWidth }
-				isGridItem={ isGridItem }
-				{ ...gridItemProps }
-			/>
-		);
-	};
-
-	const { blockToolbar, floatingToolbar } = styles;
-
-	const containerStyle = {
-		flex: isRootList ? 1 : 0,
-		// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
-		marginVertical: isRootList ? 0 : -marginVertical,
-		marginHorizontal: isRootList ? 0 : -marginHorizontal,
-	};
-
-	const isContentStretch = contentResizeMode === 'stretch';
-	const isMultiBlocks = blockClientIds.length > 1;
-	const { isWider } = alignmentHelpers;
-	const extraScrollHeight =
-		blockToolbar.height +
-		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
-
-	return (
-		<View
-			style={ containerStyle }
-			onAccessibilityEscape={ clearSelectedBlock }
-			onLayout={ onLayout }
-			testID="block-list-wrapper"
-		>
-			{ isRootList ? (
-				<BlockListProvider
-					value={ {
-						...DEFAULT_BLOCK_LIST_CONTEXT,
-						scrollRef: scrollRef.current,
-					} }
-				>
-					<BlockDraggableWrapper isRTL={ isRTL }>
-						{ ( { onScroll } ) => (
-							<KeyboardAwareFlatList
-								accessibilityLabel="block-list"
-								ref={ scrollRef }
-								extraScrollHeight={ extraScrollHeight }
-								keyboardShouldPersistTaps="always"
-								extraData={ getExtraData() }
-								scrollEnabled={ isRootList }
-								contentContainerStyle={ [
-									horizontal &&
-										styles.horizontalContentContainer,
-									isWider( blockWidth, 'medium' ) &&
-										( isContentStretch && isMultiBlocks
-											? styles.horizontalContentContainerStretch
-											: styles.horizontalContentContainerCenter ),
-								] }
-								data={ blockClientIds }
-								keyExtractor={ identity }
-								renderItem={ renderItem }
-								CellRendererComponent={ BlockListItemCell }
-								shouldPreventAutomaticScroll={
-									shouldFlatListPreventAutomaticScroll
-								}
-								ListHeaderComponent={ header }
-								ListEmptyComponent={
-									! isReadOnly && (
-										<EmptyList
-											orientation={ orientation }
-											rootClientId={ rootClientId }
-											renderAppender={ renderAppender }
-											renderFooterAppender={
-												renderFooterAppender
-											}
-										/>
-									)
-								}
-								ListFooterComponent={
-									<Footer
-										addBlockToEndOfPost={
-											addBlockToEndOfPost
-										}
-										isReadOnly={ isReadOnly }
-										renderFooterAppender={
-											renderFooterAppender
-										}
-										withFooter={ withFooter }
-									/>
-								}
-								onScroll={ onScroll }
-							/>
-						) }
-					</BlockDraggableWrapper>
-				</BlockListProvider>
-			) : (
-				<>
-					{ blockClientIds.length > 0 ? (
-						<View style={ [ { flex: 0 }, styles.overflowVisible ] }>
-							<View
-								style={ [
-									...getStyles(
-										isStackedHorizontally,
-										horizontalAlignment
-									),
-									horizontal &&
-										styles.horizontalContentContainer,
-								] }
-							>
-								{ blockClientIds.map(
-									( currentClientId, index ) => {
-										return (
-											<View key={ currentClientId }>
-												{ renderItem( {
-													item: currentClientId,
-													index,
-												} ) }
-											</View>
-										);
-									}
-								) }
-								<Footer
-									addBlockToEndOfPost={ addBlockToEndOfPost }
-									isReadOnly={ isReadOnly }
-									renderFooterAppender={
-										renderFooterAppender
-									}
-									withFooter={ withFooter }
-								/>
-							</View>
-						</View>
-					) : (
-						<EmptyList
-							orientation={ orientation }
-							rootClientId={ rootClientId }
-							renderAppender={ renderAppender }
-							renderFooterAppender={ renderFooterAppender }
-						/>
-					) }
-				</>
-			) }
-			{ shouldShowInnerBlockAppender() && (
-				<View
-					style={ {
-						marginHorizontal:
-							marginHorizontal - styles.innerAppender.marginLeft,
-					} }
-				>
-					<BlockListAppender
-						rootClientId={ rootClientId }
-						renderAppender={ renderAppender }
-						showSeparator
-					/>
-				</View>
-			) }
-		</View>
-	);
-}
-
-function Footer( {
-	addBlockToEndOfPost,
-	isReadOnly,
-	renderFooterAppender,
-	withFooter,
-} ) {
-	const onAddParagraphBlock = useCallback( () => {
-		const paragraphBlock = createBlock( 'core/paragraph' );
-		addBlockToEndOfPost( paragraphBlock );
-	}, [ addBlockToEndOfPost ] );
-
-	if ( ! isReadOnly && withFooter ) {
-		return (
-			<Pressable
-				accessibilityLabel={ __( 'Add paragraph block' ) }
-				testID={ __( 'Add paragraph block' ) }
-				onPress={ onAddParagraphBlock }
-			>
-				<View style={ styles.blockListFooter } />
-			</Pressable>
-		);
-	} else if ( renderFooterAppender ) {
-		return <View>{ renderFooterAppender() }</View>;
-	}
-
-	return null;
-}
-
-function EmptyList( {
-	orientation,
-	renderAppender,
-	renderFooterAppender,
-	rootClientId,
-} ) {
-	const { shouldShowInsertionPoint } = useSelect( ( select ) => {
-		const {
-			getBlockOrder,
-			getBlockInsertionPoint,
-			isBlockInsertionPointVisible,
-		} = select( blockEditorStore );
-
-		const isStackedHorizontally = orientation === 'horizontal';
-		const blockClientIds = getBlockOrder( rootClientId );
-		const insertionPoint = getBlockInsertionPoint();
-		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-
-		return {
-			shouldShowInsertionPoint:
-				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If list is empty, show the insertion point (via the default appender)
-				( blockClientIds.length === 0 ||
-					// Or if the insertion point is right before the denoted block.
-					! blockClientIds[ insertionPoint.index ] ),
-		};
-	} );
-	const align = renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined;
-	const [ wrapperStyles ] = useEditorWrapperStyles( { align } );
-
-	if ( renderFooterAppender || renderAppender === false ) {
-		return null;
-	}
-
-	const containerStyles = [ styles.defaultAppender, wrapperStyles ];
-
-	return (
-		<View style={ containerStyles }>
-			<BlockListAppender
-				rootClientId={ rootClientId }
-				renderAppender={ renderAppender }
-				showSeparator={ shouldShowInsertionPoint }
-			/>
-		</View>
-	);
-}

package/src/components/block-list/insertion-point.native.js

@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const BlockInsertionPoint = ( { getStylesFromColorScheme, testID } ) => {
-	const lineStyle = getStylesFromColorScheme(
-		styles.lineStyleAddHere,
-		styles.lineStyleAddHereDark
-	);
-	const labelStyle = getStylesFromColorScheme(
-		styles.labelStyleAddHere,
-		styles.labelStyleAddHereDark
-	);
-
-	return (
-		<View style={ styles.containerStyleAddHere } testID={ testID }>
-			<View style={ lineStyle }></View>
-			<Text style={ labelStyle }>{ __( 'ADD BLOCK HERE' ) }</Text>
-			<View style={ lineStyle }></View>
-		</View>
-	);
-};
-
-export default withPreferredColorScheme( BlockInsertionPoint );

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

@@ -1,117 +0,0 @@
-.container {
-	flex: 1;
-	justify-content: flex-start;
-	background-color: #fff;
-}
-
-.horizontalContentContainer {
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: stretch;
-	overflow: visible;
-	width: 100%;
-}
-
-.horizontalContentContainerStretch {
-	justify-content: space-evenly;
-}
-
-.horizontalContentContainerCenter {
-	justify-content: center;
-}
-
-.switch {
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	margin: 10px;
-}
-
-.switchLabel {
-	margin-left: 10px;
-}
-
-.lineStyleAddHere {
-	flex: 1;
-	background-color: #0087be; // blue_wordpress
-	align-self: center;
-	height: 2px;
-}
-
-.lineStyleAddHereDark {
-	background-color: $gray-50;
-}
-
-.labelStyleAddHere {
-	flex: 1;
-	text-align: center;
-	font-family: $default-monospace-font;
-	font-size: 14px;
-	color: $gray;
-	margin: 0 8px;
-}
-
-.labelStyleAddHereDark {
-	color: $gray-20;
-}
-
-.containerStyleAddHere {
-	flex-direction: row;
-	padding-left: 12px;
-	padding-right: 12px;
-}
-
-.blockListFooter {
-	height: 80px;
-}
-
-.defaultBlock {
-	margin: $block-edge-to-content * 0.5 $block-edge-to-content;
-}
-
-.defaultAppender {
-	margin-top: $grid-unit;
-	margin-bottom: $grid-unit;
-	width: 100%;
-}
-
-.innerAppender {
-	margin: $block-edge-to-content * 0.5;
-}
-
-.blockBorder {
-	width: $block-selected-border-width;
-}
-
-.headerToolbar {
-	height: $mobile-header-toolbar-height;
-}
-
-.blockToolbar {
-	height: $mobile-block-toolbar-height;
-}
-
-.floatingToolbar {
-	height: $mobile-floating-toolbar-height + 2 * $mobile-floating-toolbar-margin;
-}
-
-.horizontal {
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.is-aligned-left {
-	justify-content: flex-start;
-}
-
-.is-aligned-center {
-	justify-content: center;
-}
-
-.is-aligned-right {
-	justify-content: flex-end;
-}
-
-.overflowVisible {
-	overflow: visible;
-}