Add Single Product Details block

assets/js/blocks/single-product-details/block.json

@@ -0,0 +1,13 @@
+{
+	"name": "woocommerce/single-product-details",
+	"version": "1.0.0",
+	"title": "Single Product Details",
+	"description": "A block that allows your customers to see details and reviews about the product.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {},
+	"attributes": {},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/single-product-details/block.tsx

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+interface SingleProductTab {
+	id: string;
+	title: string;
+	active: boolean;
+	content: string | undefined;
+}
+
+const ProductTabTitle = ( {
+	id,
+	title,
+	active,
+}: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => {
+	return (
+		<li
+			className={ classnames( `${ id }_tab`, {
+				active,
+			} ) }
+			id={ `tab-title-${ id }` }
+			role="tab"
+			aria-controls={ `tab-${ id }` }
+		>
+			<a href={ `#tab-${ id }` }>{ title }</a>
+		</li>
+	);
+};
+
+const ProductTabContent = ( {
+	id,
+	content,
+}: Pick< SingleProductTab, 'id' | 'content' > ) => {
+	return (
+		<div
+			className={ `${ id }_tab` }
+			id={ `tab-title-${ id }` }
+			role="tab"
+			aria-controls={ `tab-${ id }` }
+		>
+			{ content }
+		</div>
+	);
+};
+
+export const SingleProductDetails = () => {
+	const productTabs = [
+		{
+			id: 'description',
+			title: 'Description',
+			active: true,
+			content: __(
+				'This block lists description, attributes and reviews for a single product.',
+				'woo-gutenberg-products-block'
+			),
+		},
+		{
+			id: 'additional_information',
+			title: 'Additional Information',
+			active: false,
+		},
+		{ id: 'reviews', title: 'Reviews', active: false },
+	];
+	const tabsTitle = productTabs.map( ( { id, title, active } ) => (
+		<ProductTabTitle
+			key={ id }
+			id={ id }
+			title={ title }
+			active={ active }
+		/>
+	) );
+	const tabsContent = productTabs.map( ( { id, content } ) => (
+		<ProductTabContent key={ id } id={ id } content={ content } />
+	) );
+
+	return (
+		<div className="woocommerce-tabs wc-tabs-wrapper">
+			<ul className="tabs" role="tablist">
+				{ tabsTitle }
+			</ul>
+			{ tabsContent }
+		</div>
+	);
+};
+
+export default SingleProductDetails;

assets/js/blocks/single-product-details/edit.tsx

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { Attributes } from './types';
+import './editor.scss';
+
+const Edit = ( { attributes, ...rest }: BlockEditProps< Attributes > ) => {
+	console.log( { attributes } );
+	console.log( { rest } );
+	const { className } = attributes;
+	const blockProps = useBlockProps( {
+		className: classNames( 'wc-block-single-product-details', className ),
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<Disabled>
+					<Block />
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

assets/js/blocks/single-product-details/editor.scss

@@ -0,0 +1,5 @@
+.wc-block-single-product-details {
+	ul.tabs.li {
+		list-style-type: none;
+	}
+}

assets/js/blocks/single-product-details/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+registerBlockType( metadata, {
+	attributes: {
+		...metadata.attributes,
+	},
+	edit,
+	save() {
+		return null;
+	},
+} );

assets/js/blocks/single-product-details/style.scss

@@ -0,0 +1,46 @@
+.wp-block-woocommerce-single-product-details {
+	ul.tabs {
+		list-style: none;
+		padding: 0 0 0 1em;
+		margin: 0 0 1.618em;
+		overflow: hidden;
+		position: relative;
+		border-bottom: 1px solid $gray-200;
+
+		li {
+			border: 1px solid $gray-200;
+			background-color: $white;
+			display: inline-block;
+			position: relative;
+			z-index: 0;
+			border-radius: 4px 4px 0 0;
+			margin: 0;
+			padding: 0.5em 1em;
+			opacity: 0.5;
+
+			a {
+				display: inline-block;
+				font-weight: 700;
+				color: $black;
+				text-decoration: none;
+
+				&:hover {
+					text-decoration: none;
+					color: lighten($black, 10%);
+				}
+			}
+
+			&.active {
+				background: $gray-100;
+				z-index: 2;
+				border-bottom-color: $gray-200;
+				opacity: 1;
+
+				a {
+					color: inherit;
+					text-shadow: inherit;
+				}
+			}
+		}
+	}
+}

assets/js/blocks/single-product-details/types.ts

@@ -0,0 +1,3 @@
+export interface Attributes {
+	className?: string;
+}

bin/webpack-entries.js

@@ -66,6 +66,9 @@ const blocks = {
 	'single-product': {
 		isExperimental: true,
 	},
+	'single-product-details': {
+		isExperimental: true,
+	},
 	'stock-filter': {},
 };
 

src/BlockTemplatesController.php

@@ -67,7 +67,7 @@ protected function init() {
 		add_filter( 'get_block_templates', array( $this, 'add_block_templates' ), 10, 3 );
 		add_filter( 'current_theme_supports-block-templates', array( $this, 'remove_block_template_support_for_shop_page' ) );
 		add_filter( 'taxonomy_template_hierarchy', array( $this, 'add_archive_product_to_eligible_for_fallback_templates' ), 10, 1 );
-
+		add_filter( 'woocommerce_product_tabs', 'woocommerce_default_product_tabs' );
 		if ( $this->package->is_experimental_build() ) {
 			add_action( 'after_switch_theme', array( $this, 'check_should_use_blockified_product_grid_templates' ), 10, 2 );
 		}

src/BlockTypes/SingleProductDetails.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
+/**
+ * SingleProductDetails class.
+ */
+class SingleProductDetails extends AbstractBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'single-product-details';
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content Block content.
+	 * @param WP_Block $block Block instance.
+	 *
+	 * @return string Rendered block output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		$tabs = $this->render_tabs();
+
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
+		return sprintf(
+			'<div class="wp-block-woocommerce-single-product-details %1$s" style="%2$s">
+				%3$s
+			</div>',
+			esc_attr( $classes_and_styles['classes'] ),
+			esc_attr( $classes_and_styles['styles'] ),
+			$tabs,
+		);
+	}
+
+	protected function render_tabs(){
+		ob_start();
+
+		while ( have_posts() ) {
+			the_post();
+			woocommerce_output_product_data_tabs();
+		}
+
+		$tabs = ob_get_clean();
+
+		return $tabs;
+	}
+}

src/BlockTypesController.php

@@ -206,6 +206,7 @@ protected function get_block_types() {
 			'RatingFilter',
 			'ReviewsByCategory',
 			'ReviewsByProduct',
+			'SingleProductDetails',
 			'StockFilter',
 		];
 

tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json

@@ -0,0 +1 @@
+{"title":"Single Product Details Block","pageContent":"<!-- wp:woocommerce/single-product-details /-->"}

tests/e2e/specs/backend/single-produt-details.test.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { getAllBlocks, switchUserToAdmin } from '@wordpress/e2e-test-utils';
+import { visitBlockPage } from '@woocommerce/blocks-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { insertBlockDontWaitForInsertClose } from '../../utils.js';
+
+const block = {
+	name: 'Single Product Details',
+	slug: 'woocommerce/single-product-details',
+	class: '.wc-block-single-product-details',
+};
+
+describe( `${ block.name } Block`, () => {
+	beforeAll( async () => {
+		await switchUserToAdmin();
+		await visitBlockPage( `${ block.name } Block` );
+	} );
+
+	it( 'can be inserted more than once', async () => {
+		await insertBlockDontWaitForInsertClose( block.name );
+		expect( await getAllBlocks() ).toHaveLength( 2 );
+	} );
+
+	it( 'renders without crashing', async () => {
+		await expect( page ).toRenderBlock( block );
+	} );
+} );