@wordpress/edit-site 5.5.0 → 5.6.0

package/src/components/navigation-inspector/index.js

@@ -1,191 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import {
-	store as blockEditorStore,
-	BlockEditorProvider,
-} from '@wordpress/block-editor';
-import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import NavigationMenu from './navigation-menu';
-
-const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
-
-export default function NavigationInspector( { onSelect } ) {
-	const {
-		selectedNavigationBlockId,
-		clientIdToRef,
-		navigationMenus,
-		isResolvingNavigationMenus,
-		hasResolvedNavigationMenus,
-		firstNavigationBlockId,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetActiveBlockIdByBlockNames,
-			__experimentalGetGlobalBlocksByName,
-			getBlock,
-		} = select( blockEditorStore );
-
-		const { getEntityRecords, hasFinishedResolution, isResolving } =
-			select( coreStore );
-
-		const navigationMenusQuery = [
-			'postType',
-			'wp_navigation',
-			NAVIGATION_MENUS_QUERY[ 0 ],
-		];
-
-		// Get the active Navigation block (if present).
-		const selectedNavId =
-			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
-
-		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds =
-			__experimentalGetGlobalBlocksByName( 'core/navigation' );
-		const idToRef = {};
-		navBlockIds.forEach( ( id ) => {
-			idToRef[ id ] = getBlock( id )?.attributes?.ref;
-		} );
-		return {
-			selectedNavigationBlockId: selectedNavId,
-			firstNavigationBlockId: navBlockIds?.[ 0 ],
-			clientIdToRef: idToRef,
-			navigationMenus: getEntityRecords( ...navigationMenusQuery ),
-			isResolvingNavigationMenus: isResolving(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-			hasResolvedNavigationMenus: hasFinishedResolution(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-		};
-	}, [] );
-
-	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
-	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
-
-	// Default Navigation Menu is either:
-	// - the Navigation Menu referenced by the first Nav block within the template.
-	// - the first of the available Navigation Menus (`wp_navigation`) posts.
-	const defaultNavigationMenuId =
-		firstNavRefInTemplate || firstNavigationMenuRef;
-
-	// The Navigation Menu manually selected by the user within the Nav inspector.
-	const [ currentMenuId, setCurrentMenuId ] = useState(
-		firstNavRefInTemplate
-	);
-
-	// If a Nav block is selected within the canvas then set the
-	// Navigation Menu referenced by it's `ref` attribute  to be
-	// active within the Navigation sidebar.
-	useEffect( () => {
-		if ( selectedNavigationBlockId ) {
-			setCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] );
-		}
-	}, [ selectedNavigationBlockId ] );
-
-	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_navigation',
-		{ id: currentMenuId || defaultNavigationMenuId }
-	);
-
-	const { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect(
-		( select ) => {
-			const { isResolving, hasFinishedResolution } = select( coreStore );
-			return {
-				isLoadingInnerBlocks: isResolving( 'getEntityRecord', [
-					'postType',
-					'wp_navigation',
-					currentMenuId || defaultNavigationMenuId,
-				] ),
-				hasLoadedInnerBlocks: hasFinishedResolution(
-					'getEntityRecord',
-					[
-						'postType',
-						'wp_navigation',
-						currentMenuId || defaultNavigationMenuId,
-					]
-				),
-			};
-		},
-		[ currentMenuId, defaultNavigationMenuId ]
-	);
-
-	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
-
-	const hasNavigationMenus = !! navigationMenus?.length;
-
-	// Entity block editor will return entities that are not currently published.
-	// Guard by only allowing their usage if there are published Nav Menus.
-	const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
-
-	const hasInnerBlocks = !! publishedInnerBlocks?.length;
-
-	useEffect( () => {
-		if ( isResolvingNavigationMenus ) {
-			speak( 'Loading Navigation sidebar menus.' );
-		}
-
-		if ( hasResolvedNavigationMenus ) {
-			speak( 'Navigation sidebar menus have loaded.' );
-		}
-	}, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] );
-
-	useEffect( () => {
-		if ( isLoadingInnerBlocks ) {
-			speak( 'Loading Navigation sidebar selected menu items.' );
-		}
-
-		if ( hasLoadedInnerBlocks ) {
-			speak( 'Navigation sidebar selected menu items have loaded.' );
-		}
-	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
-
-	return (
-		<div className="edit-site-navigation-inspector">
-			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'There are no Navigation Menus.' ) }
-				</p>
-			) }
-
-			{ ! hasResolvedNavigationMenus && (
-				<div className="edit-site-navigation-inspector__placeholder" />
-			) }
-			{ isLoading && (
-				<>
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-				</>
-			) }
-			{ hasInnerBlocks && ! isLoading && (
-				<BlockEditorProvider
-					value={ publishedInnerBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				>
-					<NavigationMenu
-						innerBlocks={ publishedInnerBlocks }
-						onSelect={ onSelect }
-					/>
-				</BlockEditorProvider>
-			) }
-
-			{ ! hasInnerBlocks && ! isLoading && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'Navigation Menu is empty.' ) }
-				</p>
-			) }
-		</div>
-	);
-}

