Fix element styles and scrollbars
This commit is contained in:
Mike Jolley
@@ -1,97 +0,0 @@
|
||||
<?php declare(strict_types = 1);
|
||||
|
||||
namespace MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks;
|
||||
|
||||
use MailPoet\EmailEditor\Engine\SettingsController;
|
||||
use MailPoet\EmailEditor\Integrations\Utils\DomDocumentHelper;
|
||||
use MailPoet\Util\Helpers;
|
||||
|
||||
class Heading extends AbstractBlockRenderer {
|
||||
protected function renderContent(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
|
||||
$level = $parsedBlock['attrs']['level'] ?? 2; // default level is 2
|
||||
$blockContent = $this->adjustStyleAttribute($blockContent, $parsedBlock, $settingsController, ['tag_name' => "h$level"]);
|
||||
|
||||
return str_replace('{heading_content}', $blockContent, $this->getBlockWrapper($blockContent, $parsedBlock, $settingsController));
|
||||
}
|
||||
|
||||
/**
|
||||
* Based on MJML <mj-text>
|
||||
*/
|
||||
private function getBlockWrapper($blockContent, array $parsedBlock, SettingsController $settingsController): string {
|
||||
$level = $parsedBlock['attrs']['level'] ?? 2; // default level is 2
|
||||
$classes = (new DomDocumentHelper($blockContent))->getAttributeValueByTagName("h$level", 'class') ?? '';
|
||||
|
||||
// Styles for padding need to be set on the wrapping table cell due to support in Outlook
|
||||
$styles = [
|
||||
'min-width' => '100%', // prevent Gmail App from shrinking the table on mobile devices
|
||||
];
|
||||
|
||||
$paddingStyles = wp_style_engine_get_styles(['spacing' => ['padding' => $parsedBlock['attrs']['style']['spacing']['padding'] ?? null]]);
|
||||
$styles = array_merge($styles, $paddingStyles['declarations'] ?? []);
|
||||
|
||||
if (isset($parsedBlock['attrs']['textAlign'])) {
|
||||
$styles['text-align'] = $parsedBlock['attrs']['textAlign'];
|
||||
}
|
||||
|
||||
if (isset($parsedBlock['attrs']['style']['color']['background'])) {
|
||||
$styles['background-color'] = $parsedBlock['attrs']['style']['color']['background'];
|
||||
}
|
||||
|
||||
if (isset($parsedBlock['attrs']['style']['color']['text'])) {
|
||||
$styles['color'] = $parsedBlock['attrs']['style']['color']['text'];
|
||||
}
|
||||
|
||||
// fetch Block Style Typography e.g., fontStyle, fontWeight, etc
|
||||
$attrs = $parsedBlock['attrs'] ?? [];
|
||||
if (isset($attrs['style']['typography'])) {
|
||||
$blockStyleTypographyKeys = array_keys($attrs['style']['typography']);
|
||||
foreach ($blockStyleTypographyKeys as $blockStyleTypographyKey) {
|
||||
$styles[Helpers::camelCaseToKebabCase($blockStyleTypographyKey)] = $attrs['style']['typography'][$blockStyleTypographyKey];
|
||||
}
|
||||
}
|
||||
|
||||
return '
|
||||
<!--[if mso | IE]><table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><![endif]-->
|
||||
<table
|
||||
role="presentation"
|
||||
border="0"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
style="min-width: 100%;"
|
||||
width="100%"
|
||||
>
|
||||
<tr>
|
||||
<td class="' . esc_attr($classes) . '" style="' . $settingsController->convertStylesToString($styles) . '">
|
||||
{heading_content}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--[if mso | IE]></td></tr></table><![endif]-->
|
||||
';
|
||||
}
|
||||
|
||||
/**
|
||||
* 1) We need to remove padding because we render padding on wrapping table cell
|
||||
* 2) We also need to replace font-size to avoid clamp() because clamp() is not supported in many email clients.
|
||||
* The font size values is automatically converted to clamp() when WP site theme is configured to use fluid layouts.
|
||||
* Currently (WP 6.4), there is no way to disable this behavior.
|
||||
* @param array{tag_name: string, class_name?: string} $tag
|
||||
*/
|
||||
private function adjustStyleAttribute($blockContent, array $parsedBlock, SettingsController $settingsController, array $tag): string {
|
||||
$html = new \WP_HTML_Tag_Processor($blockContent);
|
||||
$themeData = $settingsController->getTheme()->get_data();
|
||||
$fontSize = 'font-size:' . ($parsedBlock['email_attrs']['font-size'] ?? $themeData['styles']['typography']['fontSize']) . ';';
|
||||
|
||||
if ($html->next_tag($tag)) {
|
||||
$elementStyle = $html->get_attribute('style') ?? '';
|
||||
// Padding may contain value like 10px or variable like var(--spacing-10)
|
||||
$elementStyle = preg_replace('/padding.*:.?[0-9a-z-()]+;?/', '', $elementStyle);
|
||||
$elementStyle = preg_replace('/font-size:[^;]+;?/', $fontSize, $elementStyle);
|
||||
$html->set_attribute('style', $elementStyle);
|
||||
$blockContent = $html->get_updated_html();
|
||||
}
|
||||
|
||||
return $blockContent;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,10 @@ use MailPoet\EmailEditor\Engine\SettingsController;
|
||||
class Text extends AbstractBlockRenderer {
|
||||
protected function renderContent(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
|
||||
$blockContent = $this->adjustStyleAttribute($blockContent);
|
||||
|
||||
$blockAttributes = wp_parse_args($parsedBlock['attrs'] ?? [], [
|
||||
'textAlign' => 'left',
|
||||
'style' => [],
|
||||
]);
|
||||
$html = new \WP_HTML_Tag_Processor($blockContent);
|
||||
$classes = '';
|
||||
if ($html->next_tag()) {
|
||||
@@ -18,9 +21,9 @@ class Text extends AbstractBlockRenderer {
|
||||
}
|
||||
|
||||
$blockStyles = $this->getStylesFromBlock([
|
||||
'color' => $parsedBlock['attrs']['style']['color'] ?? [],
|
||||
'spacing' => $parsedBlock['attrs']['style']['spacing'] ?? [],
|
||||
'typography' => $parsedBlock['attrs']['style']['typography'] ?? [],
|
||||
'color' => $blockAttributes['style']['color'] ?? [],
|
||||
'spacing' => $blockAttributes['style']['spacing'] ?? [],
|
||||
'typography' => $blockAttributes['style']['typography'] ?? [],
|
||||
]);
|
||||
|
||||
$styles = [
|
||||
|
||||
@@ -58,27 +58,4 @@ class EmailEditor {
|
||||
'schema' => $this->emailApiController->getEmailDataSchema(),
|
||||
]);
|
||||
}
|
||||
|
||||
public function getEmailDefaultContent(): string {
|
||||
return '
|
||||
<!-- wp:image {"width":"130px"} -->
|
||||
<figure class="wp-block-image is-resized"><img src="' . esc_url($this->cdnAssetUrl->generateCdnUrl("email-editor/your-logo-placeholder.png")) . '" alt="Your Logo" style="width:130px"/></figure>
|
||||
<!-- /wp:image -->
|
||||
<!-- wp:heading {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}}} -->
|
||||
<h2 class="wp-block-heading" style="padding-top:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10)"></h2>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:image -->
|
||||
<figure class="wp-block-image"><img alt=""/></figure>
|
||||
<!-- /wp:image -->
|
||||
<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
|
||||
<p style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)"></p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:paragraph {"fontSize":"small"} -->
|
||||
<p class="has-small-font-size">' . esc_html__('You received this email because you are subscribed to the [site:title]', 'mailpoet') . '</p>
|
||||
<!-- /wp:paragraph -->
|
||||
<!-- wp:paragraph {"fontSize":"small"} -->
|
||||
<p class="has-small-font-size"><a href="[link:subscription_unsubscribe_url]">' . esc_html__('Unsubscribe', 'mailpoet') . '</a> | <a href="[link:subscription_manage_url]">' . esc_html__('Manage subscription', 'mailpoet') . '</a></p>
|
||||
<!-- /wp:paragraph -->
|
||||
';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user