Import block JS.

blocks-jsx/payment-form/block.json

@@ -7,7 +7,7 @@
 			"type": "string"
 		}
 	},
-	"editorScript": "pronamic-payment-form-editor",
+	"editorScript": "file:./index.js",
 	"editorStyle": "pronamic-pay-forms",
 	"style": "pronamic-pay-forms",
 	"textdomain": "pronamic_ideal"

blocks-jsx/payment-form/index.js

@@ -0,0 +1,109 @@
+/* globals pronamic_payment_form */
+( function ( wp, blocks, components, editor, element ) {
+	var el = element.createElement;
+	var Fragment = element.Fragment;
+	var InspectorControls = editor.InspectorControls;
+	var Button = components.Button;
+	var Placeholder = components.Placeholder;
+	var TextControl = components.TextControl;
+	var ServerSideRender = wp.serverSideRender;
+
+	/**
+	 * Register payment form block type.
+	 *
+	 * @param string name     Block name.
+	 * @param object settings Block settings.
+	 *
+	 * @return WPBlock        Block if registered successfully, otherwise "undefined".
+	 */
+	blocks.registerBlockType( 'pronamic-pay/payment-form', {
+		title: pronamic_payment_form.title,
+		icon: 'money',
+		category: 'pronamic-pay',
+
+		// Attributes.
+		attributes: {
+			amount: {
+				type: 'string'
+			}
+		},
+
+		// Feature supports.
+		supports: {
+			// Remove support for an HTML mode.
+			html: false
+		},
+
+		// Edit.
+		edit: function ( props ) {
+			var amount = props.attributes.amount;
+			var hasSettingsSet = props.attributes && parseInt( amount ) > 0;
+
+			function onChangeAmount( updatedAmount ) {
+				props.setAttributes( { amount: updatedAmount } );
+			}
+
+			return el( Fragment, null,
+
+				// Inspector controls.
+				el( InspectorControls, null,
+					el( Fragment, null,
+						el( TextControl, {
+							type: 'number',
+							step: 'any',
+							label: pronamic_payment_form.label_amount,
+							value: amount,
+							onChange: onChangeAmount
+						} )
+					)
+				),
+
+				// Setup required props.
+				! hasSettingsSet &&
+				el( Placeholder, {
+						label: pronamic_payment_form.title,
+						icon: 'money'
+					},
+					el( Fragment, null,
+						el( TextControl, {
+							type: 'number',
+							step: 'any',
+							label: pronamic_payment_form.label_amount,
+							onChange: function ( value ) {
+							},
+							onBlur: function () {
+								onChangeAmount( event.target.value );
+							}
+						} ),
+						el( 'div',
+							{
+								style: { width: '100%' }
+							},
+							el( Button,
+								{ isPrimary: true },
+								el( Fragment, null, pronamic_payment_form.label_add_form )
+							)
+						)
+					)
+				),
+
+				// Server side render.
+				hasSettingsSet && el( ServerSideRender, {
+					block: 'pronamic-pay/payment-form',
+					attributes: props.attributes
+				} )
+			);
+		},
+
+		// Save.
+		save: function () {
+			return null;
+		}
+	} );
+} )(
+	window.wp,
+	window.wp.blocks,
+	window.wp.components,
+	window.wp.blockEditor,
+	window.wp.element
+);

blocks/payment-form/block.json

@@ -7,7 +7,7 @@
       "type": "string"
     }
   },
-  "editorScript": "pronamic-payment-form-editor",
+  "editorScript": "file:./index.js",
   "editorStyle": "pronamic-pay-forms",
   "style": "pronamic-pay-forms",
   "textdomain": "pronamic_ideal"

blocks/payment-form/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => 'dcd21500c176b426e3e6');

src/BlocksModule.php

@@ -57,7 +57,7 @@ public function register_scripts() {
 
 		wp_register_script(
 			'pronamic-payment-form-editor',
-			plugins_url( '/js/dist/block-payment-form' . $min . '.js', dirname( __DIR__ ) ),
+			plugins_url( '/blocks/payment-form/index.js', __DIR__ ),
 			[ 'wp-blocks', 'wp-components', 'wp-editor', 'wp-element' ],
 			pronamic_pay_plugin()->get_version(),
 			false