package/src/components/navigation-inspector/navigation-menu.js

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-	BlockList,
-	BlockTools,
-} from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const ALLOWED_BLOCKS = {
-	'core/navigation': [
-		'core/navigation-link',
-		'core/search',
-		'core/social-links',
-		'core/page-list',
-		'core/spacer',
-		'core/home-link',
-		'core/site-title',
-		'core/site-logo',
-		'core/navigation-submenu',
-	],
-	'core/social-links': [ 'core/social-link' ],
-	'core/navigation-submenu': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-	'core/navigation-link': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-	'core/page-list': [ 'core/page-list-item' ],
-};
-
-export default function NavigationMenu( { innerBlocks, onSelect } ) {
-	const { clientIdsTree } = useSelect( ( select ) => {
-		const { __unstableGetClientIdsTree } = select( blockEditorStore );
-		return {
-			clientIdsTree: __unstableGetClientIdsTree(),
-		};
-	} );
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
-
-	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
-	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
-	useEffect( () => {
-		updateBlockListSettings( '', {
-			allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],
-		} );
-		innerBlocks.forEach( ( block ) => {
-			if ( ALLOWED_BLOCKS[ block.name ] ) {
-				updateBlockListSettings( block.clientId, {
-					allowedBlocks: ALLOWED_BLOCKS[ block.name ],
-				} );
-			}
-		} );
-	}, [ updateBlockListSettings, innerBlocks ] );
-
-	// The hidden block is needed because it makes block edit side effects trigger.
-	// For example a navigation page list load its items has an effect on edit to load its items.
-	return (
-		<>
-			<OffCanvasEditor
-				blocks={ clientIdsTree }
-				onSelect={ onSelect }
-				LeafMoreMenu={ LeafMoreMenu }
-			/>
-			<div style={ { display: 'none' } }>
-				<BlockTools>
-					<BlockList />
-				</BlockTools>
-			</div>
-		</>
-	);
-}

package/src/components/navigation-inspector/style.scss

@@ -1,46 +0,0 @@
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-.edit-site-navigation-inspector {
-	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
-		white-space: normal;
-	}
-
-	.block-editor-list-view-block__title {
-		margin-top: 3px;
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: 0;
-	}
-
-	.edit-site-navigation-inspector__select-menu {
-		margin-bottom: $grid-unit-10;
-	}
-}
-
-.edit-site-navigation-inspector__placeholder {
-	padding: $grid-unit-10;
-	margin: $grid-unit-10;
-	background-color: $gray-100;
-	animation: loadingpulse 1s linear infinite;
-	animation-delay: 0.5s; // avoid animating for fast network responses
-
-	&.is-child {
-		margin-left: $grid-unit-30;
-		width: 50%;
-	}
-}
-
-.edit-site-navigation-inspector__empty-msg {
-	padding: 0 $grid-unit-10;
-}