@wordpress/block-library 7.5.0 → 7.6.0

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

@@ -15,19 +15,16 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const {
-		getBlock,
-		getBlockRootClientId,
-		getBlockParents,
-		getBlockIndex,
-	} = useSelect( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } = useSelect(
+		blockEditorStore
+	);
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canIndent, indentListItem ] = useIndentListItem(
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
 		propsRef.current.clientId
 	);
 	return useRefEffect(
@@ -41,17 +38,13 @@ export default function useEnter( props ) {
 					return;
 				}
 				event.preventDefault();
-				if ( canIndent ) {
-					indentListItem();
+				if ( canOutdent ) {
+					outdentListItem();
 					return;
 				}
 				// Here we are in top level list so we need to split.
 				const blockRootClientId = getBlockRootClientId( clientId );
-				const blockParents = getBlockParents( clientId );
-				const topParentListBlockClientId = blockParents[ 0 ];
-				const topParentListBlock = getBlock(
-					topParentListBlockClientId
-				);
+				const topParentListBlock = getBlock( blockRootClientId );
 				const blockIndex = getBlockIndex( clientId );
 				const head = cloneBlock( {
 					...topParentListBlock,
@@ -89,6 +82,6 @@ export default function useEnter( props ) {
 				element.removeEventListener( 'keydown', onKeyDown );
 			};
 		},
-		[ canIndent ]
+		[ canOutdent ]
 	);
 }

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

@@ -1,89 +1,76 @@
-/**
- * External dependencies
- */
-import { first } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { createListItem } from '../utils';
+import { createBlock, cloneBlock } from '@wordpress/blocks';
 
 export default function useIndentListItem( clientId ) {
-	const { canIndent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockIndex } = innerSelect( blockEditorStore );
-			return {
-				canIndent: getBlockIndex( clientId ) > 0,
-			};
-		},
+	const canIndent = useSelect(
+		( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0,
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { replaceBlocks, selectionChange, multiSelect } = useDispatch(
+		blockEditorStore
+	);
 	const {
-		getBlockRootClientId,
 		getBlock,
-		getBlockOrder,
+		getPreviousBlockClientId,
 		getSelectionStart,
 		getSelectionEnd,
-		getBlockIndex,
+		hasMultiSelection,
+		getMultiSelectedBlockClientIds,
 	} = useSelect( blockEditorStore );
-
 	return [
 		canIndent,
 		useCallback( () => {
+			const _hasMultiSelection = hasMultiSelection();
+			const clientIds = _hasMultiSelection
+				? getMultiSelectedBlockClientIds()
+				: [ clientId ];
+			const clonedBlocks = clientIds.map( ( _clientId ) =>
+				cloneBlock( getBlock( _clientId ) )
+			);
+			const previousSiblingId = getPreviousBlockClientId( clientId );
+			const newListItem = cloneBlock( getBlock( previousSiblingId ) );
+			// If the sibling has no innerBlocks, create a new `list` block.
+			if ( ! newListItem.innerBlocks?.length ) {
+				newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
+			}
+			// A list item usually has one `list`, but it's possible to have
+			// more. So we need to preserve the previous `list` blocks and
+			// merge the new blocks to the last `list`.
+			newListItem.innerBlocks[
+				newListItem.innerBlocks.length - 1
+			].innerBlocks.push( ...clonedBlocks );
+
+			// We get the selection start/end here, because when
+			// we replace blocks, the selection is updated too.
 			const selectionStart = getSelectionStart();
 			const selectionEnd = getSelectionEnd();
-
-			const parentId = getBlockRootClientId( clientId );
-			const previousSiblingId = getBlockOrder( parentId )[
-				getBlockIndex( clientId ) - 1
-			];
-			const previousSibling = getBlock( previousSiblingId );
-			const previousSiblingChildren =
-				first( previousSibling.innerBlocks )?.innerBlocks || [];
-			const previousSiblingListAttributes =
-				first( previousSibling.innerBlocks )?.attributes || {};
-			const block = getBlock( clientId );
-
-			const childListAttributes = first( block.innerBlocks )?.attributes;
-			const childItemBlocks =
-				first( block.innerBlocks )?.innerBlocks || [];
-
-			const newBlock = createListItem(
-				block.attributes,
-				childListAttributes,
-				childItemBlocks
-			);
-			// Replace the previous sibling of the block being indented and the indented block,
+			// Replace the previous sibling of the block being indented and the indented blocks,
 			// with a new block whose attributes are equal to the ones of the previous sibling and
-			// whose descendants are the children of the previous sibling, followed by the indented block.
+			// whose descendants are the children of the previous sibling, followed by the indented blocks.
 			replaceBlocks(
-				[ previousSiblingId, clientId ],
-				[
-					createListItem(
-						previousSibling.attributes,
-						previousSiblingListAttributes,
-						[ ...previousSiblingChildren, newBlock ]
-					),
-				]
-			);
-
-			// Restore the selection state.
-			selectionChange(
-				newBlock.clientId,
-				selectionEnd.attributeKey,
-				selectionEnd.clientId === selectionStart.clientId
-					? selectionStart.offset
-					: selectionEnd.offset,
-				selectionEnd.offset
+				[ previousSiblingId, ...clientIds ],
+				[ newListItem ]
 			);
+			if ( ! _hasMultiSelection ) {
+				selectionChange(
+					clonedBlocks[ 0 ].clientId,
+					selectionEnd.attributeKey,
+					selectionEnd.clientId === selectionStart.clientId
+						? selectionStart.offset
+						: selectionEnd.offset,
+					selectionEnd.offset
+				);
+			} else {
+				multiSelect(
+					clonedBlocks[ 0 ].clientId,
+					clonedBlocks[ clonedBlocks.length - 1 ].clientId
+				);
+			}
 		}, [ clientId ] ),
 	];
 }

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

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { SPACE } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useIndentListItem from './use-indent-list-item';
+
+export default function useSpace( clientId ) {
+	const { getSelectionStart, getSelectionEnd } = useSelect(
+		blockEditorStore
+	);
+	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if (
+					event.defaultPrevented ||
+					event.keyCode !== SPACE ||
+					! canIndent
+				) {
+					return;
+				}
+				const selectionStart = getSelectionStart();
+				const selectionEnd = getSelectionEnd();
+				if (
+					selectionStart.offset === 0 &&
+					selectionEnd.offset === 0
+				) {
+					event.preventDefault();
+					indentListItem();
+				}
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canIndent, indentListItem ]
+	);
+}

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
+
+export default function useSplit( clientId ) {
+	const { getBlock } = useSelect( blockEditorStore );
+	return useCallback(
+		( value, isAfterOriginal ) => {
+			const block = getBlock( clientId );
+			return cloneBlock(
+				block,
+				{
+					content: value,
+				},
+				isAfterOriginal ? [] : block.innerBlocks
+			);
+		},
+		[ clientId, getBlock ]
+	);
+}

