@wordpress/edit-site 4.18.0 → 5.0.0

package/src/components/editor/index.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Popover, Button, Notice } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
 	BlockBreadcrumb,
@@ -21,34 +22,24 @@ import {
 	EntitiesSavedStates,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import {
-	ShortcutProvider,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import Header from '../header-edit-mode';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
-import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
-import ErrorBoundary from '../error-boundary';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from './global-styles-renderer';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
 	/* translators: accessibility text for the editor settings landmark region. */
@@ -57,286 +48,229 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the navigation sidebar landmark region. */
-	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { onError } ) {
+export default function Editor() {
 	const {
+		editedPostId,
+		editedPostType,
+		editedPost,
+		context,
+		hasLoadedPost,
+		editorMode,
+		canvasMode,
+		blockEditorMode,
+		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
 		isSaveViewOpen,
-		sidebarIsOpened,
-		settings,
-		entityId,
-		templateType,
-		page,
-		template,
-		templateResolved,
-		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
-		editorMode,
 		showIconLabels,
-		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
-			isInserterOpened,
-			isListViewOpened,
-			isSaveViewOpened,
-			getSettings,
 			getEditedPostType,
 			getEditedPostId,
-			getPage,
-			isNavigationOpened,
+			getEditedPostContext,
 			getEditorMode,
+			__unstableGetCanvasMode,
+			isInserterOpened,
+			isListViewOpened,
+			isSaveViewOpened,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getActiveComplementaryArea } = select( interfaceStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
-		// The currently selected entity to display. Typically template or template part.
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
 		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
-			sidebarIsOpened: !! select(
-				interfaceStore
-			).getActiveComplementaryArea( editSiteStore.name ),
-			settings: getSettings(),
-			templateType: postType,
-			page: getPage(),
-			template: postId
+			editedPostId: postId,
+			editedPostType: postType,
+			editedPost: postId
 				? getEntityRecord( 'postType', postType, postId )
 				: null,
-			templateResolved: postId
+			context: getEditedPostContext(),
+			hasLoadedPost: postId
 				? hasFinishedResolution( 'getEntityRecord', [
 						'postType',
 						postType,
 						postId,
 				  ] )
 				: false,
-			entityId: postId,
-			isNavigationOpen: isNavigationOpened(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			canvasMode: __unstableGetCanvasMode(),
+			blockEditorMode: __unstableGetEditorMode(),
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
+			isRightSidebarOpen: getActiveComplementaryArea(
+				editSiteStore.name
+			),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
 			showIconLabels: select( preferencesStore ).get(
 				'core/edit-site',
 				'showIconLabels'
 			),
-			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+	const { setIsSaveViewOpened, setEditedPostContext } =
 		useDispatch( editSiteStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
+	const isViewMode = canvasMode === 'view';
+	const isEditMode = canvasMode === 'edit';
+	const showVisualEditor = isViewMode || editorMode === 'visual';
+	const showBlockBreakcrumb =
+		isEditMode && showVisualEditor && blockEditorMode !== 'zoom-out';
+	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
+	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
+	const secondarySidebarLabel = isListViewOpen
+		? __( 'List View' )
+		: __( 'Block Library' );
 	const blockContext = useMemo(
 		() => ( {
-			...page?.context,
+			...context,
 			queryContext: [
-				page?.context.queryContext || { page: 1 },
+				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
-					setPage( {
-						...page,
-						context: {
-							...page?.context,
-							queryContext: {
-								...page?.context.queryContext,
-								...newQueryContext,
-							},
+					setEditedPostContext( {
+						...context,
+						queryContext: {
+							...context?.queryContext,
+							...newQueryContext,
 						},
 					} ),
 			],
 		} ),
-		[ page?.context ]
+		[ context ]
 	);
-
-	useEffect( () => {
-		if ( isNavigationOpen ) {
-			document.body.classList.add( 'is-navigation-sidebar-open' );
-		} else {
-			document.body.classList.remove( 'is-navigation-sidebar-open' );
-		}
-	}, [ isNavigationOpen ] );
-
-	useEffect(
-		function openGlobalStylesOnLoad() {
-			const searchParams = new URLSearchParams( window.location.search );
-			if ( searchParams.get( 'styles' ) === 'open' ) {
-				enableComplementaryArea(
-					'core/edit-site',
-					'edit-site/global-styles'
-				);
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
-	// Don't render the Editor until the settings are set and loaded.
-	const isReady =
-		settings?.siteUrl &&
-		templateType !== undefined &&
-		entityId !== undefined;
-
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
-
-	const secondarySidebar = () => {
-		if ( editorMode === 'visual' && isInserterOpen ) {
-			return <InserterSidebar />;
-		}
-		if ( editorMode === 'visual' && isListViewOpen ) {
-			return <ListViewSidebar />;
-		}
-		return null;
-	};
+	const isReady = editedPostType !== undefined && editedPostId !== undefined;
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
+	if ( ! isReady ) {
+		return null;
+	}
+
 	return (
 		<>
-			<URLQueryController />
-			{ isReady && (
-				<ShortcutProvider>
-					<EntityProvider kind="root" type="site">
-						<EntityProvider
-							kind="postType"
-							type={ templateType }
-							id={ entityId }
-						>
-							<GlobalStylesProvider>
-								<BlockContextProvider value={ blockContext }>
-									<GlobalStylesRenderer />
-									<ErrorBoundary onError={ onError }>
-										<KeyboardShortcuts.Register />
-										<SidebarComplementaryAreaFills />
-										<InterfaceSkeleton
-											labels={ {
-												...interfaceLabels,
-												secondarySidebar:
-													secondarySidebarLabel,
-											} }
-											className={
-												showIconLabels &&
-												'show-icon-labels'
-											}
-											secondarySidebar={ secondarySidebar() }
-											sidebar={
-												sidebarIsOpened && (
-													<ComplementaryArea.Slot scope="core/edit-site" />
-												)
-											}
-											drawer={
-												<NavigationSidebar.Slot />
-											}
-											header={
-												<Header
-													showIconLabels={
-														showIconLabels
+			{ isEditMode && <WelcomeGuide /> }
+			<KeyboardShortcuts.Register />
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ editedPostType }
+					id={ editedPostId }
+				>
+					<GlobalStylesProvider>
+						<BlockContextProvider value={ blockContext }>
+							<SidebarComplementaryAreaFills />
+							<InterfaceSkeleton
+								className={
+									showIconLabels && 'show-icon-labels'
+								}
+								notices={ isEditMode && <EditorSnackbars /> }
+								content={
+									<>
+										<GlobalStylesRenderer />
+										<EditorNotices />
+										{ showVisualEditor && editedPost && (
+											<BlockEditor />
+										) }
+										{ editorMode === 'text' &&
+											editedPost && <CodeEditor /> }
+										{ hasLoadedPost && ! editedPost && (
+											<Notice
+												status="warning"
+												isDismissible={ false }
+											>
+												{ __(
+													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+												) }
+											</Notice>
+										) }
+										{ isEditMode && <KeyboardShortcuts /> }
+									</>
+								}
+								secondarySidebar={
+									isEditMode &&
+									( ( shouldShowInserter && (
+										<InserterSidebar />
+									) ) ||
+										( shouldShowListView && (
+											<ListViewSidebar />
+										) ) )
+								}
+								sidebar={
+									isEditMode &&
+									isRightSidebarOpen && (
+										<ComplementaryArea.Slot scope="core/edit-site" />
+									)
+								}
+								actions={
+									isEditMode && (
+										<>
+											{ isSaveViewOpen ? (
+												<EntitiesSavedStates
+													close={ () =>
+														setIsSaveViewOpened(
+															false
+														)
 													}
 												/>
-											}
-											notices={ <EditorSnackbars /> }
-											content={
-												<>
-													<EditorNotices />
-													{ editorMode === 'visual' &&
-														template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-													{ editorMode === 'text' &&
-														template && (
-															<CodeEditor />
-														) }
-													{ templateResolved &&
-														! template &&
-														settings?.siteUrl &&
-														entityId && (
-															<Notice
-																status="warning"
-																isDismissible={
-																	false
-																}
-															>
-																{ __(
-																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																) }
-															</Notice>
-														) }
-													<KeyboardShortcuts />
-												</>
-											}
-											actions={
-												<>
-													{ isSaveViewOpen ? (
-														<EntitiesSavedStates
-															close={ () =>
-																setIsSaveViewOpened(
-																	false
-																)
-															}
-														/>
-													) : (
-														<div className="edit-site-editor__toggle-save-panel">
-															<Button
-																variant="secondary"
-																className="edit-site-editor__toggle-save-panel-button"
-																onClick={ () =>
-																	setIsSaveViewOpened(
-																		true
-																	)
-																}
-																aria-expanded={
-																	false
-																}
-															>
-																{ __(
-																	'Open save panel'
-																) }
-															</Button>
-														</div>
-													) }
-												</>
-											}
-											footer={
-												blockEditorMode !==
-												'zoom-out' ? (
-													<BlockBreadcrumb
-														rootLabelText={ __(
-															'Template'
+											) : (
+												<div className="edit-site-editor__toggle-save-panel">
+													<Button
+														variant="secondary"
+														className="edit-site-editor__toggle-save-panel-button"
+														onClick={ () =>
+															setIsSaveViewOpened(
+																true
+															)
+														}
+														aria-expanded={ false }
+													>
+														{ __(
+															'Open save panel'
 														) }
-													/>
-												) : undefined
-											}
-											shortcuts={ {
-												previous: previousShortcut,
-												next: nextShortcut,
-											} }
+													</Button>
+												</div>
+											) }
+										</>
+									)
+								}
+								footer={
+									showBlockBreakcrumb && (
+										<BlockBreadcrumb
+											rootLabelText={ __( 'Template' ) }
 										/>
-										<WelcomeGuide />
-										<Popover.Slot />
-									</ErrorBoundary>
-								</BlockContextProvider>
-							</GlobalStylesProvider>
-						</EntityProvider>
-					</EntityProvider>
-				</ShortcutProvider>
-			) }
+									)
+								}
+								shortcuts={ {
+									previous: previousShortcut,
+									next: nextShortcut,
+								} }
+								labels={ {
+									...interfaceLabels,
+									secondarySidebar: secondarySidebarLabel,
+								} }
+							/>
+						</BlockContextProvider>
+					</GlobalStylesProvider>
+				</EntityProvider>
+			</EntityProvider>
 		</>
 	);
 }
-export default Editor;

package/src/components/editor/style.scss

@@ -1,22 +1,8 @@
-html #wpadminbar {
-	display: none;
-}
-
-html.wp-toolbar {
-	padding-top: 0;
-}
-
 .edit-site-editor__toggle-save-panel {
-	z-index: z-index(".edit-site-editor__toggle-save-panel");
-	position: fixed !important; // Need to override the default relative positioning
-	top: -9999em;
-	bottom: auto;
-	left: auto;
-	right: 0;
+	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
 	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positioning
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
@@ -28,20 +14,6 @@ html.wp-toolbar {
 	}
 }
 
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	overflow: hidden;
-
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-		background-color: $white;
-	}
-}
-
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
 	position: fixed;

package/src/components/global-styles/block-preview-panel.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
+import { useResizeObserver } from '@wordpress/compose';
+
+const BlockPreviewPanel = ( { name } ) => {
+	const blockExample = getBlockType( name )?.example;
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
+	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+
+	return ! blockExample ? null : (
+		<div className="edit-site-global-styles__block-preview-panel">
+			{ containerResizeListener }
+
+			<BlockPreview
+				viewportWidth={ viewportWidth }
+				__experimentalMinHeight={ containerHeight }
+				blocks={ getBlockFromExample( name, blockExample ) }
+			/>
+		</div>
+	);
+};
+
+export default BlockPreviewPanel;

package/src/components/global-styles/context-menu.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, border, color, layout } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,7 +19,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasLayoutPanel = hasDimensionsPanel;
 
 	return (
 		<ItemGroup>
@@ -41,6 +41,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ hasBorderPanel && (
+				<NavigationButtonAsItem
+					icon={ border }
+					path={ parentMenu + '/border' }
+					aria-label={ __( 'Border styles' ) }
+				>
+					{ __( 'Border' ) }
+				</NavigationButtonAsItem>
+			) }
 			{ hasLayoutPanel && (
 				<NavigationButtonAsItem
 					icon={ layout }

package/src/components/global-styles/custom-css.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl, Panel, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+function CustomCSSControl() {
+	const [ customCSS, setCustomCSS ] = useStyle( 'css' );
+	const [ themeCSS ] = useStyle( 'css', null, 'base' );
+	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
+
+	// If there is custom css from theme.json show it in the edit box
+	// so the user can selectively overwrite it, rather than have the user CSS
+	// completely overwrite the theme CSS by default.
+	const themeCustomCSS =
+		! customCSS && themeCSS
+			? `/* ${ __(
+					'Theme Custom CSS start'
+			  ) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
+			: undefined;
+
+	function handleOnChange( value ) {
+		// If there is theme custom CSS, but the user clears the input box then save the
+		// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
+		if ( themeCSS && value === '' ) {
+			setCustomCSS( ignoreThemeCustomCSS );
+			return;
+		}
+		setCustomCSS( value );
+	}
+
+	const originalThemeCustomCSS =
+		themeCSS && customCSS && themeCustomCSS !== customCSS
+			? themeCSS
+			: undefined;
+
+	return (
+		<>
+			<TextareaControl
+				value={
+					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
+					themeCustomCSS
+				}
+				onChange={ ( value ) => handleOnChange( value ) }
+				rows={ 15 }
+				className="edit-site-global-styles__custom-css-input"
+				spellCheck={ false }
+				help={ __(
+					"Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template."
+				) }
+			/>
+			{ originalThemeCustomCSS && (
+				<Panel>
+					<PanelBody
+						title={ __( 'Original Theme Custom CSS' ) }
+						initialOpen={ false }
+					>
+						<pre className="edit-site-global-styles__custom-css-theme-css">
+							{ originalThemeCustomCSS }
+						</pre>
+					</PanelBody>
+				</Panel>
+			) }
+		</>
+	);
+}
+
+export default CustomCSSControl;