Let the visual editor component handle preview on devices

[MAILPOET-6105]

mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx

@@ -1,10 +1,5 @@
-import {
+import { BlockSelectionClearer } from '@wordpress/block-editor';
-  // @ts-expect-error No types for this exist yet.
+import { UnsavedChangesWarning } from '@wordpress/editor';
-  __experimentalUseResizeCanvas as useResizeCanvas,
-  BlockSelectionClearer,
-} from '@wordpress/block-editor';
-
-import { UnsavedChangesWarning, store as editorStore } from '@wordpress/editor';
 import { uploadMedia } from '@wordpress/media-utils';
 import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -13,6 +8,7 @@ import {
   FullscreenMode,
   InterfaceSkeleton,
 } from '@wordpress/interface';
+import { useRef } from '@wordpress/element';
 
 import './index.scss';
 import { store as coreStore } from '@wordpress/core-data';
@@ -26,7 +22,6 @@ import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar';
 import { EditorNotices, SentEmailNotice } from '../notices';
 import { StylesSidebar } from '../styles-sidebar';
 import { VisualEditor } from './visual-editor/visual-editor';
-import { useRef } from '@wordpress/element';
 
 import { TemplateSelection } from '../template-select';
 
@@ -42,7 +37,6 @@ export function Layout() {
     hasFixedToolbar,
     focusMode,
     styles,
-    isEditingTemplate,
   } = useSelect(
     (select) => ({
       isFullscreenActive: select(storeName).isFeatureActive('fullscreenMode'),
@@ -50,13 +44,11 @@ export function Layout() {
       isInserterSidebarOpened: select(storeName).isInserterSidebarOpened(),
       isListviewSidebarOpened: select(storeName).isListviewSidebarOpened(),
       initialSettings: select(storeName).getInitialEditorSettings(),
-      previewDeviceType: select(storeName).getPreviewState().deviceType,
+      previewDeviceType: select(storeName).getDeviceType(),
       canUserEditMedia: select(coreStore).canUser('create', 'media'),
       hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
       focusMode: select(storeName).isFeatureActive('focusMode'),
       styles: select(storeName).getStyles(),
-      isEditingTemplate:
-        select(editorStore).getCurrentPostType() === 'wp_template',
     }),
     [],
   );
@@ -70,12 +62,6 @@ export function Layout() {
 
   const contentRef = useRef(null);
 
-  const contentWrapperStyles = useResizeCanvas(previewDeviceType);
-
-  if (isEditingTemplate) {
-    contentWrapperStyles.height = '100%';
-  }
-
   // Styles for the canvas. Based on template-canvas.php, this equates to the body element.
   const canvasStyles = {
     background:
@@ -117,13 +103,7 @@ export function Layout() {
                 }
               }}
             >
-              <div
+              <div className="visual-editor__email_content_wrapper">
-                className={classnames('visual-editor__email_content_wrapper', {
-                  'is-mobile-preview': previewDeviceType === 'Mobile',
-                  'is-desktop-preview': previewDeviceType === 'Desktop',
-                })}
-                style={contentWrapperStyles}
-              >
                 <VisualEditor
                   disableIframe={false}
                   styles={[...settings.styles, ...emailCss]}

mailpoet/assets/js/src/email-editor/engine/components/preview/preview-dropdown.tsx

@@ -18,10 +18,10 @@ export function PreviewDropdown() {
     'mailpoet_data',
   );
 
-  const previewDeviceType = useSelect((select) => {
+  const previewDeviceType = useSelect(
-    const { deviceType } = select(storeName).getPreviewState();
+    (select) => select(storeName).getDeviceType(),
-    return deviceType;
+    [],
-  }, []);
+  );
 
   const { changePreviewDeviceType, togglePreviewModal } =
     useDispatch(storeName);

mailpoet/assets/js/src/email-editor/engine/store/actions.ts

@@ -3,6 +3,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as editorStore } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
 import { storeName, mainSidebarEmailTab } from './constants';
@@ -25,12 +26,10 @@ export function toggleListviewSidebar() {
   } as const;
 }
 
-export function changePreviewDeviceType(deviceType: string) {
+export const changePreviewDeviceType =
-  return {
+  (deviceType: string) =>
-    type: 'CHANGE_PREVIEW_STATE',
+  ({ registry }) =>
-    state: { deviceType },
+    void registry.dispatch(editorStore).setDeviceType(deviceType);
-  } as const;
-}
 
 export function togglePreviewModal(isOpen: boolean) {
   return {

mailpoet/assets/js/src/email-editor/engine/store/selectors.ts

@@ -240,6 +240,12 @@ export function getPreviewState(state: State): State['preview'] {
   return state.preview;
 }
 
+export const getDeviceType = createRegistrySelector(
+  (select) => () =>
+    // @ts-expect-error getDeviceType is missing in types.
+    select(editorStore).getDeviceType() as string,
+);
+
 export function getStyles(state: State): State['theme']['styles'] {
   return state.theme.styles;
 }