@wordpress/block-library 7.8.0 → 7.11.0

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

@@ -1,16 +1,23 @@
+/**
+ * External dependencies
+ */
+import { first, last, castArray } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { createListItem } from '../utils';
+import { name as listItemName } from '../block.json';
 
 export default function useOutdentListItem( clientId ) {
+	const registry = useRegistry();
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
 			const { getBlockRootClientId } = innerSelect( blockEditorStore );
@@ -23,72 +30,90 @@ export default function useOutdentListItem( clientId ) {
 		},
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const {
+		moveBlocksToPosition,
+		removeBlock,
+		insertBlock,
+		updateBlockListSettings,
+	} = useDispatch( blockEditorStore );
 	const {
 		getBlockRootClientId,
-		getBlockAttributes,
-		getBlock,
+		getBlockName,
+		getBlockOrder,
 		getBlockIndex,
-		getSelectionStart,
-		getSelectionEnd,
+		getSelectedBlockClientIds,
+		getBlock,
+		getBlockListSettings,
 	} = useSelect( blockEditorStore );
 
+	function getParentListItemId( id ) {
+		const listId = getBlockRootClientId( id );
+		const parentListItemId = getBlockRootClientId( listId );
+		if ( ! parentListItemId ) return;
+		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		return parentListItemId;
+	}
+
 	return [
 		canOutdent,
-		useCallback( () => {
-			const selectionStart = getSelectionStart();
-			const selectionEnd = getSelectionEnd();
+		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
+			clientIds = castArray( clientIds );
 
-			const listParentId = getBlockRootClientId( clientId );
-			const listAttributes = getBlockAttributes( listParentId );
-			const listItemParentId = getBlockRootClientId( listParentId );
-			const listItemParentAttributes =
-				getBlockAttributes( listItemParentId );
+			if ( ! clientIds.length ) return;
 
-			const index = getBlockIndex( clientId );
-			const siblingBlocks = getBlock( listParentId ).innerBlocks;
-			const previousSiblings = siblingBlocks.slice( 0, index );
-			const afterSiblings = siblingBlocks.slice( index + 1 );
+			const firstClientId = first( clientIds );
 
-			// Create a new parent list item block with just the siblings
-			// that existed before the child item being outdent.
-			const newListItemParent = createListItem(
-				listItemParentAttributes,
-				listAttributes,
-				previousSiblings
-			);
+			// Can't outdent if it's not a list item.
+			if ( getBlockName( firstClientId ) !== listItemName ) return;
 
-			const block = getBlock( clientId );
-			const childList = block.innerBlocks[ 0 ];
-			const childItems = childList?.innerBlocks || [];
-			const hasChildItems = !! childItems.length;
+			const parentListItemId = getParentListItemId( firstClientId );
 
-			// Create a new list item block whose attributes are equal to the
-			// block being outdent and whose children are the children that it had (if any)
-			// followed by the siblings that existed after it.
-			const newItem = createListItem(
-				block.attributes,
-				hasChildItems ? childList.attributes : listAttributes,
-				[ ...childItems, ...afterSiblings ]
-			);
+			// Can't outdent if it's at the top level.
+			if ( ! parentListItemId ) return;
 
-			// Replace the parent list item block, with a new block containing
-			// the previous siblings, followed by another block containing after siblings
-			// in relation to the block being outdent.
-			replaceBlocks(
-				[ listItemParentId ],
-				[ newListItemParent, newItem ]
+			const parentListId = getBlockRootClientId( firstClientId );
+			const lastClientId = last( clientIds );
+			const order = getBlockOrder( parentListId );
+			const followingListItems = order.slice(
+				getBlockIndex( lastClientId ) + 1
 			);
 
-			// Restore the selection state.
-			selectionChange(
-				newItem.clientId,
-				selectionEnd.attributeKey,
-				selectionEnd.clientId === selectionStart.clientId
-					? selectionStart.offset
-					: selectionEnd.offset,
-				selectionEnd.offset
-			);
-		}, [ clientId ] ),
+			registry.batch( () => {
+				if ( followingListItems.length ) {
+					let nestedListId = first( getBlockOrder( firstClientId ) );
+
+					if ( ! nestedListId ) {
+						const nestedListBlock = cloneBlock(
+							getBlock( parentListId ),
+							{},
+							[]
+						);
+						nestedListId = nestedListBlock.clientId;
+						insertBlock( nestedListBlock, 0, firstClientId, false );
+						// Immediately update the block list settings, otherwise
+						// blocks can't be moved here due to canInsert checks.
+						updateBlockListSettings(
+							nestedListId,
+							getBlockListSettings( parentListId )
+						);
+					}
+
+					moveBlocksToPosition(
+						followingListItems,
+						parentListId,
+						nestedListId
+					);
+				}
+				moveBlocksToPosition(
+					clientIds,
+					parentListId,
+					getBlockRootClientId( parentListItemId ),
+					getBlockIndex( parentListItemId ) + 1
+				);
+				if ( ! getBlockOrder( parentListId ).length ) {
+					removeBlock( parentListId );
+				}
+			} );
+		}, [] ),
 	];
 }

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

