@wordpress/edit-site 4.1.1 → 4.3.1

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>
+	);
+}

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

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+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',
+	],
+};
+
+export default function NavigationMenu( { innerBlocks, id } ) {
+	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+
+	//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 ] );
+	return (
+		<>
+			<ListView
+				id={ id }
+				showNestedBlocks
+				expandNested={ false }
+				__experimentalFeatures
+				__experimentalPersistentListViewFeatures
+			/>
+		</>
+	);
+}

package/src/components/sidebar/navigation-menu-sidebar/style.scss

@@ -0,0 +1,42 @@
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.edit-site-navigation-inspector {
+	padding: $grid-unit-20;
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		align-items: flex-start;
+		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__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%;
+	}
+}

package/src/components/sidebar/style.scss

@@ -80,7 +80,7 @@
 	padding: 0 $grid-unit-10;
 	height: $grid-unit-30;
 	border-radius: $radius-block-ui;
-	background-color: $black;
+	background-color: $gray-900;
 	color: $white;
 	align-items: center;
 	font-size: $helptext-font-size;

package/src/components/template-part-converter/convert-to-regular.js

@@ -13,6 +13,15 @@ export default function ConvertToRegularBlocks( { clientId } ) {
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
+	if ( ! canRemove ) {
+		return null;
+	}
+
 	return (
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (

package/src/index.js

@@ -61,6 +61,7 @@ export function reinitializeEditor( target, settings ) {
 			editorMode: 'visual',
 			fixedToolbar: false,
 			focusMode: false,
+			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
 		} );

package/src/store/actions.js

@@ -333,11 +333,11 @@ export const revertTemplate = (
 	}
 
 	try {
-		const templateEntity = registry
+		const templateEntityConfig = registry
 			.select( coreStore )
-			.getEntity( 'postType', template.type );
+			.getEntityConfig( 'postType', template.type );
 
-		if ( ! templateEntity ) {
+		if ( ! templateEntityConfig ) {
 			registry
 				.dispatch( noticesStore )
 				.createErrorNotice(
@@ -350,7 +350,7 @@ export const revertTemplate = (
 		}
 
 		const fileTemplatePath = addQueryArgs(
-			`${ templateEntity.baseURL }/${ template.id }`,
+			`${ templateEntityConfig.baseURL }/${ template.id }`,
 			{ context: 'edit', source: 'theme' }
 		);