Adding items to a custom import map to allow using file imports as yo…

…u would normally.

plugins/htm-no-build/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}

plugins/htm-no-build/htm-no-build.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Plugin Name:       Htm No Build
- * Description:       Example block scaffolded with Create Block tool.
+ * Description:       A block that uses the HTM package instead of JSX.
  * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           0.1.0
@@ -24,7 +24,6 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-
 add_action(
 	'init',
 	function() {
@@ -45,23 +44,46 @@ function() {
 	}
 );
 
+/**
+ * Enqueue our module in the block editor.
+ */
+function enqueue_block_module() {
+	wp_enqueue_script( 'htm-block', plugin_dir_url( __FILE__ ) . 'src/index.js' );
+}
 
 add_action(
-	'wp_footer',
-	'enqueue_block_module'
-);
-
-add_action(
-	'admin_footer',
+	'enqueue_block_editor_assets',
 	'enqueue_block_module'
 );
 
 /**
- * Hack to get our module loaded.
+ * Filter the script, add an importmap, and set it to type "module".
  */
-function enqueue_block_module() {
-?>
-	<script type="module" src="<?php echo esc_url( plugin_dir_url( __FILE__ ) . 'src/index.js' ); ?>"></script>
-<?php
+function change_block_script_type( $tag, $handle, $src ) {
+	// If this is our script, add the importmap and change the type to module
+	if ( 'htm-block' === $handle ) {
+
+		$imports = json_encode([
+			'edit' => plugin_dir_url( __FILE__ ) . 'src/edit.js',
+			'htm' => "https://unpkg.com/htm?module"
+		]);
+
+		return <<<SCRIPT
+<script type="importmap">
+	{
+		"imports": $imports
+	}
+</script>
+<script type="module" src="$src"></script>
+SCRIPT;
+	}
+	// return the tag o
+	return $tag;
 }
 
+add_filter(
+	'script_loader_tag',
+	'change_block_script_type',
+	10,
+	3
+);