package/src/media-text/deprecated.js

@@ -7,12 +7,18 @@ import { isEmpty, omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	getColorClassName,
+	useInnerBlocksProps,
+	useBlockProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { imageFillStyles } from './media-container';
+import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
@@ -68,6 +74,147 @@ const baseAttributes = {
 };
 
 export default [
+	// Version with CSS grid
+	{
+		attributes: {
+			...baseAttributes,
+			mediaUrl: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure video,figure img',
+				attribute: 'src',
+			},
+			mediaLink: {
+				type: 'string',
+			},
+			linkDestination: {
+				type: 'string',
+			},
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'target',
+			},
+			href: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'href',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'rel',
+			},
+			linkClass: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'class',
+			},
+			verticalAlignment: {
+				type: 'string',
+			},
+			imageFill: {
+				type: 'boolean',
+			},
+			focalPoint: {
+				type: 'object',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+				mediaId,
+				verticalAlignment,
+				imageFill,
+				focalPoint,
+				linkClass,
+				href,
+				linkTarget,
+				rel,
+			} = attributes;
+			const mediaSizeSlug =
+				attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const imageClasses = classnames( {
+				[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+				[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+			} );
+
+			let image = (
+				<img
+					src={ mediaUrl }
+					alt={ mediaAlt }
+					className={ imageClasses || null }
+				/>
+			);
+
+			if ( href ) {
+				image = (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				);
+			}
+
+			const mediaTypeRenders = {
+				image: () => image,
+				video: () => <video controls src={ mediaUrl } />,
+			};
+
+			const className = classnames( {
+				'has-media-on-the-right': 'right' === mediaPosition,
+				'is-stacked-on-mobile': isStackedOnMobile,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
+				'is-image-fill': imageFill,
+			} );
+			const backgroundStyles = imageFill
+				? imageFillStyles( mediaUrl, focalPoint )
+				: {};
+
+			let gridTemplateColumns;
+			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+				gridTemplateColumns =
+					'right' === mediaPosition
+						? `auto ${ mediaWidth }%`
+						: `${ mediaWidth }% auto`;
+			}
+			const style = {
+				gridTemplateColumns,
+			};
+
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...baseAttributes,

package/src/media-text/edit.js

@@ -354,6 +354,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 				) }
 			</BlockControls>
 			<div { ...blockProps }>
+				{ mediaPosition === 'right' && <div { ...innerBlocksProps } /> }
 				<MediaContainer
 					className="wp-block-media-text__media"
 					onSelectMedia={ onSelectMedia }
@@ -373,7 +374,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaWidth,
 					} }
 				/>
-				<div { ...innerBlocksProps } />
+				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }
 			</div>
 		</>
 	);

package/src/media-text/save.js

@@ -88,6 +88,24 @@ export default function save( { attributes } ) {
 	const style = {
 		gridTemplateColumns,
 	};
+
+	if ( 'right' === mediaPosition ) {
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+			</div>
+		);
+	}
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>
 			<figure

package/src/more/edit.js

@@ -53,17 +53,15 @@ export default function MoreEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
-				<div className="wp-block-more">
-					<input
-						aria-label={ __( 'Read more link text' ) }
-						type="text"
-						value={ customText }
-						placeholder={ DEFAULT_TEXT }
-						onChange={ onChangeInput }
-						onKeyDown={ onKeyDown }
-						style={ style }
-					/>
-				</div>
+				<input
+					aria-label={ __( 'Read more link text' ) }
+					type="text"
+					value={ customText }
+					placeholder={ DEFAULT_TEXT }
+					onChange={ onChangeInput }
+					onKeyDown={ onKeyDown }
+					style={ style }
+				/>
 			</div>
 		</>
 	);

