@wordpress/edit-site 4.1.0-next.e230fbab09.0 → 4.2.0

package/build-style/style.css

@@ -304,7 +304,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  z-index: 91;
+  z-index: 20;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -944,6 +944,40 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   }
 }
 
+.show-icon-labels .edit-site-header .components-button.has-icon {
+  width: auto;
+}
+.show-icon-labels .edit-site-header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-header .components-button.has-icon::after {
+  content: attr(aria-label);
+}
+.show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] {
+  background-color: transparent;
+}
+.show-icon-labels .edit-site-header .is-tertiary:active {
+  box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+  background-color: transparent;
+}
+.show-icon-labels .edit-site-header .edit-site-save-button__button {
+  padding-left: 6px;
+  padding-right: 6px;
+  margin-right: 4px;
+}
+.show-icon-labels .edit-site-header .block-editor-post-preview__button-toggle {
+  margin-right: 4px;
+}
+.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+  height: 36px;
+  padding: 0 6px;
+}
+.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle::after,
+.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
+  content: none;
+}
+
 .edit-site-document-actions {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.1.0-next.e230fbab09.0",
+	"version": "4.2.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/api-fetch": "^6.1.0-next.e230fbab09.0",
-		"@wordpress/block-editor": "^8.3.0-next.e230fbab09.0",
-		"@wordpress/block-library": "^7.1.0-next.e230fbab09.0",
-		"@wordpress/blocks": "^11.3.0-next.e230fbab09.0",
-		"@wordpress/components": "^19.7.0-next.e230fbab09.0",
-		"@wordpress/compose": "^5.2.0-next.e230fbab09.0",
-		"@wordpress/core-data": "^4.2.0-next.e230fbab09.0",
-		"@wordpress/data": "^6.4.0-next.e230fbab09.0",
-		"@wordpress/deprecated": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/editor": "^12.4.0-next.e230fbab09.0",
-		"@wordpress/element": "^4.3.0-next.e230fbab09.0",
-		"@wordpress/hooks": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/html-entities": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/i18n": "^4.4.0-next.e230fbab09.0",
-		"@wordpress/icons": "^7.1.0-next.e230fbab09.0",
-		"@wordpress/interface": "^4.3.0-next.e230fbab09.0",
-		"@wordpress/keyboard-shortcuts": "^3.2.0-next.e230fbab09.0",
-		"@wordpress/keycodes": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/media-utils": "^3.2.0-next.e230fbab09.0",
-		"@wordpress/notices": "^3.4.0-next.e230fbab09.0",
-		"@wordpress/plugins": "^4.2.0-next.e230fbab09.0",
-		"@wordpress/preferences": "^1.0.0-prerelease",
-		"@wordpress/reusable-blocks": "^3.2.0-next.e230fbab09.0",
-		"@wordpress/style-engine": "^0.3.0-next.e230fbab09.0",
-		"@wordpress/url": "^3.5.0-next.e230fbab09.0",
-		"@wordpress/viewport": "^4.2.0-next.e230fbab09.0",
+		"@wordpress/a11y": "^3.5.0",
+		"@wordpress/api-fetch": "^6.2.0",
+		"@wordpress/block-editor": "^8.4.0",
+		"@wordpress/block-library": "^7.2.0",
+		"@wordpress/blocks": "^11.4.0",
+		"@wordpress/components": "^19.7.0",
+		"@wordpress/compose": "^5.3.0",
+		"@wordpress/core-data": "^4.3.0",
+		"@wordpress/data": "^6.5.0",
+		"@wordpress/deprecated": "^3.5.0",
+		"@wordpress/editor": "^12.4.0",
+		"@wordpress/element": "^4.3.0",
+		"@wordpress/hooks": "^3.5.0",
+		"@wordpress/html-entities": "^3.5.0",
+		"@wordpress/i18n": "^4.5.0",
+		"@wordpress/icons": "^8.1.0",
+		"@wordpress/interface": "^4.4.0",
+		"@wordpress/keyboard-shortcuts": "^3.3.0",
+		"@wordpress/keycodes": "^3.5.0",
+		"@wordpress/media-utils": "^3.3.0",
+		"@wordpress/notices": "^3.5.0",
+		"@wordpress/plugins": "^4.3.0",
+		"@wordpress/preferences": "^1.1.0",
+		"@wordpress/reusable-blocks": "^3.3.0",
+		"@wordpress/style-engine": "^0.4.0",
+		"@wordpress/url": "^3.6.0",
+		"@wordpress/viewport": "^4.3.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "308df03e6a96ded732f9c4e32471b1b4f8dea54a"
+	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
 }

