@wordpress/block-library 6.0.2 → 6.0.6

package/src/navigation/edit/index.js

@@ -0,0 +1,522 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useEffect,
+	useRef,
+	useCallback,
+	Platform,
+} from '@wordpress/element';
+import {
+	InspectorControls,
+	BlockControls,
+	useBlockProps,
+	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	store as blockEditorStore,
+	withColors,
+	PanelColorSettings,
+	ContrastChecker,
+	getColorClassName,
+	Warning,
+} from '@wordpress/block-editor';
+import { EntityProvider, useEntityProp } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ToolbarGroup,
+	ToolbarDropdownMenu,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useListViewModal from './use-list-view-modal';
+import useNavigationMenu from '../use-navigation-menu';
+import Placeholder from './placeholder';
+import PlaceholderPreview from './placeholder/placeholder-preview';
+import ResponsiveWrapper from './responsive-wrapper';
+import NavigationInnerBlocks from './inner-blocks';
+import NavigationMenuSelector from './navigation-menu-selector';
+import NavigationMenuNameControl from './navigation-menu-name-control';
+import NavigationMenuPublishButton from './navigation-menu-publish-button';
+import UnsavedInnerBlocks from './unsaved-inner-blocks';
+import NavigationMenuDeleteControl from './navigation-menu-delete-control';
+
+function getComputedStyle( node ) {
+	return node.ownerDocument.defaultView.getComputedStyle( node );
+}
+
+function detectColors( colorsDetectionElement, setColor, setBackground ) {
+	if ( ! colorsDetectionElement ) {
+		return;
+	}
+	setColor( getComputedStyle( colorsDetectionElement ).color );
+
+	let backgroundColorNode = colorsDetectionElement;
+	let backgroundColor = getComputedStyle( backgroundColorNode )
+		.backgroundColor;
+	while (
+		backgroundColor === 'rgba(0, 0, 0, 0)' &&
+		backgroundColorNode.parentNode &&
+		backgroundColorNode.parentNode.nodeType ===
+			backgroundColorNode.parentNode.ELEMENT_NODE
+	) {
+		backgroundColorNode = backgroundColorNode.parentNode;
+		backgroundColor = getComputedStyle( backgroundColorNode )
+			.backgroundColor;
+	}
+
+	setBackground( backgroundColor );
+}
+
+function Navigation( {
+	attributes,
+	setAttributes,
+	clientId,
+	isSelected,
+	className,
+	backgroundColor,
+	setBackgroundColor,
+	textColor,
+	setTextColor,
+	overlayBackgroundColor,
+	setOverlayBackgroundColor,
+	overlayTextColor,
+	setOverlayTextColor,
+	context: { navigationArea },
+
+	// These props are used by the navigation editor to override specific
+	// navigation block settings.
+	hasSubmenuIndicatorSetting = true,
+	hasColorSettings = true,
+	customPlaceholder: CustomPlaceholder = null,
+	customAppender: CustomAppender = null,
+} ) {
+	const {
+		openSubmenusOnClick,
+		overlayMenu,
+		showSubmenuIcon,
+		layout: { justifyContent, orientation = 'horizontal' } = {},
+	} = attributes;
+
+	const [ areaMenu, setAreaMenu ] = useEntityProp(
+		'root',
+		'navigationArea',
+		'navigation',
+		navigationArea
+	);
+
+	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
+
+	const navigationMenuId = navigationArea
+		? navigationAreaMenu
+		: attributes.navigationMenuId;
+
+	const setNavigationMenuId = useCallback(
+		( postId ) => {
+			setAttributes( { navigationMenuId: postId } );
+			if ( navigationArea ) {
+				setAreaMenu( postId );
+			}
+		},
+		[ navigationArea ]
+	);
+
+	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
+		`navigationMenu/${ navigationMenuId }`
+	);
+
+	const { innerBlocks, isInnerBlockSelected } = useSelect(
+		( select ) => {
+			const { getBlocks, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			return {
+				innerBlocks: getBlocks( clientId ),
+				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
+			};
+		},
+		[ clientId ]
+	);
+	const hasExistingNavItems = !! innerBlocks.length;
+	const {
+		replaceInnerBlocks,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const [
+		hasSavedUnsavedInnerBlocks,
+		setHasSavedUnsavedInnerBlocks,
+	] = useState( false );
+
+	const isWithinUnassignedArea = navigationArea && ! navigationMenuId;
+
+	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
+		! hasExistingNavItems || isWithinUnassignedArea
+	);
+
+	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
+		false
+	);
+
+	const {
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+		canSwitchNavigationMenu,
+		hasResolvedNavigationMenus,
+		navigationMenus,
+		navigationMenu,
+	} = useNavigationMenu( navigationMenuId );
+
+	const navRef = useRef();
+	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
+
+	const { listViewToolbarButton, listViewModal } = useListViewModal(
+		clientId
+	);
+
+	const isEntityAvailable =
+		! isNavigationMenuMissing && isNavigationMenuResolved;
+
+	const blockProps = useBlockProps( {
+		ref: navRef,
+		className: classnames( className, {
+			'items-justified-right': justifyContent === 'right',
+			'items-justified-space-between': justifyContent === 'space-between',
+			'is-responsive': 'never' !== overlayMenu,
+			'has-text-color': !! textColor.color || !! textColor?.class,
+			[ getColorClassName(
+				'color',
+				textColor?.slug
+			) ]: !! textColor?.slug,
+			'has-background': !! backgroundColor.color || backgroundColor.class,
+			[ getColorClassName(
+				'background-color',
+				backgroundColor?.slug
+			) ]: !! backgroundColor?.slug,
+		} ),
+		style: {
+			color: ! textColor?.slug && textColor?.color,
+			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
+		},
+	} );
+
+	// Turn on contrast checker for web only since it's not supported on mobile yet.
+	const enableContrastChecking = Platform.OS === 'web';
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+	const [
+		detectedOverlayBackgroundColor,
+		setDetectedOverlayBackgroundColor,
+	] = useState();
+	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
+
+	// Spacer block needs orientation from context. This is a patch until
+	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
+	useEffect( () => {
+		if ( orientation ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { orientation } );
+		}
+	}, [ orientation ] );
+
+	useEffect( () => {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		detectColors(
+			navRef.current,
+			setDetectedColor,
+			setDetectedBackgroundColor
+		);
+		const subMenuElement = navRef.current.querySelector(
+			'[data-type="core/navigation-link"] [data-type="core/navigation-link"]'
+		);
+		if ( subMenuElement ) {
+			detectColors(
+				subMenuElement,
+				setDetectedOverlayColor,
+				setDetectedOverlayBackgroundColor
+			);
+		}
+	} );
+
+	// Hide the placeholder if an navigation menu entity has loaded.
+	useEffect( () => {
+		setIsPlaceholderShown( ! isEntityAvailable );
+	}, [ isEntityAvailable ] );
+
+	// If the block has inner blocks, but no menu id, this was an older
+	// navigation block added before the block used a wp_navigation entity.
+	// Either this block was saved in the content or inserted by a pattern.
+	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu.
+	const hasUnsavedBlocks =
+		hasExistingNavItems && ! isEntityAvailable && ! isWithinUnassignedArea;
+	if ( hasUnsavedBlocks ) {
+		return (
+			<UnsavedInnerBlocks
+				blockProps={ blockProps }
+				blocks={ innerBlocks }
+				clientId={ clientId }
+				navigationMenus={ navigationMenus }
+				hasSelection={ isSelected || isInnerBlockSelected }
+				hasSavedUnsavedInnerBlocks={ hasSavedUnsavedInnerBlocks }
+				onSave={ ( post ) => {
+					setHasSavedUnsavedInnerBlocks( true );
+					// Switch to using the wp_navigation entity.
+					setNavigationMenuId( post.id );
+				} }
+			/>
+		);
+	}
+
+	// Show a warning if the selected menu is no longer available.
+	// TODO - the user should be able to select a new one?
+	if ( navigationMenuId && isNavigationMenuMissing ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __(
+						'Navigation menu has been deleted or is unavailable'
+					) }
+				</Warning>
+			</div>
+		);
+	}
+
+	if ( isEntityAvailable && hasAlreadyRendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Block cannot be rendered inside itself.' ) }
+				</Warning>
+			</div>
+		);
+	}
+
+	const PlaceholderComponent = CustomPlaceholder
+		? CustomPlaceholder
+		: Placeholder;
+
+	return (
+		<EntityProvider
+			kind="postType"
+			type="wp_navigation"
+			id={ navigationMenuId }
+		>
+			<RecursionProvider>
+				<BlockControls>
+					{ ! isDraftNavigationMenu && isEntityAvailable && (
+						<ToolbarGroup>
+							<ToolbarDropdownMenu
+								label={ __( 'Select Menu' ) }
+								text={ __( 'Select Menu' ) }
+								icon={ null }
+							>
+								{ ( { onClose } ) => (
+									<NavigationMenuSelector
+										onSelect={ ( { id } ) => {
+											setNavigationMenuId( id );
+											onClose();
+										} }
+										onCreateNew={ () => {
+											if ( navigationArea ) {
+												setAreaMenu( 0 );
+											}
+											setAttributes( {
+												navigationMenuId: undefined,
+											} );
+											setIsPlaceholderShown( true );
+										} }
+									/>
+								) }
+							</ToolbarDropdownMenu>
+						</ToolbarGroup>
+					) }
+					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
+					{ isDraftNavigationMenu && (
+						<ToolbarGroup>
+							<NavigationMenuPublishButton />
+						</ToolbarGroup>
+					) }
+				</BlockControls>
+				{ listViewModal }
+				<InspectorControls>
+					{ hasSubmenuIndicatorSetting && (
+						<PanelBody title={ __( 'Display' ) }>
+							<h3>{ __( 'Overlay Menu' ) }</h3>
+							<ToggleGroupControl
+								label={ __( 'Configure overlay menu' ) }
+								value={ overlayMenu }
+								help={ __(
+									'Collapses the navigation options in a menu icon opening an overlay.'
+								) }
+								onChange={ ( value ) =>
+									setAttributes( { overlayMenu: value } )
+								}
+								isBlock
+								hideLabelFromVision
+							>
+								<ToggleGroupControlOption
+									value="never"
+									label={ __( 'Off' ) }
+								/>
+								<ToggleGroupControlOption
+									value="mobile"
+									label={ __( 'Mobile' ) }
+								/>
+								<ToggleGroupControlOption
+									value="always"
+									label={ __( 'Always' ) }
+								/>
+							</ToggleGroupControl>
+							<h3>{ __( 'Submenus' ) }</h3>
+							<ToggleControl
+								checked={ openSubmenusOnClick }
+								onChange={ ( value ) => {
+									setAttributes( {
+										openSubmenusOnClick: value,
+									} );
+								} }
+								label={ __( 'Open on click' ) }
+							/>
+							{ ! attributes.openSubmenusOnClick && (
+								<ToggleControl
+									checked={ showSubmenuIcon }
+									onChange={ ( value ) => {
+										setAttributes( {
+											showSubmenuIcon: value,
+										} );
+									} }
+									label={ __( 'Show icons' ) }
+								/>
+							) }
+						</PanelBody>
+					) }
+					{ hasColorSettings && (
+						<PanelColorSettings
+							__experimentalHasMultipleOrigins
+							title={ __( 'Color' ) }
+							initialOpen={ false }
+							colorSettings={ [
+								{
+									value: textColor.color,
+									onChange: setTextColor,
+									label: __( 'Text' ),
+								},
+								{
+									value: backgroundColor.color,
+									onChange: setBackgroundColor,
+									label: __( 'Background' ),
+								},
+								{
+									value: overlayTextColor.color,
+									onChange: setOverlayTextColor,
+									label: __( 'Submenu & overlay text' ),
+								},
+								{
+									value: overlayBackgroundColor.color,
+									onChange: setOverlayBackgroundColor,
+									label: __( 'Submenu & overlay background' ),
+								},
+							] }
+						>
+							{ enableContrastChecking && (
+								<>
+									<ContrastChecker
+										backgroundColor={
+											detectedBackgroundColor
+										}
+										textColor={ detectedColor }
+									/>
+									<ContrastChecker
+										backgroundColor={
+											detectedOverlayBackgroundColor
+										}
+										textColor={ detectedOverlayColor }
+									/>
+								</>
+							) }
+						</PanelColorSettings>
+					) }
+				</InspectorControls>
+				{ isEntityAvailable && (
+					<InspectorControls __experimentalGroup="advanced">
+						<NavigationMenuNameControl />
+						<NavigationMenuDeleteControl
+							onDelete={ () => {
+								replaceInnerBlocks( clientId, [] );
+								if ( navigationArea ) {
+									setAreaMenu( 0 );
+								}
+								setAttributes( {
+									navigationMenuId: undefined,
+								} );
+								setIsPlaceholderShown( true );
+							} }
+						/>
+					</InspectorControls>
+				) }
+				<nav { ...blockProps }>
+					{ ! isEntityAvailable && isPlaceholderShown && (
+						<PlaceholderComponent
+							onFinish={ ( post ) => {
+								setIsPlaceholderShown( false );
+								setNavigationMenuId( post.id );
+								selectBlock( clientId );
+							} }
+							canSwitchNavigationMenu={ canSwitchNavigationMenu }
+							hasResolvedNavigationMenus={
+								hasResolvedNavigationMenus
+							}
+						/>
+					) }
+					{ ! isEntityAvailable && ! isPlaceholderShown && (
+						<PlaceholderPreview isLoading />
+					) }
+					{ ! isPlaceholderShown && (
+						<ResponsiveWrapper
+							id={ clientId }
+							onToggle={ setResponsiveMenuVisibility }
+							isOpen={ isResponsiveMenuOpen }
+							isResponsive={ 'never' !== overlayMenu }
+							isHiddenByDefault={ 'always' === overlayMenu }
+						>
+							{ isEntityAvailable && (
+								<NavigationInnerBlocks
+									isVisible={ ! isPlaceholderShown }
+									clientId={ clientId }
+									appender={ CustomAppender }
+									hasCustomPlaceholder={
+										!! CustomPlaceholder
+									}
+									orientation={ orientation }
+								/>
+							) }
+						</ResponsiveWrapper>
+					) }
+				</nav>
+			</RecursionProvider>
+		</EntityProvider>
+	);
+}
+
+export default withColors(
+	{ textColor: 'color' },
+	{ backgroundColor: 'color' },
+	{ overlayBackgroundColor: 'color' },
+	{ overlayTextColor: 'color' }
+)( Navigation );

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

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import {
+	useInnerBlocksProps,
+	__experimentalBlockContentOverlay as BlockContentOverlay,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PlaceholderPreview from './placeholder/placeholder-preview';
+
+const ALLOWED_BLOCKS = [
+	'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',
+];
+
+const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+
+const LAYOUT = {
+	type: 'default',
+	alignments: [],
+};
+
+export default function NavigationInnerBlocks( {
+	isVisible,
+	clientId,
+	appender: CustomAppender,
+	hasCustomPlaceholder,
+	orientation,
+} ) {
+	const {
+		isImmediateParentOfSelectedBlock,
+		selectedBlockHasDescendants,
+		isSelected,
+	} = useSelect(
+		( select ) => {
+			const {
+				getClientIdsOfDescendants,
+				hasSelectedInnerBlock,
+				getSelectedBlockClientId,
+			} = select( blockEditorStore );
+			const selectedBlockId = getSelectedBlockClientId();
+
+			return {
+				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
+					clientId,
+					false
+				),
+				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
+					selectedBlockId,
+				] )?.length,
+
+				// This prop is already available but computing it here ensures it's
+				// fresh compared to isImmediateParentOfSelectedBlock
+				isSelected: selectedBlockId === clientId,
+			};
+		},
+		[ clientId ]
+	);
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_navigation'
+	);
+
+	const shouldDirectInsert = useMemo(
+		() =>
+			blocks.every(
+				( { name } ) =>
+					name === 'core/navigation-link' ||
+					name === 'core/navigation-submenu'
+			),
+		[ blocks ]
+	);
+
+	// When the block is selected itself or has a top level item selected that
+	// doesn't itself have children, show the standard appender. Else show no
+	// appender.
+	const parentOrChildHasSelection =
+		isSelected ||
+		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
+	const appender = isVisible && parentOrChildHasSelection ? undefined : false;
+
+	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-navigation__container',
+		},
+		{
+			value: blocks,
+			onInput,
+			onChange,
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: shouldDirectInsert,
+			orientation,
+			renderAppender: CustomAppender || appender,
+
+			// Ensure block toolbar is not too far removed from item
+			// being edited when in vertical mode.
+			// see: https://github.com/WordPress/gutenberg/pull/34615.
+			__experimentalCaptureToolbars: orientation !== 'vertical',
+			// Template lock set to false here so that the Nav
+			// Block on the experimental menus screen does not
+			// inherit templateLock={ 'all' }.
+			templateLock: false,
+			__experimentalLayout: LAYOUT,
+			placeholder:
+				! isVisible || hasCustomPlaceholder ? undefined : placeholder,
+		}
+	);
+
+	return (
+		<BlockContentOverlay
+			clientId={ clientId }
+			tagName={ 'div' }
+			wrapperProps={ innerBlocksProps }
+		/>
+	);
+}