diff --git a/mailpoet/assets/js/src/email-editor/engine/blocks/core/post-content.tsx b/mailpoet/assets/js/src/email-editor/engine/blocks/core/post-content.tsx new file mode 100644 index 0000000000..86e058e019 --- /dev/null +++ b/mailpoet/assets/js/src/email-editor/engine/blocks/core/post-content.tsx @@ -0,0 +1,58 @@ +import { addFilter } from '@wordpress/hooks'; +import { Block } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +function Placeholder({ layoutClassNames }) { + const blockProps = useBlockProps({ className: layoutClassNames }); + return ( +
+

{__('This is the Content block.', 'mailpoet')}

+

+ {__( + 'It will display all the blocks in the email content, which might be only simple text paragraphs. You can enrich your message with images, incorporate data through tables, explore different layout designs with columns, or use any other block type.', + 'mailpoet', + )} +

+
+ ); +} + +// Curried function to add a custom placeholder to the post content block, or just use the original Edit component. +function PostContentEdit(OriginalEditComponent) { + return function Edit({ + context, + __unstableLayoutClassNames: layoutClassNames, + }) { + const { postId: contextPostId, postType: contextPostType } = context; + const hasContent = contextPostId && contextPostType; + + if (hasContent) { + return ( + + ); + } + + return ; + }; +} + +function enhancePostContentBlock() { + addFilter( + 'blocks.registerBlockType', + 'mailpoet-email-editor/change-post-content', + (settings: Block, name) => { + if (name === 'core/post-content') { + return { + ...settings, + edit: PostContentEdit(settings.edit), + }; + } + return settings; + }, + ); +} + +export { enhancePostContentBlock }; diff --git a/mailpoet/assets/js/src/email-editor/engine/blocks/index.ts b/mailpoet/assets/js/src/email-editor/engine/blocks/index.ts index 6ee62cf2fa..bae8c6c33b 100644 --- a/mailpoet/assets/js/src/email-editor/engine/blocks/index.ts +++ b/mailpoet/assets/js/src/email-editor/engine/blocks/index.ts @@ -5,6 +5,7 @@ import { deactivateStackOnMobile, enhanceColumnsBlock, } from './core/columns'; +import { enhancePostContentBlock } from './core/post-content'; import { disableImageFilter, hideExpandOnClick } from './core/image'; import { disableCertainRichTextFormats } from './core/rich-text'; import { enhanceButtonBlock } from './core/button'; @@ -21,6 +22,7 @@ export function initBlocks() { enhanceButtonsBlock(); enhanceColumnBlock(); enhanceColumnsBlock(); + enhancePostContentBlock(); alterSupportConfiguration(); registerCoreBlocks(); }