diff --git a/packages/js/email-editor/src/components/sidebar/templates-panel.tsx b/packages/js/email-editor/src/components/sidebar/templates-panel.tsx index 439bdedde2..5f7ccdf6ed 100644 --- a/packages/js/email-editor/src/components/sidebar/templates-panel.tsx +++ b/packages/js/email-editor/src/components/sidebar/templates-panel.tsx @@ -1,56 +1,10 @@ import { PanelBody, Button } from '@wordpress/components'; -import { useSelect, useDispatch, dispatch, select } from '@wordpress/data'; -import { __, sprintf } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; import { store as editorStore } from '@wordpress/editor'; -import { decodeEntities } from '@wordpress/html-entities'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as noticesStore } from '@wordpress/notices'; -import apiFetch from '@wordpress/api-fetch'; -import { - parse, - // @ts-expect-error No types available for this yet. - __unstableSerializeAndClean, // eslint-disable-line -} from '@wordpress/blocks'; -import { BlockInstance } from '@wordpress/blocks/index'; -import { addQueryArgs } from '@wordpress/url'; + import { storeName } from '../../store'; -// Todo: This is not available yet. Replace when possible. -async function revertTemplate( template ) { - const templateEntityConfig = select( coreStore ).getEntityConfig( - 'postType', - template.type as string - ); - - const fileTemplatePath = addQueryArgs( - `${ templateEntityConfig.baseURL as string }/${ - template.id as string - }`, - { context: 'edit', source: 'theme' } - ); - - const fileTemplate = await apiFetch( { path: fileTemplatePath } ); - - const serializeBlocks = ( { blocks: blocksForSerialization = [] } ) => - __unstableSerializeAndClean( - blocksForSerialization - ) as BlockInstance[]; - - // @ts-expect-error template type is not defined - const blocks = parse( fileTemplate?.content?.raw as string ); - void dispatch( coreStore ).editEntityRecord( - 'postType', - template.type as string, - // @ts-expect-error template type is not defined - fileTemplate.id as string, - { - content: serializeBlocks, - blocks, - source: 'theme', - } - ); -} - export function TemplatesPanel() { const { onNavigateToEntityRecord, template, hasHistory } = useSelect( ( sel ) => { @@ -69,41 +23,7 @@ export function TemplatesPanel() { [] ); - const { saveEditedEntityRecord } = useDispatch( coreStore ); - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - async function revertAndSaveTemplate() { - try { - await revertTemplate( template ); - await saveEditedEntityRecord( - 'postType', - template.type, - template.id, - {} - ); - void createSuccessNotice( - sprintf( - /* translators: The template/part's name. */ - __( '"%s" reset.', 'mailpoet' ), - decodeEntities( template.title ) - ), - { - type: 'snackbar', - id: 'edit-site-template-reverted', - } - ); - } catch ( error ) { - void createErrorNotice( - __( - 'An error occurred while reverting the template.', - 'mailpoet' - ), - { - type: 'snackbar', - } - ); - } - } + const { revertAndSaveTemplate } = useDispatch( storeName ); return ( { - void revertAndSaveTemplate(); + void revertAndSaveTemplate( template ); } } > { __( 'Revert customizations', 'mailpoet' ) } diff --git a/packages/js/email-editor/src/store/actions.ts b/packages/js/email-editor/src/store/actions.ts index 9f581eafb4..a21c95fef5 100644 --- a/packages/js/email-editor/src/store/actions.ts +++ b/packages/js/email-editor/src/store/actions.ts @@ -1,13 +1,25 @@ import { dispatch, select } from '@wordpress/data'; import { store as interfaceStore } from '@wordpress/interface'; -import { store as coreDataStore } from '@wordpress/core-data'; +import { + store as coreStore, + 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 { __, sprintf } from '@wordpress/i18n'; import { apiFetch } from '@wordpress/data-controls'; +import wpApiFetch from '@wordpress/api-fetch'; import { storeName, mainSidebarDocumentTab } from './constants'; import { SendingPreviewStatus, State, Feature, EmailTheme } from './types'; +import { addQueryArgs } from '@wordpress/url'; +import { + // @ts-expect-error No types for __unstableSerializeAndClean + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __unstableSerializeAndClean, + parse, +} from '@wordpress/blocks'; +import { decodeEntities } from '@wordpress/html-entities'; export const toggleFeature = ( feature: Feature ) => @@ -175,3 +187,77 @@ export function* requestSendingNewsletterPreview( }; } } + +/** + * Revert template modifications to defaults + * Created based on https://github.com/WordPress/gutenberg/blob/4d225cc2ba6f09822227e7a820b8a555be7c4d48/packages/editor/src/store/private-actions.js#L241 + * @param template - Template post object + */ +export function revertAndSaveTemplate( template ) { + return async ( { registry } ) => { + try { + const templateEntityConfig = registry + .select( coreStore ) + .getEntityConfig( 'postType', template.type as string ); + + const fileTemplatePath = addQueryArgs( + `${ templateEntityConfig.baseURL as string }/${ + template.id as string + }`, + { context: 'edit', source: 'theme' } + ); + + const fileTemplate = await wpApiFetch( { path: fileTemplatePath } ); + + const serializeBlocks = ( { + blocks: blocksForSerialization = [], + } ) => __unstableSerializeAndClean( blocksForSerialization ); + + // @ts-expect-error template type is not defined + const blocks = parse( fileTemplate?.content?.raw as string ); + + await registry.dispatch( coreStore ).editEntityRecord( + 'postType', + template.type as string, + // @ts-expect-error template type is not defined + fileTemplate.id as string, + { + content: serializeBlocks, + blocks, + source: 'theme', + } + ); + await registry + .dispatch( coreStore ) + .saveEditedEntityRecord( + 'postType', + template.type, + template.id, + {} + ); + void registry.dispatch( noticesStore ).createSuccessNotice( + sprintf( + /* translators: The template/part's name. */ + __( '"%s" reset.', 'mailpoet' ), + decodeEntities( template.title ) + ), + { + type: 'snackbar', + id: 'edit-site-template-reverted', + } + ); + } catch ( error ) { + void registry + .dispatch( noticesStore ) + .createErrorNotice( + __( + 'An error occurred while reverting the template.', + 'mailpoet' + ), + { + type: 'snackbar', + } + ); + } + }; +}