@wordpress/block-library 7.11.0 → 7.13.0

package/src/list/v2/tag-name.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function TagName( props, ref ) {
+	const { ordered, ...extraProps } = props;
+	const Tag = ordered ? 'ol' : 'ul';
+
+	return <Tag ref={ ref } { ...extraProps } />;
+}
+
+export default forwardRef( TagName );

package/src/list/v2/tag-name.native.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { View } from '@wordpress/primitives';
+
+function TagName( props, ref ) {
+	const { start, ...extraProps } = props;
+	return <View ref={ ref } { ...extraProps } />;
+}
+
+export default forwardRef( TagName );

package/src/list/v2/transforms.js

@@ -1,11 +1,3 @@
-/**
- * WordPress dependencies
- */
-/**
- * External dependencies
- */
-import { flatMap } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,7 +31,7 @@ function getListContentSchema( { phrasingContentSchema } ) {
 }
 
 function getListContentFlat( blocks ) {
-	return flatMap( blocks, ( { name, attributes, innerBlocks = [] } ) => {
+	return blocks.flatMap( ( { name, attributes, innerBlocks = [] } ) => {
 		if ( name === 'core/list-item' ) {
 			return [ attributes.content, ...getListContentFlat( innerBlocks ) ];
 		}

package/src/list-item/edit.js

@@ -27,10 +27,11 @@ import {
 	useOutdentListItem,
 	useSplit,
 	useMerge,
+	useCopy,
 } from './hooks';
 import { convertToListItems } from './utils';
 
-function IndentUI( { clientId } ) {
+export function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
 	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
 
@@ -61,7 +62,7 @@ export default function ListItemEdit( {
 	clientId,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 	} );

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/hooks/index.js

@@ -4,3 +4,4 @@ export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';
+export { default as useCopy } from './use-copy';

package/src/list-item/hooks/use-copy.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function useCopy( clientId ) {
+	const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	return useRefEffect( ( node ) => {
+		function onCopy( event ) {
+			// The event propagates through all nested lists, so don't override
+			// when copying nested list items.
+			if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
+				return;
+			}
+
+			const rootClientId = getBlockRootClientId( clientId );
+			event.clipboardData.setData(
+				'__unstableWrapperBlockName',
+				getBlockName( rootClientId )
+			);
+			event.clipboardData.setData(
+				'__unstableWrapperBlockAttributes',
+				JSON.stringify( getBlockAttributes( rootClientId ) )
+			);
+		}
+
+		node.addEventListener( 'copy', onCopy );
+		return () => {
+			node.removeEventListener( 'copy', onCopy );
+		};
+	}, [] );
+}

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,146 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } 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 }>
+			<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 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

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

package/src/media-text/block.json

@@ -97,6 +97,23 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",