add basic block

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>
+  )
+}