Google Map: Render block in editor

WordPress · Nov 13, 2023 · bfa544e · bfa544e
1 parent d146c0f
commit bfa544e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 	);
 }