Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use @wordpress/editor store with email editor components

Browse Source 
MAILPOET-6303
This commit is contained in:
Oluwaseun Olorunsola
2024-11-12 14:48:02 +01:00
committed by Rostislav Wolný
parent e37997e2e1
commit f945ea8388
5 changed files with 34 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/js/email-editor/src/components/block-editor/layout.tsx
View File

@ -1,5 +1,5 @@
import { BlockSelectionClearer } from '@wordpress/block-editor';
import { UnsavedChangesWarning } from '@wordpress/editor';
import { store as editorStore, UnsavedChangesWarning } from '@wordpress/editor';
import { uploadMedia } from '@wordpress/media-utils';
import classnames from 'classnames';
import { useSelect, useDispatch } from '@wordpress/data';
@ -42,10 +42,10 @@ export function Layout() {
isFullscreenActive:
select( storeName ).isFeatureActive( 'fullscreenMode' ),
isSidebarOpened: select( storeName ).isSidebarOpened(),
isInserterSidebarOpened:
select( storeName ).isInserterSidebarOpened(),
isListviewSidebarOpened:
select( storeName ).isListviewSidebarOpened(),
// @ts-expect-error isInserterOpened is missing in types.
isInserterSidebarOpened: select( editorStore ).isInserterOpened(),
// @ts-expect-error isListViewOpened is missing in types.
isListviewSidebarOpened: select( editorStore ).isListViewOpened(),
initialSettings: select( storeName ).getInitialEditorSettings(),
previewDeviceType: select( storeName ).getDeviceType(),
canUserEditMedia: select( coreStore ).canUser( 'create', 'media' ),
@ -57,7 +57,8 @@ export function Layout() {
[]
);
const { toggleInserterSidebar } = useDispatch( storeName );
// @ts-expect-error isInserterOpened is missing in types.
const { setIsInserterOpened } = useDispatch( editorStore );
const [ emailCss ] = useEmailCss();
const className = classnames( 'edit-post-layout', {
@ -105,7 +106,7 @@ export function Layout() {
onClick={ () => {
// Clear inserter sidebar when canvas is clicked.
if ( isInserterSidebarOpened ) {
void toggleInserterSidebar();
void setIsInserterOpened( false );
}
} }
>

31
packages/js/email-editor/src/components/header/header.tsx
View File

@ -48,9 +48,10 @@ export function Header() {
const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
useState( false );
const { toggleInserterSidebar, toggleListviewSidebar } =
useDispatch( storeName );
const { undo: undoAction, redo: redoAction } = useDispatch( coreDataStore );
// @ts-expect-error missing types.
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editorStore );
const {
isInserterSidebarOpened,
isListviewSidebarOpened,
@ -67,10 +68,10 @@ export function Header() {
const editorSettings = _getEditorSettings();
return {
isInserterSidebarOpened:
select( storeName ).isInserterSidebarOpened(),
isListviewSidebarOpened:
select( storeName ).isListviewSidebarOpened(),
// @ts-expect-error missing types.
isInserterSidebarOpened: select( editorStore ).isInserterOpened(),
// @ts-expect-error missing types.
isListviewSidebarOpened: select( editorStore ).isListViewOpened(),
isFixedToolbarActive: select( preferencesStore ).get(
'core',
'fixedToolbar'
@ -88,6 +89,20 @@ export function Header() {
event.preventDefault();
};
const toggleTheInserterSidebar = () => {
if ( isInserterSidebarOpened ) {
return setIsInserterOpened( false );
}
return setIsInserterOpened( true );
};
const toggleTheListviewSidebar = () => {
if ( isListviewSidebarOpened ) {
return setIsListViewOpened( false );
}
return setIsListViewOpened( true );
};
const shortLabelInserter = ! isInserterSidebarOpened
? __( 'Add', 'mailpoet' )
: __( 'Close', 'mailpoet' );
@ -107,7 +122,7 @@ export function Header() {
variant="primary"
isPressed={ isInserterSidebarOpened }
onMouseDown={ preventDefault }
onClick={ toggleInserterSidebar }
onClick={ toggleTheInserterSidebar }
disabled={ false }
icon={ plus }
label={ shortLabelInserter }
@ -144,7 +159,7 @@ export function Header() {
className="editor-header-toolbar__document-overview-toggle edit-post-header-toolbar__document-overview-toggle"
isPressed={ isListviewSidebarOpened }
onMouseDown={ preventDefault }
onClick={ toggleListviewSidebar }
onClick={ toggleTheListviewSidebar }
disabled={ false }
icon={ listView }
label={ __( 'List view', 'mailpoet' ) }

6
packages/js/email-editor/src/components/inserter-sidebar/inserter-sidebar.tsx
View File

@ -4,7 +4,6 @@ import {
} from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { storeName } from '../../store';
export function InserterSidebar() {
const { postContentId, isEditingEmailContent } = useSelect( ( select ) => {
@ -18,7 +17,8 @@ export function InserterSidebar() {
};
} );
const { toggleInserterSidebar } = useDispatch( storeName );
// @ts-expect-error missing types.
const { setIsInserterOpened } = useDispatch( editorStore );
return (
<div className="editor-inserter-sidebar">
@ -30,7 +30,7 @@ export function InserterSidebar() {
rootClientId={
isEditingEmailContent ? postContentId : null
}
onClose={ toggleInserterSidebar }
onClose={ () => setIsInserterOpened( false ) }
/>
</div>
</div>

14
packages/js/email-editor/src/store/actions.ts
View File

@ -14,20 +14,6 @@ export const toggleFeature =
( { registry } ): unknown =>
registry.dispatch( preferencesStore ).toggle( storeName, feature );
export const toggleInserterSidebar =
() =>
( { registry } ) => {
const status = registry.select( editorStore ).isInserterOpened();
void registry.dispatch( editorStore ).setIsInserterOpened( ! status );
};
export const toggleListviewSidebar =
() =>
( { registry } ) => {
const status = registry.select( editorStore ).isListViewOpened();
void registry.dispatch( editorStore ).setIsListViewOpened( ! status );
};
export const changePreviewDeviceType =
( deviceType: string ) =>
( { registry } ) =>

12
packages/js/email-editor/src/store/selectors.ts
View File

@ -231,18 +231,6 @@ export function getEmailPostId( state: State ): number {
return state.postId;
}
export const isInserterSidebarOpened = createRegistrySelector(
( select ) => () =>
// @ts-expect-error isInserterOpened is missing in types.
select( editorStore ).isInserterOpened() as boolean
);
export const isListviewSidebarOpened = createRegistrySelector(
( select ) => () =>
// @ts-expect-error isListViewOpened is missing in types.
select( editorStore ).isListViewOpened() as boolean
);
export function getSettingsSidebarActiveTab( state: State ): string {
return state.settingsSidebar.activeTab;
}