package/src/components/add-new-template/new-template-part.js

@@ -7,7 +7,7 @@ import { kebabCase } from 'lodash';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -24,7 +24,6 @@ export default function NewTemplatePart( { postType } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { getLastEntitySaveError } = useSelect( coreStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -49,18 +48,10 @@ export default function NewTemplatePart( { postType } ) {
 					title,
 					content: '',
 					area,
-				}
+				},
+				{ throwOnError: true }
 			);
 
-			const lastEntitySaveError = getLastEntitySaveError(
-				'postType',
-				'wp_template_part',
-				templatePart.id
-			);
-			if ( lastEntitySaveError ) {
-				throw lastEntitySaveError;
-			}
-
 			setIsModalOpen( false );
 
 			// Navigate to the created template part editor.

package/src/components/add-new-template/new-template.js

@@ -15,6 +15,21 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import {
+	archive,
+	blockMeta,
+	category,
+	home,
+	list,
+	media,
+	notFound,
+	page,
+	post,
+	postAuthor,
+	postDate,
+	search,
+	tag,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -27,12 +42,33 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	'single-post',
 	'page',
+	'index',
 	'archive',
+	'author',
+	'category',
+	'date',
+	'tag',
+	'taxonomy',
 	'search',
 	'404',
-	'index',
 ];
 
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	'single-post': post,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: postAuthor,
+	taxonomy: blockMeta,
+	date: postDate,
+	tag,
+	attachment: media,
+};
+
 export default function NewTemplate( { postType } ) {
 	const history = useHistory();
 	const { templates, defaultTemplateTypes } = useSelect(
@@ -50,7 +86,6 @@ export default function NewTemplate( { postType } ) {
 	);
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { getLastEntitySaveError } = useSelect( coreStore );
 
 	async function createTemplate( { slug } ) {
 		try {
@@ -67,18 +102,10 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
-				}
+				},
+				{ throwOnError: true }
 			);
 
-			const lastEntitySaveError = getLastEntitySaveError(
-				'postType',
-				'wp_template',
-				template.id
-			);
-			if ( lastEntitySaveError ) {
-				throw lastEntitySaveError;
-			}
-
 			// Navigate to the created template editor.
 			history.push( {
 				postId: template.id,
@@ -111,6 +138,14 @@ export default function NewTemplate( { postType } ) {
 		return null;
 	}
 
+	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
+	missingTemplates.sort( ( template1, template2 ) => {
+		return (
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
+		);
+	} );
+
 	return (
 		<DropdownMenu
 			className="edit-site-new-template-dropdown"
@@ -131,6 +166,8 @@ export default function NewTemplate( { postType } ) {
 							missingTemplates,
 							( { title, description, slug } ) => (
 								<MenuItem
+									icon={ TEMPLATE_ICONS[ slug ] }
+									iconPosition="left"
 									info={ description }
 									key={ slug }
 									onClick={ () => {

package/src/components/editor/index.js

@@ -21,6 +21,7 @@ import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -61,6 +62,7 @@ function Editor( { onError } ) {
 		previousShortcut,
 		nextShortcut,
 		editorMode,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -105,6 +107,10 @@ function Editor( { onError } ) {
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -203,6 +209,10 @@ function Editor( { onError } ) {
 										<SidebarComplementaryAreaFills />
 										<InterfaceSkeleton
 											labels={ interfaceLabels }
+											className={
+												showIconLabels &&
+												'show-icon-labels'
+											}
 											secondarySidebar={ secondarySidebar() }
 											sidebar={
 												sidebarIsOpened && (
@@ -217,6 +227,9 @@ function Editor( { onError } ) {
 													openEntitiesSavedStates={
 														openEntitiesSavedStates
 													}
+													showIconLabels={
+														showIconLabels
+													}
 												/>
 											}
 											notices={ <EditorSnackbars /> }

package/src/components/global-styles/border-panel.js

@@ -4,7 +4,7 @@
 import {
 	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientControl as ColorGradientControl,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 } from '@wordpress/block-editor';
 import {
 	__experimentalToolsPanel as ToolsPanel,
@@ -17,14 +17,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import {
+	getSupportedGlobalStylesPanels,
+	useColorsPerOrigin,
+	useSetting,
+	useStyle,
+} from './hooks';
 
 const MIN_BORDER_WIDTH = 0;
 
-// Defining empty array here instead of inline avoids unnecessary re-renders of
-// color control.
-const EMPTY_ARRAY = [];
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -100,13 +101,32 @@ export default function BorderPanel( { name } ) {
 	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
+
 	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
 	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
 
+	const borderColorSettings = [
+		{
+			label: __( 'Color' ),
+			colors: useColorsPerOrigin( name ),
+			colorValue: borderColor,
+			onColorChange: handleOnChangeWithStyle( setBorderColor ),
+			clearable: false,
+		},
+	];
+
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
@@ -128,16 +148,6 @@ export default function BorderPanel( { name } ) {
 		setBorderWidth( undefined );
 	};
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
-
-		setStyle( value || undefined );
-	};
-
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
@@ -178,17 +188,13 @@ export default function BorderPanel( { name } ) {
 					onDeselect={ createResetCallback( setBorderColor ) }
 					isShownByDefault={ true }
 				>
-					<ColorGradientControl
-						label={ __( 'Color' ) }
-						colorValue={ borderColor }
-						colors={ colors }
-						gradients={ undefined }
+					<ColorGradientSettingsDropdown
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChangeWithStyle(
-							setBorderColor
-						) }
-						clearable={ false }
+						enableAlpha
+						settings={ borderColorSettings }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/dimensions-panel.js

@@ -6,7 +6,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
-	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
@@ -21,9 +20,8 @@ const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 export function useHasDimensionsPanel( name ) {
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
-	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin || hasGap;
+	return hasPadding || hasMargin;
 }
 
 function useHasPadding( name ) {
@@ -40,13 +38,6 @@ function useHasMargin( name ) {
 	return settings && supports.includes( 'margin' );
 }
 
-function useHasGap( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.blockGap', name );
-
-	return settings && supports.includes( '--wp--style--block-gap' );
-}
-
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -88,7 +79,6 @@ function splitStyleValue( value ) {
 export default function DimensionsPanel( { name } ) {
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
-	const showGapControl = useHasGap( name );
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
@@ -128,15 +118,9 @@ export default function DimensionsPanel( { name } ) {
 	const resetMarginValue = () => setMarginValues( {} );
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
-
-	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
-	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! gapValue;
-
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
-		resetGapValue();
 	};
 
 	return (
@@ -177,23 +161,6 @@ export default function DimensionsPanel( { name } ) {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ showGapControl && (
-				<ToolsPanelItem
-					hasValue={ hasGapValue }
-					label={ __( 'Block spacing' ) }
-					onDeselect={ resetGapValue }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ setGapValue }
-						units={ units }
-						value={ gapValue }
-					/>
-				</ToolsPanelItem>
-			) }
 		</ToolsPanel>
 	);
 }

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',
 		};