Remove fonts duplication

[MAILPOET-2849]

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 = () => (
-  <link
-    rel="stylesheet"
-    href={`https://fonts.googleapis.com/css?family=${customFontsUrl}`}
-  />
-);
+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 (
+    <link
+      rel="stylesheet"
+      href={`https://fonts.googleapis.com/css?family=${customFontsUrl}`}
+    />
+  );
+};

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

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 = {

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);

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;
   }

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