diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx index 6abbb9a57f..1cc6151c6f 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx +++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx @@ -1,10 +1,5 @@ -import { - // @ts-expect-error No types for this exist yet. - __experimentalUseResizeCanvas as useResizeCanvas, - BlockSelectionClearer, -} from '@wordpress/block-editor'; - -import { UnsavedChangesWarning, store as editorStore } from '@wordpress/editor'; +import { BlockSelectionClearer } from '@wordpress/block-editor'; +import { UnsavedChangesWarning } 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() { } }} > -
+
{ - const { deviceType } = select(storeName).getPreviewState(); - return deviceType; - }, []); + const previewDeviceType = useSelect( + (select) => select(storeName).getDeviceType(), + [], + ); const { changePreviewDeviceType, togglePreviewModal } = useDispatch(storeName); diff --git a/mailpoet/assets/js/src/email-editor/engine/store/actions.ts b/mailpoet/assets/js/src/email-editor/engine/store/actions.ts index 4c543890b9..672cab0dc7 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/actions.ts +++ b/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) { - return { - type: 'CHANGE_PREVIEW_STATE', - state: { deviceType }, - } as const; -} +export const changePreviewDeviceType = + (deviceType: string) => + ({ registry }) => + void registry.dispatch(editorStore).setDeviceType(deviceType); export function togglePreviewModal(isOpen: boolean) { return { diff --git a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts b/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts index 97dff1847e..8961812cfb 100644 --- a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts +++ b/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; }