initial commit

.editorconfig

@@ -0,0 +1,21 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,9 @@
+**/*.min.js
+**/*.build.js
+**/node_modules/**
+**/vendor/**
+build
+coverage
+cypress
+node_modules
+vendor

.eslintrc.json

@@ -0,0 +1,192 @@
+{
+	"root": true,
+	"parser": "babel-eslint",
+	"extends": [
+		"wordpress",
+		"plugin:react/recommended",
+		"plugin:jsx-a11y/recommended",
+		"plugin:jest/recommended"
+	],
+	"env": {
+		"browser": false,
+		"es6": true,
+		"node": true,
+		"mocha": true,
+		"jest/globals": true
+	},
+	"parserOptions": {
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"globals": {
+		"wp": true,
+		"wpApiSettings": true,
+		"window": true,
+		"document": true
+	},
+	"plugins": ["react", "jsx-a11y", "jest"],
+	"settings": {
+		"react": {
+			"pragma": "wp"
+		}
+	},
+	"rules": {
+		"array-bracket-spacing": ["error", "always"],
+		"brace-style": ["error", "1tbs"],
+		"camelcase": ["error", { "properties": "never" }],
+		"comma-dangle": ["error", "always-multiline"],
+		"comma-spacing": "error",
+		"comma-style": "error",
+		"computed-property-spacing": ["error", "always"],
+		"constructor-super": "error",
+		"dot-notation": "error",
+		"eol-last": "error",
+		"eqeqeq": "error",
+		"func-call-spacing": "error",
+		"indent": ["error", "tab", { "SwitchCase": 1 }],
+		"jsx-a11y/label-has-for": [
+			"error",
+			{
+				"required": "id"
+			}
+		],
+		"jsx-a11y/media-has-caption": "off",
+		"jsx-a11y/no-noninteractive-tabindex": "off",
+		"jsx-a11y/role-has-required-aria-props": "off",
+		"jsx-quotes": "error",
+		"key-spacing": "error",
+		"keyword-spacing": "error",
+		"lines-around-comment": "off",
+		"no-alert": "error",
+		"no-bitwise": "error",
+		"no-caller": "error",
+		"no-console": "error",
+		"no-const-assign": "error",
+		"no-debugger": "error",
+		"no-dupe-args": "error",
+		"no-dupe-class-members": "error",
+		"no-dupe-keys": "error",
+		"no-duplicate-case": "error",
+		"no-duplicate-imports": "error",
+		"no-else-return": "error",
+		"no-eval": "error",
+		"no-extra-semi": "error",
+		"no-fallthrough": "error",
+		"no-lonely-if": "error",
+		"no-mixed-operators": "error",
+		"no-mixed-spaces-and-tabs": "error",
+		"no-multiple-empty-lines": ["error", { "max": 1 }],
+		"no-multi-spaces": "error",
+		"no-multi-str": "off",
+		"no-negated-in-lhs": "error",
+		"no-nested-ternary": "error",
+		"no-redeclare": "error",
+		"no-restricted-syntax": [
+			"error",
+			{
+				"selector":
+					"ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]",
+				"message": "Path access on WordPress dependencies is not allowed."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^blocks$/]",
+				"message": "Use @wordpress/blocks as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^components$/]",
+				"message": "Use @wordpress/components as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^date$/]",
+				"message": "Use @wordpress/date as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^editor$/]",
+				"message": "Use @wordpress/editor as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^element$/]",
+				"message": "Use @wordpress/element as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^i18n$/]",
+				"message": "Use @wordpress/i18n as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^data$/]",
+				"message": "Use @wordpress/data as import path instead."
+			},
+			{
+				"selector": "ImportDeclaration[source.value=/^utils$/]",
+				"message": "Use @wordpress/utils as import path instead."
+			},
+			{
+				"selector":
+					"CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])",
+				"message": "Translate function arguments must be string literals."
+			},
+			{
+				"selector":
+					"CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])",
+				"message": "Translate function arguments must be string literals."
+			},
+			{
+				"selector":
+					"CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])",
+				"message": "Translate function arguments must be string literals."
+			}
+		],
+		"no-shadow": "error",
+		"no-undef": "error",
+		"no-undef-init": "error",
+		"no-unreachable": "error",
+		"no-unsafe-negation": "error",
+		"no-unused-expressions": "error",
+		"no-unused-vars": "error",
+		"no-useless-computed-key": "error",
+		"no-useless-constructor": "error",
+		"no-useless-return": "error",
+		"no-var": "error",
+		"no-whitespace-before-property": "error",
+		"object-curly-spacing": ["error", "always"],
+		"padded-blocks": ["error", "never"],
+		"prefer-const": "error",
+		"quote-props": ["error", "as-needed"],
+		"react/display-name": "off",
+		"react/jsx-curly-spacing": [
+			"error",
+			{
+				"when": "always",
+				"children": true
+			}
+		],
+		"react/jsx-equals-spacing": "error",
+		"react/jsx-indent": ["error", "tab"],
+		"react/jsx-indent-props": ["error", "tab"],
+		"react/jsx-key": "error",
+		"react/jsx-tag-spacing": "error",
+		"react/no-children-prop": "off",
+		"react/no-find-dom-node": "warn",
+		"react/prop-types": "off",
+		"semi": "error",
+		"semi-spacing": "error",
+		"space-before-blocks": ["error", "always"],
+		"space-before-function-paren": ["error", "never"],
+		"space-in-parens": ["error", "always"],
+		"space-infix-ops": ["error", { "int32Hint": false }],
+		"space-unary-ops": [
+			"error",
+			{
+				"overrides": {
+					"!": true
+				}
+			}
+		],
+		"template-curly-spacing": ["error", "always"],
+		"valid-jsdoc": ["error", { "requireReturn": false }],
+		"valid-typeof": "error",
+		"yoda": "off"
+	}
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+## Uncomment line below if you prefer to
+## keep compiled files out of version control
+# dist/

dist/blocks.editor.build.css

@@ -0,0 +1 @@
+.wp-block-cgb-block-mobilizon{background:#bada55;border:0.2rem solid #292929;color:#292929;margin:0 auto;max-width:740px;padding:2rem}

dist/blocks.style.build.css

@@ -0,0 +1 @@
+.wp-block-cgb-block-mobilizon{margin:0 auto;max-width:600px;padding:0.5rem 0;list-style:none}.wp-block-cgb-block-mobilizon time{font-size:1rem}.wp-block-cgb-block-mobilizon h2{margin:0.5rem 0}.wp-block-cgb-block-mobilizon li{margin-bottom:2.5rem}.wp-block-cgb-block-mobilizon img{width:100%}

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "mobilizon-cgb-guten-block",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "cgb-scripts start",
+    "build": "cgb-scripts build",
+    "eject": "cgb-scripts eject"
+  },
+  "dependencies": {
+    "cgb-scripts": "1.23.1"
+  }
+}

plugin.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Plugin Name: Mobilizon Block
+ * Plugin URI: https://info.graz.social/mobilizon-block
+ * Description: Mobilizon Block is a Gutenberg Block which can display events from Mobilizon.
+ * Author: André Menrath
+ * Author URI: https://graz.social/@linos
+ * Version: 0.1
+ * License: GPLv3
+ * License URI: https://www.gnu.org/licenses/gpl-3.0.txt
+ *
+ * @package linos
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Block Initializer.
+ */
+require_once plugin_dir_path( __FILE__ ) . 'src/init.php';

