@wordpress/block-library 9.48.0 → 9.48.1

package/src/list-item/edit.native.js

@@ -1,175 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	RichText,
-	useBlockProps,
-	useInnerBlocksProps,
-	BlockControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { useState, useCallback, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useMerge, useEnter } from './hooks';
-import { IndentUI } from './edit.js';
-import styles from './style.scss';
-import ListStyleType from './list-style-type';
-
-const OPACITY = '9e';
-
-export default function ListItemEdit( {
-	attributes,
-	setAttributes,
-	clientId,
-	style,
-	mergeBlocks,
-} ) {
-	const [ contentWidth, setContentWidth ] = useState();
-	const { placeholder, content } = attributes;
-	const {
-		blockIndex,
-		hasInnerBlocks,
-		indentationLevel,
-		numberOfListItems,
-		ordered,
-		reversed,
-		start,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockCount,
-				getBlockIndex,
-				getBlockParentsByBlockName,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-			const currentIndentationLevel = getBlockParentsByBlockName(
-				clientId,
-				'core/list-item',
-				true
-			).length;
-			const currentBlockIndex = getBlockIndex( clientId );
-			const blockWithInnerBlocks = getBlockCount( clientId ) > 0;
-			const rootClientId = getBlockRootClientId( clientId );
-			const blockAttributes = getBlockAttributes( rootClientId );
-			const totalListItems = getBlockCount( rootClientId );
-			const {
-				ordered: isOrdered,
-				reversed: isReversed,
-				start: startValue,
-			} = blockAttributes || {};
-
-			return {
-				blockIndex: currentBlockIndex,
-				hasInnerBlocks: blockWithInnerBlocks,
-				indentationLevel: currentIndentationLevel,
-				numberOfListItems: totalListItems,
-				ordered: isOrdered,
-				reversed: isReversed,
-				start: startValue,
-			};
-		},
-		[ clientId ]
-	);
-
-	const blockProps = useBlockProps( {
-		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
-	} );
-
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		renderAppender: false,
-	} );
-
-	// Set default placeholder text color from light/dark scheme or base colors
-	const defaultPlaceholderFromScheme = usePreferredColorSchemeStyle(
-		styles[ 'wp-block-list-item__list-item-placeholder' ],
-		styles[ 'wp-block-list-item__list-item-placeholder--dark' ]
-	);
-
-	const currentTextColor = style?.color || style?.baseColors?.color?.text;
-
-	const defaultPlaceholderTextColor = currentTextColor
-		? currentTextColor
-		: defaultPlaceholderFromScheme?.color;
-
-	// Add hex opacity to default placeholder text color and style object
-	const defaultPlaceholderTextColorWithOpacity =
-		defaultPlaceholderTextColor + OPACITY;
-
-	const styleWithPlaceholderOpacity = {
-		...style,
-		...( style?.color && {
-			placeholderColor: style.color + OPACITY,
-		} ),
-	};
-
-	const preventDefault = useRef( false );
-	const { onEnter } = useEnter( { content, clientId }, preventDefault );
-	const onMerge = useMerge( clientId, mergeBlocks );
-	const onLayout = useCallback( ( { nativeEvent } ) => {
-		setContentWidth( ( prevState ) => {
-			const { width } = nativeEvent.layout;
-
-			if ( ! prevState || prevState.width !== width ) {
-				return Math.floor( width );
-			}
-			return prevState;
-		} );
-	}, [] );
-
-	return (
-		<View style={ styles[ 'wp-block-list-item__list-item-parent' ] }>
-			<View style={ styles[ 'wp-block-list-item__list-item' ] }>
-				<View style={ styles[ 'wp-block-list-item__list-item-icon' ] }>
-					<ListStyleType
-						blockIndex={ blockIndex }
-						indentationLevel={ indentationLevel }
-						numberOfListItems={ numberOfListItems }
-						ordered={ ordered }
-						reversed={ reversed }
-						start={ start }
-						style={ style }
-					/>
-				</View>
-				<View
-					style={ styles[ 'wp-block-list-item__list-item-content' ] }
-					onLayout={ onLayout }
-				>
-					<RichText
-						__unstableUseSplitSelection
-						identifier="content"
-						tagName="p"
-						onChange={ ( nextContent ) =>
-							setAttributes( { content: nextContent } )
-						}
-						value={ content }
-						placeholder={ placeholder || __( 'List' ) }
-						placeholderTextColor={
-							defaultPlaceholderTextColorWithOpacity
-						}
-						onMerge={ onMerge }
-						onEnter={ onEnter }
-						style={ styleWithPlaceholderOpacity }
-						deleteEnter
-						containerWidth={ contentWidth }
-					/>
-				</View>
-			</View>
-			<View { ...innerBlocksProps }></View>
-			<BlockControls group="block">
-				<IndentUI clientId={ clientId } />
-			</BlockControls>
-		</View>
-	);
-}

