diff --git a/assets/css/src/components-form-editor/_block-editor.scss b/assets/css/src/components-form-editor/_block-editor.scss index 3c304940d8..fd30ff4853 100644 --- a/assets/css/src/components-form-editor/_block-editor.scss +++ b/assets/css/src/components-form-editor/_block-editor.scss @@ -74,3 +74,16 @@ h2 { line-height: 1.2; } } + +.mailpoet_toolbar_item { + align-items: center; + background-color: white; + border-bottom: 1px solid #b5bcc2; + border-top: 1px solid #b5bcc2; + display: flex; + padding-left: $grid-gap / 2; + + .mailpoet-font-family-select { + width: $grid-column-small; + } +} diff --git a/assets/css/src/mailpoet-form-editor.scss b/assets/css/src/mailpoet-form-editor.scss index 00b9cbe79c..87b75e831b 100644 --- a/assets/css/src/mailpoet-form-editor.scss +++ b/assets/css/src/mailpoet-form-editor.scss @@ -4,6 +4,7 @@ @import 'settings/breakpoints'; @import 'settings/colors'; @import 'settings/form-editor'; +@import 'settings/grid'; // Tools // Default mixins and functions. Still not producing any CSS. diff --git a/assets/js/src/form_editor/components/font_family_settings.tsx b/assets/js/src/form_editor/components/font_family_settings.tsx index 0cf69b11ac..4e4a298e17 100644 --- a/assets/js/src/form_editor/components/font_family_settings.tsx +++ b/assets/js/src/form_editor/components/font_family_settings.tsx @@ -21,12 +21,14 @@ type Props = { onChange: (value: string|undefined) => any, value?: string, name: string, + hideLabelFromVision?: boolean } const FontFamilySettings = ({ onChange, value, name, + hideLabelFromVision = false, }: Props) => { const customFonts = useSelect( (select) => select('mailpoet-form-editor').getAllCustomFonts(), @@ -92,6 +94,7 @@ const FontFamilySettings = ({ value={selectedValue} label={name} className="mailpoet-font-family-select" + hideLabelFromVision={hideLabelFromVision} /> ); }; diff --git a/assets/js/src/form_editor/rich_text/font_selection_format.tsx b/assets/js/src/form_editor/rich_text/font_selection_format.tsx new file mode 100644 index 0000000000..607657f9d9 --- /dev/null +++ b/assets/js/src/form_editor/rich_text/font_selection_format.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { applyFormat } from '@wordpress/rich-text'; +import MailPoet from 'mailpoet'; +import { Fill } from '@wordpress/components'; + +import FontFamilySettings from '../components/font_family_settings'; + +const name = 'mailpoet-form/font-selection'; +const title = 'Font Selection'; + +const settings = { + name, + title, + tagName: 'span', + className: 'has-font', + attributes: { + style: 'style', + font: 'data-font', + }, + edit({ + value, + onChange, + activeAttributes, + }) { + return ( + <> + +
+ { + onChange( + applyFormat(value, { + type: 'mailpoet-form/font-selection', + attributes: { + style: `font-family: ${font}`, + font, + }, + }) + ); + }} + name={MailPoet.I18n.t('formSettingsStylesFontFamily')} + hideLabelFromVision + /> +
+
+ + ); + }, +}; + +export { name, settings }; diff --git a/assets/js/src/form_editor/rich_text/init.ts b/assets/js/src/form_editor/rich_text/init.ts index 0a180b675d..20ac094ba5 100644 --- a/assets/js/src/form_editor/rich_text/init.ts +++ b/assets/js/src/form_editor/rich_text/init.ts @@ -1,5 +1,7 @@ import '@wordpress/format-library'; +import { registerFormatType } from '@wordpress/rich-text'; +import * as FontSelectionFormat from './font_selection_format'; export default function () { - + registerFormatType(FontSelectionFormat.name, FontSelectionFormat.settings); }