Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move the Modal editor out of the block instance

This commit is contained in:
Damián Suárez 2023-12-05 09:04:34 -03:00
parent 388c980cf5
commit b60d723982
2 changed files with 81 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createElement } from '@wordpress/element';
import { createElement, useEffect } from '@wordpress/element';
import {
BlockAttributes,
BlockInstance,
@ -19,7 +19,6 @@ import { useEntityProp } from '@wordpress/core-data';
* Internal dependencies
*/
import { ContentPreview } from '../../../components/content-preview';
import { ModalEditor } from '../../../components/modal-editor';
import { ProductEditorBlockEditProps } from '../../../types';
import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
import { store as productEditorUiStore } from '../../../store/product-editor-ui';
@ -58,14 +57,41 @@ export function DescriptionBlockEdit( {
'description'
);
// Check if the Modal editor is open from the store.
const isModalEditorOpen = useSelect( ( select ) => {
return select( productEditorUiStore ).isModalEditorOpen();
// Pick Modal editor data from the store.
const { isModalEditorOpen, blocks } = useSelect( ( select ) => {
return {
isModalEditorOpen:
select( productEditorUiStore ).isModalEditorOpen(),
blocks: select( productEditorUiStore ).getModalEditorBlocks(),
};
}, [] );
const { openModalEditor, closeModalEditor } =
const { openModalEditor, setModalEditorBlocks } =
useDispatch( productEditorUiStore );
/*
* Populate the modal editor with the description blocks,
* in the first render only if the description is not empty.
*/
useEffect( () => {
if ( ! description ) {
return;
}
setModalEditorBlocks( parse( description ) );
}, [] ); // eslint-disable-line
// Update the description when the blocks change.
useEffect( () => {
if ( ! blocks?.length ) {
setDescription( '' );
}
const html = serialize( clearDescriptionIfEmpty( blocks ) );
setDescription( html );
}, [ blocks, setDescription ] );
return (
<div { ...blockProps }>
<Button
@ -80,20 +106,6 @@ export function DescriptionBlockEdit( {
: __( 'Add description', 'woocommerce' ) }
</Button>
{ isModalEditorOpen && (
<ModalEditor
initialBlocks={ parse( description ) }
onChange={ ( blocks ) => {
const html = serialize(
clearDescriptionIfEmpty( blocks )
);
setDescription( html );
} }
onClose={ closeModalEditor }
title={ __( 'Edit description', 'woocommerce' ) }
/>
) }
{ !! description.length && (
<ContentPreview content={ description } />
) }

74
packages/js/product-editor/src/components/block-editor/block-editor.tsx
View File

@ -2,10 +2,16 @@
* External dependencies
*/
import { synchronizeBlocksWithTemplate, Template } from '@wordpress/blocks';
import { createElement, useMemo, useLayoutEffect } from '@wordpress/element';
import {
createElement,
useMemo,
useLayoutEffect,
Fragment,
} from '@wordpress/element';
import { useDispatch, useSelect, select as WPSelect } from '@wordpress/data';
import { uploadMedia } from '@wordpress/media-utils';
import { PluginArea } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n';
import {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
@ -34,6 +40,8 @@ import {
import { useConfirmUnsavedProductChanges } from '../../hooks/use-confirm-unsaved-product-changes';
import { ProductEditorContext } from '../../types';
import { PostTypeContext } from '../../contexts/post-type-context';
import { ModalEditor } from '../modal-editor';
import { store as productEditorUiStore } from '../../store/product-editor-ui';
type BlockEditorSettings = Partial<
EditorSettings & EditorBlockListSettings
@ -111,34 +119,50 @@ export function BlockEditor( {
updateEditorSettings( settings ?? {} );
}, [ productType, productId ] );
// Check if the Modal editor is open from the store.
const isModalEditorOpen = useSelect( ( select ) => {
return select( productEditorUiStore ).isModalEditorOpen();
}, [] );
const { closeModalEditor } = useDispatch( productEditorUiStore );
if ( ! blocks ) {
return null;
}
return (
<div className="woocommerce-product-block-editor">
<BlockContextProvider value={ context }>
<BlockEditorProvider
value={ blocks }
onInput={ onInput }
onChange={ onChange }
settings={ settings }
>
{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
{ /* @ts-ignore No types for this exist yet. */ }
<BlockEditorKeyboardShortcuts.Register />
<BlockTools>
<ObserveTyping>
<BlockList className="woocommerce-product-block-editor__block-list" />
</ObserveTyping>
</BlockTools>
{ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
<PostTypeContext.Provider value={ context.postType! }>
{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
<PluginArea scope="woocommerce-product-block-editor" />
</PostTypeContext.Provider>
</BlockEditorProvider>
</BlockContextProvider>
</div>
<>
{ ' ' }
{ isModalEditorOpen && (
<ModalEditor
onClose={ closeModalEditor }
title={ __( 'Edit description', 'woocommerce' ) }
/>
) }
<div className="woocommerce-product-block-editor">
<BlockContextProvider value={ context }>
<BlockEditorProvider
value={ blocks }
onInput={ onInput }
onChange={ onChange }
settings={ settings }
>
{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
{ /* @ts-ignore No types for this exist yet. */ }
<BlockEditorKeyboardShortcuts.Register />
<BlockTools>
<ObserveTyping>
<BlockList className="woocommerce-product-block-editor__block-list" />
</ObserveTyping>
</BlockTools>
{ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
<PostTypeContext.Provider value={ context.postType! }>
{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
<PluginArea scope="woocommerce-product-block-editor" />
</PostTypeContext.Provider>
</BlockEditorProvider>
</BlockContextProvider>
</div>
</>
);
}