e8bb1b5ac0
We don't reset font family on any level, so there is no need to bubble the setting using a preprocessor and render the inline styles explicitly in every block. In this commit, I change how font-family settings are distributed/rendered in the email renderer. In the new approach, we rely on class names defining font-family and a generated CSS sheet with font-family definitions. We apply the font-family CSS by inlining CSS rules for families in the later phase of rendering after all individual blocks are processed. [MAILPOET-5740]
MailPoet Email Renderer
The renderer is WIP and so is the API for adding support email rendering for new blocks.
Adding support for a core block
- Add block into
ALLOWED_BLOCK_TYPESinmailpoet/lib/EmailEditor/Engine/Renderer/SettingsController.php. - Make sure the block is registered in the editor. Currently all core blocks are registered in the editor.
- Add BlockRender class (e.g. Heading) into
mailpoet/lib/EmailEditor/Integration/Core/Renderer/Blocksfolder.
<?php declare(strict_types = 1);
namespace MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks;
use MailPoet\EmailEditor\Engine\Renderer\BlockRenderer;
use MailPoet\EmailEditor\Engine\SettingsController;
class Heading implements BlockRenderer {
public function render($blockContent, array $parsedBlock, SettingsController $settingsController): string {
return 'HEADING_BLOCK'; // here comes your rendering logic;
}
}
- Register the renderer
<?php
use MailPoet\EmailEditor\Engine\Renderer\BlocksRegistry;
add_action('mailpoet_blocks_renderer_initialized', 'register_my_block_email_renderer');
function register_my_block_email_renderer(BlocksRegistry $blocksRegistry): void {
$blocksRegistry->addBlockRenderer('core/heading', new Renderer\Blocks\Heading());
}
Note: For core blocks this is currently done in MailPoet\EmailEditor\Integrations\Core\Initializer.
- Implement the rendering logic in the renderer class.
Tips for adding support for block
- You can take inspiration on block rendering from MJML in the https://mjml.io/try-it-live
- Test the block in different clients Litmus
- You can take some inspirations from the HTML renderer by the old email editor
TODO
- add universal/fallback renderer for rendering blocks that are not covered by specialized renderers
- add support for all core blocks
- move the renderer to separate package