Use font size from settings

[MAILPOET-2600]
This commit is contained in:
Pavel Dohnal
2020-02-26 10:13:55 +01:00
committed by Jack Kitterhing
parent 07bbdc59f6
commit 2c7b8a7d25
3 changed files with 22 additions and 6 deletions

View File

@@ -15,10 +15,14 @@ import { useSelect } from '@wordpress/data';
import ParagraphEdit from '../paragraph_edit.jsx';
const CustomHtmlEdit = ({ attributes, setAttributes }) => {
const fontColor = useSelect(
const { fontColor, fontSize } = useSelect(
(select) => {
const settings = select('mailpoet-form-editor').getFormSettings();
return settings.fontColor;
return {
backgroundColor: settings.backgroundColor,
fontColor: settings.fontColor,
fontSize: settings.fontSize,
};
},
[]
);
@@ -54,7 +58,8 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
</InspectorControls>
);
const styles = attributes.nl2br ? ['body { white-space: pre-line; }'] : [];
styles.push(` body {color: ${fontColor} `);
if (fontColor) styles.push(` body {color: ${fontColor};}`);
if (fontSize) styles.push(` body {font-size: ${fontSize}px }`);
const key = `${renderedContent}_${styles}`;
return (
<ParagraphEdit>

View File

@@ -11,7 +11,7 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
return (<p className="mailpoet_error">{MailPoet.I18n.t('blockSegmentSelectNoLists')}</p>);
}
return attributes.values.map((value) => (
<label className="mailpoet_checkbox_label">
<label key={value.id} className="mailpoet_checkbox_label">
<input
type="checkbox"
disabled

View File

@@ -3,18 +3,29 @@ import PropTypes from 'prop-types';
import { useSelect } from '@wordpress/data';
const FormStylingBackground = ({ children }) => {
const { fontColor, backgroundColor } = useSelect(
const { fontColor, backgroundColor, fontSize } = useSelect(
(select) => {
const settings = select('mailpoet-form-editor').getFormSettings();
return {
backgroundColor: settings.backgroundColor,
fontColor: settings.fontColor,
fontSize: settings.fontSize,
};
},
[]
);
let font;
if (fontSize) font = Number(fontSize);
return (
<div style={{ backgroundColor, color: fontColor }}>
<div
style={{
backgroundColor,
color: fontColor,
fontSize: font,
lineHeight: 1.2,
}}
>
{children}
</div>
);