package/src/list-item/hooks/use-enter.native.js

@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	getDefaultBlockName,
-	cloneBlock,
-} from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import useOutdentListItem from './use-outdent-list-item';
-
-export default function useEnter( props, preventDefault ) {
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	const outdentListItem = useOutdentListItem();
-
-	return {
-		onEnter() {
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
-				return;
-			}
-			preventDefault.current = true;
-			if (
-				getBlockName(
-					getBlockRootClientId(
-						getBlockRootClientId( propsRef.current.clientId )
-					)
-				) === 'core/list-item'
-			) {
-				outdentListItem();
-				return;
-			}
-			// Here we are in top level list so we need to split.
-			const topParentListBlock = getBlock(
-				getBlockRootClientId( clientId )
-			);
-			const blockIndex = getBlockIndex( clientId );
-			const head = cloneBlock( {
-				...topParentListBlock,
-				innerBlocks: topParentListBlock.innerBlocks.slice(
-					0,
-					blockIndex
-				),
-			} );
-			const middle = createBlock( getDefaultBlockName() );
-			// Last list item might contain a `list` block innerBlock
-			// In that case append remaining innerBlocks blocks.
-			const after = [
-				...( topParentListBlock.innerBlocks[ blockIndex ]
-					.innerBlocks[ 0 ]?.innerBlocks || [] ),
-				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
-			];
-			const tail = after.length
-				? [
-						cloneBlock( {
-							...topParentListBlock,
-							innerBlocks: after,
-						} ),
-				  ]
-				: [];
-			replaceBlocks(
-				topParentListBlock.clientId,
-				[ head, middle, ...tail ],
-				1
-			);
-			// We manually change the selection here because we are replacing
-			// a different block than the selected one.
-			selectionChange( middle.clientId );
-		},
-	};
-}

package/src/list-item/icons.native.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/components';
-
-export const circle = ( size, color ) => (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Rect width={ size } height={ size } rx={ size / 2 } fill={ color } />
-	</SVG>
-);
-
-export const circleOutline = ( size, color ) => (
-	<SVG
-		width={ size }
-		height={ size }
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<Rect
-			x="0.5"
-			y="0.5"
-			width={ size - 1 }
-			height={ size - 1 }
-			rx={ size / 2 }
-			stroke={ color }
-		/>
-	</SVG>
-);
-
-export const square = ( size, color ) => (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Rect width={ size } height={ size } fill={ color } />
-	</SVG>
-);

package/src/list-item/list-style-type.native.js

