@wordpress/block-library 7.11.0 → 7.12.0

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

@@ -0,0 +1,148 @@
+/**
+ * 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 { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSplit, useMerge } from './hooks';
+import { convertToListItems } from './utils';
+import { IndentUI } from './edit.js';
+import styles from './style.scss';
+import ListStyleType from './list-style-type';
+
+export default function ListItemEdit( {
+	attributes,
+	setAttributes,
+	onReplace,
+	clientId,
+	style,
+} ) {
+	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 currentIdentationLevel = 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: currentIdentationLevel,
+				numberOfListItems: totalListItems,
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
+	} );
+
+	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
+	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
+						identifier="content"
+						tagName="p"
+						onChange={ ( nextContent ) =>
+							setAttributes( { content: nextContent } )
+						}
+						value={ content }
+						placeholder={ placeholder || __( 'List' ) }
+						onSplit={ onSplit }
+						onMerge={ onMerge }
+						onReplace={ ( blocks, ...args ) => {
+							onReplace( convertToListItems( blocks ), ...args );
+						} }
+						style={ style }
+						deleteEnter={ true }
+						containerWidth={ contentWidth }
+					/>
+				</View>
+			</View>
+			<View { ...innerBlocksProps }></View>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</View>
+	);
+}

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

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+/**
+ * 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 }>
+			<Icon 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 defaultColor = style?.baseColors?.color?.text
+		? style.baseColors.color.text
+		: styles[ 'wp-block-list-item__list-item--default' ].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

@@ -0,0 +1,45 @@
+.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-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;
+}