@wordpress/block-library 7.9.0 → 7.12.0

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

package/src/list-item/utils.js

@@ -1,14 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name as listItemName } from './block.json';
+import { name as listName } from '../list/block.json';
 
 export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
-		'core/list-item',
+		listItemName,
 		listItemAttributes,
 		! children?.length
 			? []
-			: [ createBlock( 'core/list', listAttributes, children ) ]
+			: [ createBlock( listName, listAttributes, children ) ]
 	);
 }
+
+export function convertToListItems( blocks ) {
+	const listItems = [];
+
+	for ( let block of blocks ) {
+		if ( block.name === listItemName ) {
+			listItems.push( block );
+		} else if ( block.name === listName ) {
+			listItems.push( ...block.innerBlocks );
+		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+			for ( const { innerBlocks } of block ) {
+				listItems.push( ...innerBlocks );
+			}
+		}
+	}
+
+	return listItems;
+}