Fix style previews

WordPress · Aug 13, 2021 · 74ac879 · 74ac879
1 parent b3cbb20
commit 74ac879
Show file tree

Hide file tree

Showing 12 changed files with 305 additions and 123 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -10,7 +10,11 @@ import {
 	Notice,
 } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
-import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockContextProvider,
+	BlockBreadcrumb,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 import {
 	FullscreenMode,
 	InterfaceSkeleton,
@@ -39,6 +43,7 @@ import NavigationSidebar from '../navigation-sidebar';
 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 { store as editSiteStore } from '../../store';
 import MosaicView from '../mosaic-view';
 
@@ -47,7 +52,7 @@ const interfaceLabels = {
 	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { initialSettings } ) {
+function Editor( { initialSettings, onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
@@ -205,90 +210,101 @@ function Editor( { initialSettings } ) {
 										settings.__experimentalGlobalStylesBaseStyles
 									}
 								>
-									<KeyboardShortcuts.Register />
-									<SidebarComplementaryAreaFills />
-									<InterfaceSkeleton
-										labels={ interfaceLabels }
-										drawer={ <NavigationSidebar /> }
-										secondarySidebar={ secondarySidebar() }
-										sidebar={
-											sidebarIsOpened && (
-												<ComplementaryArea.Slot scope="core/edit-site" />
-											)
-										}
-										header={
-											<Header
-												openEntitiesSavedStates={
-													openEntitiesSavedStates
-												}
-											/>
-										}
-										notices={ <EditorSnackbars /> }
-										content={
-											<>
-												<EditorNotices />
-												{ editorMode === 'visual' &&
-													template && (
-														<BlockEditor
-															setIsInserterOpen={
-																setIsInserterOpened
-															}
-														/>
+									{
+										// Template previews need the editor styles to be available.
+										<EditorStyles
+											styles={ settings.styles }
+										/>
+									}
+									<ErrorBoundary onError={ onError }>
+										<FullscreenMode isActive />
+										<UnsavedChangesWarning />
+										<KeyboardShortcuts.Register />
+										<SidebarComplementaryAreaFills />
+										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											drawer={ <NavigationSidebar /> }
+											secondarySidebar={ secondarySidebar() }
+											sidebar={
+												sidebarIsOpened && (
+													<ComplementaryArea.Slot scope="core/edit-site" />
+												)
+											}
+											header={
+												<Header
+													openEntitiesSavedStates={
+														openEntitiesSavedStates
+													}
+												/>
+											}
+											notices={ <EditorSnackbars /> }
+											content={
+												<>
+													<EditorNotices />
+													{ editorMode === 'visual' &&
+														template && (
+															<BlockEditor
+																setIsInserterOpen={
+																	setIsInserterOpened
+																}
+															/>
+														) }
+													{ editorMode === 'visual' &&
+														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>
+														) }
+													{ editorMode ===
+														'mosaic' && (
+														<MosaicView />
 													) }
-												{ editorMode === 'visual' &&
-													templateResolved &&
-													! template &&
-													settings?.siteUrl &&
-													entityId && (
-														<Notice
-															status="warning"
-															isDismissible={
-																false
+													<KeyboardShortcuts />
+												</>
+											}
+											actions={
+												<>
+													{ isEntitiesSavedStatesOpen ? (
+														<EntitiesSavedStates
+															close={
+																closeEntitiesSavedStates
 															}
-														>
-															{ __(
-																"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-															) }
-														</Notice>
+														/>
+													) : (
+														<div className="edit-site-editor__toggle-save-panel">
+															<Button
+																variant="secondary"
+																className="edit-site-editor__toggle-save-panel-button"
+																onClick={
+																	openEntitiesSavedStates
+																}
+																aria-expanded={
+																	false
+																}
+															>
+																{ __(
+																	'Open save panel'
+																) }
+															</Button>
+														</div>
 													) }
-												{ editorMode === 'mosaic' && (
-													<MosaicView />
-												) }
-												<KeyboardShortcuts />
-											</>
-										}
-										actions={
-											<>
-												{ isEntitiesSavedStatesOpen ? (
-													<EntitiesSavedStates
-														close={
-															closeEntitiesSavedStates
-														}
-													/>
-												) : (
-													<div className="edit-site-editor__toggle-save-panel">
-														<Button
-															variant="secondary"
-															className="edit-site-editor__toggle-save-panel-button"
-															onClick={
-																openEntitiesSavedStates
-															}
-															aria-expanded={
-																false
-															}
-														>
-															{ __(
-																'Open save panel'
-															) }
-														</Button>
-													</div>
-												) }
-											</>
-										}
-										footer={ <BlockBreadcrumb /> }
-									/>
-									<Popover.Slot />
-									<PluginArea />
+												</>
+											}
+											footer={ <BlockBreadcrumb /> }
+										/>
+										<Popover.Slot />
+										<PluginArea />
+									</ErrorBoundary>
 								</GlobalStylesProvider>
 							</BlockContextProvider>
 						</EntityProvider>

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { first } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -14,7 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
-import { _x, __ } from '@wordpress/i18n';
+import { _x, __, _n, sprintf } from '@wordpress/i18n';
 import { listView, plus } from '@wordpress/icons';
 import { Button, Slot } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -31,6 +32,7 @@ import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
+import MosaicViewBatchDeleteButton from '../mosaic-view/batch-delete-button';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -51,6 +53,7 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		editorMode,
+		selectedTemplates,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -59,6 +62,7 @@ export default function Header( {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
+			getSelectedTemplates,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
@@ -87,6 +91,7 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			editorMode: getEditorMode(),
+			selectedTemplates: getSelectedTemplates(),
 		};
 	}, [] );
 
@@ -113,7 +118,12 @@ export default function Header( {
 	);
 
 	return (
-		<div className="edit-site-header">
+		<div
+			className={ classnames( 'edit-site-header', {
+				'is-selecting-templates':
+					editorMode === 'mosaic' && selectedTemplates.length > 0,
+			} ) }
+		>
 			<div className="edit-site-header_start">
 				{ editorMode !== 'mosaic' && (
 					<div className="edit-site-header__toolbar">
@@ -173,9 +183,23 @@ export default function Header( {
 							isLoaded={ isLoaded }
 						/>
 					) }
-				{ editorMode === 'mosaic' && (
+				{ editorMode === 'mosaic' && selectedTemplates.length === 0 && (
 					<span>{ __( 'All templates' ) }</span>
 				) }
+
+				{ editorMode === 'mosaic' && selectedTemplates.length > 0 && (
+					<span>
+						{ sprintf(
+							/* translators: %d: number of selected templates. */
+							_n(
+								'%d Template selected',
+								'%d Templates selected',
+								selectedTemplates.length
+							),
+							selectedTemplates.length
+						) }
+					</span>
+				) }
 			</div>
 
 			<div className="edit-site-header_end">
@@ -198,32 +222,40 @@ export default function Header( {
 							<MoreMenu />
 						</>
 					) }
-					{ editorMode === 'mosaic' && (
-						<Slot name="PinnedItems/core/edit-site">
-							{ ( fills ) => {
-								const globalStylesFill =
-									fills &&
-									fills.find &&
-									fills.find( ( element ) => {
-										if ( ! element ) {
-											return false;
-										}
-										const firstElement = first( element );
-										if ( ! firstElement ) {
-											return false;
-										}
-										return (
-											firstElement.props &&
-											firstElement.props.identifier ===
-												'edit-site/global-styles'
-										);
-									} );
-								return globalStylesFill
-									? globalStylesFill
-									: null;
-							} }
-						</Slot>
-					) }
+					{ editorMode === 'mosaic' &&
+						selectedTemplates.length === 0 && (
+							<Slot name="PinnedItems/core/edit-site">
+								{ ( fills ) => {
+									const globalStylesFill =
+										fills &&
+										fills.find &&
+										fills.find( ( element ) => {
+											if ( ! element ) {
+												return false;
+											}
+											const firstElement = first(
+												element
+											);
+											if ( ! firstElement ) {
+												return false;
+											}
+											return (
+												firstElement.props &&
+												firstElement.props
+													.identifier ===
+													'edit-site/global-styles'
+											);
+										} );
+									return globalStylesFill
+										? globalStylesFill
+										: null;
+								} }
+							</Slot>
+						) }
+					{ editorMode === 'mosaic' &&
+						selectedTemplates.length > 0 && (
+							<MosaicViewBatchDeleteButton />
+						) }
 				</div>
 			</div>
 		</div>

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -35,6 +35,10 @@ $header-toolbar-min-width: 335px;
 	.edit-site-header_end {
 		justify-content: flex-end;
 	}
+	&.is-selecting-templates {
+		background-color: #1e1e1e;
+		color: $white
+	}
 }
 
 // Keeps the document title centered when the sidebar is open