Adopted WP standard block location

Moved blocks into a multi-block folder structure
Added url-loader for static images
Moved CSS to build dir

.gitignore

@@ -4,3 +4,5 @@
 composer.lock
 /vendor/
 node_modules/
+/build/**
+!/build/*.css

blocks/activity/build/index.asset.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => '70b7abdf6184e1241f188c3eb90bb933');

blocks/activity/build/index.js

@@ -1 +0,0 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(1);Object(o.registerBlockType)("wp-strava/activity",{title:"Strava Activity",icon:"chart-line",category:"widgets",edit:function(){return Object(r.createElement)("div",null,"Hola, mundo!")},save:function(){return Object(r.createElement)("div",null,"Hola, mundo!")}})}]);

blocks/activity/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "activity",
-  "version": "1.0.0",
-  "license": "GPL-2.0-or-later",
-  "description": "",
-  "main": "build/index.js",
-  "scripts": {
-    "build": "wp-scripts build"
-  },
-  "devDependencies": {
-    "@wordpress/scripts": "6.1.0"
-  }
-}

blocks/index.php

@@ -1,3 +0,0 @@
-<?php
-
-include 'activity/index.php';

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "activity",
+  "name": "wp-strava-tools",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -11891,6 +11891,29 @@
         }
       }
     },
+    "url-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-3.0.0.tgz",
+      "integrity": "sha512-a84JJbIA5xTFTWyjjcPdnsu+41o/SNE8SpXMdUvXs6Q+LuhCD9E2+0VCiuDWqgo3GGXVlFHzArDmBpj9PgWn4A==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "mime": "^2.4.4",
+        "schema-utils": "^2.5.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
+          "integrity": "sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.10.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "wp-strava-tools",
+  "version": "1.0.0",
+  "license": "GPL-2.0-or-later",
+  "description": "",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "6.1.0",
+    "url-loader": "^3.0.0"
+  }
+}

src/blocks.php

@@ -12,51 +12,51 @@
  *
  * @see https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/#enqueuing-block-scripts
  */