package/src/list-item/utils.js

@@ -7,7 +7,7 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
 		'core/list-item',
 		listItemAttributes,
-		! children || ! children.length
+		! children?.length
 			? []
 			: [ createBlock( 'core/list', listAttributes, children ) ]
 	);

package/src/media-text/edit.native.js

@@ -275,6 +275,8 @@ class MediaTextEdit extends Component {
 		const widthString = `${ temporaryMediaWidth }%`;
 		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
 		const innerBlockWidthString = `${ innerBlockWidth }%`;
+		const hasMedia =
+			mediaType === MEDIA_TYPE_IMAGE || mediaType === MEDIA_TYPE_VIDEO;
 
 		const innerBlockContainerStyle = [
 			{ width: innerBlockWidthString },
@@ -344,7 +346,7 @@ class MediaTextEdit extends Component {
 			<>
 				{ mediaType === MEDIA_TYPE_IMAGE && this.getControls() }
 				<BlockControls>
-					{ ( isMediaSelected || mediaType === MEDIA_TYPE_VIDEO ) && (
+					{ hasMedia && (
 						<ToolbarGroup>
 							<Button
 								label={ __( 'Edit media' ) }

package/src/media-text/media-container.native.js

@@ -191,7 +191,6 @@ class MediaContainer extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onMediaPressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View
@@ -222,7 +221,7 @@ class MediaContainer extends Component {
 		);
 	}
 
-	renderVideo( params, openMediaOptions ) {
+	renderVideo( params ) {
 		const {
 			aligmentStyles,
 			mediaUrl,
@@ -251,7 +250,6 @@ class MediaContainer extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onMediaPressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View style={ [ styles.videoContainer, aligmentStyles ] }>
@@ -305,7 +303,7 @@ class MediaContainer extends Component {
 				mediaElement = this.renderImage( params, openMediaOptions );
 				break;
 			case MEDIA_TYPE_VIDEO:
-				mediaElement = this.renderVideo( params, openMediaOptions );
+				mediaElement = this.renderVideo( params );
 				break;
 		}
 		return mediaElement;

package/src/media-text/transforms.js

@@ -28,6 +28,61 @@ const transforms = {
 					anchor,
 				} ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/cover' ],
+			transform: (
+				{
+					align,
+					alt,
+					anchor,
+					backgroundType,
+					customGradient,
+					customOverlayColor,
+					gradient,
+					id,
+					overlayColor,
+					url,
+				},
+				innerBlocks
+			) => {
+				let additionalAttributes = {};
+
+				if ( customGradient ) {
+					additionalAttributes = {
+						style: {
+							color: {
+								gradient: customGradient,
+							},
+						},
+					};
+				} else if ( customOverlayColor ) {
+					additionalAttributes = {
+						style: {
+							color: {
+								background: customOverlayColor,
+							},
+						},
+					};
+				}
+
+				return createBlock(
+					'core/media-text',
+					{
+						align,
+						anchor,
+						backgroundColor: overlayColor,
+						gradient,
+						mediaAlt: alt,
+						mediaId: id,
+						mediaType: backgroundType,
+						mediaUrl: url,
+						...additionalAttributes,
+					},
+					innerBlocks
+				);
+			},
+		},
 	],
 	to: [
 		{
@@ -59,6 +114,105 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/cover' ],
+			transform: (
+				{
+					align,
+					anchor,
+					backgroundColor,
+					focalPoint,
+					gradient,
+					mediaAlt,
+					mediaId,
+					mediaType,
+					mediaUrl,
+					style,
+					textColor,
+				},
+				innerBlocks
+			) => {
+				const additionalAttributes = {};
+
+				if ( style?.color?.gradient ) {
+					additionalAttributes.customGradient = style.color.gradient;
+				} else if ( style?.color?.background ) {
+					additionalAttributes.customOverlayColor =
+						style.color.background;
+				}
+
+				const coverAttributes = {
+					align,
+					alt: mediaAlt,
+					anchor,
+					backgroundType: mediaType,
+					dimRatio: !! mediaUrl ? 50 : 100,
+					focalPoint,
+					gradient,
+					id: mediaId,
+					overlayColor: backgroundColor,
+					url: mediaUrl,
+					...additionalAttributes,
+				};
+				const customTextColor = style?.color?.text;
+
+				// Attempt to maintain any text color selection.
+				// Cover block's do not opt into color block support so we
+				// cannot directly copy the color attributes across.
+				if ( ! textColor && ! customTextColor ) {
+					return createBlock(
+						'core/cover',
+						coverAttributes,
+						innerBlocks
+					);
+				}
+
+				const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {
+					const {
+						attributes: { style: innerStyle },
+					} = innerBlock;
+
+					// Only apply the media and text color if the inner block
+					// doesn't set its own color block support selection.
+					if (
+						innerBlock.attributes.textColor ||
+						innerStyle?.color?.text
+					) {
+						return innerBlock;
+					}
+
+					const newAttributes = { textColor };
+
+					// Only add or extend inner block's style object if we have
+					// a custom text color from the media & text block.
+					if ( customTextColor ) {
+						newAttributes.style = {
+							...innerStyle,
+							color: {
+								...innerStyle?.color,
+								text: customTextColor,
+							},
+						};
+					}
+
+					return createBlock(
+						innerBlock.name,
+						{
+							...innerBlock.attributes,
+							...newAttributes,
+						},
+						innerBlock.innerBlocks
+					);
+				} );
+
+				return createBlock(
+					'core/cover',
+					coverAttributes,
+					coloredInnerBlocks
+				);
+			},
+		},
 	],
 };