Register categories for custom fields

[MAILPOET-2453]

assets/js/src/form_editor/blocks/blocks.jsx

@@ -1,4 +1,5 @@
 import { registerBlockType, setCategories } from '@wordpress/blocks';
+import { select } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 
 import * as divider from './divider/divider.jsx';
@@ -10,10 +11,16 @@ import * as segmentSelect from './segment_select/segment_select.jsx';
 import * as customHtml from './custom_html/custom_html.jsx';
 
 export default () => {
-  setCategories([
+  const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields()
+
+  const categories = [
     { slug: 'obligatory', title: '' }, // Blocks from this category are not in block insert popup
-    { slug: 'fields', title: MailPoet.I18n.t('fieldsBlocksCategory') },
-  ]);
+  ];
+  if (Array.isArray(customFields) && customFields.length) {
+    categories.push({ slug: 'custom-fields', title: MailPoet.I18n.t('customFieldsBlocksCategory') });
+  }
+  categories.push({ slug: 'fields', title: MailPoet.I18n.t('fieldsBlocksCategory') });
+  setCategories(categories);
 
   registerBlockType(divider.name, divider.settings);
   registerBlockType(email.name, email.settings);

assets/js/src/form_editor/store/selectors.jsx

@@ -20,6 +20,9 @@ export default {
   getAllAvailableSegments(state) {
     return state.segments;
   },
+  getAllAvailableCustomFields(state) {
+    return state.customFields;
+  },
   getAllAvailablePages(state) {
     return state.pages;
   },

assets/js/src/form_editor/store/store.jsx

@@ -23,6 +23,7 @@ export default () => {
     formErrors: validateForm(formData, formBlocks),
     segments: window.mailpoet_form_segments,
     pages: window.mailpoet_form_pages,
+    customFields: window.mailpoet_custom_fields,
     isFormSaving: false,
     notices: [],
     sidebar: {