@wordpress/block-library 8.10.0 → 8.12.0

package/src/media-text/edit.js

@@ -18,6 +18,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	__experimentalImageSizeControl as ImageSizeControl,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -43,6 +44,9 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	TEMPLATE,
 } from './constants';
+import { unlock } from '../private-apis';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 // this limits the resize to a safe zone to avoid making broken layouts
 const applyWidthConstraints = ( width ) =>
@@ -126,7 +130,7 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
+function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const {
 		focalPoint,
 		href,
@@ -147,13 +151,10 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
-	const { imageSizes, image, isContentLocked } = useSelect(
+	const { imageSizes, image } = useSelect(
 		( select ) => {
-			const { __unstableGetContentLockingParent, getSettings } =
-				select( blockEditorStore );
+			const { getSettings } = select( blockEditorStore );
 			return {
-				isContentLocked:
-					!! __unstableGetContentLockingParent( clientId ),
 				image:
 					mediaId && isSelected
 						? select( coreStore ).getMedia( mediaId, {
@@ -163,8 +164,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				imageSizes: getSettings()?.imageSizes,
 			};
 		},
-
-		[ isSelected, mediaId, clientId ]
+		[ isSelected, mediaId ]
 	);
 
 	const refMediaContainer = useRef();
@@ -319,11 +319,13 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		{ template: TEMPLATE, allowedBlocks }
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<>
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
-				{ ! isContentLocked && (
+				{ blockEditingMode === 'default' && (
 					<>
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
@@ -370,6 +372,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					onWidthChange={ onWidthChange }
 					commitWidthChange={ commitWidthChange }
 					ref={ refMediaContainer }
+					enableResize={ blockEditingMode === 'default' }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -381,7 +384,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
-						isContentLocked,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

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

@@ -109,7 +109,7 @@ function MediaContainer( props, ref ) {
 		mediaWidth,
 		onSelectMedia,
 		onWidthChange,
-		isContentLocked,
+		enableResize,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -128,8 +128,8 @@ function MediaContainer( props, ref ) {
 			commitWidthChange( parseInt( elt.style.width ) );
 		};
 		const enablePositions = {
-			right: ! isContentLocked && mediaPosition === 'left',
-			left: ! isContentLocked && mediaPosition === 'right',
+			right: enableResize && mediaPosition === 'left',
+			left: enableResize && mediaPosition === 'right',
 		};
 
 		const backgroundStyles =

package/src/media-text/save.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -36,7 +35,7 @@ export default function save( { attributes } ) {
 		rel,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 
 	const imageClasses = classnames( {
 		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',

package/src/missing/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/missing",
 	"title": "Unsupported",
 	"category": "text",

package/src/more/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/more",
 	"title": "More",
 	"category": "design",

package/src/more/edit.native.js

@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-import Hr from 'react-native-hr';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,15 +36,13 @@ export class MoreEdit extends Component {
 		);
 
 		return (
-			<View>
-				<Hr
-					text={ content }
-					marginLeft={ 0 }
-					marginRight={ 0 }
-					textStyle={ textStyle }
-					lineStyle={ lineStyle }
-				/>
-			</View>
+			<HorizontalRule
+				text={ content }
+				marginLeft={ 0 }
+				marginRight={ 0 }
+				textStyle={ textStyle }
+				lineStyle={ lineStyle }
+			/>
 		);
 	}
 }

package/src/navigation/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
@@ -134,7 +134,7 @@
 			}
 		}
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
+	"viewScript": "file:./interactivity.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/constants.js

@@ -14,3 +14,8 @@ export const ALLOWED_BLOCKS = [
 	'core/navigation-submenu',
 	'core/loginout',
 ];
+
+export const PRIORITIZED_INSERTER_BLOCKS = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];

package/src/navigation/edit/inner-blocks.js

@@ -14,7 +14,11 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import PlaceholderPreview from './placeholder/placeholder-preview';
-import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
+import {
+	DEFAULT_BLOCK,
+	ALLOWED_BLOCKS,
+	PRIORITIZED_INSERTER_BLOCKS,
+} from '../constants';
 
 export default function NavigationInnerBlocks( {
 	clientId,
@@ -93,6 +97,7 @@ export default function NavigationInnerBlocks( {
 			onInput,
 			onChange,
 			allowedBlocks: ALLOWED_BLOCKS,
+			prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,

package/src/navigation/edit/leaf-more-menu.js

@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+	addSubmenu,
+	chevronUp,
+	chevronDown,
+	moreVertical,
+} from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( {
+	block,
+	onClose,
+	expandedState,
+	expand,
+	setInsertedBlock,
+} ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					insertBlock(
+						newLink,
+						block.innerBlocks.length,
+						clientId,
+						updateSelectionOnInsert
+					);
+				} else {
+					// Convert to a submenu if the block currently isn't one.
+					const newSubmenu = createBlock(
+						'core/navigation-submenu',
+						block.attributes,
+						block.innerBlocks
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+
+				// This call sets the local List View state for the "last inserted block".
+				// This is required for the Nav Block to determine whether or not to display
+				// the Link UI for this new block.
+				setInsertedBlock( newLink );
+
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
+export default function LeafMoreMenu( props ) {
+	const { block } = props;
+	const { clientId } = block;
+
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						<AddSubmenuItem
+							block={ block }
+							onClose={ onClose }
+							expanded
+							expandedState={ props.expandedState }
+							expand={ props.expand }
+							setInsertedBlock={ props.setInsertedBlock }
+						/>
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/navigation/edit/menu-inspector-controls.js

@@ -12,7 +12,7 @@ import {
 	__experimentalHeading as Heading,
 	Spinner,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -22,9 +22,58 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
+import LeafMoreMenu from './leaf-more-menu';
+import { updateAttributes } from '../../navigation-link/update-attributes';
+import { LinkUI } from '../../navigation-link/link-ui';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+		insertedBlock?.name
+	);
+	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const showLinkControls = supportsLinkControls && blockWasJustInserted;
+
+	if ( ! showLinkControls ) {
+		return null;
+	}
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) return;
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
+	return (
+		<LinkUI
+			clientId={ insertedBlock?.clientId }
+			link={ insertedBlock?.attributes }
+			onClose={ () => {
+				setInsertedBlock( null );
+			} }
+			hasCreateSuggestion={ false }
+			onChange={ ( updatedValue ) => {
+				updateAttributes(
+					updatedValue,
+					setInsertedBlockAttributes( insertedBlock?.clientId ),
+					insertedBlock?.attributes
+				);
+				setInsertedBlock( null );
+			} }
+			onCancel={ () => {
+				setInsertedBlock( null );
+			} }
+		/>
+	);
+}
 
 const MainContent = ( {
 	clientId,
@@ -33,7 +82,8 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
@@ -43,6 +93,7 @@ const MainContent = ( {
 		},
 		[ clientId ]
 	);
+
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
@@ -57,19 +108,29 @@ const MainContent = ( {
 		? sprintf(
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for navigation menu: %s' ),
-				navigationMenu?.title || __( 'Untitled menu' )
+				navigationMenu?.title?.rendered || __( 'Untitled menu' )
 		  )
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'
 		  );
+
 	return (
-		<OffCanvasEditor
-			blocks={ clientIdsTree }
-			parentClientId={ clientId }
-			isExpanded={ true }
-			LeafMoreMenu={ LeafMoreMenu }
-			description={ description }
-		/>
+		<div className="wp-block-navigation__menu-inspector-controls">
+			{ clientIdsTree.length === 0 && (
+				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
+					{ __( 'This navigation menu is empty.' ) }
+				</p>
+			) }
+			<PrivateListView
+				blocks={ clientIdsTree }
+				rootClientId={ clientId }
+				isExpanded
+				description={ description }
+				showAppender
+				blockSettingsMenu={ LeafMoreMenu }
+				additionalBlockContent={ AdditionalBlockContent }
+			/>
+		</div>
 	);
 };
 

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import {
 	store as coreStore,
 	useEntityId,
@@ -44,34 +48,30 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 							'Are you sure you want to delete this navigation menu?'
 						) }
 					</p>
-					<Flex justify="flex-end">
-						<FlexItem>
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									setIsConfirmModalVisible( false );
-								} }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="primary"
-								onClick={ () => {
-									deleteEntityRecord(
-										'postType',
-										'wp_navigation',
-										id,
-										{ force: true }
-									);
-									onDelete( title );
-								} }
-							>
-								{ __( 'Confirm' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								setIsConfirmModalVisible( false );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							onClick={ () => {
+								deleteEntityRecord(
+									'postType',
+									'wp_navigation',
+									id,
+									{ force: true }
+								);
+								onDelete( title );
+							} }
+						>
+							{ __( 'Confirm' ) }
+						</Button>
+					</HStack>
 				</Modal>
 			) }
 		</>

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -10,16 +10,10 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useNavigationMenu from '../use-navigation-menu';
 import { areBlocksDirty } from './are-blocks-dirty';
 import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
 
 const EMPTY_OBJECT = {};
-const DRAFT_MENU_PARAMS = [
-	'postType',
-	'wp_navigation',
-	{ status: 'draft', per_page: -1 },
-];
 
 export default function UnsavedInnerBlocks( {
 	blocks,
@@ -75,35 +69,30 @@ export default function UnsavedInnerBlocks( {
 		}
 	);
 
-	const { isSaving, hasResolvedDraftNavigationMenus } = useSelect(
+	const { isSaving, hasResolvedAllNavigationMenus } = useSelect(
 		( select ) => {
 			if ( isDisabled ) {
 				return EMPTY_OBJECT;
 			}
 
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				isSavingEntityRecord,
-			} = select( coreStore );
+			const { hasFinishedResolution, isSavingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
-				draftNavigationMenus: getEntityRecords(
-					// This is needed so that hasResolvedDraftNavigationMenus gives the correct status.
-					...DRAFT_MENU_PARAMS
-				),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+				hasResolvedAllNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
-					DRAFT_MENU_PARAMS
+					[
+						'postType',
+						'wp_navigation',
+						{ per_page: -1, status: [ 'publish', 'draft' ] },
+					]
 				),
 			};
 		},
 		[ isDisabled ]
 	);
 
-	const { hasResolvedNavigationMenus } = useNavigationMenu();
-
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
@@ -121,8 +110,7 @@ export default function UnsavedInnerBlocks( {
 		if (
 			isDisabled ||
 			isSaving ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus ||
+			! hasResolvedAllNavigationMenus ||
 			! hasSelection ||
 			! innerBlocksAreDirty
 		) {
@@ -135,8 +123,7 @@ export default function UnsavedInnerBlocks( {
 		createNavigationMenu,
 		isDisabled,
 		isSaving,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
+		hasResolvedAllNavigationMenus,
 		innerBlocksAreDirty,
 		hasSelection,
 	] );