use jsx

README.md

@@ -1 +1,19 @@
+**TODO** - currently the block name is hardcoded to `svg` and theme is `room-vw`.
+Need to use templating to create a `<block-name>.php` file (based on `svg.php)
+with the correct theme/block names.
 
+
+## Usage
+
+```sh
+npm install
+
+# build and watch for development
+npm run dev
+
+# build for production
+npm run build
+```
+
+The links to the WordPress default config files are required so that code
+editors pick up the correct linting configurations.

src/index.js

@@ -1,9 +1,8 @@
 import './style.scss';
 import './editor.scss';
 
-const registerBlockType = { wp.blocks };
+import { registerBlockType } from '@wordpress/blocks';
-const el = { wp.element };
+import { __ } from '@wordpress/i18n';
-const __ = { wp.i18n};
 
 registerBlockType( 'room-vw/svg', {
 	title: __( 'SVG Wrapper', 'room-vw' ),
@@ -16,14 +15,14 @@ registerBlockType( 'room-vw/svg', {
 	},
 
 	edit( props ) {
-		return el(
+		return (
-			'p',
+			<p className={ props.className }>
-			{ className: props.className },
+				{ __( 'Hello from the editor!', 'room-vw' ) }
-			__( 'Hello from the editor!', 'room-vw' )
+			</p>
 		);
 	},
 
 	save() {
-		return el( 'p', {}, __( 'Hello from the saved content!', 'room-vw' ) );
+		return <p>{ __( 'Hello from the saved content!', 'room-vw' ) }</p>;
 	},
 } );

src/style.scss

@@ -5,7 +5,7 @@
  */
 
 .wp-block-room-vw-svg {
-	background-color: #000;
+	background-color: #666;
 	color: #fff;
 	padding: 2px;
 }

svg.php

@@ -17,7 +17,7 @@ function svg_block_init() {
 		$asset_file['version']
 	);
 
-	$editor_css = 'build/style-index.css';
+	$editor_css = 'build/index.css';
 	wp_register_style(
 		'svg-block-editor',
 		"$uri/$editor_css",
@@ -25,7 +25,7 @@ function svg_block_init() {
 		filemtime( "$dir/$editor_css" )
 	);
 
-	$style_css = 'build/index.css';
+	$style_css = 'build/style-index.css';
 	wp_register_style(
 		'svg-block',
 		"$uri/$style_css",