@wordpress/edit-site 4.1.0 → 4.3.0

package/src/components/global-styles/style.scss

@@ -73,19 +73,31 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
-	padding: $border-width * 2;
-	border-radius: $radius-block-ui;
-	border: $gray-200 $border-width solid;
 
-	&.is-active {
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		border: $gray-200 $border-width solid;
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}
 
-	&:hover {
+	&:hover .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 
-	&:focus {
+	&:focus .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
+
+.edit-site-global-styles-icon-with-current-color {
+	fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+}

package/src/components/header/document-actions/index.js

@@ -53,21 +53,23 @@ function useSecondaryText() {
 }
 
 /**
- * @param {Object}   props             Props for the DocumentActions component.
- * @param {string}   props.entityTitle The title to display.
- * @param {string}   props.entityLabel A label to use for entity-related options.
- *                                     E.g. "template" would be used for "edit
- *                                     template" and "show template details".
- * @param {boolean}  props.isLoaded    Whether the data is available.
- * @param {Function} props.children    React component to use for the
- *                                     information dropdown area. Should be a
- *                                     function which accepts dropdown props.
+ * @param {Object}   props                Props for the DocumentActions component.
+ * @param {string}   props.entityTitle    The title to display.
+ * @param {string}   props.entityLabel    A label to use for entity-related options.
+ *                                        E.g. "template" would be used for "edit
+ *                                        template" and "show template details".
+ * @param {boolean}  props.isLoaded       Whether the data is available.
+ * @param {Function} props.children       React component to use for the
+ *                                        information dropdown area. Should be a
+ *                                        function which accepts dropdown props.
+ * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.
  */
 export default function DocumentActions( {
 	entityTitle,
 	entityLabel,
 	isLoaded,
 	children: dropdownContent,
+	showIconLabels,
 } ) {
 	const { label } = useSecondaryText();
 
@@ -144,7 +146,9 @@ export default function DocumentActions( {
 									__( 'Show %s details' ),
 									entityLabel
 								) }
-							/>
+							>
+								{ showIconLabels && __( 'Details' ) }
+							</Button>
 						) }
 						contentClassName="edit-site-document-actions__info-dropdown"
 						renderContent={ dropdownContent }

package/src/components/header/index.js

@@ -34,6 +34,7 @@ const preventDefault = ( event ) => {
 export default function Header( {
 	openEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
+	showIconLabels,
 } ) {
 	const inserterButton = useRef();
 	const {
@@ -122,7 +123,10 @@ export default function Header( {
 							'Toggle block inserter',
 							'Generic label for block inserter button'
 						) }
-					/>
+					>
+						{ showIconLabels &&
+							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
+					</Button>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
@@ -155,6 +159,7 @@ export default function Header( {
 							: 'template'
 					}
 					isLoaded={ isLoaded }
+					showIconLabels={ showIconLabels }
 				>
 					{ ( { onClose } ) => (
 						<TemplateDetails

package/src/components/header/more-menu/index.js

@@ -14,6 +14,7 @@ import { PreferenceToggleMenuItem } from '@wordpress/preferences';
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
+import EditSitePreferencesModal from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
@@ -26,6 +27,11 @@ export default function MoreMenu() {
 		false
 	);
 
+	const [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
 	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 
 	return (
@@ -99,6 +105,11 @@ export default function MoreMenu() {
 								fillProps={ { onClose } }
 							/>
 						</MenuGroup>
+						<MenuGroup>
+							<MenuItem onClick={ togglePreferencesModal }>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
 					</>
 				) }
 			</MoreMenuDropdown>
@@ -106,6 +117,10 @@ export default function MoreMenu() {
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }
 			/>
+			<EditSitePreferencesModal
+				isModalActive={ isPreferencesModalActive }
+				toggleModal={ togglePreferencesModal }
+			/>
 		</>
 	);
 }

package/src/components/header/more-menu/site-export.js

@@ -23,8 +23,17 @@ export default function SiteExport() {
 				parse: false,
 			} );
 			const blob = await response.blob();
+			const contentDisposition = response.headers.get(
+				'content-disposition'
+			);
+			const contentDispositionMatches = contentDisposition.match(
+				/=(.+)\.zip/
+			);
+			const fileName = contentDispositionMatches[ 1 ]
+				? contentDispositionMatches[ 1 ]
+				: 'edit-site-export';
 
-			downloadjs( blob, 'edit-site-export.zip', 'application/zip' );
+			downloadjs( blob, fileName + '.zip', 'application/zip' );
 		} catch ( errorResponse ) {
 			let error = {};
 			try {
@@ -44,7 +53,9 @@ export default function SiteExport() {
 			role="menuitem"
 			icon={ download }
 			onClick={ handleExport }
-			info={ __( 'Download your templates and styles as a theme.' ) }
+			info={ __(
+				'Download your theme with updated templates and styles.'
+			) }
 		>
 			{ _x( 'Export', 'site exporter menu item' ) }
 		</MenuItem>

package/src/components/header/plugin-more-menu-item/index.js

@@ -3,6 +3,7 @@
  */
 import { ActionItem } from '@wordpress/interface';
 import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
 import { withPluginContext } from '@wordpress/plugins';
 
 /**
@@ -64,6 +65,7 @@ import { withPluginContext } from '@wordpress/plugins';
 export default compose(
 	withPluginContext( ( context, ownProps ) => {
 		return {
+			as: ownProps.as ?? MenuItem,
 			icon: ownProps.icon || context.icon,
 			name: 'core/edit-site/plugin-more-menu',
 		};

package/src/components/header/style.scss

@@ -163,3 +163,48 @@ body.is-navigation-sidebar-open {
 		}
 	}
 }
+
+// Button text label styles
+
+.show-icon-labels .edit-site-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
+	.edit-site-save-button__button {
+		padding-left: 6px;
+		padding-right: 6px;
+		margin-right: $grid-unit-05;
+	}
+	.block-editor-post-preview__button-toggle {
+		margin-right: $grid-unit-05;
+	}
+	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
+	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+		&::after {
+			content: none;
+		}
+
+		height: 36px;
+		padding: 0 6px;
+	}
+}

package/src/components/list/actions/rename-menu-item.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	Button,
 	Flex,
@@ -19,7 +19,6 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { getLastEntitySaveError } = useSelect( coreStore );
 	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
 		coreStore
 	);
@@ -48,19 +47,10 @@ export default function RenameMenuItem( { template, onClose } ) {
 			await saveEditedEntityRecord(
 				'postType',
 				template.type,
-				template.id
+				template.id,
+				{ throwOnError: true }
 			);
 
-			const lastError = getLastEntitySaveError(
-				'postType',
-				template.type,
-				template.id
-			);
-
-			if ( lastError ) {
-				throw lastError;
-			}
-
 			createSuccessNotice( __( 'Entity renamed.' ), {
 				type: 'snackbar',
 			} );

package/src/components/preferences-modal/enable-feature.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export default function EnableFeature( props ) {
+	const { featureName, ...remainingProps } = props;
+	const isChecked = useSelect(
+		( select ) =>
+			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
+		[ featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => toggle( 'core/edit-site', featureName );
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}

package/src/components/preferences-modal/index.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+} from '@wordpress/interface';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import EnableFeature from './enable-feature';
+
+export default function EditSitePreferencesModal( {
+	isModalActive,
+	toggleModal,
+} ) {
+	const sections = useMemo( () => [
+		{
+			name: 'general',
+			tabLabel: __( 'General' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Appearance' ) }
+					description={ __(
+						'Customize options related to the block editor interface and editing flow.'
+					) }
+				>
+					<EnableFeature
+						featureName="focusMode"
+						help={ __(
+							'Highlights the current block and fades other content.'
+						) }
+						label={ __( 'Spotlight mode' ) }
+					/>
+					<EnableFeature
+						featureName="showIconLabels"
+						label={ __( 'Show button text labels' ) }
+						help={ __( 'Show text instead of icons on buttons' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+		{
+			name: 'blocks',
+			tabLabel: __( 'Blocks' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Block interactions' ) }
+					description={ __(
+						'Customize how you interact with blocks in the block library and editing canvas.'
+					) }
+				>
+					<EnableFeature
+						featureName="keepCaretInsideBlock"
+						help={ __(
+							'Aids screen readers by stopping text caret from leaving blocks.'
+						) }
+						label={ __( 'Contain text cursor inside block' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+	] );
+	if ( ! isModalActive ) {
+		return null;
+	}
+	return (
+		<PreferencesModal closeModal={ toggleModal }>
+			<PreferencesModalTabs sections={ sections } />
+		</PreferencesModal>
+	);
+}

package/src/components/sidebar/index.js

@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -57,6 +58,16 @@ export function SidebarComplementaryAreaFills() {
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
+
+	// Conditionally include NavMenu sidebar in Plugin only.
+	// Optimise for dead code elimination.
+	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
+	let MaybeNavigationMenuSidebar = 'Fragment';
+
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
+	}
+
 	return (
 		<>
 			<DefaultSidebar
@@ -77,6 +88,7 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			<GlobalStylesSidebar />
+			<MaybeNavigationMenuSidebar />
 		</>
 	);
 }

package/src/components/sidebar/navigation-menu-sidebar/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, Flex } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { navigation } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DefaultSidebar from '../default-sidebar';
+import NavigationInspector from './navigation-inspector';
+
+export default function NavigationMenuSidebar() {
+	return (
+		<DefaultSidebar
+			className="edit-site-navigation-menu-sidebar"
+			identifier="edit-site/navigation-menu"
+			title={ __( 'Navigation Menus' ) }
+			icon={ navigation }
+			closeLabel={ __( 'Close navigation menu sidebar' ) }
+			panelClassName="edit-site-navigation-menu-sidebar__panel"
+			header={
+				<Flex>
+					<FlexBlock>
+						<strong>{ __( 'Navigation Menus' ) }</strong>
+					</FlexBlock>
+				</Flex>
+			}
+		>
+			<NavigationInspector />
+		</DefaultSidebar>
+	);
+}

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

@@ -0,0 +1,224 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import {
+	store as blockEditorStore,
+	BlockEditorProvider,
+} from '@wordpress/block-editor';
+import { speak } from '@wordpress/a11y';
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenu from './navigation-menu';
+
+const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
+
+export default function NavigationInspector() {
+	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 navMenuListId = useInstanceId(
+		NavigationMenu,
+		'edit-site-navigation-inspector-menu'
+	);
+
+	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 ] );
+
+	let options = [];
+	if ( navigationMenus ) {
+		options = navigationMenus.map( ( { id, title } ) => ( {
+			value: id,
+			label: title.rendered,
+		} ) );
+	}
+
+	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 hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
+
+	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" />
+			) }
+			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
+				<SelectControl
+					aria-controls={
+						// aria-controls should only apply when referenced element is in DOM
+						hasLoadedInnerBlocks ? navMenuListId : undefined
+					}
+					value={ currentMenuId || defaultNavigationMenuId }
+					options={ options }
+					onChange={ ( newMenuId ) =>
+						setCurrentMenuId( Number( newMenuId ) )
+					}
+				/>
+			) }
+			{ 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
+						id={ navMenuListId }
+						innerBlocks={ publishedInnerBlocks }
+					/>
+				</BlockEditorProvider>
+			) }
+
+			{ ! hasInnerBlocks && ! isLoading && (
+				<p className="edit-site-navigation-inspector__empty-msg">
+					{ __( 'Navigation Menu is empty.' ) }
+				</p>
+			) }
+		</div>
+	);
+}