readme.md

@@ -0,0 +1,23 @@
+# About
+This Wordpress-Plugin is inspired by https://github.com/wordpress-connector-for-mobilizon/connector-mobilizon/.
+
+## Differences to connector-mobilizon
+- Using a Gutenberg-Block, not a shortcode
+- Fetches the events on the server side (php), not on the client side (JavaSkript), which is out-of-the-box GDPR-compatible.
+
+# Changelog
+## 01. August 2021
+Initial Proof of Concept
+
+## Additional Information
+This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).
+
+# Development
+
+## 👉  `npm start`
+- Use to compile and run the block in development mode.
+- Watches for any changes and reports back any errors in your code.
+
+## 👉  `npm run build`
+- Use to build production code for your block inside `dist` folder.
+- Runs once and reports back the gzip file sizes of the produced code.

src/block/editor.scss

@@ -0,0 +1,15 @@
+/**
+ * #.# Editor Styles
+ *
+ * CSS for just Backend enqueued after style.scss
+ * which makes it higher in priority.
+ */
+
+.wp-block-cgb-block-mobilizon  {
+  background: $green;
+  border: 0.2rem solid $black;
+  color: $black;
+  margin: 0 auto;
+  max-width: 740px;
+  padding: 2rem;
+}

src/block/style.scss

