@wordpress/block-library 6.0.2 → 6.0.3

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

@@ -0,0 +1,197 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps } from '@wordpress/block-editor';
+import { serialize } from '@wordpress/blocks';
+import { Disabled, Spinner } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+import useTemplatePartAreaLabel from '../use-template-part-area-label';
+
+const NOOP = () => {};
+const EMPTY_OBJECT = {};
+const DRAFT_MENU_PARAMS = [
+	'postType',
+	'wp_navigation',
+	{ status: 'draft', per_page: -1 },
+];
+
+export default function UnsavedInnerBlocks( {
+	blockProps,
+	blocks,
+	clientId,
+	hasSavedUnsavedInnerBlocks,
+	onSave,
+	hasSelection,
+} ) {
+	// The block will be disabled in a block preview, use this as a way of
+	// avoiding the side-effects of this component for block previews.
+	const isDisabled = useContext( Disabled.Context );
+	const savingLock = useRef( false );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: hasSelection ? undefined : false,
+
+		// Make the inner blocks 'controlled'. This allows the block to always
+		// work with controlled inner blocks, smoothing out the switch to using
+		// an entity.
+		value: blocks,
+		onChange: NOOP,
+		onInput: NOOP,
+	} );
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	const {
+		isSaving,
+		draftNavigationMenus,
+		hasResolvedDraftNavigationMenus,
+	} = useSelect(
+		( select ) => {
+			if ( isDisabled ) {
+				return EMPTY_OBJECT;
+			}
+
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				isSavingEntityRecord,
+			} = select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
+				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
+				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					DRAFT_MENU_PARAMS
+				),
+			};
+		},
+		[ isDisabled ]
+	);
+
+	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
+
+	const createNavigationMenu = useCallback(
+		async ( title ) => {
+			const record = {
+				title,
+				content: serialize( blocks ),
+				status: 'draft',
+			};
+
+			const navigationMenu = await saveEntityRecord(
+				'postType',
+				'wp_navigation',
+				record
+			);
+
+			return navigationMenu;
+		},
+		[ blocks, serialize, saveEntityRecord ]
+	);
+
+	// Because we can't conditionally call hooks, pass an undefined client id
+	// arg to bypass the expensive `useTemplateArea` code. The hook will return
+	// early.
+	const area = useTemplatePartAreaLabel( isDisabled ? undefined : clientId );
+
+	// Automatically save the uncontrolled blocks.
+	useEffect( async () => {
+		// The block will be disabled when used in a BlockPreview.
+		// In this case avoid automatic creation of a wp_navigation post.
+		// Otherwise the user will be spammed with lots of menus!
+		//
+		// Also ensure other navigation menus have loaded so an
+		// accurate name can be created.
+		//
+		// Don't try saving when another save is already
+		// in progress.
+		//
+		// And finally only create the menu when the block is selected,
+		// which is an indication they want to start editing.
+		if (
+			isDisabled ||
+			hasSavedUnsavedInnerBlocks ||
+			isSaving ||
+			savingLock.current ||
+			! hasResolvedDraftNavigationMenus ||
+			! hasResolvedNavigationMenus ||
+			! hasSelection
+		) {
+			return;
+		}
+
+		savingLock.current = true;
+		const title = area
+			? sprintf(
+					// translators: %s: the name of a menu (e.g. Header navigation).
+					__( '%s navigation' ),
+					area
+			  )
+			: // translators: 'navigation' as in website navigation.
+			  __( 'Navigation' );
+
+		// Determine how many menus start with the automatic title.
+		const matchingMenuTitleCount = [
+			...draftNavigationMenus,
+			...navigationMenus,
+		].reduce(
+			( count, menu ) =>
+				menu?.title?.raw?.startsWith( title ) ? count + 1 : count,
+			0
+		);
+
+		// Append a number to the end of the title if a menu with
+		// the same name exists.
+		const titleWithCount =
+			matchingMenuTitleCount > 0
+				? `${ title } ${ matchingMenuTitleCount + 1 }`
+				: title;
+
+		const menu = await createNavigationMenu( titleWithCount );
+		onSave( menu );
+		savingLock.current = false;
+	}, [
+		isDisabled,
+		isSaving,
+		hasResolvedDraftNavigationMenus,
+		hasResolvedNavigationMenus,
+		draftNavigationMenus,
+		navigationMenus,
+		hasSelection,
+		createNavigationMenu,
+		area,
+	] );
+
+	return (
+		<>
+			<nav { ...blockProps }>
+				<div className="wp-block-navigation__unsaved-changes">
+					<Disabled
+						className={ classnames(
+							'wp-block-navigation__unsaved-changes-overlay',
+							{
+								'is-saving': hasSelection,
+							}
+						) }
+					>
+						<div { ...innerBlocksProps } />
+					</Disabled>
+					{ hasSelection && <Spinner /> }
+				</div>
+			</nav>
+		</>
+	);
+}

