API to create custom Content Blocks
Philipp Stracker
Let us create custom Content Blocks via a plugin.
From what I see, MailPoet needs to make a single change for this:
Step (1) make the Base-Block accessible to external JS modules. E.g. add "window.MailPoetBaseModule = Module;" here:
https://github.com/mailpoet/mailpoet/blob/master/assets/js/src/newsletter_editor/blocks/base.js#L340
------
Optional, but recommended (2) add a WP filter in the function "createElementFromBlockType()" here so devs can generate the Email code without adding classes to the namespace "MailPoet\Newsletter\Renderer\Blocks".
And maybe also (3) provide a sample module that includes a JS and PHP file to make it easier for developers to create a new content block.
-----
If you consider this Feature Request, I'd be happy to submit a PR in the GitHub repository. Let me know :)
Philipp Stracker
After applying the JS patch dozens of times in the minified JS file, I came up with a short regex that does the trick quickly:
-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Step 1: Open file (CMD + P):
mailpoet/assets/dist/js/newsletter_editor.*.chunk.js
- Step 2: Regex search:
,(\w+)\.(WidgetView=[\w\.]+\(\{.*?\}\))
- Step 3: Replace with:
,$1.$2,window.MailPoetBaseModule=Object.assign({},$1)
-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
More details on how that change can be used to create a custom Content-Block is in my gist here: https://gist.github.com/stracker-phil/59da31e6143bbdd133a3de3d4bc88263
Applying the change in VS Code:
Philipp Stracker
While testing the implementation I have created a demo block and it's working very well. The code is not great, but it's a good proof of concept ;)
The code will add a new "Code" block which generates output as displayed in the screenshot above