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 %>