@@ -0,0 +1,24 @@
+/**
+ * #.# Styles
+ *
+ * CSS for both Frontend+Backend.
+ */
+
+.wp-block-cgb-block-mobilizon  {
+  margin: 0 auto;
+  max-width: 600px;
+  padding: 0.5rem 0;
+  list-style: none;
+  time {
+    font-size: 1rem;
+  }
+  h2 {
+    margin: 0.5rem 0;
+  }
+  li {
+    margin-bottom: 2.5rem;
+  }
+  img {
+    width: 100%;
+  }
+}

src/blocks.js

@@ -0,0 +1,12 @@
+/**
+ * Gutenberg Blocks
+ *
+ * All blocks related JavaScript files should be imported here.
+ * You can create a new block folder in this dir and include code
+ * for that block here as well.
+ *
+ * All blocks should be included here since this is the file that
+ * Webpack is compiling as the input file.
+ */
+
+import './block/block.js';

src/common.scss

@@ -0,0 +1,13 @@
+/**
+ * #.# Common SCSS
+ *
+ * Can include things like variables and mixins
+ * that are used across the project.
+*/
+
+// Colors.
+$black: rgb(41, 41, 41);
+$white: #f4f4f4;
+$gray: #dedede;
+$green: #bada55;
+$red: orangered;

src/init.php

