Add Gutenberg block for the booking form

.babelrc

@@ -0,0 +1,23 @@
+{
+	"presets": [
+		[ "env", {
+			"modules": false,
+			"targets": {
+				"browsers": [
+					"last 2 Chrome versions",
+					"last 2 Firefox versions",
+					"last 2 Safari versions",
+					"last 2 iOS versions",
+					"last 1 Android version",
+					"last 1 ChromeAndroid version",
+					"ie 11"
+				]
+			}
+		} ]
+	],
+	"plugins": [
+		[ "transform-react-jsx", {
+			"pragma": "wp.element.createElement"
+		} ]
+	]
+}

assets/css/block-booking-form.css

@@ -0,0 +1,130 @@
+/* Stylesheet for the Restaurant Reservations booking form block in the post editor */
+
+.rtb-block-outline-fieldset {
+	padding: 1rem;
+	border: 1px solid;
+}
+
+.rtb-block-outline-fieldset + .rtb-block-outline-fieldset {
+	margin-top: 1rem;
+}
+
+.rtb-block-outline-field + .rtb-block-outline-field  {
+	position: relative;
+	margin-top: 1rem;
+}
+
+.rtb-block-outline-label {
+	width: 4em;
+	height: 0.75rem;
+	margin-bottom: 0.5rem;
+	background: #777;
+}
+
+.rtb-block-outline-input {
+	min-height: 2rem;
+	background: #fff;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.rtb-block-outline-button {
+	display: inline-block;
+	margin-top: 1rem;
+	min-height: 2rem;
+	line-height: 2rem;
+	padding: 0 0.5rem;
+	background: #777;
+	color: #fff;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 12px;
+	border-radius: 0.25rem;
+}
+
+.rtb_print_form_select_field .rtb-block-outline-input,
+.rtb_print_form_text_field .rtb-block-outline-input {
+	max-width: 15em;
+}
+
+.rtb_print_form_textarea_field .rtb-block-outline-input {
+	height: 5rem;
+}
+
+.rtb-block-outline-field-consent-statement,
+.rtb_print_form_confirm_field {
+	padding-top: 0.5rem;
+}
+
+.rtb-block-outline-field-consent-statement .rtb-block-outline-label,
+.rtb_print_form_confirm_field .rtb-block-outline-label {
+	display: none;
+}
+
+.rtb-block-outline-field-consent-statement:before,
+.rtb_print_form_confirm_field:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 1rem;
+	height: 1rem;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.rtb-block-outline-field-consent-statement  .rtb-block-outline-input,
+.rtb_print_form_confirm_field .rtb-block-outline-input {
+	margin-left: 1.5rem;
+	margin-top: 0;
+	margin-bottom: 1.25rem;
+	height: 0.25rem;
+	min-height: 0.25rem;
+	background: #777;
+	border: none;
+}
+
+.rtb_print_form_radio_field:before,
+.rtb_print_form_checkbox_field:before {
+	content: '';
+	position: absolute;
+	top: 1.5rem;
+	left: 0;
+	width: 1rem;
+	height: 1rem;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.rtb_print_form_radio_field:before {
+	border-radius: 50%;
+}
+
+.rtb_print_form_radio_field .rtb-block-outline-input,
+.rtb_print_form_checkbox_field .rtb-block-outline-input {
+	margin-left: 1.5rem;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+	height: 0.25rem;
+	min-height: 0.25rem;
+	background: #777;
+	border: none;
+}
+
+.rtb-block-outline-field-party {
+	max-width: 3em;
+}
+
+.rtb_print_form_message_link + .rtb-block-outline-field-message {
+	display: none;
+}
+
+.rtb_print_form_message_link .rtb-block-outline-label {
+	display: none;
+}
+
+.rtb_print_form_message_link .rtb-block-outline-input {
+	margin-top: 0.75em;
+	margin-bottom: 1.25rem;
+	height: 0.25rem;
+	min-height: 0.25rem;
+	width: 4rem;
+	background: rgb(0, 126, 177);
+	border: none;
+}

assets/js/block-booking-form.js

@@ -0,0 +1,66 @@
+const { __ } = wp.i18n;
+const {	registerBlockType } = wp.blocks;
+const { SelectControl, PanelBody } = wp.components;
+const {	InspectorControls } = wp.editor;
+const {	formOutline, locationsEnabled, locations } = rtb_blocks;
+
+registerBlockType( 'restaurant-reservations/booking-form', {
+	title: __( 'Booking Form', 'restaurant-reservations' ),
+	icon: 'calendar',
+	category: 'widgets',
+	attributes: {
+		location: {
+			type: 'number',
+			default: 0
+		}
+	},
+	supports: {
+		html: false,
+		reusable: false,
+		multiple: false,
+	},
+	edit( { attributes, setAttributes } ) {
+		const { location } = attributes;
+
+		function setLocation( location ) {
+			setAttributes( { location: location } );
+		}
+
+		return (
+			<div class="rtb-block-outline">
+				{locationsEnabled ? (
+					<InspectorControls>
+						 <PanelBody>
+							<SelectControl
+								label={ __( 'Location' ) }
+								value={ location }
+								onChange={ setLocation }
+								options={ locations }
+							/>
+						</PanelBody>
+					</InspectorControls>
+				) : '' }
+				{formOutline.map( (fields) => {
+					return (
+						<div className="rtb-block-outline-fieldset">
+							{fields.map( (field) => {
+								return (
+									<div className={'rtb-block-outline-field ' + field}>
+										<div className="rtb-block-outline-label"></div>
+										<div className="rtb-block-outline-input"></div>
+									</div>
+								)
+							})}
+						</div>
+					)
+				})}
+				<div class="rtb-block-outline-button">
+					{ __('Request Booking', 'restaurant-reservations') }
+				</div>
+			</div>
+		);
+	},
+	save() {
+		return null;
+	},
+} );

includes/Blocks.class.php

@@ -0,0 +1,111 @@
+<?php
+if ( !defined( 'ABSPATH' ) ) exit;
+
+if ( !class_exists( 'rtbBlocks' ) ) {
+/**
+ * Class to create, edit and display blocks for the Gutenberg editor
+ *
+ * @since 0.0.1
+ */
+class rtbBlocks {
+
+	/**
+	 * Add hooks
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'register' ) );
+	}
+
+	/**
+	 * Register blocks
+	 */
+	public function register() {
+
+		if ( !function_exists( 'register_block_type' ) ) {
+			return;
+		}
+
+		wp_register_script(
+			'restaurant-reservations-blocks',
+			RTB_PLUGIN_URL . '/assets/js/blocks.build.js',
+			array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' )
+		);
+
+		wp_register_style(
+			'restaurant-reservations-blocks',
+			RTB_PLUGIN_URL . '/assets/css/block-booking-form.css',
+			array()
+		);
+
+		register_block_type( 'restaurant-reservations/booking-form', array(
+			'editor_script' => 'restaurant-reservations-blocks',
+			'editor_style' => 'restaurant-reservations-blocks',
+			'render_callback' => array( $this, 'render' )
+		) );
+
+		add_action( 'admin_init', array( $this, 'register_admin' ) );
+	}
+
+	/**
+	 * Register admin-only assets for block handling
+	 */
+	public function register_admin() {
+
+		global $rtb_controller;
+
+		$fields = $rtb_controller->settings->get_booking_form_fields();
+		$form_outline = array();
+		foreach ( $fields as $fieldset ) {
+			if ( !isset( $fieldset['fields'] ) ) {
+				continue;
+			}
+			$fieldset_outline = array();
+			foreach ( $fieldset['fields'] as $field_name => $field ) {
+				if ( $field_name === 'party' ) {
+					$fieldset_outline[] = $field['callback'] . ' rtb-block-outline-field-party';
+				} elseif ( $field_name === 'message' ) {
+					$fieldset_outline[] = $field['callback'] . ' rtb-block-outline-field-message';
+				} elseif ( $field_name === 'consent-statement' ) {
+					$fieldset_outline[] = $field['callback'] . ' rtb-block-outline-field-consent-statement';
+				} else {
+					$fieldset_outline[] = $field['callback'];
+				}
+			}
+			$form_outline[] = $fieldset_outline;
+		}
+
+		$locations_enabled = !!$rtb_controller->locations->post_type;
+
+		if ($locations_enabled) {
+			$locations = $rtb_controller->locations->get_location_options();
+			$location_options = array( array( 'value' => 0, 'label' => __('Ask the user to select a location', 'restaurant-reservations' ) ) );
+			foreach ( $locations as $id => $name ) {
+				$location_options[] = array( 'value' => $id, 'label' => $name);
+			}
+		}
+
+		wp_add_inline_script(
+			'restaurant-reservations-blocks',
+			sprintf(
+				'var rtb_blocks = %s;',
+				json_encode( array(
+					'formOutline' => $form_outline,
+					'locationsEnabled' => $locations_enabled,
+					'locations' => $location_options,
+				) )
+			),
+			'before'
+		);
+	}
+
+	/**
+	 * Render the booking form
+	 *
+	 * @param array $attributes The block attributes
+	 * @return string
+	 */
+	public function render( $attributes ) {
+		return rtb_print_booking_form( $attributes );
+	}
+}
+} // endif

includes/MultipleLocations.class.php

@@ -539,7 +539,7 @@ public function print_location_metabox( $post ) {
 			<div class="rtb-location-meta-input rtb-location-meta-append-form">
 				<label>
 					<input type="checkbox" name="rtb_append_booking_form" value="1"<?php if ( $append_booking_form ) : ?> checked="checked"<?php endif; ?>>
-					<?php esc_html_e( 'Show booking form with this location.', 'restaurant-reservations' ); ?>
+					<?php esc_html_e( "Automatically add the booking form to this page.", 'restaurant-reservations' ); ?>
 				</label>
 			</div>
 

includes/template-functions.php

@@ -110,13 +110,13 @@ function rtb_print_booking_form( $args = array() ) {
 			<?php
 				foreach( $contents['fields'] as $slug => $field ) {
 
-					$args = empty( $field['callback_args'] ) ? array() : $field['callback_args'];
+					$callback_args = empty( $field['callback_args'] ) ? array() : $field['callback_args'];
 
 					if ( !empty( $field['required'] ) ) {
-						$args = array_merge( $args, array( 'required' => $field['required'] ) );
+						$callback_args = array_merge( $callback_args, array( 'required' => $field['required'] ) );
 					}
 
-					call_user_func( $field['callback'], $slug, $field['title'], $field['request_input'], $args );
+					call_user_func( $field['callback'], $slug, $field['title'], $field['request_input'], $callback_args );
 				}
 			?>
 		</fieldset>