package/src/more/save.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ export default function save( { attributes: { customText, noTeaser } } ) {
 	const noTeaserTag = noTeaser ? '<!--noteaser-->' : '';
 
 	return (
-		<RawHTML>{ compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }</RawHTML>
+		<RawHTML>
+			{ [ moreTag, noTeaserTag ].filter( Boolean ).join( '\n' ) }
+		</RawHTML>
 	);
 }

package/src/navigation/block.json

@@ -114,6 +114,15 @@
 			"default": {
 				"type": "flex"
 			}
+		},
+		"__experimentalStyle": {
+			"elements": {
+				"link": {
+					"color": {
+						"text": "inherit"
+					}
+				}
+			}
 		}
 	},
 	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],

package/src/navigation/edit/index.js

@@ -472,6 +472,7 @@ function Navigation( {
 
 		if ( isSelected || isInnerBlockSelected ) {
 			if (
+				ref &&
 				hasResolvedCanUserUpdateNavigationMenu &&
 				! canUserUpdateNavigationMenu
 			) {

package/src/navigation/style.scss

@@ -44,7 +44,6 @@ $navigation-icon-size: 24px;
 	// By adding low specificity, we enable compatibility with link colors set in theme.json,
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
-		color: inherit;
 		display: block;
 
 		// Set the default menu item padding to zero, to allow text-only buttons.
@@ -106,7 +105,7 @@ $navigation-icon-size: 24px;
 			width: inherit;
 			height: inherit;
 
-			// Position the arrow to balance with the the text.
+			// Position the arrow to balance with the text.
 			margin-top: 0.075em;
 		}
 	}
@@ -675,6 +674,16 @@ button.wp-block-navigation-item__content {
 	position: relative;
 }
 
+// Adjust open dialog top margin when admin-bar is visible.
+.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+	margin-top: $admin-bar-height-big;
+
+	// Handle smaller admin-bar.
+	@include break-medium() {
+		margin-top: $admin-bar-height;
+	}
+}
+
 // Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;

package/src/navigation/test/use-navigation-menu.js

@@ -89,13 +89,14 @@ describe( 'useNavigationMenus', () => {
 	it( 'Should return no information when no data is resolved', () => {
 		expect( useNavigationMenu() ).toEqual( {
 			navigationMenus: null,
+			navigationMenu: undefined,
 			canSwitchNavigationMenu: false,
 			canUserCreateNavigationMenu: false,
-			canUserDeleteNavigationMenu: false,
-			canUserUpdateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
 			hasResolvedCanUserCreateNavigationMenu: false,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: false,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
@@ -109,13 +110,14 @@ describe( 'useNavigationMenus', () => {
 		resolveCreatePermission( registry, true );
 		expect( useNavigationMenu() ).toEqual( {
 			navigationMenus,
+			navigationMenu: undefined,
 			canSwitchNavigationMenu: true,
 			canUserCreateNavigationMenu: true,
-			canUserDeleteNavigationMenu: false,
-			canUserUpdateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
 			hasResolvedCanUserCreateNavigationMenu: true,
-			hasResolvedCanUserDeleteNavigationMenu: false,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
@@ -170,6 +172,7 @@ describe( 'useNavigationMenus', () => {
 		resolveRecords( registry, navigationMenus );
 		resolveCreatePermission( registry, true );
 		resolveUpdatePermission( registry, 1, true );
+		resolveDeletePermission( registry, 1, false );
 		expect( useNavigationMenu( 1 ) ).toEqual( {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
@@ -178,7 +181,7 @@ describe( 'useNavigationMenus', () => {
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: true,
 			hasResolvedCanUserCreateNavigationMenu: true,
-			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
@@ -190,6 +193,8 @@ describe( 'useNavigationMenus', () => {
 
 	it( 'Should return correct permissions (delete only)', () => {
 		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, false );
+		resolveUpdatePermission( registry, 1, false );
 		resolveDeletePermission( registry, 1, true );
 		expect( useNavigationMenu( 1 ) ).toEqual( {
 			navigationMenu: navigationMenu1,
@@ -198,9 +203,9 @@ describe( 'useNavigationMenus', () => {
 			canUserCreateNavigationMenu: false,
 			canUserDeleteNavigationMenu: true,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
-			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,