@@ -0,0 +1,215 @@
+<?php
+/**
+ * Blocks Initializer
+ *
+ * Enqueue CSS/JS of all the blocks.
+ *
+ * @since   1.0.0
+ * @package CGB
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Enqueue Gutenberg block assets for both frontend + backend.
+ *
+ * Assets enqueued:
+ * 1. blocks.style.build.css - Frontend + Backend.
+ * 2. blocks.build.js - Backend.
+ * 3. blocks.editor.build.css - Backend.
+ *
+ * @uses {wp-blocks} for block type registration & related functions.
+ * @uses {wp-element} for WP Element abstraction — structure of blocks.
+ * @uses {wp-i18n} to internationalize the block's text.
+ * @uses {wp-editor} for WP editor styles.
+ * @since 1.0.0
+ */
+function stripTrailingSlash(&$component) {
+	$component = rtrim($component, '/');
+}
+function addhttp($url) {
+	if (!preg_match("~^(?:f|ht)tps?://~i", $url)) {
+		$url = "https://" . $url;
+	}
+	return $url;
+}
+function block_render_callback($attributes, $content) {
+	//print_r($attributes);
+	$base = $attributes['mobilizonBaseURL'];
+	if (isset($attributes['mobilizonEventLimit']) && ($limit != 0)) {
+		$limit = $attributes['mobilizonEventLimit'];
+		$limit = "(limit: ${limit})";
+	} else {
+		$limit = "";
+	}
+	$url_array = array($base, "api");
+	array_walk_recursive($url_array, 'stripTrailingSlash'); 
+	$endpoint = implode('/', $url_array);
+
+	$endpoint = addhttp($endpoint);
+
+	if (isset($attributes['mobilizonGroupName']) && $attributes['mobilizonGroupName'] != '' ) {
+		$filter_by_group = True;
+	} else {
+		$filter_by_group = False;
+	}
+	if ($filter_by_group) {
+		$groupName = $attributes['mobilizonGroupName'];
+		$query = "query  {
+					group (preferredUsername: \"${groupName}\") {
+						organizedEvents ${limit} {
+							elements {
+							id,
+							title,
+							url,
+							beginsOn,
+							endsOn,
+							physicalAddress {
+								description,
+								locality
+							}
+							},
+							total
+						}
+					}
+				}
+				";
+	}
+	else {
+		$query = "query {
+					events ${limit} {
+					elements {
+						id,
+						url,
+						title,
+						beginsOn,
+						endsOn,
+						status,
+						picture {
+						url
+						},
+						physicalAddress {
+						id,
+						description,
+						locality
+						}
+					},
+					total
+					}
+				}
+				";
+	}
+
+	
+	$headers = ['Content-Type: application/json', 'User-Agent: Minimal GraphQL client'];
+	$data = array ('query' => $query);
+	$data = http_build_query($data);
+	
+	$options = array(
+	'http' => array(
+		'method'  => 'POST',
+		'header' => "Content-Type: application/x-www-form-urlencoded\r\n",
+		'content' => $data
+	)
+	);
+	
+	$context  = stream_context_create($options);
+	$result = file_get_contents(sprintf($endpoint), false, $context);
+	if ($result === FALSE) { /* Handle error */ }
+	ob_start();
+	$data = json_decode($result);
+	//print_r($data);
+	if ($filter_by_group) {
+		$events = $data->data->group->organizedEvents->elements;
+	} else {
+		$events = $data->data->events->elements;
+	}
+
+	echo '<ul class="wp-block-cgb-block-mobilizon">';
+	foreach ($events as $event)  {
+	echo '<li>';
+	echo '<time>';
+	echo date_i18n( 'D, d. M. Y, G:i', strtotime($event->beginsOn) );
+	echo '</time>';
+	echo '<h2>';
+	echo $event->title;
+	echo '</h2>';
+	//print_r($attributes);
+	if (!isset($attributes['mobilizonShowHeaderImage']) ) { 
+		if (isset($event->picture->url) ){
+			$imageData = base64_encode(file_get_contents($event->picture->url));
+			echo '<img src="data:image/jpeg;base64,'.$imageData.'">';
+		}
+	}
+	echo '</li>';
+	}
+	echo '</ul>';
+	return ob_get_clean();
+}
+
+function mobilizon_cgb_block_assets() { // phpcs:ignore
+	// Register block styles for both frontend + backend.
+	wp_register_style(
+		'mobilizon-cgb-style-css', // Handle.
+		plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
+		is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
+		null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
+	);
+
+	// Register block editor script for backend.
+	wp_register_script(
+		'mobilizon-cgb-block-js', // Handle.
+		plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
+		array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
+		null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
+		true // Enqueue the script in the footer.
+	);
+
+	// Register block editor styles for backend.
+	wp_register_style(
+		'mobilizon-cgb-block-editor-css', // Handle.
+		plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
+		array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
+		null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
+	);
+
+	// WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
+	wp_localize_script(
+		'mobilizon-cgb-block-js',
+		'cgbGlobal', // Array containing dynamic data for a JS Global.
+		[
+			'pluginDirPath' => plugin_dir_path( __DIR__ ),
+			'pluginDirUrl'  => plugin_dir_url( __DIR__ ),
+			// Add more data here that you want to access from `cgbGlobal` object.
+		]
+	);
+
+	/**
+	 * Register Gutenberg block on server-side.
+	 *
+	 * Register the block on server-side to ensure that the block
+	 * scripts and styles for both frontend and backend are
+	 * enqueued when the editor loads.
+	 *
+	 * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
+	 * @since 1.16.0
+	 */
+	register_block_type(
+		'cgb/block-mobilizon', array(
+			// Enqueue blocks.style.build.css on both frontend & backend.
+			'style'         => 'mobilizon-cgb-style-css',
+			// Enqueue blocks.build.js in the editor only.
+			'editor_script' => 'mobilizon-cgb-block-js',
+			// Enqueue blocks.editor.build.css in the editor only.
+			'editor_style'  => 'mobilizon-cgb-block-editor-css',
+			'render_callback' => 'block_render_callback',
+		)
+	);
+	
+}
+
+// Hook: Block assets.
+add_action( 'init', 'mobilizon_cgb_block_assets' );