From aa070c415d7ddc20a8685590e58bc6fb995deb46 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Mon, 13 May 2024 16:35:13 +0100 Subject: [PATCH] Add custom placeholder to post content during registration --- .../engine/blocks/core/post-content.tsx | 58 +++++++++++++++++++ .../src/email-editor/engine/blocks/index.ts | 2 + 2 files changed, 60 insertions(+) create mode 100644 mailpoet/assets/js/src/email-editor/engine/blocks/core/post-content.tsx 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(); }