@wordpress/block-library 6.0.2 → 6.0.6

package/src/navigation/edit.js

@@ -1,436 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	useState,
-	useEffect,
-	useMemo,
-	useRef,
-	Platform,
-} from '@wordpress/element';
-import {
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-	InspectorControls,
-	JustifyToolbar,
-	BlockControls,
-	useBlockProps,
-	store as blockEditorStore,
-	withColors,
-	PanelColorSettings,
-	ContrastChecker,
-	getColorClassName,
-} from '@wordpress/block-editor';
-import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import {
-	PanelBody,
-	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import useBlockNavigator from './use-block-navigator';
-import NavigationPlaceholder from './placeholder';
-import PlaceholderPreview from './placeholder-preview';
-import ResponsiveWrapper from './responsive-wrapper';
-
-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 DIRECT_INSERT = ( block ) => {
-	return block.innerBlocks.every(
-		( { name } ) =>
-			name === 'core/navigation-link' ||
-			name === 'core/navigation-submenu'
-	);
-};
-
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-
-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( {
-	selectedBlockHasDescendants,
-	attributes,
-	setAttributes,
-	clientId,
-	hasExistingNavItems,
-	isImmediateParentOfSelectedBlock,
-	isSelected,
-	updateInnerBlocks,
-	className,
-	backgroundColor,
-	setBackgroundColor,
-	textColor,
-	setTextColor,
-	overlayBackgroundColor,
-	setOverlayBackgroundColor,
-	overlayTextColor,
-	setOverlayTextColor,
-
-	// These props are used by the navigation editor to override specific
-	// navigation block settings.
-	hasSubmenuIndicatorSetting = true,
-	hasItemJustificationControls = true,
-	hasColorSettings = true,
-	customPlaceholder: CustomPlaceholder = null,
-	customAppender: CustomAppender = null,
-} ) {
-	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
-		! hasExistingNavItems
-	);
-	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
-		false
-	);
-
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	const navRef = useRef();
-
-	const blockProps = useBlockProps( {
-		ref: navRef,
-		className: classnames( className, {
-			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
-			'is-vertical': attributes.orientation === 'vertical',
-			'is-responsive': 'never' !== attributes.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,
-		},
-	} );
-
-	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
-		clientId
-	);
-
-	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
-
-	// 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 appender =
-		isSelected ||
-		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants )
-			? undefined
-			: false;
-
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: 'wp-block-navigation__container',
-		},
-		{
-			allowedBlocks: ALLOWED_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: DIRECT_INSERT,
-			orientation: attributes.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:
-				attributes.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: ! CustomPlaceholder ? placeholder : undefined,
-		}
-	);
-
-	// 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();
-
-	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
-			);
-		}
-	} );
-
-	if ( isPlaceholderShown ) {
-		const PlaceholderComponent = CustomPlaceholder
-			? CustomPlaceholder
-			: NavigationPlaceholder;
-
-		return (
-			<div { ...blockProps }>
-				<PlaceholderComponent
-					onCreate={ ( blocks, selectNavigationBlock ) => {
-						setIsPlaceholderShown( false );
-						updateInnerBlocks( blocks );
-						if ( selectNavigationBlock ) {
-							selectBlock( clientId );
-						}
-					} }
-				/>
-			</div>
-		);
-	}
-
-	const justifyAllowedControls =
-		attributes.orientation === 'vertical'
-			? [ 'left', 'center', 'right' ]
-			: [ 'left', 'center', 'right', 'space-between' ];
-
-	return (
-		<>
-			<BlockControls>
-				{ hasItemJustificationControls && (
-					<JustifyToolbar
-						value={ attributes.itemsJustification }
-						allowedControls={ justifyAllowedControls }
-						onChange={ ( value ) =>
-							setAttributes( { itemsJustification: value } )
-						}
-						popoverProps={ {
-							position: 'bottom right',
-							isAlternate: true,
-						} }
-					/>
-				) }
-				<ToolbarGroup>{ navigatorToolbarButton }</ToolbarGroup>
-			</BlockControls>
-			{ navigatorModal }
-			<InspectorControls>
-				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display' ) }>
-						<h3>{ __( 'Overlay Menu' ) }</h3>
-						<ToggleGroupControl
-							label={ __( 'Configure overlay menu' ) }
-							value={ attributes.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={ attributes.openSubmenusOnClick }
-							onChange={ ( value ) => {
-								setAttributes( {
-									openSubmenusOnClick: value,
-								} );
-							} }
-							label={ __( 'Open on click' ) }
-						/>
-						{ ! attributes.openSubmenusOnClick && (
-							<ToggleControl
-								checked={ attributes.showSubmenuIcon }
-								onChange={ ( value ) => {
-									setAttributes( {
-										showSubmenuIcon: value,
-									} );
-								} }
-								label={ __( 'Show icons' ) }
-							/>
-						) }
-					</PanelBody>
-				) }
-				{ hasColorSettings && (
-					<PanelColorSettings
-						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: __( 'Overlay text' ),
-							},
-							{
-								value: overlayBackgroundColor.color,
-								onChange: setOverlayBackgroundColor,
-								label: __( 'Overlay background' ),
-							},
-						] }
-					>
-						{ enableContrastChecking && (
-							<>
-								<ContrastChecker
-									backgroundColor={ detectedBackgroundColor }
-									textColor={ detectedColor }
-								/>
-								<ContrastChecker
-									backgroundColor={
-										detectedOverlayBackgroundColor
-									}
-									textColor={ detectedOverlayColor }
-								/>
-							</>
-						) }
-					</PanelColorSettings>
-				) }
-			</InspectorControls>
-			<nav { ...blockProps }>
-				<ResponsiveWrapper
-					id={ clientId }
-					onToggle={ setResponsiveMenuVisibility }
-					isOpen={ isResponsiveMenuOpen }
-					isResponsive={ 'never' !== attributes.overlayMenu }
-					isHiddenByDefault={ 'always' === attributes.overlayMenu }
-				>
-					<div { ...innerBlocksProps }></div>
-				</ResponsiveWrapper>
-			</nav>
-		</>
-	);
-}
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const innerBlocks = select( blockEditorStore ).getBlocks( clientId );
-		const {
-			getClientIdsOfDescendants,
-			hasSelectedInnerBlock,
-			getSelectedBlockClientId,
-		} = select( blockEditorStore );
-		const isImmediateParentOfSelectedBlock = hasSelectedInnerBlock(
-			clientId,
-			false
-		);
-		const selectedBlockId = getSelectedBlockClientId();
-		const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
-			selectedBlockId,
-		] )?.length;
-
-		return {
-			isImmediateParentOfSelectedBlock,
-			selectedBlockHasDescendants,
-			hasExistingNavItems: !! innerBlocks.length,
-
-			// This prop is already available but computing it here ensures it's
-			// fresh compared to isImmediateParentOfSelectedBlock
-			isSelected: selectedBlockId === clientId,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId } ) => {
-		return {
-			updateInnerBlocks( blocks ) {
-				if ( blocks?.length === 0 ) {
-					return false;
-				}
-				dispatch( blockEditorStore ).replaceInnerBlocks(
-					clientId,
-					blocks,
-					true
-				);
-			},
-		};
-	} ),
-	withColors(
-		{ textColor: 'color' },
-		{ backgroundColor: 'color' },
-		{ overlayBackgroundColor: 'color' },
-		{ overlayTextColor: 'color' }
-	),
-] )( Navigation );

