Fix style previews

WordPress · Jul 30, 2021 · 4bffa01 · 4bffa01
1 parent e4f8253
commit 4bffa01
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 41 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,
@@ -205,6 +209,12 @@ function Editor( { initialSettings } ) {
 										settings.__experimentalGlobalStylesBaseStyles
 									}
 								>
+									{
+										// Template previews need the editor styles to be available.
+										<EditorStyles
+											styles={ settings.styles }
+										/>
+									}
 									<KeyboardShortcuts.Register />
 									<SidebarComplementaryAreaFills />
 									<InterfaceSkeleton

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

diff --git a/packages/edit-site/src/components/mosaic-view/batch-delete-button.js b/packages/edit-site/src/components/mosaic-view/batch-delete-button.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { __, _n } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch, select as storeSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function MosaicViewBatchDeleteButton() {
+	const { selectedTemplates } = useSelect( ( select ) => {
+		const { getSelectedTemplates } = select( editSiteStore );
+		return {
+			selectedTemplates: getSelectedTemplates(),
+		};
+	} );
+	const { revertTemplate, toggleSelectedTemplate } = useDispatch(
+		editSiteStore
+	);
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	return (
+		<Button
+			onClick={ () => {
+				if (
+					// eslint-disable-next-line no-alert
+					window.confirm(
+						_n(
+							'Are you sure you want to delete or clear the customizations from the selected templates?',
+							'Are you sure you want to delete or clear the customizations from the selected template?',
+							selectedTemplates.length
+						)
+					)
+				) {
+					for ( const templateId of selectedTemplates ) {
+						const template = storeSelect(
+							coreStore
+						).getEntityRecord(
+							'postType',
+							'wp_template',
+							templateId
+						);
+						if ( template.has_theme_file ) {
+							revertTemplate( template );
+						} else {
+							deleteEntityRecord(
+								'postType',
+								'wp_template',
+								templateId
+							);
+						}
+						toggleSelectedTemplate( templateId );
+					}
+				}
+			} }
+			isDestructive
+			icon={ trash }
+			label={ __(
+				'Delete and remove customizations from selected templates'
+			) }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/mosaic-view/index.js b/packages/edit-site/src/components/mosaic-view/index.js
@@ -20,30 +20,34 @@ import TemplateActions from './template-actions';
 import { store as editSiteStore } from '../../store';
 
 function TemplateContainer( { templateId, composite } ) {
-	const { setTemplate, setIsNavigationPanelOpened } = useDispatch(
-		editSiteStore
-	);
+	const {
+		setTemplate,
+		setIsNavigationPanelOpened,
+		toggleSelectedTemplate,
+	} = useDispatch( editSiteStore );
 	const {
 		hasThemeFile,
 		templateAuthor,
 		templateDescription,
 		templateSlug,
 		templateSource,
 		templateTitle,
+		isSelected,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord } = select( coreStore );
+			const { isTemplateSelected } = select( editSiteStore );
 			const template = templateId
 				? getEditedEntityRecord( 'postType', 'wp_template', templateId )
 				: {};
-			console.log({ template });
 			return {
 				hasThemeFile: template.has_theme_file,
 				templateAuthor: template.author,
 				templateDescription: template.description,
 				templateSlug: template.slug,
 				templateSource: template.source,
 				templateTitle: template.title,
+				isSelected: isTemplateSelected( templateId ),
 			};
 		},
 		[ templateId ]
@@ -75,6 +79,8 @@ function TemplateContainer( { templateId, composite } ) {
 				disabled={ templateSource !== 'custom' }
 				label={ templateTitle }
 				help={ templateDescription }
+				checked={ isSelected }
+				onChange={ () => toggleSelectedTemplate( templateId ) }
 			/>
 			{ templateSource === 'custom' && (
 				<div>

diff --git a/packages/edit-site/src/components/mosaic-view/style.scss b/packages/edit-site/src/components/mosaic-view/style.scss
@@ -33,6 +33,19 @@
 	color: $gray-900;
 	grid-column: span 2;
 	overflow: hidden;
+	.components-spinner {
+		position: relative;
+		top: calc( 50% - #{ math.div( $spinner-size, 2 ) } );
+		left: calc( 50% - #{ math.div( $spinner-size, 2 ) } );
+	}
+
+	.block-editor-block-preview__container {
+		// We have a bug on packages/block-editor/src/components/block-preview/auto.js.
+		// Because of some reason contentHeight is always 0. Even thought the iframe used for the computation has an height.
+		// It seems like useResizeObserver is not rerunning on this case.
+		// This rule should be removed after the bug is addressed.
+		height: 100% !important;
+	}
 }
 
 .edit-site-mosaic-view__added-by-text {

diff --git a/packages/edit-site/src/components/mosaic-view/template-actions.js b/packages/edit-site/src/components/mosaic-view/template-actions.js
@@ -35,7 +35,9 @@ export default function TemplateActions( {
 		},
 		[ hasThemeFile, templateAuthor ]
 	);
-	const { revertTemplate } = useDispatch( editSiteStore );
+	const { revertTemplate, toggleSelectedTemplate } = useDispatch(
+		editSiteStore
+	);
 	const { deleteEntityRecord } = useDispatch( coreStore );
 	return (
 		<DropdownMenu icon={ moreVertical } label={ __( 'Template actions' ) }>
@@ -61,6 +63,7 @@ export default function TemplateActions( {
 											templateId
 										)
 									);
+									toggleSelectedTemplate( templateId );
 									onClose();
 								} }
 							>
@@ -87,6 +90,7 @@ export default function TemplateActions( {
 											'wp_template',
 											templateId
 										);
+										toggleSelectedTemplate( templateId );
 										onClose();
 									}
 								} }

diff --git a/packages/edit-site/src/components/mosaic-view/template-preview.js b/packages/edit-site/src/components/mosaic-view/template-preview.js
@@ -48,13 +48,15 @@ export default function MosaicTemplatePreview( {
 	}, [ postId, postType ] );
 
 	return ! isResolved ? (
-		<Spinner className={ className } />
+		<div className={ className }>
+			<Spinner />
+		</div>
 	) : (
 		<TemplatePreview
-			onClick={ onClick }
 			className={ className }
+			onClick={ onClick }
 			rawContent={ templateContent }
-			context={ defaultBlockContext }
+			blockContext={ defaultBlockContext }
 		/>
 	);
 }