-function wpstrava_activity_register_block() {
+function wpstrava_register_block() {
 	// automatically load dependencies and version
-	$asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
+	$asset_file = include WPSTRAVA_PLUGIN_DIR . 'build/index.asset.php';
 
-	wp_register_script(
-		'wp-strava/activity',
-		plugins_url( 'build/index.js', __FILE__ ),
+	wp_enqueue_script(
+		'wp-strava-block',
+		plugins_url( 'build/index.js', WPSTRAVA_PLUGIN_FILE ),
 		$asset_file['dependencies'],
 		$asset_file['version']
 	);
 
-	wp_register_style(
-		'wp-strava/activity-editor',
-		plugins_url( 'editor.css', __FILE__ ),
+	wp_enqueue_style(
+		'wp-strava-block-editor',
+		plugins_url( 'build/editor.css', WPSTRAVA_PLUGIN_FILE ),
 		array( 'wp-edit-blocks' ),
-		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
+		filemtime( WPSTRAVA_PLUGIN_DIR . 'build/editor.css' )
 	);
 
-	wp_register_style(
-		'wp-strava/activity',
-		plugins_url( 'style.css', __FILE__ ),
+	wp_enqueue_style(
+		'wp-strava-block',
+		plugins_url( 'build/style.css', WPSTRAVA_PLUGIN_FILE ),
 		array(),
-		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
+		filemtime( WPSTRAVA_PLUGIN_DIR . 'build/style.css' )
 	);
 
-	register_block_type(
-		'wp-strava/activity',
-		array(
-			'style'           => 'wp-strava/activity',
-			'editor_style'    => 'wp-strava/activity-editor',
-			'editor_script'   => 'wp-strava/activity',
-			'render_callback' => 'wpstrava_activity_render_block',
-		)
-	);
+	// register_block_type(
+	// 	'wp-strava-block',
+	// 	array(
+	// 		'style'           => 'wp-strava-block',
+	// 		'editor_style'    => 'wp-strava-block-editor',
+	// 		'editor_script'   => 'wp-strava-block',
+	// 		'render_callback' => 'wpstrava_activity_render_block',
+	// 	)
+	// );
 
-	if ( function_exists( 'wp_set_script_translations' ) ) {
-		/**
-		 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
-		 * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
-		 * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
-		 */
-		wp_set_script_translations( 'wp-strava/activity', 'wp-strava' );
-	}
+	// if ( function_exists( 'wp_set_script_translations' ) ) {
+	// 	/**
+	// 	 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
+	// 	 * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
+	// 	 * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
+	// 	 */
+	// 	wp_set_script_translations( 'wp-strava-block', 'wp-strava' );
+	// }
 }
-add_action( 'init', 'wpstrava_activity_register_block' );
+add_action( 'init', 'wpstrava_register_block' );
 
 function wpstrava_activity_render_block( $attributes, $content ) {
 

src/blocks/activity/index.js

@@ -1,9 +1,10 @@
 import { registerBlockType } from '@wordpress/blocks';
+import ActivityImage from './activity.png';
 
 registerBlockType( 'wp-strava/activity', {
     title: 'Strava Activity',
     icon: 'chart-line',
     category: 'widgets',
-    edit: () => <div>Hola, mundo!</div>,
+    edit: () => <img src={ActivityImage} />,
     save: () => <div>Hola, mundo!</div>,
 } );

src/blocks/route/editor.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-wp-strava-route {
+	border: 1px dotted #f00;
+}

src/blocks/route/index.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * Functions to register client-side assets (scripts and stylesheets) for the
+ * Gutenberg block.
+ *
+ * @package wp-strava
+ */
+
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ *
+ * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ */
+function route_block_init() {
+	// Skip block registration if Gutenberg is not enabled/merged.
+	if ( ! function_exists( 'register_block_type' ) ) {
+		return;
+	}
+	$dir = dirname( __FILE__ );
+
+	$index_js = 'route/index.js';
+	wp_register_script(
+		'route-block-editor',
+		plugins_url( $index_js, __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-i18n',
+			'wp-element',
+		),
+		filemtime( "$dir/$index_js" )
+	);
+
+	$editor_css = 'route/editor.css';
+	wp_register_style(
+		'route-block-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'route/style.css';
+	wp_register_style(
+		'route-block',
+		plugins_url( $style_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$style_css" )
+	);
+
+	register_block_type( 'wp-strava/route', array(
+		'editor_script' => 'route-block-editor',
+		'editor_style'  => 'route-block-editor',
+		'style'         => 'route-block',
+	) );
+}
+add_action( 'init', 'route_block_init' );

src/blocks/route/src/index.js

@@ -0,0 +1,76 @@
+( function( wp ) {
+	/**
+	 * Registers a new block provided a unique name and an object defining its behavior.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/#registering-a-block
+	 */
+	var registerBlockType = wp.blocks.registerBlockType;
+	/**
+	 * Returns a new element of given type. Element is an abstraction layer atop React.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-element/
+	 */
+	var el = wp.element.createElement;
+	/**
+	 * Retrieves the translation of text.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-i18n/
+	 */
+	var __ = wp.i18n.__;
+
+	/**
+	 * Every block starts by registering a new block type definition.
+	 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/#registering-a-block
+	 */
+	registerBlockType( 'wp-strava/route', {
+		/**
+		 * This is the display title for your block, which can be translated with `i18n` functions.
+		 * The block inserter will show this name.
+		 */
+		title: __( 'Route', 'wp-strava' ),
+
+		/**
+		 * Blocks are grouped into categories to help users browse and discover them.
+		 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+		 */
+		category: 'widgets',
+
+		/**
+		 * Optional block extended support features.
+		 */
+		supports: {
+			// Removes support for an HTML mode.
+			html: false,
+		},
+
+		/**
+		 * The edit function describes the structure of your block in the context of the editor.
+		 * This represents what the editor will render when the block is used.
+		 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+		 *
+		 * @param {Object} [props] Properties passed from the editor.
+		 * @return {Element}       Element to render.
+		 */
+		edit: function( props ) {
+			return el(
+				'p',
+				{ className: props.className },
+				__( 'Hello from the editor!', 'wp-strava' )
+			);
+		},
+
+		/**
+		 * The save function defines the way in which the different attributes should be combined
+		 * into the final markup, which is then serialized by Gutenberg into `post_content`.
+		 * @see https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+		 *
+		 * @return {Element}       Element to render.
+		 */
+		save: function() {
+			return el(
+				'p',
+				{},
+				__( 'Hello from the saved content!', 'wp-strava' )
+			);
+		}
+	} );
+} )(
+	window.wp
+);

src/blocks/route/style.css

@@ -0,0 +1,11 @@
+/**
+ * The following styles get applied both on the front of your site and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-wp-strava-route {
+	background-color: #000;
+	color: #fff;
+	padding: 2px;
+}

src/index.js

@@ -0,0 +1,5 @@
+console.log('LOLBBQ');
+console.log('WTF');
+
+import './blocks/activity';
+

webpack.config.js

@@ -0,0 +1,17 @@
+const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
+
+module.exports = {
+  ...defaultConfig,
+  module: {
+    ...defaultConfig.module,
+    rules: [
+      ...defaultConfig.module.rules,
+      {
+        test: /\.(png|jpg)$/,
+        use: {
+          loader: "url-loader"
+        }
+      }
+    ]
+  }
+};

wp-strava.php

@@ -27,8 +27,8 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
-
 define( 'WPSTRAVA_PLUGIN_VERSION', '2.1.0' );
+define( 'WPSTRAVA_PLUGIN_FILE', __FILE__ );
 define( 'WPSTRAVA_PLUGIN_DIR', trailingslashit( dirname( __FILE__ ) ) );
 define( 'WPSTRAVA_PLUGIN_URL', plugins_url( '/', __FILE__ ) );
 define( 'WPSTRAVA_PLUGIN_NAME', plugin_basename( __FILE__ ) );
@@ -45,7 +45,7 @@ function wpstrava_plugin_loaded() {
 
 	// Include Gutenberg blocks.
 	if ( function_exists( 'register_block_type' ) ) {
-		include WPSTRAVA_PLUGIN_DIR . 'blocks/index.php';
+		include WPSTRAVA_PLUGIN_DIR . 'src/blocks.php';
 	}
 }
 add_action( 'plugins_loaded', 'wpstrava_plugin_loaded' );