@wordpress/edit-site 4.0.1 → 4.1.0-next.e230fbab09.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: 20;
+  z-index: 91;
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -447,6 +447,95 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   max-height: 24px;
 }
 
+@media (min-width: 600px) {
+  .interface-preferences-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .interface-preferences-modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .interface-preferences-modal {
+    height: 70%;
+  }
+}
+@media (max-width: 781px) {
+  .interface-preferences-modal .components-modal__content {
+    padding: 0;
+  }
+  .interface-preferences-modal .components-modal__content::before {
+    content: none;
+  }
+}
+
+.interface-preferences__tabs .components-tab-panel__tabs {
+  position: absolute;
+  top: 84px;
+  left: 16px;
+  width: 160px;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
+  border-radius: 2px;
+  font-weight: 400;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
+  background: #f0f0f0;
+  box-shadow: none;
+  font-weight: 500;
+}
+.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.interface-preferences__tabs .components-tab-panel__tab-content {
+  padding-left: 24px;
+  margin-left: 160px;
+}
+
+@media (max-width: 781px) {
+  .interface-preferences__provider {
+    height: 100%;
+  }
+}
+.interface-preferences-modal__section {
+  margin: 0 0 2.5rem 0;
+}
+.interface-preferences-modal__section:last-child {
+  margin: 0;
+}
+
+.interface-preferences-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.interface-preferences-modal__section-description {
+  margin: -8px 0 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
+.interface-preferences-modal__option .components-base-control .components-base-control__field {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0;
+}
+.interface-preferences-modal__option .components-base-control .components-base-control__field > label {
+  flex-grow: 1;
+  padding: 0.6rem 0 0.6rem 10px;
+}
+.interface-preferences-modal__option .components-base-control__help {
+  margin: -8px 0 8px 58px;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
 .edit-site-block-editor__editor-styles-wrapper .components-button {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
@@ -916,33 +1005,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   min-width: 240px;
 }
 
-.edit-site-more-menu {
-  margin-left: -4px;
-}
-.edit-site-more-menu .components-button {
-  width: auto;
-  padding: 0 2px;
-}
-@media (min-width: 600px) {
-  .edit-site-more-menu {
-    margin-left: 4px;
-  }
-  .edit-site-more-menu .components-button {
-    padding: 0 4px;
-  }
-}
-
-.edit-site-more-menu__content .components-popover__content {
-  min-width: 260px;
-}
-.edit-site-more-menu__content .components-popover__content .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.components-popover.edit-site-more-menu__content {
-  z-index: 99998;
-}
-
 .edit-site-navigation-toggle {
   align-items: center;
   background: #1e1e1e;
@@ -954,7 +1016,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   width: 60px;
 }
 
-.edit-site-navigation-toggle__button {
+.edit-site-navigation-toggle__button.components-button {
   align-items: center;
   background: #1e1e1e;
   border-radius: 0;
@@ -963,17 +1025,15 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   width: 60px;
   z-index: 1;
   margin-bottom: -1px;
-}
-.edit-site-navigation-toggle__button.has-icon {
   min-width: 60px;
 }
-.edit-site-navigation-toggle__button.has-icon:hover, .edit-site-navigation-toggle__button.has-icon:active {
+.edit-site-navigation-toggle__button.components-button:hover, .edit-site-navigation-toggle__button.components-button:active {
   color: #fff;
 }
-.edit-site-navigation-toggle__button.has-icon:focus {
+.edit-site-navigation-toggle__button.components-button:focus {
   box-shadow: none;
 }
-.edit-site-navigation-toggle__button.has-icon::before {
+.edit-site-navigation-toggle__button.components-button::before {
   transition: box-shadow 0.1s ease;
   content: "";
   display: block;
@@ -986,18 +1046,21 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-navigation-toggle__button.has-icon::before {
+  .edit-site-navigation-toggle__button.components-button::before {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-navigation-toggle__button.has-icon:hover::before {
+.edit-site-navigation-toggle__button.components-button:hover::before {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575;
 }
-.edit-site-navigation-toggle__button.has-icon:focus::before {
+.edit-site-navigation-toggle__button.components-button.has-icon:hover::before {
+  box-shadow: none;
+}
+.edit-site-navigation-toggle__button.components-button:focus::before {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.edit-site-navigation-toggle__button .edit-site-navigation-toggle__site-icon {
+.edit-site-navigation-toggle__button.components-button .edit-site-navigation-toggle__site-icon {
   width: 36px;
   height: 36px;
   border-radius: 2px;
@@ -1383,7 +1446,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-global-styles-sidebar {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  min-height: 100%;
 }
 .edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.0.1",
+	"version": "4.1.0-next.e230fbab09.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/api-fetch": "^6.0.1",
-		"@wordpress/block-editor": "^8.1.2",
-		"@wordpress/block-library": "^7.0.1",
-		"@wordpress/blocks": "^11.2.1",
-		"@wordpress/components": "^19.4.1",
-		"@wordpress/compose": "^5.1.1",
-		"@wordpress/core-data": "^4.1.1",
-		"@wordpress/data": "^6.2.1",
-		"@wordpress/data-controls": "^2.3.1",
-		"@wordpress/editor": "^12.2.1",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/hooks": "^3.3.1",
-		"@wordpress/html-entities": "^3.3.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.0",
-		"@wordpress/interface": "^4.2.2",
-		"@wordpress/keyboard-shortcuts": "^3.1.1",
-		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/media-utils": "^3.1.1",
-		"@wordpress/notices": "^3.3.1",
-		"@wordpress/plugins": "^4.1.2",
-		"@wordpress/reusable-blocks": "^3.1.2",
-		"@wordpress/url": "^3.4.1",
-		"@wordpress/viewport": "^4.1.1",
+		"@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",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -59,8 +61,12 @@
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^3.0.0"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
+	"gitHead": "308df03e6a96ded732f9c4e32471b1b4f8dea54a"
 }

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

@@ -35,11 +35,17 @@ export default function NewTemplatePart( { postType } ) {
 		}
 
 		try {
+			// Currently template parts only allow latin chars.
+			// Fallback slug will receive suffix by default.
+			const cleanSlug =
+				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
+				'wp-custom-part';
+
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
-					slug: kebabCase( title ),
+					slug: cleanSlug,
 					title,
 					content: '',
 					area,

package/src/components/app/index.js

@@ -3,6 +3,10 @@
  */
 import { SlotFillProvider } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { PluginArea } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -14,6 +18,20 @@ import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
 export default function EditSiteApp( { reboot } ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	return (
 		<SlotFillProvider>
 			<UnsavedChangesWarning />
@@ -29,6 +47,7 @@ export default function EditSiteApp( { reboot } ) {
 							) : (
 								<Editor onError={ reboot } />
 							) }
+							<PluginArea onError={ onPluginAreaError } />
 							{ /* Keep the instance of the sidebar to ensure focus will not be lost
 							 * when navigating to other pages. */ }
 							<NavigationSidebar

package/src/components/editor/global-styles-renderer.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -25,7 +30,8 @@ function useGlobalStylesRenderer() {
 		}
 
 		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = currentStoreSettings?.styles?.filter(
+		const nonGlobalStyles = filter(
+			currentStoreSettings.styles,
 			( style ) => ! style.isGlobalStyles
 		);
 		updateSettings( {

package/src/components/editor/index.js

@@ -16,13 +16,11 @@ import {
 	EditorSnackbars,
 	EntitiesSavedStates,
 } from '@wordpress/editor';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
 import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -111,7 +109,6 @@ function Editor( { onError } ) {
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -167,7 +164,7 @@ function Editor( { onError } ) {
 		[ enableComplementaryArea ]
 	);
 
-	// Don't render the Editor until the settings are set and loaded
+	// Don't render the Editor until the settings are set and loaded.
 	const isReady =
 		settings?.siteUrl &&
 		templateType !== undefined &&
@@ -183,18 +180,6 @@ function Editor( { onError } ) {
 		return null;
 	};
 
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
-
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
@@ -314,9 +299,6 @@ function Editor( { onError } ) {
 										/>
 										<WelcomeGuide />
 										<Popover.Slot />
-										<PluginArea
-											onError={ onPluginAreaError }
-										/>
 									</ErrorBoundary>
 								</BlockContextProvider>
 							</GlobalStylesProvider>

package/src/components/error-boundary/index.js

@@ -3,18 +3,11 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
 
-function CopyButton( { text, children } ) {
-	const ref = useCopyToClipboard( text );
-	return (
-		<Button variant="secondary" ref={ ref }>
-			{ children }
-		</Button>
-	);
-}
+/**
+ * Internal dependencies
+ */
+import ErrorBoundaryWarning from './warning';
 
 export default class ErrorBoundary extends Component {
 	constructor() {
@@ -42,23 +35,13 @@ export default class ErrorBoundary extends Component {
 		}
 
 		return (
-			<Warning
-				className="editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
-			>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				error={ error }
+				reboot={ this.reboot }
+			/>
 		);
 	}
 }

package/src/components/error-boundary/warning.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default function ErrorBoundaryWarning( {
+	message,
+	error,
+	reboot,
+	dashboardLink,
+} ) {
+	const actions = [];
+
+	if ( reboot ) {
+		actions.push(
+			<Button key="recovery" onClick={ reboot } variant="secondary">
+				{ __( 'Attempt Recovery' ) }
+			</Button>
+		);
+	}
+
+	if ( error ) {
+		actions.push(
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>
+		);
+	}
+
+	if ( dashboardLink ) {
+		actions.push(
+			<Button
+				key="back-to-dashboard"
+				variant="secondary"
+				href={ dashboardLink }
+			>
+				{ __( 'Back to dashboard' ) }
+			</Button>
+		);
+	}
+
+	return (
+		<Warning className="editor-error-boundary" actions={ actions }>
+			{ message }
+		</Warning>
+	);
+}

package/src/components/global-styles/navigation-button.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalUseNavigator as useNavigator,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -25,32 +26,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( { path, ...props } ) {
-	const { goTo } = useNavigator();
-
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<GenericNavigationButton
-			onClick={ () =>
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...buttonProps }
-		/>
-	);
+function NavigationButton( props ) {
+	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( { ...props } ) {
-	const { goBack } = useNavigator();
-	return <GenericNavigationButton onClick={ goBack } { ...props } />;
+function NavigationBackButton( props ) {
+	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButton, NavigationBackButton };

package/src/components/global-styles/screen-block-list.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { getBlockTypes } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	FlexItem,
@@ -19,6 +20,29 @@ import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
 import { NavigationButton } from './navigation-button';
 
+function useSortedBlockTypes() {
+	const blockItems = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
+	// Ensure core blocks are prioritized in the returned results,
+	// because third party blocks can be registered earlier than
+	// the core blocks (usually by using the `init` action),
+	// thus affecting the display order.
+	// We don't sort reusable blocks as they are handled differently.
+	const groupByType = ( blocks, block ) => {
+		const { core, noncore } = blocks;
+		const type = block.name.startsWith( 'core/' ) ? core : noncore;
+		type.push( block );
+		return blocks;
+	};
+	const {
+		core: coreItems,
+		noncore: nonCoreItems,
+	} = blockItems.reduce( groupByType, { core: [], noncore: [] } );
+	return [ ...coreItems, ...nonCoreItems ];
+}
+
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
 	const hasColorPanel = useHasColorPanel( block.name );
@@ -45,6 +69,7 @@ function BlockMenuItem( { block } ) {
 }
 
 function ScreenBlockList() {
+	const sortedBlockTypes = useSortedBlockTypes();
 	return (
 		<>
 			<ScreenHeader
@@ -53,7 +78,7 @@ function ScreenBlockList() {
 					'Customize the appearance of specific blocks and for the whole site.'
 				) }
 			/>
-			{ getBlockTypes().map( ( block ) => (
+			{ sortedBlockTypes.map( ( block ) => (
 				<BlockMenuItem
 					block={ block }
 					key={ 'menu-itemblock-' + block.name }

package/src/components/global-styles/screen-typography.js

@@ -99,8 +99,7 @@ function ScreenTypography( { name } ) {
 					</VStack>
 				</div>
 			) }
-
-			{ /* no typography elements support yet for blocks */ }
+			{ /* No typography elements support yet for blocks. */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);

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

@@ -7,7 +7,11 @@ import {
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 } from '@wordpress/block-editor';
-import { PanelBody, FontSizePicker } from '@wordpress/components';
+import {
+	PanelBody,
+	FontSizePicker,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -143,10 +147,13 @@ export default function TypographyPanel( { name, element } ) {
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<LineHeightControl
-					value={ lineHeight }
-					onChange={ setLineHeight }
-				/>
+				<Spacer marginBottom={ 6 }>
+					<LineHeightControl
+						__nextHasNoMarginBottom={ true }
+						value={ lineHeight }
+						onChange={ setLineHeight }
+					/>
+				</Spacer>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl