Abstract LegacyTemplate block (woocommerce#4991)

* Legacy Template block

* Return render_single_product value

* Make placeholder text translatable

* Don't allow removing the block

* Update block title

Co-authored-by: Albert Juhé Lluveras <[email protected]>

assets/js/blocks/legacy-template/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Placeholder } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+interface Props {
+	attributes: {
+		template: string;
+	};
+}
+
+const Edit = ( { attributes }: Props ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Placeholder
+				label={ sprintf(
+					/* translators: %s is the template name */
+					__(
+						'Wireframe template for %s will be rendered here.',
+						'woo-gutenberg-products-block'
+					),
+					attributes.template
+				) }
+			/>
+		</div>
+	);
+};
+
+registerExperimentalBlockType( 'woocommerce/legacy-template', {
+	title: __( 'WooCommerce Legacy Template', 'woo-gutenberg-products-block' ),
+	category: 'woocommerce',
+	apiVersion: 2,
+	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+	description: __(
+		'Renders legacy WooCommerce PHP templates.',
+		'woo-gutenberg-products-block'
+	),
+	supports: {
+		align: false,
+		html: false,
+		multiple: false,
+		reusable: false,
+		inserter: false,
+	},
+	example: {
+		attributes: {
+			isPreview: true,
+		},
+	},
+	attributes: {
+		/**
+		 * Template attribute is used to determine which core PHP template gets rendered.
+		 */
+		template: {
+			type: 'string',
+			default: 'any',
+		},
+		lock: {
+			type: 'object',
+			default: {
+				remove: true,
+			},
+		},
+	},
+	edit: Edit,
+	save: () => null,
+} );

bin/webpack-entries.js

@@ -53,6 +53,7 @@ const blocks = {
 	'single-product': {
 		isExperimental: true,
 	},
+	'legacy-template': {},
 };
 
 // Returns the entries for each block given a relative path (ie: `index.js`,

src/BlockTypes/AbstractBlock.php

@@ -176,16 +176,22 @@ protected function register_chunk_translations( $chunks ) {
 	 * Registers the block type with WordPress.
 	 */
 	protected function register_block_type() {
+		$block_settings = [
+			'render_callback' => $this->get_block_type_render_callback(),
+			'editor_script'   => $this->get_block_type_editor_script( 'handle' ),
+			'editor_style'    => $this->get_block_type_editor_style(),
+			'style'           => $this->get_block_type_style(),
+			'attributes'      => $this->get_block_type_attributes(),
+			'supports'        => $this->get_block_type_supports(),
+		];
+
+		if ( isset( $this->api_version ) && '2' === $this->api_version ) {
+			$block_settings['api_version'] = 2;
+		}
+
 		register_block_type(
 			$this->get_block_type(),
-			array(
-				'render_callback' => $this->get_block_type_render_callback(),
-				'editor_script'   => $this->get_block_type_editor_script( 'handle' ),
-				'editor_style'    => $this->get_block_type_editor_style(),
-				'style'           => $this->get_block_type_style(),
-				'attributes'      => $this->get_block_type_attributes(),
-				'supports'        => $this->get_block_type_supports(),
-			)
+			$block_settings
 		);
 	}
 

src/BlockTypes/LegacyTemplate.php

@@ -0,0 +1,62 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * Legacy Single Product class
+ *
+ * @internal
+ */
+class LegacyTemplate extends AbstractDynamicBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'legacy-template';
+
+	/**
+	 * API version.
+	 *
+	 * @var string
+	 */
+	protected $api_version = '2';
+
+	/**
+	 * Render method for the Legacy Template block. This method will determine which template to render.
+	 *
+	 * @param array  $attributes Block attributes.
+	 * @param string $content    Block content.
+	 *
+	 * @return string | void Rendered block type output.
+	 */
+	protected function render( $attributes, $content ) {
+		if ( null === $attributes['template'] ) {
+			return;
+		}
+
+		if ( 'single-product' === $attributes['template'] ) {
+			return $this->render_single_product();
+		} else {
+			ob_start();
+
+			echo "You're using the LegacyTemplate block";
+
+			wp_reset_postdata();
+			return ob_get_clean();
+		}
+	}
+
+	/**
+	 * Render method for the single product template and parts.
+	 *
+	 * @return string Rendered block type output.
+	 */
+	protected function render_single_product() {
+		ob_start();
+
+		echo 'This method will render the single product template';
+
+		wp_reset_postdata();
+		return ob_get_clean();
+	}
+}

src/BlockTypesController.php

@@ -174,6 +174,7 @@ protected function get_block_types() {
 			'AttributeFilter',
 			'StockFilter',
 			'ActiveFilters',
+			'LegacyTemplate',
 		];
 
 		if ( Package::feature()->is_feature_plugin_build() ) {