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

package/src/components/global-styles/use-global-styles-output.js

@@ -23,6 +23,7 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -146,11 +147,11 @@ function flattenTree( input = {}, prefix, token ) {
  * @return {Array} An array of style declarations.
  */
 function getStylesDeclarations( blockStyles = {} ) {
-	return reduce(
+	const output = reduce(
 		STYLE_PROPERTY,
-		( declarations, { value, properties }, key ) => {
+		( declarations, { value, properties, useEngine }, key ) => {
 			const pathToValue = value;
-			if ( first( pathToValue ) === 'elements' ) {
+			if ( first( pathToValue ) === 'elements' || useEngine ) {
 				return declarations;
 			}
 
@@ -188,6 +189,21 @@ function getStylesDeclarations( blockStyles = {} ) {
 		},
 		[]
 	);
+
+	// The goal is to move everything to server side generated engine styles
+	// This is temporary as we absorb more and more styles into the engine.
+	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
+	extraRules.forEach( ( rule ) => {
+		if ( rule.selector !== 'self' ) {
+			throw "This style can't be added as inline style";
+		}
+		const cssProperty = rule.key.startsWith( '--' )
+			? rule.key
+			: kebabCase( rule.key );
+		output.push( `${ cssProperty }: ${ compileStyleValue( rule.value ) }` );
+	} );
+
+	return output;
 }
 
 export const getNodesWithStyles = ( tree, blockSelectors ) => {

package/src/components/global-styles/utils.js

@@ -3,7 +3,7 @@
  */
 import { get, find, isString } from 'lodash';
 
-/* Supporting data */
+/* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
 export const ROOT_BLOCK_SUPPORTS = [
@@ -103,7 +103,7 @@ function findInPresetsBy(
 						if ( presetProperty === 'slug' ) {
 							return presetObject;
 						}
-						// if there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
+						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
 						const highestPresetObjectWithSameSlug = findInPresetsBy(
 							features,
 							blockName,

package/src/components/header/index.js

@@ -91,7 +91,7 @@ export default function Header( {
 
 	const openInserter = useCallback( () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover
+			// Focusing the inserter button closes the inserter popover.
 			inserterButton.current.focus();
 		} else {
 			setIsInserterOpened( true );

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

@@ -5,34 +5,21 @@ import { __, _x } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external, moreVertical } from '@wordpress/icons';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { ActionItem } from '@wordpress/interface';
+import { external } from '@wordpress/icons';
+import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { ActionItem, MoreMenuDropdown } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
-import FeatureToggle from '../feature-toggle';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
 
-const POPOVER_PROPS = {
-	className: 'edit-site-more-menu__content',
-	position: 'bottom left',
-};
-const TOGGLE_PROPS = {
-	tooltipPosition: 'bottom',
-};
-
 export default function MoreMenu() {
 	const [ isModalActive, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
@@ -43,18 +30,13 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<DropdownMenu
-				className="edit-site-more-menu"
-				icon={ moreVertical }
-				label={ __( 'More tools & options' ) }
-				popoverProps={ POPOVER_PROPS }
-				toggleProps={ TOGGLE_PROPS }
-			>
+			<MoreMenuDropdown>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<FeatureToggle
-								feature="fixedToolbar"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="fixedToolbar"
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -66,8 +48,9 @@ export default function MoreMenu() {
 									'Top toolbar deactivated'
 								) }
 							/>
-							<FeatureToggle
-								feature="focusMode"
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
 								messageActivated={ __(
@@ -118,7 +101,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</DropdownMenu>
+			</MoreMenuDropdown>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }

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

@@ -44,7 +44,7 @@ export default function SiteExport() {
 			role="menuitem"
 			icon={ download }
 			onClick={ handleExport }
-			info={ __( 'Download your templates and template parts.' ) }
+			info={ __( 'Download your templates and styles as a theme.' ) }
 		>
 			{ _x( 'Export', 'site exporter menu item' ) }
 		</MenuItem>

package/src/components/header/more-menu/welcome-guide-menu-item.js

@@ -4,17 +4,13 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function WelcomeGuideMenuItem() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	return (
-		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
+		<MenuItem onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);

package/src/components/keyboard-shortcuts/index.js

@@ -91,7 +91,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 }
 
 function KeyboardShortcutsRegister() {
-	// Registering the shortcuts
+	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
 		registerShortcut( {

package/src/components/list/table.js

@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -17,26 +21,15 @@ import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
-	const { templates, isLoading, postType } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				getPostType,
-			} = select( coreStore );
-
-			return {
-				templates: getEntityRecords( 'postType', templateType, {
-					per_page: -1,
-				} ),
-				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
-					'postType',
-					templateType,
-					{ per_page: -1 },
-				] ),
-				postType: getPostType( templateType ),
-			};
-		},
+	const { records: templates, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		templateType,
+		{
+			per_page: -1,
+		}
+	);
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
 	);
 
@@ -98,8 +91,10 @@ export default function Table( { templateType } ) {
 										postType: template.type,
 									} }
 								>
-									{ template.title?.rendered ||
-										template.slug }
+									{ decodeEntities(
+										template.title?.rendered ||
+											template.slug
+									) }
 								</Link>
 							</Heading>
 							{ template.description }

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

@@ -40,17 +40,22 @@ function NavLink( { params, replace, ...props } ) {
 }
 
 const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreDataStore );
+	const { homeTemplate, isNavigationOpen, siteTitle } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreDataStore );
+			const { getSettings, isNavigationOpened } = select( editSiteStore );
 
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return {
-			siteTitle: siteData.name,
-			isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-		};
-	}, [] );
+			return {
+				siteTitle: siteData.name,
+				homeTemplate: getSettings().__unstableHomeTemplate,
+				isNavigationOpen: isNavigationOpened(),
+			};
+		},
+		[]
+	);
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -91,8 +96,8 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 									title={ __( 'Site' ) }
 									item={ SITE_EDITOR_KEY }
 									params={ {
-										postId: undefined,
-										postType: undefined,
+										postId: homeTemplate?.postId,
+										postType: homeTemplate?.postType,
 									} }
 								/>
 								<NavLink

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -58,9 +63,8 @@ function NavigationToggle( { icon } ) {
 
 	const effect = {
 		expand: {
-			scale: 1.7,
-			borderRadius: 0,
-			transition: { type: 'tween', duration: '0.2' },
+			scale: 1.25,
+			transition: { type: 'tween', duration: '0.3' },
 		},
 	};
 
@@ -79,6 +83,11 @@ function NavigationToggle( { icon } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
+	const classes = classnames( {
+		'edit-site-navigation-toggle__button': true,
+		'has-icon': siteIconUrl,
+	} );
+
 	return (
 		<motion.div
 			className={
@@ -88,7 +97,7 @@ function NavigationToggle( { icon } ) {
 			whileHover="expand"
 		>
 			<Button
-				className="edit-site-navigation-toggle__button has-icon"
+				className={ classes }
 				label={ __( 'Toggle navigation' ) }
 				ref={ navigationToggleRef }
 				// isPressed will add unwanted styles.

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

@@ -12,7 +12,7 @@
 	width: $header-height;
 }
 
-.edit-site-navigation-toggle__button {
+.edit-site-navigation-toggle__button.components-button {
 	align-items: center;
 	background: $gray-900;
 	border-radius: 0;
@@ -21,42 +21,43 @@
 	width: $header-height;
 	z-index: 1;
 	margin-bottom: - $border-width;
+	min-width: $header-height;
 
-	&.has-icon {
-		min-width: $header-height;
+	&:hover,
+	&:active {
+		color: $white;
+	}
 
-		&:hover,
-		&:active {
-			color: $white;
-		}
+	&:focus {
+		box-shadow: none;
+	}
 
-		&:focus {
-			box-shadow: none;
-		}
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-block-ui + $border-width + $border-width;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
+	}
 
-		&::before {
-			transition: box-shadow 0.1s ease;
-			@include reduce-motion("transition");
-			content: "";
-			display: block;
-			position: absolute;
-			top: 9px;
-			right: 9px;
-			bottom: 9px;
-			left: 9px;
-			border-radius: $radius-block-ui + $border-width + $border-width;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		}
+	// Hover color.
+	&:hover::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+	}
 
-		// Hover color.
-		&:hover::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-		}
+	&.has-icon:hover::before {
+		box-shadow: none;
+	}
 
-		// Lightened spot color focus.
-		&:focus::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
+	// Lightened spot color focus.
+	&:focus::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 
 	.edit-site-navigation-toggle__site-icon {

package/src/components/navigation-sidebar/navigation-toggle/test/index.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 import NavigationToggle from '..';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test
+	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
 	return mock;
 } );

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -25,12 +22,6 @@ import { store as editSiteStore } from '../../store';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
-	const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
-	async function selectEditorBlock( clientId ) {
-		await clearSelectedBlock();
-		selectBlock( clientId, -1 );
-	}
-
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
@@ -69,7 +60,6 @@ export default function ListViewSidebar() {
 				] ) }
 			>
 				<ListView
-					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalFeatures
 					__experimentalPersistentListViewFeatures

package/src/components/sidebar/global-styles-sidebar.js

@@ -5,17 +5,17 @@ import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, moreVertical } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
-import { store as editSiteStore } from '../../store';
 
 export default function GlobalStylesSidebar() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	return (
 		<DefaultSidebar
@@ -46,7 +46,10 @@ export default function GlobalStylesSidebar() {
 								{
 									title: __( 'Welcome Guide' ),
 									onClick: () =>
-										toggleFeature( 'welcomeGuideStyles' ),
+										toggle(
+											'core/edit-site',
+											'welcomeGuideStyles'
+										),
 								},
 							] }
 						/>

package/src/components/sidebar/style.scss

@@ -20,7 +20,7 @@
 .edit-site-global-styles-sidebar {
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	min-height: 100%;
 
 	&__panel,
 	&__navigator-provider {

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

@@ -30,11 +30,16 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
 	const onConvert = async ( { title, area } ) => {
+		// 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: serialize( blocks ),
 				area,

package/src/components/welcome-guide/editor.js

@@ -5,18 +5,22 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
-import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuideEditor() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const isActive = useSelect(
-		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		( select ) =>
+			!! select( preferencesStore ).get(
+				'core/edit-site',
+				'welcomeGuide'
+			),
 		[]
 	);
 
@@ -29,7 +33,7 @@ export default function WelcomeGuideEditor() {
 			className="edit-site-welcome-guide"
 			contentLabel={ __( 'Welcome to the site editor' ) }
 			finishButtonText={ __( 'Get Started' ) }
-			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
 			pages={ [
 				{
 					image: (

package/src/components/welcome-guide/styles.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -13,7 +14,7 @@ import WelcomeGuideImage from './image';
 import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuideStyles() {
-	const { toggleFeature } = useDispatch( editSiteStore );
+	const { toggle } = useDispatch( preferencesStore );
 
 	const { isActive, isStylesOpen } = useSelect( ( select ) => {
 		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
@@ -21,7 +22,8 @@ export default function WelcomeGuideStyles() {
 		);
 
 		return {
-			isActive: select( editSiteStore ).isFeatureActive(
+			isActive: !! select( preferencesStore ).get(
+				'core/edit-site',
 				'welcomeGuideStyles'
 			),
 			isStylesOpen: sidebar === 'edit-site/global-styles',
@@ -37,7 +39,7 @@ export default function WelcomeGuideStyles() {
 			className="edit-site-welcome-guide"
 			contentLabel={ __( 'Welcome to styles' ) }
 			finishButtonText={ __( 'Get Started' ) }
-			onFinish={ () => toggleFeature( 'welcomeGuideStyles' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
 			pages={ [
 				{
 					image: (

package/src/index.js

@@ -13,6 +13,8 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
 
@@ -23,7 +25,7 @@ import './hooks';
 import { store as editSiteStore } from './store';
 import EditSiteApp from './components/app';
 import getIsListPage from './utils/get-is-list-page';
-import redirectToHomepage from './components/routes/redirect-to-homepage';
+import ErrorBoundaryWarning from './components/error-boundary/warning';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -33,12 +35,20 @@ import redirectToHomepage from './components/routes/redirect-to-homepage';
  * @param {Element} target   DOM node in which editor is rendered.
  * @param {?Object} settings Editor settings object.
  */
-export async function reinitializeEditor( target, settings ) {
-	// The site editor relies on `postType` and `postId` params in the URL to
-	// define what's being edited. When visiting via the dashboard link, these
-	// won't be present. Do a client side redirect to the 'homepage' if that's
-	// the case.
-	await redirectToHomepage( settings.siteUrl );
+export function reinitializeEditor( target, settings ) {
+	// Display warning if editor wasn't able to resolve homepage template.
+	if ( ! settings.__unstableHomeTemplate ) {
+		render(
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor is unable to find a block template for the homepage.'
+				) }
+				dashboardLink="index.php"
+			/>,
+			target
+		);
+		return;
+	}
 
 	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
@@ -47,6 +57,14 @@ export async function reinitializeEditor( target, settings ) {
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	{
+		dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+			editorMode: 'visual',
+			fixedToolbar: false,
+			focusMode: false,
+			welcomeGuide: true,
+			welcomeGuideStyles: true,
+		} );
+
 		dispatch( editSiteStore ).updateSettings( settings );
 
 		// Keep the defaultTemplateTypes in the core/editor settings too,