add basic block

.eslintrc.json

@@ -5,7 +5,8 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:ava/recommended"
+    "plugin:ava/recommended",
+    "plugin:@wordpress/eslint-plugin/recommended"
   ],
   "parserOptions": {
     "ecmaVersion": 11,
@@ -22,10 +23,21 @@
       "error",
       2
     ],
+    "no-console": [
+      "error", {
+        "allow": ["error"]
+      }
+    ],
+    "prettier/prettier": [
+      "off"
+    ],
     "quotes": [
       "error",
       "single"
     ],
+    "react/jsx-key": [
+      "off"
+    ],
     "semi": [
       "error",
       "never"

gulpfile.js

@@ -18,18 +18,38 @@ function clean(cb) {
 }
 
 const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader';
+const blockEventsLoaderOutputPath = PACKAGE.name + '/front/block-events-loader';
 const eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
+const blockEventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/block-events-loader.js';
 
 function bundleFrontend() {
-  return src(FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js')
+  return src([
+    FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js',
+    FOLDER_SOURCE + '/' + PACKAGE.name + '/front/block-events-loader.js',
+  ])
     .pipe(webpack({
       mode,
       entry: {
         [eventsLoaderOutputPath]: eventsLoaderInputPath,
+        [blockEventsLoaderOutputPath]: blockEventsLoaderInputPath,
       },
       output: {
         filename: '[name].js',
       },
+      module: {
+        rules: [
+          {
+            test: /\.m?js$/,
+            exclude: /(node_modules)/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env', '@babel/preset-react']
+              }
+            }
+          }
+        ]
+      }
     }))
     .pipe(dest(FOLDER_BUILD));
 }
@@ -45,6 +65,7 @@ function copyBackend() {
 function injectMetadata() {
   return src([
     FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
+    FOLDER_BUILD + '/' + blockEventsLoaderOutputPath + '.js',
     FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
     FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
     FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'

package.json

@@ -26,10 +26,14 @@
     "object-hash": "^2.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@wordpress/eslint-plugin": "^9.2.0",
     "ava": "^3.15.0",
+    "babel-loader": "^8.2.3",
     "c8": "^7.10.0",
     "del": "^6.0.0",
-    "eslint": "^8.1.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-ava": "^13.1.0",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",

source/connector-mobilizon/connector-mobilizon.php

@@ -40,3 +40,16 @@ function mobilizon_connector_register_events_list_widget() {
   register_widget('MobilizonConnector\EventsListWidget');
 }
 add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');
+
+function mobilizon_connector_initialize_blocks() {
+  wp_register_script(MobilizonConnector\NAME . '-block-starter', plugins_url('front/block-events-loader.js', __FILE__ ), [
+      'wp-blocks',
+      'wp-components',
+      'wp-editor',
+      'wp-i18n'
+    ]);
+  register_block_type(MobilizonConnector\NAME . '/events-list', [
+    'editor_script' => MobilizonConnector\NAME . '-block-starter'
+  ]);
+}
+add_action('init', 'mobilizon_connector_initialize_blocks');

source/connector-mobilizon/front/block-events-loader.js

@@ -0,0 +1 @@
+import './blocks/events-list'

source/connector-mobilizon/front/blocks/events-list/edit.js

@@ -0,0 +1,27 @@
+const { InspectorControls } = wp.blockEditor
+const { PanelBody } = wp.components
+const { __ } = wp.i18n
+
+export default ({ attributes, setAttributes }) => {
+  function updateEventsCount(event) {
+    let newValue = Number(event.target.value)
+    if (newValue < 1) newValue = 1
+    setAttributes({ eventsCount: newValue })
+  }
+  function updateGroupName(event) {
+    setAttributes({ groupName: event.target.value })
+  }
+  return ([
+    <InspectorControls>
+      <PanelBody title={ __('Events List Settings', '<wordpress-name>') }>
+        <label className="components-base-control__label">{ __('Number of events to show', '<wordpress-name>') }</label>
+        <input className="components-text-control__input" type="number" value={ attributes.eventsCount } onChange={ updateEventsCount } />
+        <label className="components-base-control__label">{ __('Group name (optional)', '<wordpress-name>') }</label>
+        <input className="components-text-control__input" type="text" value={ attributes.groupName } onChange={ updateGroupName } />
+      </PanelBody>
+    </InspectorControls>,
+    <ul>
+      { [...Array(attributes.eventsCount)].map((_, i) => <li className="busterCards" key={ i }>{ __('Event', '<wordpress-name>') } { i }</li>) }
+    </ul>
+  ])
+}

source/connector-mobilizon/front/blocks/events-list/index.js

@@ -0,0 +1,28 @@
+import edit from './edit'
+import save from './save'
+
+const { registerBlockType } = wp.blocks
+const { __ } = wp.i18n
+
+const NAME = '<wordpress-name>'
+
+registerBlockType(NAME + '/events-list', {
+  title: __('Events List', '<wordpress-name>'),
+  description: __('A list of the upcoming events of the connected Mobilizon instance.', '<wordpress-name>'),
+  icon: 'list-view',
+  category: 'widgets',
+  attributes: {
+    eventsCount: {
+      type: 'number',
+      default: 3
+    },
+    groupName: {
+      type: 'string'
+    }
+  },
+  supports: {
+    html: false
+  },
+  edit,
+  save,
+})

source/connector-mobilizon/front/blocks/events-list/save.js

@@ -0,0 +1,21 @@
+const { __ } = wp.i18n
+
+const NAME = '<wordpress-name>'
+
+const URL = 'https://mobilizon.fr' // TODO
+const LOCALE = 'en-GB' // TODO
+const TIMEZONE = 'Europe/Rome' // TODO
+const isShortOffsetNameShown = true // TODO
+
+export default ({ attributes }) => {
+  return(
+    <ul className={ NAME + '_events-list' }
+      data-url={ URL }
+      data-locale={ LOCALE }
+      data-maximum={ attributes.eventsCount }
+      data-group-name={ attributes.groupName }
+      data-time-zone={ TIMEZONE }>
+      <li style="display: none;">{ __('The events could not be loaded!', '<wordpress-name>') }</li>
+    </ul>
+  )
+}