package/src/navigation/placeholder.js

@@ -1,154 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import {
-	Placeholder,
-	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Spinner,
-} from '@wordpress/components';
-
-import {
-	forwardRef,
-	useCallback,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { navigation, chevronDown, Icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import useNavigationEntities from './use-navigation-entities';
-import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from './menu-items-to-blocks';
-
-function NavigationPlaceholder( { onCreate }, ref ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-
-	const {
-		isResolvingPages,
-		menus,
-		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
-		hasPages,
-		hasMenus,
-	} = useNavigationEntities( selectedMenu );
-
-	const isLoading = isResolvingPages || isResolvingMenus;
-
-	const createFromMenu = useCallback( () => {
-		const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-		const selectNavigationBlock = true;
-		onCreate( blocks, selectNavigationBlock );
-	}, [ menuItems, menuItemsToBlocks, onCreate ] );
-
-	const onCreateFromMenu = () => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu();
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-	};
-
-	const onCreateEmptyMenu = () => {
-		onCreate( [] );
-	};
-
-	const onCreateAllPages = () => {
-		const block = [ createBlock( 'core/page-list' ) ];
-		const selectNavigationBlock = true;
-		onCreate( block, selectNavigationBlock );
-	};
-
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu();
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems ] );
-
-	const toggleProps = {
-		variant: 'primary',
-		className: 'wp-block-navigation-placeholder__actions__dropdown',
-	};
-	return (
-		<Placeholder className="wp-block-navigation-placeholder">
-			<PlaceholderPreview />
-
-			<div className="wp-block-navigation-placeholder__controls">
-				{ isLoading && (
-					<div ref={ ref }>
-						<Spinner />
-					</div>
-				) }
-				{ ! isLoading && (
-					<div
-						ref={ ref }
-						className="wp-block-navigation-placeholder__actions"
-					>
-						<div className="wp-block-navigation-placeholder__actions__indicator">
-							<Icon icon={ navigation } /> { __( 'Navigation' ) }
-						</div>
-						{ hasMenus ? (
-							<DropdownMenu
-								text={ __( 'Add existing menu' ) }
-								icon={ chevronDown }
-								toggleProps={ toggleProps }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										{ menus.map( ( menu ) => {
-											return (
-												<MenuItem
-													onClick={ () => {
-														setSelectedMenu(
-															menu.id
-														);
-														onCreateFromMenu();
-													} }
-													onClose={ onClose }
-													key={ menu.id }
-												>
-													{ menu.name }
-												</MenuItem>
-											);
-										} ) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) : undefined }
-						{ hasPages ? (
-							<Button
-								variant={ hasMenus ? 'tertiary' : 'primary' }
-								onClick={ onCreateAllPages }
-							>
-								{ __( 'Add all pages' ) }
-							</Button>
-						) : undefined }
-						<Button
-							variant="tertiary"
-							onClick={ onCreateEmptyMenu }
-						>
-							{ __( 'Start empty' ) }
-						</Button>
-					</div>
-				) }
-			</div>
-		</Placeholder>
-	);
-}
-
-export default forwardRef( NavigationPlaceholder );

