Add template editor rendering

js/src/edit-block/components/editor.js

@@ -122,6 +122,10 @@ const Editor = ( { onError, postId, postType, settings } ) => {
 		<StrictMode>
 			<div className="h-screen flex flex-col items-center text-black">
 				{ template?.cssUrl ? <link rel="stylesheet" href={ template.cssUrl } type="text/css" /> : null }
+				{ ! template?.cssUrl && Boolean( block.templateCss )
+					? <style>{ block.templateCss }</style>
+					: null
+				}
 				<BrowserURL />
 				<UnsavedChangesWarning />
 				<EditorProvider

js/src/edit-block/components/template-editor.js

@@ -3,6 +3,7 @@
  */
 import * as React from 'react';
 import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-html';
 import 'ace-builds/src-noconflict/theme-textmate';
 
@@ -84,8 +85,12 @@ const TemplateEditor = () => {
 					} );
 				} }
 				name="gcb-template-editor"
-				editorProps={ { $blockScrolling: true } }
+				editorProps={ {
+					$blockScrolling: true,
+				} }
 				setOptions={ {
+					enableBasicAutocompletion: true,
+					enableLiveAutocompletion: true,
 					highlightActiveLine: true,
 					useWorker: false,
 				} }

php/Blocks/Block.php

@@ -67,6 +67,20 @@ class Block {
 	 */
 	public $fields = [];
 
+	/**
+	 * Template editor CSS.
+	 *
+	 * @var string
+	 */
+	public $template_css = '';
+
+	/**
+	 * Template editor markup.
+	 *
+	 * @var string
+	 */
+	public $template_markup = '';
+
 	/**
 	 * Block constructor.
 	 *
@@ -143,6 +157,14 @@ public function from_array( $config ) {
 			$this->keywords = $config['keywords'];
 		}
 
+		if ( isset( $config['templateCss'] ) ) {
+			$this->template_markup = $config['templateCss'];
+		}
+
+		if ( isset( $config['templateMarkup'] ) ) {
+			$this->template_markup = $config['templateMarkup'];
+		}
+
 		if ( isset( $config['fields'] ) ) {
 			foreach ( $config['fields'] as $key => $field ) {
 				$this->fields[ $key ] = new Field( $field );
@@ -156,12 +178,14 @@ public function from_array( $config ) {
 	 * @return string
 	 */
 	public function to_json() {
-		$config['name']     = $this->name;
-		$config['title']    = $this->title;
-		$config['excluded'] = $this->excluded;
-		$config['icon']     = $this->icon;
-		$config['category'] = $this->category;
-		$config['keywords'] = $this->keywords;
+		$config['name']           = $this->name;
+		$config['title']          = $this->title;
+		$config['excluded']       = $this->excluded;
+		$config['icon']           = $this->icon;
+		$config['category']       = $this->category;
+		$config['keywords']       = $this->keywords;
+		$config['templateCss']    = $this->template_css;
+		$config['templateMarkup'] = $this->template_markup;
 
 		$config['fields'] = [];
 		foreach ( $this->fields as $key => $field ) {

php/Blocks/Loader.php

@@ -39,13 +39,21 @@ class Loader extends ComponentAbstract {
 	 */
 	protected $data = [];
 
+	/**
+	 * The template editor.
+	 *
+	 * @var TemplateEditor
+	 */
+	protected $template_editor;
+
 	/**
 	 * Load the Loader.
 	 *
 	 * @return $this
 	 */
 	public function init() {
-		$this->assets = [
+		$this->template_editor = new TemplateEditor();
+		$this->assets          = [
 			'path' => [
 				'entry'        => $this->plugin->get_path( 'js/dist/block-editor.js' ),
 				'editor_style' => $this->plugin->get_path( 'css/dist/blocks.editor.css' ),
@@ -315,23 +323,19 @@ protected function render_block_template( $block, $attributes ) {
 		}
 
 		if ( ! is_admin() ) {
-			/**
-			 * The block has been added, but its values weren't saved (not even the defaults). This is a phenomenon
-			 * unique to frontend output, as the editor fetches its attributes from the form fields themselves.
-			 */
+			// The block has been added, but its values weren't saved (not even the defaults).
+			// This is unique to frontend output, as the editor fetches its attributes from the form fields themselves.
 			$missing_schema_attributes = array_diff_key( $block->fields, $attributes );
 			foreach ( $missing_schema_attributes as $attribute_name => $schema ) {
 				if ( isset( $schema->settings['default'] ) ) {
 					$attributes[ $attribute_name ] = $schema->settings['default'];
 				}
 			}
 
-			$this->enqueue_block_styles( $block->name, 'block' );
+			$did_enqueue_styles = $this->enqueue_block_styles( $block->name, 'block' );
 
-			/**
-			 * The wp_enqueue_style function handles duplicates, so we don't need to worry about multiple blocks
-			 * loading the global styles more than once.
-			 */
+			// The wp_enqueue_style function handles duplicates, so we don't need to worry about multiple blocks
+			// loading the global styles more than once.
 			$this->enqueue_global_styles();
 		}
 
@@ -372,16 +376,25 @@ protected function render_block_template( $block, $attributes ) {
 
 		ob_start();
 		$this->block_template( $block->name, $type );
-		$output = ob_get_clean();
 
-		return $output;
+		if ( empty( $did_enqueue_styles ) ) {
+			$this->template_editor->render_css(
+				isset( $this->blocks[ "genesis-custom-blocks/{$block->name}" ]['templateCss'] )
+					? $this->blocks[ "genesis-custom-blocks/{$block->name}" ]['templateCss']
+					: '',
+				$block->name
+			);
+		}
+
+		return ob_get_clean();
 	}
 
 	/**
 	 * Enqueues styles for the block.
 	 *
 	 * @param string       $name The name of the block (slug as defined in UI).
 	 * @param string|array $type The type of template to load.
+	 * @return bool Whether this found styles and enqueued them.
 	 */
 	protected function enqueue_block_styles( $name, $type = 'block' ) {
 		$locations = [];
@@ -397,18 +410,18 @@ protected function enqueue_block_styles( $name, $type = 'block' ) {
 		$stylesheet_path = genesis_custom_blocks()->locate_template( $locations );
 		$stylesheet_url  = genesis_custom_blocks()->get_url_from_path( $stylesheet_path );
 
-		/**
-		 * Enqueue the stylesheet, if it exists. The wp_enqueue_style function handles duplicates, so we don't need
-		 * to worry about the same block loading its stylesheets more than once.
-		 */
 		if ( ! empty( $stylesheet_url ) ) {
 			wp_enqueue_style(
 				"genesis-custom-blocks__block-{$name}",
 				$stylesheet_url,
 				[],
 				wp_get_theme()->get( 'Version' )
 			);
+
+			return true;
 		}
+
+		return false;
 	}
 
 	/**
@@ -473,19 +486,25 @@ protected function block_template( $name, $type = 'block' ) {
 
 			// This is not a load once template, so require_once is false.
 			load_template( $theme_template, false );
-		} else {
-			if ( ! current_user_can( 'edit_posts' ) || ! isset( $templates[0] ) ) {
-				return;
-			}
-			// Hide the template not found notice on the frontend, unless WP_DEBUG is enabled.
-			if ( ! is_admin() && ! ( defined( 'WP_DEBUG' ) && WP_DEBUG ) ) {
-				return;
-			}
+			return;
+		}
+
+		if ( ! empty( $this->blocks[ "genesis-custom-blocks/{$name}" ]['templateMarkup'] ) ) {
+			$this->template_editor->render_markup( $this->blocks[ "genesis-custom-blocks/{$name}" ]['templateMarkup'] );
+			return;
+		}
+
+		if ( ! current_user_can( 'edit_posts' ) || ! isset( $templates[0] ) ) {
+			return;
+		}
+
+		// Only show the template not found notice on the frontend if WP_DEBUG is enabled.
+		if ( is_admin() || ( defined( 'WP_DEBUG' ) && WP_DEBUG ) ) {
 			printf(
 				'<div class="notice notice-warning">%s</div>',
 				wp_kses_post(
-					// Translators: Placeholder is a file path.
-					sprintf( __( 'Template file %s not found.', 'genesis-custom-blocks' ), '<code>' . esc_html( $templates[0] ) . '</code>' )
+					/* translators: %1$s: file path */
+					sprintf( __( 'Template file %1$s not found.', 'genesis-custom-blocks' ), '<code>' . esc_html( $templates[0] ) . '</code>' )
 				)
 			);
 		}

php/Blocks/TemplateEditor.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * TemplateEditor.
+ *
+ * @package   Genesis\CustomBlocks
+ * @copyright Copyright(c) 2021, Genesis Custom Blocks
+ * @license http://opensource.org/licenses/GPL-2.0 GNU General Public License, version 2 (GPL-2.0)
+ */
+
+namespace Genesis\CustomBlocks\Blocks;
+
+/**
+ * Class TemplateEditor
+ */
+class TemplateEditor {
+
+	/**
+	 * The block names that have had their CSS rendered.
+	 *
+	 * @var string[]
+	 */
+	public $blocks_with_rendered_css = [];
+
+	/**
+	 * Renders markup that was entered in the template editor.
+	 *
+	 * @param string $markup The markup to render.
+	 */
+	public function render_markup( $markup ) {
+		$rendered = preg_replace_callback(
+			'#{{(\S+?)}}#',
+			static function( $matches ) {
+				ob_start();
+				block_field( $matches[1] );
+				return ob_get_clean();
+			},
+			$markup
+		);
+
+		// Escape characters before { should be stripped, like \{\{example\}\}.
+		// Like if they have a tutorial on Mustache and need the template to render {{example}}.
+		$rendered = preg_replace( '#\\\{\\\{(\S+?)\\\}\\\}#', '{{\1}}', $rendered );
+
+		echo wp_kses_post( $rendered );
+	}
+
+	/**
+	 * Renders CSS that was entered in the template editor.
+	 *
+	 * @param string $css        The CSS to render, if any.
+	 * @param string $block_name The block name, without the genesis-custom-blocks/ namespace.
+	 */
+	public function render_css( $css, $block_name ) {
+		if ( empty( $css ) || in_array( $block_name, $this->blocks_with_rendered_css, true ) ) {
+			return;
+		}
+
+		$this->blocks_with_rendered_css[] = $block_name;
+
+		?>
+		<style><?php echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></style>
+		<?php
+	}
+}

tests/e2e/specs/template-editor.js

@@ -12,14 +12,15 @@ const customPostType = 'genesis_custom_block';
 
 describe( 'TemplateEditor', () => {
 	it( 'creates a block with the template editor', async () => {
-		const { findByText, findByLabelText } = queries;
+		const { findByLabelText, findByRole, findByText } = queries;
 
 		const field = {
 			label: 'Text',
 			name: 'text',
 			type: 'text',
+			value: 'Here is an example value for this',
 		};
-		const blockName = 'Test Text';
+		const blockName = 'Test Template Editor';
 		const templateMarkup = `Here is the text field: {{${ field.name }}}`;
 
 		await visitAdminPage( 'post-new.php', `?post_type=${ customPostType }` );
@@ -33,6 +34,14 @@ describe( 'TemplateEditor', () => {
 		await page.keyboard.type( field.label );
 		await page.select( '#field-control', field.type );
 		await ( await findByText( $editBlockDocument, 'Template Editor' ) ).click();
-		( await page.waitForSelector( '#gcb-template-editor' ) ).type( templateMarkup );
+		await ( await page.waitForSelector( '#gcb-template-editor' ) ).click();
+		await page.keyboard.type( templateMarkup );
+
+		await ( await findByText( $editBlockDocument, 'Editor Preview' ) ).click();
+		await ( await findByLabelText( $editBlockDocument, field.label ) ).type( field.value );
+		await ( await findByRole( $editBlockDocument, 'button', { name: /save draft/i } ) ).click();
+
+		await ( await findByText( $editBlockDocument, 'Front-end Preview' ) ).click();
+		await findByText( $editBlockDocument, `Here is the text field: ${ field.value }` );
 	} );
 } );

tests/php/Integration/Fixtures/template-editor.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * A mock template in the template editor, testing all fields.
+ *
+ * @package Genesis\CustomBlocks
+ */
+
+// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaping could interfere with testing this template output.
+
+$fields = [
+	'textarea',
+	'url',
+	'email',
+	'number',
+	'color',
+	'image',
+	'select',
+	'toggle',
+	'range',
+	'checkbox',
+	'radio',
+	'text',
+	'multiselect',
+];
+
+ob_start();
+
+foreach ( $fields as $field ) :
+	?>
+	<p>
+		<?php
+		printf(
+			'Here is the result for %1$s: %2$s',
+			$field,
+			'{{' . $field . '}}'
+		);
+		?>
+	</p>
+	<?php
+endforeach;
+
+echo 'Here are escaped brackets: \{\{example\}\}';
+
+return ob_get_clean();