From bfa544e8ecd2ef5f3400688747c64999eb8cf1ec Mon Sep 17 00:00:00 2001
From: Ian Dunn <ian@iandunn.name>
Date: Mon, 13 Nov 2023 13:12:33 -0800
Subject: [PATCH] Google Map: Render block in editor

---
 .../google-map-event-filters/src/block.json     |  3 +--
 .../google-map-event-filters/src/index.js       | 17 ++++++++---------
 mu-plugins/blocks/google-map/index.php          |  9 +++++++++
 mu-plugins/blocks/google-map/src/block.json     |  1 +
 mu-plugins/blocks/google-map/src/index.js       | 16 +++++++---------
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/mu-plugins/blocks/google-map-event-filters/src/block.json b/mu-plugins/blocks/google-map-event-filters/src/block.json
index e1572e524..3c51abf84 100644
--- a/mu-plugins/blocks/google-map-event-filters/src/block.json
+++ b/mu-plugins/blocks/google-map-event-filters/src/block.json
@@ -28,6 +28,5 @@
 	"supports": {
 		"inserter": false
 	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style.css"
+	"editorScript": "file:./index.js"
 }
diff --git a/mu-plugins/blocks/google-map-event-filters/src/index.js b/mu-plugins/blocks/google-map-event-filters/src/index.js
index a00c78606..9c08a228d 100644
--- a/mu-plugins/blocks/google-map-event-filters/src/index.js
+++ b/mu-plugins/blocks/google-map-event-filters/src/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { Placeholder } from '@wordpress/components';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,13 +11,13 @@ import metadata from './block.json';
 
 function Edit() {
 	return (
-		<Placeholder
-			instructions={ __(
-				'This is a placeholder for the editor until a back-end UI is built. See the README for instructions on supplying data.',
-				'wporg'
-			) }
-			label={ __( 'Google Map Event Filters', 'wporg' ) }
-		/>
+		<div { ...useBlockProps() }>
+			<InnerBlocks
+				allowedBlocks={ [ 'wporg/google-map' ] }
+				template={ [ [ 'wporg/google-map' ] ] }
+				templateLock="all"
+			/>
+		</div>
 	);
 }
 
diff --git a/mu-plugins/blocks/google-map/index.php b/mu-plugins/blocks/google-map/index.php
index a0429af19..29597af9e 100644
--- a/mu-plugins/blocks/google-map/index.php
+++ b/mu-plugins/blocks/google-map/index.php
@@ -62,6 +62,15 @@ function render( $attributes, $content, $block ) {
 		'before'
 	);
 
+	wp_add_inline_script(
+		$block->block_type->editor_script_handles[0],
+		sprintf(
+			'const wporgGoogleMap = %s;',
+			wp_json_encode( $attributes )
+		),
+		'before'
+	);
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'id' => $attributes['id'] ) );
 
 	ob_start();
diff --git a/mu-plugins/blocks/google-map/src/block.json b/mu-plugins/blocks/google-map/src/block.json
index 12116390d..2dfec3bbf 100644
--- a/mu-plugins/blocks/google-map/src/block.json
+++ b/mu-plugins/blocks/google-map/src/block.json
@@ -41,6 +41,7 @@
 		"inserter": false
 	},
 	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
 	"viewScript": "file:./front.js",
 	"style": "file:./style.css"
 }
diff --git a/mu-plugins/blocks/google-map/src/index.js b/mu-plugins/blocks/google-map/src/index.js
index a5ba92ce0..d863d6432 100644
--- a/mu-plugins/blocks/google-map/src/index.js
+++ b/mu-plugins/blocks/google-map/src/index.js
@@ -1,24 +1,22 @@
+/* global wporgGoogleMap */
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { Placeholder } from '@wordpress/components';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import metadata from './block.json';
+import Main from './components/main';
 
 function Edit() {
 	return (
-		<Placeholder
-			instructions={ __(
-				'This is a placeholder for the editor. Data is supplied to this block via the pattern that includes it.',
-				'wporg'
-			) }
-			label={ __( 'WordPress.org Google Map', 'wporg' ) }
-		/>
+		<div { ...useBlockProps() }>
+			<Main { ...wporgGoogleMap } />
+		</div>
 	);
 }