Fix renderer styles

This commit is contained in:
Mike Jolley
2024-05-03 15:03:36 +01:00
committed by Aschepikov
parent 4100991354
commit c3dcc13f2c
3 changed files with 25 additions and 14 deletions

View File

@ -1,6 +1,6 @@
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { merge } from 'lodash';
import deepmerge from 'deepmerge';
import {
// @ts-expect-error No types for this exist yet.
privateApis as blockEditorPrivateApi,
@ -21,7 +21,12 @@ export function useEmailCss() {
);
const mergedConfig = useMemo(
() => merge({}, editorTheme, templateTheme) as EmailStyles,
() =>
deepmerge.all([
{},
editorTheme || {},
templateTheme || {},
]) as EmailStyles,
[editorTheme, templateTheme],
);

View File

@ -170,17 +170,21 @@ class ThemeController {
foreach ($elementsStyles as $key => $elementsStyle) {
$selector = $key;
if ($key === 'heading') {
$selector = 'h1, h2, h3, h4, h5, h6';
}
if ($key === 'link') {
// Target direct decendants of blocks to avoid styling buttons. :not() is not supported by the inliner.
$selector = 'p > a, div > a, li > a';
}
if ($key === 'button') {
$selector = '.wp-block-button';
$cssElements .= wp_style_engine_get_styles($elementsStyle, ['selector' => '.wp-block-button'])['css'];
// Add color to link element.
$cssElements .= wp_style_engine_get_styles(['color' => ['text' => $elementsStyle['color']['text'] ?? '']], ['selector' => '.wp-block-button a'])['css'];
continue;
}
switch ($key) {
case 'heading':
$selector = 'h1, h2, h3, h4, h5, h6';
break;
case 'link':
$selector = 'a:not(.button-link)';
break;
}
$cssElements .= wp_style_engine_get_styles($elementsStyle, ['selector' => $selector])['css'];

View File

@ -33,12 +33,15 @@ class Button extends AbstractBlockRenderer {
];
}
public function render(string $blockContent, array $parsedBlock, SettingsController $settingsController): string {
return $this->renderContent($blockContent, $parsedBlock, $settingsController);
}
protected function renderContent($blockContent, array $parsedBlock, SettingsController $settingsController): string {
if (empty($parsedBlock['innerHTML'])) {
return '';
}
$themeData = $settingsController->getTheme()->get_data();
$domHelper = new DomDocumentHelper($parsedBlock['innerHTML']);
$blockClassname = $domHelper->getAttributeValueByTagName('div', 'class') ?? '';
$buttonLink = $domHelper->findElement('a');
@ -59,7 +62,6 @@ class Button extends AbstractBlockRenderer {
]);
$blockStyles = array_replace_recursive(
$themeData['styles']['blocks']['core/button'] ?? [],
[
'color' => array_filter([
'background' => $blockAttributes['backgroundColor'] ? $settingsController->translateSlugToColor($blockAttributes['backgroundColor']) : null,
@ -80,7 +82,7 @@ class Button extends AbstractBlockRenderer {
'<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width:%1$s;">
<tr>
<td align="%2$s" valign="middle" role="presentation" class="%3$s" style="%4$s">
<a class="%5$s" style="%6$s" href="%7$s" target="_blank">%8$s</a>
<a class="button-link %5$s" style="%6$s" href="%7$s" target="_blank">%8$s</a>
</td>
</tr>
</table>',