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 5ca958eaf9..19bec351bf 100644
--- a/assets/js/src/form_editor/components/font_family_settings.tsx
+++ b/assets/js/src/form_editor/components/font_family_settings.tsx
@@ -2,73 +2,9 @@ import React from 'react';
import {
CustomSelectControl,
} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
import MailPoet from 'mailpoet';
-export const customFonts = [
- 'Abril FatFace',
- 'Alegreya',
- 'Alegreya Sans',
- 'Amatic SC',
- 'Anonymous Pro',
- 'Architects Daughter',
- 'Archivo',
- 'Archivo Narrow',
- 'Asap',
- 'Barlow',
- 'BioRhyme',
- 'Bonbon',
- 'Cabin',
- 'Cairo',
- 'Cardo',
- 'Chivo',
- 'Concert One',
- 'Cormorant',
- 'Crimson Text',
- 'Eczar',
- 'Exo 2',
- 'Fira Sans',
- 'Fjalla One',
- 'Frank Ruhl Libre',
- 'Great Vibes',
- 'Heebo',
- 'IBM Plex',
- 'Inconsolata',
- 'Indie Flower',
- 'Inknut Antiqua',
- 'Inter',
- 'Karla',
- 'Libre Baskerville',
- 'Libre Franklin',
- 'Montserrat',
- 'Neuton',
- 'Notable',
- 'Nothing You Could Do',
- 'Noto Sans',
- 'Nunito',
- 'Old Standard TT',
- 'Oxygen',
- 'Pacifico',
- 'Poppins',
- 'Proza Libre',
- 'PT Sans',
- 'PT Serif',
- 'Rakkas',
- 'Reenie Beanie',
- 'Roboto Slab',
- 'Ropa Sans',
- 'Rubik',
- 'Shadows Into Light',
- 'Space Mono',
- 'Spectral',
- 'Sue Ellen Francisco',
- 'Titillium Web',
- 'Ubuntu',
- 'Varela',
- 'Vollkorn',
- 'Work Sans',
- 'Yatra One',
-];
-
const standardFonts = [
'Arial',
'Comic Sans MS',
@@ -92,6 +28,10 @@ const FontFamilySettings = ({
value,
name,
}: Props) => {
+ const customFonts = useSelect(
+ (select) => select('mailpoet-form-editor').getAllCustomFonts(),
+ []
+ );
const disabledStyle = {
color: 'lightgray',
backgroundColor: 'white',
@@ -155,14 +95,19 @@ const FontFamilySettings = ({
export default FontFamilySettings;
-const customFontsUrl = customFonts
- .map((fontName) => fontName.replace(' ', '+'))
- .map((fontName) => fontName.concat(':400,400i,700,700'))
- .join('|');
-
-export const CustomFontsStyleSheetLink = () => (
-
-);
+export const CustomFontsStyleSheetLink = () => {
+ const customFonts = useSelect(
+ (select) => select('mailpoet-form-editor').getAllCustomFonts(),
+ []
+ );
+ const customFontsUrl = customFonts
+ .map((fontName) => fontName.replace(' ', '+'))
+ .map((fontName) => fontName.concat(':400,400i,700,700'))
+ .join('|');
+ return (
+
+ );
+};
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
index 904f2e114e..a0b3fc9d04 100644
--- a/assets/js/src/form_editor/store/selectors.jsx
+++ b/assets/js/src/form_editor/store/selectors.jsx
@@ -116,6 +116,9 @@ export default {
getPreviewPageUrl(state) {
return state.previewPageUrl;
},
+ getAllCustomFonts(state) {
+ return state.customFonts;
+ },
/**
* Goes thru all parents of the block and return
diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx
index cf148cfe31..6918248f4d 100644
--- a/assets/js/src/form_editor/store/store.jsx
+++ b/assets/js/src/form_editor/store/store.jsx
@@ -61,6 +61,7 @@ export default () => {
previewSettings,
editorUrl: window.location.href,
previewPageUrl: window.mailpoet_form_preview_page,
+ customFonts: window.mailpoet_custom_fonts,
};
const config = {
diff --git a/lib/AdminPages/Pages/FormEditor.php b/lib/AdminPages/Pages/FormEditor.php
index f7788638cb..0181c47223 100644
--- a/lib/AdminPages/Pages/FormEditor.php
+++ b/lib/AdminPages/Pages/FormEditor.php
@@ -8,6 +8,7 @@ use MailPoet\CustomFields\CustomFieldsRepository;
use MailPoet\Form\Block;
use MailPoet\Form\FormFactory;
use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Form\Util\CustomFonts;
use MailPoet\Form\Util\Export;
use MailPoet\Models\Form;
use MailPoet\Models\Segment;
@@ -35,9 +36,7 @@ class FormEditor {
/** @var WPFunctions */
private $wp;
- /**
- * @var FormFactory
- */
+ /** @var FormFactory */
private $formsFactory;
public function __construct(
@@ -98,6 +97,7 @@ class FormEditor {
'sub_menu' => 'mailpoet-forms',
'custom_fields' => $this->customFieldsResponseBuilder->buildBatch($customFields),
'preview_page_url' => $this->getPreviewPageUrl(),
+ 'custom_fonts' => CustomFonts::FONTS,
];
$this->wp->wpEnqueueMedia();
$this->pageRenderer->displayPage('form/editor.html', $data);
diff --git a/lib/Form/Util/CustomFonts.php b/lib/Form/Util/CustomFonts.php
index 1f1768fd31..44aa456e62 100644
--- a/lib/Form/Util/CustomFonts.php
+++ b/lib/Form/Util/CustomFonts.php
@@ -5,7 +5,7 @@ namespace MailPoet\Form\Util;
use MailPoet\WP\Functions;
class CustomFonts {
- const fonts = [
+ const FONTS = [
'Abril FatFace',
'Alegreya',
'Alegreya Sans',
@@ -81,10 +81,10 @@ class CustomFonts {
$this->wp->wpEnqueueStyle('mailpoet_custom_fonts_css', $this->generateLink());
}
- private function generateLink():string {
+ private function generateLink(): string {
$fonts = array_map(function ($fontName) {
return urlencode($fontName) . ':400,400i,700,700i';
- }, self::fonts);
+ }, self::FONTS);
$fonts = implode('|', $fonts);
return 'https://fonts.googleapis.com/css?family=' . $fonts;
}
diff --git a/views/form/editor.html b/views/form/editor.html
index 5ac4bcf3f4..4729e4aad9 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -29,6 +29,7 @@
var mailpoet_date_formats = <%= json_encode(date_formats) %>;
var mailpoet_month_names = <%= json_encode(month_names) %>;
var mailpoet_form_preview_page = <%= json_encode(preview_page_url) %>;
+ var mailpoet_custom_fonts = <%= json_encode(custom_fonts) %>;
<% endautoescape %>