package/src/navigation/use-block-navigator.js

@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { ToolbarButton, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { listView } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import BlockNavigationList from './block-navigation-list';
-
-export default function useBlockNavigator( clientId, __experimentalFeatures ) {
-	const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false );
-
-	const navigatorToolbarButton = (
-		<ToolbarButton
-			className="components-toolbar__control"
-			label={ __( 'Open block navigation' ) }
-			onClick={ () => setIsNavigationListOpen( true ) }
-			icon={ listView }
-		/>
-	);
-
-	const navigatorModal = isNavigationListOpen && (
-		<Modal
-			title={ __( 'Navigation' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ () => {
-				setIsNavigationListOpen( false );
-			} }
-			shouldCloseOnClickOutside={ false }
-		>
-			<BlockNavigationList
-				clientId={ clientId }
-				__experimentalFeatures={ __experimentalFeatures }
-			/>
-		</Modal>
-	);
-
-	return {
-		navigatorToolbarButton,
-		navigatorModal,
-	};
-}

package/src/navigation/variations.js

@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-const variations = [
-	{
-		name: 'horizontal',
-		title: __( 'Navigation (horizontal)' ),
-		description: __( 'Links shown in a row.' ),
-		attributes: { orientation: 'horizontal' },
-		scope: [ 'transform' ],
-	},
-	{
-		name: 'vertical',
-		title: __( 'Navigation (vertical)' ),
-		description: __( 'Links shown in a column.' ),
-		attributes: { orientation: 'vertical' },
-		scope: [ 'transform' ],
-	},
-];
-
-export default variations;