@@ -1,146 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { circle, circleOutline, square } from './icons';
-
-const DEFAULT_ICON_SIZE = 6;
-
-function getListNumberIndex( start, blockIndex, reversed, numberOfListItems ) {
-	if ( start ) {
-		return reversed
-			? numberOfListItems - 1 + start - blockIndex
-			: start + blockIndex;
-	}
-
-	if ( reversed ) {
-		return numberOfListItems - blockIndex;
-	}
-
-	return blockIndex + 1;
-}
-
-function OrderedList( {
-	blockIndex,
-	color,
-	fontSize,
-	numberOfListItems,
-	reversed,
-	start,
-	style,
-} ) {
-	const orderedStyles = [
-		styles[ 'wp-block-list-item__list-item-container--ordered' ],
-		Platform.isIOS &&
-			styles[ 'wp-block-list-item__list-item-ordered--default' ],
-		Platform.isIOS &&
-			style?.fontSize &&
-			styles[ 'wp-block-list-item__list-item-ordered--custom' ],
-	];
-	const numberStyle = [ { fontSize, color } ];
-
-	const currentIndex = getListNumberIndex(
-		start,
-		blockIndex,
-		reversed,
-		numberOfListItems
-	);
-
-	return (
-		<View style={ orderedStyles }>
-			<Text style={ numberStyle }>{ currentIndex }.</Text>
-		</View>
-	);
-}
-
-function IconList( { fontSize, color, defaultFontSize, indentationLevel } ) {
-	const iconSize = parseInt(
-		( fontSize * DEFAULT_ICON_SIZE ) / defaultFontSize,
-		10
-	);
-
-	let listIcon = circle( iconSize, color );
-	if ( indentationLevel === 1 ) {
-		listIcon = circleOutline( iconSize, color );
-	} else if ( indentationLevel > 1 ) {
-		listIcon = square( iconSize, color );
-	}
-
-	const listStyles = [
-		styles[ 'wp-block-list-item__list-item-container' ],
-		{ marginTop: fontSize / 2 },
-	];
-
-	return (
-		<View style={ listStyles }>
-			<WCIcon icon={ listIcon } size={ iconSize } />
-		</View>
-	);
-}
-
-export default function ListStyleType( {
-	blockIndex,
-	indentationLevel,
-	numberOfListItems,
-	ordered,
-	reversed,
-	start,
-	style,
-} ) {
-	let defaultFontSize =
-		styles[ 'wp-block-list-item__list-item--default' ].fontSize;
-
-	if ( style?.baseColors?.typography?.fontSize ) {
-		defaultFontSize = parseInt( style.baseColors.typography.fontSize, 10 );
-	}
-
-	const fontSize = parseInt(
-		style?.fontSize ? style.fontSize : defaultFontSize,
-		10
-	);
-
-	const colorWithPreferredScheme = usePreferredColorSchemeStyle(
-		styles[ 'wp-block-list-item__list-item--default' ],
-		styles[ 'wp-block-list-item__list-item--default--dark' ]
-	);
-
-	const defaultColor = style?.baseColors?.color?.text
-		? style.baseColors.color.text
-		: colorWithPreferredScheme.color;
-	const color = style?.color ? style.color : defaultColor;
-
-	if ( ordered ) {
-		return (
-			<OrderedList
-				blockIndex={ blockIndex }
-				color={ color }
-				fontSize={ fontSize }
-				numberOfListItems={ numberOfListItems }
-				reversed={ reversed }
-				start={ start }
-				style={ style }
-			/>
-		);
-	}
-
-	return (
-		<IconList
-			color={ color }
-			defaultFontSize={ defaultFontSize }
-			fontSize={ fontSize }
-			indentationLevel={ indentationLevel }
-		/>
-	);
-}

package/src/list-item/style.native.scss

@@ -1,57 +0,0 @@
-.wp-block-list-item__list-item-parent {
-	margin-left: $solid-border-space;
-	margin-right: $solid-border-space;
-}
-
-.wp-block-list-item__nested-blocks {
-	margin-top: 14;
-}
-
-.wp-block-list-item__list-item {
-	flex: 1;
-	flex-direction: row;
-}
-
-.wp-block-list-item__list-item-icon {
-	align-items: center;
-	flex-grow: 0;
-}
-
-.wp-block-list-item__list-item-content {
-	flex-grow: 1;
-	flex-shrink: 1;
-	background-color: transparent;
-}
-
-.wp-block-list-item__list-item--default {
-	color: $black;
-	font-size: $editor-font-size;
-}
-
-.wp-block-list-item__list-item--default--dark {
-	color: $white;
-}
-
-.wp-block-list-item__list-item-ordered--default {
-	margin-top: 2;
-}
-
-.wp-block-list-item__list-item-ordered--custom {
-	margin-top: 3;
-}
-
-.wp-block-list-item__list-item-container--ordered {
-	margin-right: 3;
-}
-
-.wp-block-list-item__list-item-container {
-	margin-right: 8;
-}
-
-.wp-block-list-item__list-item-placeholder {
-	color: $gray;
-}
-
-.wp-block-list-item__list-item-placeholder--dark {
-	color: $gray-50;
-}