Create basic block

[MAILPOET-1798]

assets/css/src/components/_postEditorBlock.scss

@@ -0,0 +1,6 @@
+.mailpoet-block-div {
+  background: #cfc;
+  border: 2px solid #9c9;
+  color: green;
+  padding: 20px;
+}

assets/css/src/post-editor-block.scss

@@ -0,0 +1 @@
+@import './components/postEditorBlock';

assets/js/src/post_editor_block/blocks.jsx

@@ -0,0 +1 @@
+import './form_block.jsx';

assets/js/src/post_editor_block/form_block.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const wp = window.wp;
+const { registerBlockType } = wp.blocks;
+
+registerBlockType('mailpoet/form-block', {
+  title: 'Example: Basic (esnext)',
+  icon: 'universal-access-alt',
+  category: 'widgets',
+  example: {},
+  edit() {
+    return (
+      <div className="mailpoet-block-div">Hello World, step 1 (from the editor).</div>
+    );
+  },
+  save() {
+    return null;
+  },
+});

lib/Config/Initializer.php

@@ -68,6 +68,9 @@ class Initializer {
   /** @var WooCommerceHelper */
   private $wcHelper;
 
+  /** @var PostEditorBlock */
+  private $postEditorBlock;
+
   const INITIALIZED = 'MAILPOET_INITIALIZED';
 
   public function __construct(
@@ -85,6 +88,7 @@ class Initializer {
     Shortcodes $shortcodes,
     DatabaseInitializer $databaseInitializer,
     WCTransactionalEmails $wcTransactionalEmails,
+    PostEditorBlock $postEditorBlock,
     WooCommerceHelper $wcHelper
   ) {
       $this->rendererFactory = $rendererFactory;
@@ -102,6 +106,7 @@ class Initializer {
       $this->databaseInitializer = $databaseInitializer;
       $this->wcTransactionalEmails = $wcTransactionalEmails;
       $this->wcHelper = $wcHelper;
+      $this->postEditorBlock = $postEditorBlock;
   }
 
   public function init() {
@@ -203,6 +208,7 @@ class Initializer {
       $this->setupPermanentNotices();
       $this->setupDeactivationSurvey();
       $this->setupAutomaticEmails();
+      $this->postEditorBlock->init();
 
       WPFunctions::get()->doAction('mailpoet_initialized', MAILPOET_VERSION);
     } catch (\Exception $e) {

lib/Config/PostEditorBlock.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace MailPoet\Config;
+
+use MailPoet\WP\Functions as WPFunctions;
+
+class PostEditorBlock {
+  /** @var Renderer */
+  private $renderer;
+
+  /** @var WPFunctions */
+  private $wp;
+
+  public function __construct(Renderer $renderer, WPFunctions $wp) {
+    $this->renderer = $renderer;
+    $this->wp = $wp;
+  }
+
+  public function init() {
+    // this has to be here until we drop support for WordPress < 5.0
+    if (!function_exists('register_block_type')) return;
+
+    $this->wp->wpEnqueueScript(
+      'mailpoet-block-form-block-js',
+      Env::$assetsUrl . '/dist/js/' . $this->renderer->getJsAsset('post_editor_block.js'),
+      ['wp-blocks'],
+      Env::$version,
+      true
+    );
+
+    $this->wp->wpEnqueueStyle(
+      'mailpoetblock-form-block-css',
+      Env::$assetsUrl . '/dist/css/' . $this->renderer->getCssAsset('post-editor-block.css'),
+      ['wp-edit-blocks'],
+      Env::$version
+    );
+
+    register_block_type( 'mailpoet/form-block', [
+      'style' => 'mailpoetblock-form-block-css',
+      'editor_script' => 'mailpoet/form-block',
+    ]);
+  }
+
+}

lib/DI/ContainerConfigurator.php

@@ -101,6 +101,7 @@ class ContainerConfigurator implements IContainerConfigurator {
     $container->autowire(\MailPoet\Config\MP2Migrator::class);
     $container->autowire(\MailPoet\Config\RendererFactory::class)->setPublic(true);
     $container->autowire(\MailPoet\Config\ServicesChecker::class);
+    $container->autowire(\MailPoet\Config\PostEditorBlock::class);
     $container->autowire(\MailPoet\Config\Shortcodes::class)
       ->setShared(false); // Get a new instance each time $container->get() is called, needed for tests
     $container->register(\MailPoet\Config\Renderer::class)

webpack.config.js

@@ -370,7 +370,15 @@ const formEditorConfig = {
   },
 };
 
-module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig].map((config) => {
+// Block config
+const postEditorBlock = {
+  name: 'post_editor_block',
+  entry: {
+    post_editor_block: 'post_editor_block/blocks.jsx',
+  },
+};
+
+module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig, postEditorBlock].map((config) => {
   if (config.name !== 'test') {
     config.plugins = config.plugins || [];
     config.plugins.push(