package/src/navigation/edit/use-list-view-modal.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarButton, Modal } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
+
+function NavigationBlockListView( { clientId, __experimentalFeatures } ) {
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetClientIdsTree( clientId ),
+		[ clientId ]
+	);
+
+	const listViewRef = useRef();
+	const [ minHeight, setMinHeight ] = useState( 300 );
+	useEffect( () => {
+		setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
+	}, [] );
+
+	return (
+		<div style={ { minHeight } }>
+			<ListView
+				ref={ listViewRef }
+				blocks={ blocks }
+				showBlockMovers
+				showNestedBlocks
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</div>
+	);
+}
+
+export default function useListViewModal( clientId, __experimentalFeatures ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const listViewToolbarButton = (
+		<ToolbarButton
+			className="components-toolbar__control"
+			label={ __( 'Open list view' ) }
+			onClick={ () => setIsModalOpen( true ) }
+			icon={ listView }
+		/>
+	);
+
+	const listViewModal = isModalOpen && (
+		<Modal
+			title={ __( 'List View' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ () => {
+				setIsModalOpen( false );
+			} }
+			shouldCloseOnClickOutside={ false }
+		>
+			<NavigationBlockListView
+				clientId={ clientId }
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</Modal>
+	);
+
+	return {
+		listViewToolbarButton,
+		listViewModal,
+	};
+}

package/src/navigation/editor.scss

@@ -20,11 +20,15 @@
 	}
 }
 
-// This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
+// The following rule affects the positioning of the dropdown arrow indicator.
+// On the frontend, this element is inline, which makes it look correct. In the editor,
+// the label is block, which causes the dropdown indicator to wrap onto a new line.
+// Therefore we explicitly set it to inline even in the block editor.
 .wp-block-navigation-item__label {
-	display: inline-block;
+	display: inline;
 }
 
+
 /**
  * Submenus.
  */
@@ -211,6 +215,18 @@ $color-control-label-height: 20px;
 	margin-right: 7px;
 }
 
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -220,6 +236,11 @@ $color-control-label-height: 20px;
 	width: 100%;
 	overflow: hidden;
 
+	&.is-loading {
+		animation: loadingpulse 1s linear infinite;
+		animation-delay: 0.5s; // avoid animating for fast network responses
+	}
+
 	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
 	.wp-block-navigation-item.wp-block-navigation-item {
@@ -248,29 +269,24 @@ $color-control-label-height: 20px;
 		opacity: 0.3;
 	}
 
-	// Don't show the preview boxes for an empty nav block,
-	// but be technically present to help size the empty state.
-	.wp-block-navigation.is-selected & {
-		display: flex;
-		opacity: 0;
-		width: 0;
-		overflow: hidden;
-		flex-wrap: nowrap;
-		flex: 0;
-	}
-
-	// Hide entirely when vertical.
-	.is-vertical.is-selected & {
-		display: none;
-	}
-
-	// Hide entirely when the placeholder can still be toggled.
-	.wp-block-navigation.is-selected .is-small & {
-		display: none;
-	}
+	&:not(.is-loading) {
+		// Don't show the preview boxes for an empty nav block,
+		// but be technically present to help size the empty state.
+		.wp-block-navigation.is-selected & {
+			display: flex;
+			opacity: 0;
+			width: 0;
+			overflow: hidden;
+			flex-wrap: nowrap;
+			flex: 0;
+		}
 
-	.wp-block-navigation.is-selected .is-medium & {
-		display: none;
+		// Hide entirely when vertical.
+		.is-vertical.is-selected &,
+		.wp-block-navigation.is-selected .is-small &,
+		.wp-block-navigation.is-selected .is-medium & {
+			display: none;
+		}
 	}
 }
 
