@wordpress/block-library 6.0.23 → 7.0.0

package/src/list/test/edit.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import ListEdit from '../edit';
 
 describe( 'ListEdit component', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow( <ListEdit attributes={ {} } /> );
-		expect( wrapper ).toBeTruthy();
+		const screen = render( <ListEdit attributes={ {} } /> );
+		expect( screen.container ).toBeTruthy();
 	} );
 } );

package/src/loginout/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/loginout",
 	"title": "Login/out",

package/src/media-text/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/media-text",
 	"title": "Media & Text",
@@ -91,7 +92,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",

package/src/missing/block.json

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

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -5,6 +5,11 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityHint="Tap here to show help"
   accessibilityLabel="Help button"
   accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}

package/src/missing/test/edit.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
+import { render } from 'test/helpers';
 import { Text } from 'react-native';
 
 /**
@@ -23,9 +23,7 @@ const defaultAttributes = {
 };
 
 const getTestComponentWithContent = ( attributes = defaultAttributes ) => {
-	return renderer.create(
-		<UnsupportedBlockEdit attributes={ attributes } />
-	);
+	return render( <UnsupportedBlockEdit attributes={ attributes } /> );
 };
 
 describe( 'Missing block', () => {
@@ -34,33 +32,30 @@ describe( 'Missing block', () => {
 	} );
 
 	it( 'renders without crashing', () => {
-		const component = getTestComponentWithContent();
-		const rendered = component.toJSON();
+		const testInstance = getTestComponentWithContent();
+		const rendered = testInstance.toJSON();
 		expect( rendered ).toMatchSnapshot();
 	} );
 
 	describe( 'help modal', () => {
 		it( 'renders help icon', () => {
-			const component = getTestComponentWithContent();
-			const testInstance = component.root;
-			const icons = testInstance.findAllByType( Icon );
+			const testInstance = getTestComponentWithContent();
+			const icons = testInstance.UNSAFE_getAllByType( Icon );
 			expect( icons.length ).toBe( 2 );
 			expect( icons[ 0 ].props.icon ).toBe( help );
 		} );
 
 		it( 'renders info icon on modal', () => {
-			const component = getTestComponentWithContent();
-			const testInstance = component.root;
-			const bottomSheet = testInstance.findByType( BottomSheet );
+			const testInstance = getTestComponentWithContent();
+			const bottomSheet = testInstance.UNSAFE_getByType( BottomSheet );
 			const children = bottomSheet.props.children[ 0 ].props.children;
 			expect( children.length ).toBe( 3 ); // 4 children in the bottom sheet: the icon, the "isn't yet supported" title and the "We are working hard..." message
 			expect( children[ 0 ].props.icon ).toBe( help );
 		} );
 
 		it( 'renders unsupported text on modal', () => {
-			const component = getTestComponentWithContent();
-			const testInstance = component.root;
-			const bottomSheet = testInstance.findByType( BottomSheet );
+			const testInstance = getTestComponentWithContent();
+			const bottomSheet = testInstance.UNSAFE_getByType( BottomSheet );
 			const children = bottomSheet.props.children[ 0 ].props.children;
 			expect( children[ 1 ].props.children ).toBe(
 				"'" +
@@ -78,9 +73,10 @@ describe( 'Missing block', () => {
 			} );
 
 			it( 'renders edit action if UBE is available', () => {
-				const component = getTestComponentWithContent();
-				const testInstance = component.root;
-				const bottomSheet = testInstance.findByType( BottomSheet );
+				const testInstance = getTestComponentWithContent();
+				const bottomSheet = testInstance.UNSAFE_getByType(
+					BottomSheet
+				);
 				const bottomSheetCells = bottomSheet.props.children[ 1 ];
 				expect( bottomSheetCells ).toBeTruthy();
 				expect( bottomSheetCells.props.children.length ).toBe( 2 );
@@ -94,35 +90,35 @@ describe( 'Missing block', () => {
 					unsupportedBlockEditor: false,
 				} );
 
-				const component = getTestComponentWithContent();
-				const testInstance = component.root;
-				const bottomSheet = testInstance.findByType( BottomSheet );
+				const testInstance = getTestComponentWithContent();
+				const bottomSheet = testInstance.UNSAFE_getByType(
+					BottomSheet
+				);
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 
 			it( 'does not render edit action if the block is incompatible with UBE', () => {
-				const component = getTestComponentWithContent( {
+				const testInstance = getTestComponentWithContent( {
 					originalName: 'core/block',
 				} );
-				const testInstance = component.root;
-				const bottomSheet = testInstance.findByType( BottomSheet );
+				const bottomSheet = testInstance.UNSAFE_getByType(
+					BottomSheet
+				);
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 		} );
 	} );
 
 	it( 'renders admin plugins icon', () => {
-		const component = getTestComponentWithContent();
-		const testInstance = component.root;
-		const icons = testInstance.findAllByType( Icon );
+		const testInstance = getTestComponentWithContent();
+		const icons = testInstance.UNSAFE_getAllByType( Icon );
 		expect( icons.length ).toBe( 2 );
 		expect( icons[ 1 ].props.icon ).toBe( plugins );
 	} );
 
 	it( 'renders title text without crashing', () => {
-		const component = getTestComponentWithContent();
-		const testInstance = component.root;
-		const texts = testInstance.findAllByType( Text );
+		const testInstance = getTestComponentWithContent();
+		const texts = testInstance.UNSAFE_getAllByType( Text );
 		expect( texts.length ).toBe( 2 );
 		expect( texts[ 0 ].props.children ).toBe( 'missing/block/title' );
 		expect( texts[ 1 ].props.children ).toBe( 'Unsupported' );

package/src/more/block.json

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

package/src/navigation/README.md

@@ -0,0 +1,13 @@
+# Navigation block
+
+The Navigation block is a container block for the collection of blocks that allow visitors to get around your site. See also the Navigation Link block and Navigation Submenu block.
+
+## CSS Classes
+
+The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
+
+-   `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
+-   `.wp-block-navigation-item` is applied to every menu item.
+-   `.wp-block-navigation-item__content` is applied to the link inside a menu item.
+-   `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
+-   `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).

package/src/navigation/block.json

@@ -1,14 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links"
-	],
+	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
@@ -44,6 +41,10 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"hasIcon": {
+			"type": "boolean",
+			"default": true
+		},
 		"__unstableLocation": {
 			"type": "string"
 		},
@@ -78,10 +79,7 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
@@ -97,7 +95,11 @@
 			}
 		},
 		"spacing": {
-			"units": [ "px", "em", "rem", "vh", "vw" ]
+			"blockGap": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,

package/src/navigation/edit/existing-menus-options.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+const ExistingMenusOptions = ( {
+	showNavigationMenus,
+	showClassicMenus = false,
+	navigationMenus,
+	classicMenus,
+	onSelectNavigationMenu,
+	onSelectClassicMenu,
+	actionLabel,
+} ) => {
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! classicMenus?.length;
+
+	/* translators: %s: The name of a menu. */
+	const createActionLabel = __( "Create from '%s'" );
+
+	actionLabel = actionLabel || createActionLabel;
+
+	return (
+		<>
+			{ showNavigationMenus && hasNavigationMenus && (
+				<MenuGroup label={ __( 'Menus' ) }>
+					{ navigationMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.title.rendered );
+						return (
+							<MenuItem
+								onClick={ () => {
+									onSelectNavigationMenu( menu );
+								} }
+								key={ menu.id }
+								aria-label={ sprintf( actionLabel, label ) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+			{ showClassicMenus && hasClassicMenus && (
+				<MenuGroup label={ __( 'Classic Menus' ) }>
+					{ classicMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.name );
+						return (
+							<MenuItem
+								onClick={ () => {
+									onSelectClassicMenu( menu );
+								} }
+								key={ menu.id }
+								aria-label={ sprintf(
+									createActionLabel,
+									label
+								) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</>
+	);
+};
+
+export default ExistingMenusOptions;

package/src/navigation/edit/index.js

@@ -45,6 +45,7 @@ import { __ } from '@wordpress/i18n';
  */
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
@@ -54,6 +55,7 @@ import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
+import OverlayMenuIcon from './overlay-menu-icon';
 
 const EMPTY_ARRAY = [];
 
@@ -105,7 +107,6 @@ function Navigation( {
 	hasSubmenuIndicatorSetting = true,
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
-	customAppender: CustomAppender = null,
 } ) {
 	const {
 		openSubmenusOnClick,
@@ -116,13 +117,14 @@ function Navigation( {
 			orientation = 'horizontal',
 			flexWrap = 'wrap',
 		} = {},
+		hasIcon,
 	} = attributes;
 
 	let areaMenu,
 		setAreaMenu = noop;
 	// Navigation areas are deprecated and on their way out. Let's not perform
 	// the request unless we're in an environment where the endpoint exists.
-	if ( process.env.GUTENBERG_PHASE === 2 ) {
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		[ areaMenu, setAreaMenu ] = useEntityProp(
 			'root',
@@ -151,10 +153,15 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
+	// Preload classic menus, so that they don't suddenly pop-in when viewing
+	// the Select Menu dropdown.
+	useNavigationEntities();
+
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
 		isInnerBlockSelected,
+		hasSubmenus,
 	} = useSelect(
 		( select ) => {
 			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
@@ -207,6 +214,8 @@ function Navigation( {
 		false
 	);
 
+	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
+
 	const {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
@@ -461,6 +470,13 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
@@ -474,12 +490,18 @@ function Navigation( {
 							>
 								{ ( { onClose } ) => (
 									<NavigationMenuSelector
+										clientId={ clientId }
 										onSelect={ ( { id } ) => {
 											setRef( id );
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
-										showCreate={ canUserCreateNavigation }
+										canUserCreateNavigation={
+											canUserCreateNavigation
+										}
+										canUserSwitchNavigation={
+											canSwitchNavigationMenu
+										}
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -491,6 +513,33 @@ function Navigation( {
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>
+							{ isResponsive && (
+								<Button
+									className={ overlayMenuPreviewClasses }
+									onClick={ () => {
+										setOverlayMenuPreview(
+											! overlayMenuPreview
+										);
+									} }
+								>
+									{ hasIcon && <OverlayMenuIcon /> }
+									{ ! hasIcon && (
+										<span>{ __( 'Menu' ) }</span>
+									) }
+								</Button>
+							) }
+							{ overlayMenuPreview && (
+								<ToggleControl
+									label={ __( 'Show icon button' ) }
+									help={ __(
+										'Configure the visual appearance of the button opening the overlay menu.'
+									) }
+									onChange={ ( value ) =>
+										setAttributes( { hasIcon: value } )
+									}
+									checked={ hasIcon }
+								/>
+							) }
 							<h3>{ __( 'Overlay Menu' ) }</h3>
 							<ToggleGroupControl
 								label={ __( 'Configure overlay menu' ) }
@@ -517,26 +566,35 @@ function Navigation( {
 									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' ) }
-								/>
+							{ hasSubmenus && (
+								<>
+									<h3>{ __( 'Submenus' ) }</h3>
+									<ToggleControl
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+
+									<ToggleControl
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</>
 							) }
 						</PanelBody>
 					) }
@@ -628,8 +686,10 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
+							label={ __( 'Menu' ) }
+							hasIcon={ hasIcon }
 							isOpen={ isResponsiveMenuOpen }
-							isResponsive={ 'never' !== overlayMenu }
+							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
 							classNames={ overlayClassnames }
 							styles={ overlayStyles }
@@ -638,7 +698,6 @@ function Navigation( {
 								<NavigationInnerBlocks
 									isVisible={ ! isPlaceholderShown }
 									clientId={ clientId }
-									appender={ CustomAppender }
 									hasCustomPlaceholder={
 										!! CustomPlaceholder
 									}

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

@@ -4,6 +4,7 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	useInnerBlocksProps,
+	InnerBlocks,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -27,7 +28,9 @@ const ALLOWED_BLOCKS = [
 	'core/navigation-submenu',
 ];
 
-const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
 
 const LAYOUT = {
 	type: 'default',
@@ -37,7 +40,6 @@ const LAYOUT = {
 export default function NavigationInnerBlocks( {
 	isVisible,
 	clientId,
-	appender: CustomAppender,
 	hasCustomPlaceholder,
 	orientation,
 } ) {
@@ -93,7 +95,6 @@ export default function NavigationInnerBlocks( {
 	const parentOrChildHasSelection =
 		isSelected ||
 		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
-	const appender = isVisible && parentOrChildHasSelection ? undefined : false;
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
@@ -109,7 +110,21 @@ export default function NavigationInnerBlocks( {
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,
-			renderAppender: CustomAppender || appender,
+
+			// As an exception to other blocks which feature nesting, show
+			// the block appender even when a child block is selected.
+			// This should be a temporary fix, to be replaced by improvements to
+			// the sibling inserter.
+			// See https://github.com/WordPress/gutenberg/issues/37572.
+			renderAppender:
+				isSelected ||
+				( isImmediateParentOfSelectedBlock &&
+					! selectedBlockHasDescendants ) ||
+				// Show the appender while dragging to allow inserting element between item and the appender.
+				parentOrChildHasSelection
+					? InnerBlocks.ButtonBlockAppender
+					: false,
+
 			// Template lock set to false here so that the Nav
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.