Add custom placeholder to post content during registration

This commit is contained in:
Mike Jolley
2024-05-13 16:35:13 +01:00
committed by Rostislav Wolný
parent aa14f0c2b3
commit aa070c415d
2 changed files with 60 additions and 0 deletions

View File

@ -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 (
<div {...blockProps}>
<p>{__('This is the Content block.', 'mailpoet')}</p>
<p>
{__(
'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',
)}
</p>
</div>
);
}
// 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 (
<OriginalEditComponent
{...{ context, __unstableLayoutClassNames: layoutClassNames }}
/>
);
}
return <Placeholder layoutClassNames={layoutClassNames} />;
};
}
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 };

View File

@ -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();
}