@@ -509,3 +525,47 @@ body.editor-styles-wrapper
 		margin-top: $grid-unit-20;
 	}
 }
+
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.wp-block-navigation__unsaved-changes {
+	position: relative;
+
+	.components-spinner {
+		position: absolute;
+		top: calc(50% - #{$spinner-size} / 2);
+		left: calc(50% - #{$spinner-size} / 2);
+
+		// Delay showing the saving spinner until after 2 seconds.
+		// This should ensure it only shows for slow connections.
+		opacity: 0;
+		animation: 0.5s linear 2s normal forwards fadein;
+	}
+}
+
+@keyframes fadeouthalf {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+.wp-block-navigation__unsaved-changes-overlay.is-saving {
+	opacity: 1;
+	animation: 0.5s linear 2s normal forwards fadeouthalf;
+}
+
+.wp-block-navigation-delete-menu-button {
+	width: 100%;
+	justify-content: center;
+	margin-bottom: $grid-unit-20;
+}

package/src/navigation/index.js

@@ -11,7 +11,6 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -19,7 +18,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	variations,
 	example: {
 		innerBlocks: [
 			{

package/src/navigation/index.php

@@ -161,11 +161,25 @@ function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_par
 	$blocks = array();
 
 	foreach ( $menu_items as $menu_item ) {
+		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
+		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
+		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
+		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
+		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
+
 		$block = array(
 			'blockName' => 'core/navigation-link',
 			'attrs'     => array(
-				'label' => $menu_item->title,
-				'url'   => $menu_item->url,
+				'className'     => $class_name,
+				'description'   => $menu_item->description,
+				'id'            => $id,
+				'kind'          => $kind,
+				'label'         => $menu_item->title,
+				'opensInNewTab' => $opens_in_new_tab,
+				'rel'           => $rel,
+				'title'         => $menu_item->attr_title,
+				'type'          => $menu_item->object,
+				'url'           => $menu_item->url,
 			),
 		);
 
@@ -230,6 +244,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$inner_blocks = $block->inner_blocks;
 
+	// If `__unstableLocation` is defined, create inner blocks from the classic menu assigned to that location.
 	if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) {
 		$menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] );
 		if ( empty( $menu_items ) ) {
@@ -238,23 +253,48 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		$menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items );
 		$parsed_blocks           = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
+		$inner_blocks            = new WP_Block_List( $parsed_blocks, $attributes );
+	}
+
+	if ( ! empty( $block->context['navigationArea'] ) ) {
+		$area    = $block->context['navigationArea'];
+		$mapping = get_option( 'fse_navigation_areas', array() );
+		if ( ! empty( $mapping[ $area ] ) ) {
+			$attributes['navigationMenuId'] = $mapping[ $area ];
+		}
+	}
+
+	// Load inner blocks from the navigation post.
+	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
+		$navigation_post = get_post( $attributes['navigationMenuId'] );
+		if ( ! isset( $navigation_post ) ) {
+			return '';
+		}
+
+		$parsed_blocks = parse_blocks( $navigation_post->post_content );
+
+		// 'parse_blocks' includes a null block with '\n\n' as the content when
+		// it encounters whitespace. This code strips it.
+		$compacted_blocks = array_filter(
+			$parsed_blocks,
+			function( $block ) {
+				return isset( $block['blockName'] );
+			}
+		);
 
 		// TODO - this uses the full navigation block attributes for the
 		// context which could be refined.
-		$inner_blocks = new WP_Block_List( $parsed_blocks, $attributes );
+		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 	}
 
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
-
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
 		$is_responsive_menu ? array( 'is-responsive' ) : array()
 	);
 

package/src/navigation/save.js

@@ -3,6 +3,12 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	if ( attributes.navigationMenuId ) {
+		// Avoid rendering inner blocks when a navigationMenuId is defined.
+		// When this id is defined the inner blocks are loaded from the
+		// `wp_navigation` entity rather than the hard-coded block html.
+		return;
+	}
 	return <InnerBlocks.Content />;
 }