From d46e480105db9b3b74495faefc393d595e8a73ba Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 17 Jan 2023 18:57:39 -0300 Subject: [PATCH 01/21] Add minimum structure for Single Product Details block --- .../blocks/single-product-details/block.json | 31 +++++++++++++++++ .../blocks/single-product-details/block.tsx | 11 +++++++ .../js/blocks/single-product-details/edit.tsx | 33 +++++++++++++++++++ .../blocks/single-product-details/editor.scss | 3 ++ .../blocks/single-product-details/index.tsx | 20 +++++++++++ .../blocks/single-product-details/style.scss | 21 ++++++++++++ .../js/blocks/single-product-details/types.ts | 3 ++ bin/webpack-entries.js | 3 ++ package-lock.json | 2 +- src/BlockTypes/SingleProductDetails.php | 32 ++++++++++++++++++ src/BlockTypesController.php | 1 + 11 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 assets/js/blocks/single-product-details/block.json create mode 100644 assets/js/blocks/single-product-details/block.tsx create mode 100644 assets/js/blocks/single-product-details/edit.tsx create mode 100644 assets/js/blocks/single-product-details/editor.scss create mode 100644 assets/js/blocks/single-product-details/index.tsx create mode 100644 assets/js/blocks/single-product-details/style.scss create mode 100644 assets/js/blocks/single-product-details/types.ts create mode 100644 src/BlockTypes/SingleProductDetails.php diff --git a/assets/js/blocks/single-product-details/block.json b/assets/js/blocks/single-product-details/block.json new file mode 100644 index 00000000000..31bbc78192f --- /dev/null +++ b/assets/js/blocks/single-product-details/block.json @@ -0,0 +1,31 @@ +{ + "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": { + "align": true, + "color": { + "text": true + }, + "typography": { + "fontSize": true, + "__experimentalFontFamily": true + } + }, + "attributes": { + "displayStyle": { + "type": "string", + "default": "icon_and_text" + }, + "iconStyle": { + "type": "string", + "default": "default" + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/blocks/single-product-details/block.tsx new file mode 100644 index 00000000000..89fdf9d7d35 --- /dev/null +++ b/assets/js/blocks/single-product-details/block.tsx @@ -0,0 +1,11 @@ +/** + * External dependencies + */ + +/** + * Internal dependencies + */ + +export const SingleProductDetails = () =>
Single Product Details
; + +export default SingleProductDetails; diff --git a/assets/js/blocks/single-product-details/edit.tsx b/assets/js/blocks/single-product-details/edit.tsx new file mode 100644 index 00000000000..88bc365f4b5 --- /dev/null +++ b/assets/js/blocks/single-product-details/edit.tsx @@ -0,0 +1,33 @@ +/** + * 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 }: BlockEditProps< Attributes > ) => { + const { className } = attributes; + const blockProps = useBlockProps( { + className: classNames( 'wc-block-single-product-details', className ), + } ); + + return ( + <> +
+ + + +
+ + ); +}; + +export default Edit; diff --git a/assets/js/blocks/single-product-details/editor.scss b/assets/js/blocks/single-product-details/editor.scss new file mode 100644 index 00000000000..772dbeae8cd --- /dev/null +++ b/assets/js/blocks/single-product-details/editor.scss @@ -0,0 +1,3 @@ +.wc-block-single-product-details__icon-style-toggle { + width: 100%; +} diff --git a/assets/js/blocks/single-product-details/index.tsx b/assets/js/blocks/single-product-details/index.tsx new file mode 100644 index 00000000000..09cb24071f9 --- /dev/null +++ b/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; + }, +} ); diff --git a/assets/js/blocks/single-product-details/style.scss b/assets/js/blocks/single-product-details/style.scss new file mode 100644 index 00000000000..842f4c98663 --- /dev/null +++ b/assets/js/blocks/single-product-details/style.scss @@ -0,0 +1,21 @@ +.wp-block-woocommerce-single-product-details { + a { + text-decoration: none !important; + align-items: center; + display: flex; + color: currentColor !important; + + &:hover { + text-decoration: underline !important; + } + + .icon + .label { + margin-left: $gap-smaller; + } + + .icon { + height: em(16px); + width: em(16px); + } + } +} diff --git a/assets/js/blocks/single-product-details/types.ts b/assets/js/blocks/single-product-details/types.ts new file mode 100644 index 00000000000..aa9b37b316a --- /dev/null +++ b/assets/js/blocks/single-product-details/types.ts @@ -0,0 +1,3 @@ +export interface Attributes { + className?: string; +} diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index b5366b6b580..8380322fdd2 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -64,6 +64,9 @@ const blocks = { 'single-product': { isExperimental: true, }, + 'single-product-details': { + isExperimental: true, + }, 'stock-filter': {}, }; diff --git a/package-lock.json b/package-lock.json index 0c209a24481..fdabce23cc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@woocommerce/block-library", - "version": "9.4.0-dev", + "version": "9.5.0-dev", "hasInstallScript": true, "license": "GPL-3.0+", "dependencies": { diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php new file mode 100644 index 00000000000..ca3f541a4f0 --- /dev/null +++ b/src/BlockTypes/SingleProductDetails.php @@ -0,0 +1,32 @@ +"; + } +} diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php index 5c80f4ff54d..d557a5696a2 100644 --- a/src/BlockTypesController.php +++ b/src/BlockTypesController.php @@ -204,6 +204,7 @@ protected function get_block_types() { 'RatingFilter', 'ReviewsByCategory', 'ReviewsByProduct', + 'SingleProductDetails', 'StockFilter', ]; From e743ebe745a7efdb2b7137f7f9d31ad78e43fc63 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Fri, 20 Jan 2023 18:02:07 -0300 Subject: [PATCH 02/21] Add tests for Single Product Details block --- .../single-product-details.fixture.json | 1 + .../backend/single-produt-details.test.js | 32 +++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json create mode 100644 tests/e2e/specs/backend/single-produt-details.test.js diff --git a/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json new file mode 100644 index 00000000000..e8acbacb003 --- /dev/null +++ b/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json @@ -0,0 +1 @@ +{"title":"Single Product Details Block","pageContent":""} \ No newline at end of file diff --git a/tests/e2e/specs/backend/single-produt-details.test.js b/tests/e2e/specs/backend/single-produt-details.test.js new file mode 100644 index 00000000000..5a6bc6f3cef --- /dev/null +++ b/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 ); + } ); +} ); From f87de2189b7502f665f12591c8eceda6c17a63b2 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Wed, 25 Jan 2023 18:34:08 -0300 Subject: [PATCH 03/21] wip: create block structure and add initial styles --- .../blocks/single-product-details/block.json | 11 +-- .../blocks/single-product-details/block.tsx | 88 ++++++++++++++++++- .../js/blocks/single-product-details/edit.tsx | 4 +- .../blocks/single-product-details/editor.scss | 47 +++++++++- src/BlockTypes/SingleProductDetails.php | 4 +- 5 files changed, 139 insertions(+), 15 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.json b/assets/js/blocks/single-product-details/block.json index 31bbc78192f..85bc5bf8647 100644 --- a/assets/js/blocks/single-product-details/block.json +++ b/assets/js/blocks/single-product-details/block.json @@ -15,16 +15,7 @@ "__experimentalFontFamily": true } }, - "attributes": { - "displayStyle": { - "type": "string", - "default": "icon_and_text" - }, - "iconStyle": { - "type": "string", - "default": "default" - } - }, + "attributes": {}, "textdomain": "woo-gutenberg-products-block", "apiVersion": 2, "$schema": "https://schemas.wp.org/trunk/block.json" diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/blocks/single-product-details/block.tsx index 89fdf9d7d35..563b51d6ce4 100644 --- a/assets/js/blocks/single-product-details/block.tsx +++ b/assets/js/blocks/single-product-details/block.tsx @@ -1,11 +1,97 @@ /** * External dependencies */ +import classnames from 'classnames'; /** * Internal dependencies */ +const ReviewsTab = () => { + return
tab
; +}; -export const SingleProductDetails = () =>
Single Product Details
; +const AdditionalInformationTab = () => { + return
tab
; +}; + +const DescriptionTab = () => { + return ( +
+ { /* */ } +
+ ); +}; + +const ProductTabContent = ( { content } ) => { + return ( + + ); +}; + +const ProductTabTitle = ( { title, active } ) => { + return ( +
  • _tab', { + active, + } ) } + id="tab-title-" + role="tab" + aria-controls="tab-" + > + { title } +
    • + ); +}; + +const ProductTabsList = ( { productTabs } ) => { + return ( +
    +
      + { productTabs.map( ( productTab ) => ( + + ) ) } +
    + { productTabs.map( ( productTab ) => ( + + ) ) } + + { /* */ } +
    + ); +}; + +export const SingleProductDetails = ( props ) => { + console.log( { props } ); + return ( + + ); +}; export default SingleProductDetails; diff --git a/assets/js/blocks/single-product-details/edit.tsx b/assets/js/blocks/single-product-details/edit.tsx index 88bc365f4b5..78697ce9c07 100644 --- a/assets/js/blocks/single-product-details/edit.tsx +++ b/assets/js/blocks/single-product-details/edit.tsx @@ -13,7 +13,9 @@ import Block from './block'; import { Attributes } from './types'; import './editor.scss'; -const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { +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 ), diff --git a/assets/js/blocks/single-product-details/editor.scss b/assets/js/blocks/single-product-details/editor.scss index 772dbeae8cd..7955f1b1a89 100644 --- a/assets/js/blocks/single-product-details/editor.scss +++ b/assets/js/blocks/single-product-details/editor.scss @@ -1,3 +1,46 @@ -.wc-block-single-product-details__icon-style-toggle { - width: 100%; +.wc-block-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; + } + } + } + } } diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index ca3f541a4f0..fedd675d7b6 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -27,6 +27,8 @@ class SingleProductDetails extends AbstractBlock { protected function render( $attributes, $content, $block ) { $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); - return "
    ' + ); } } From 561f6f80ae543a888ac2c4859a74382693a7ad0a Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Thu, 26 Jan 2023 18:50:15 -0300 Subject: [PATCH 04/21] Add block details to the SingleProductDetails.php file --- .../blocks/single-product-details/block.tsx | 14 +++- .../blocks/single-product-details/editor.scss | 43 ---------- .../blocks/single-product-details/style.scss | 53 ++++++++---- src/BlockTemplatesController.php | 2 +- src/BlockTypes/SingleProductDetails.php | 81 ++++++++++++++++++- 5 files changed, 133 insertions(+), 60 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/blocks/single-product-details/block.tsx index 563b51d6ce4..1e06f0ed868 100644 --- a/assets/js/blocks/single-product-details/block.tsx +++ b/assets/js/blocks/single-product-details/block.tsx @@ -88,7 +88,19 @@ export const SingleProductDetails = ( props ) => { ); diff --git a/assets/js/blocks/single-product-details/editor.scss b/assets/js/blocks/single-product-details/editor.scss index 7955f1b1a89..a6751d249f1 100644 --- a/assets/js/blocks/single-product-details/editor.scss +++ b/assets/js/blocks/single-product-details/editor.scss @@ -1,46 +1,3 @@ .wc-block-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; - } - } - } - } } diff --git a/assets/js/blocks/single-product-details/style.scss b/assets/js/blocks/single-product-details/style.scss index 842f4c98663..8eb3a59b08c 100644 --- a/assets/js/blocks/single-product-details/style.scss +++ b/assets/js/blocks/single-product-details/style.scss @@ -1,21 +1,46 @@ .wp-block-woocommerce-single-product-details { - a { - text-decoration: none !important; - align-items: center; - display: flex; - color: currentColor !important; + 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; - &:hover { - text-decoration: underline !important; - } + 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; - .icon + .label { - margin-left: $gap-smaller; - } + 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; - .icon { - height: em(16px); - width: em(16px); + a { + color: inherit; + text-shadow: inherit; + } + } } } } diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php index 06a339b779f..19b3782b506 100644 --- a/src/BlockTemplatesController.php +++ b/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 ); } diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index fedd675d7b6..373bf4b7b6b 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -25,10 +25,89 @@ class SingleProductDetails extends AbstractBlock { * @return string Rendered block output. */ protected function render( $attributes, $content, $block ) { + ob_start(); + + while ( have_posts() ) { + global $product; + the_post(); + the_content(); + } + + $description = ob_get_clean(); + + ob_start(); + + while ( have_posts() ) { + global $product; + the_post(); + wc_display_product_attributes($product); + } + + $product_attributes = ob_get_clean(); + + while ( have_posts() ) { + global $product; + the_post(); + wp_list_comments( array( 'post_id' => the_ID() ) ); + } + + $comments = ob_get_clean(); + + if ( ! $product ) { + return 'hello'; + } + $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); return sprintf( - '
    ' + '
    +
    + + +
    +

    Description

    +
    + %3$s +
    +
    + +
    +

    Additional Information

    +
    + %4$s +
    +
    + +
    +

    Reviews

    +
    + %5$s +
    +
    + +
    +
    ', + esc_attr( $classes_and_styles['classes'] ), + esc_attr( $classes_and_styles['styles'] ), + $description, + $product_attributes, + $comments ); } } From d07b9b5559a2ef1b7a8c6f143ee08906b52b0ae7 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Fri, 27 Jan 2023 12:59:11 -0300 Subject: [PATCH 05/21] Render tabs title with empty content --- src/BlockTypes/SingleProductDetails.php | 124 +++++++++++------------- 1 file changed, 54 insertions(+), 70 deletions(-) diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index 373bf4b7b6b..5644b00d5ca 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -25,89 +25,73 @@ class SingleProductDetails extends AbstractBlock { * @return string Rendered block output. */ protected function render( $attributes, $content, $block ) { - ob_start(); + $tabs = $this->render_tabs(); - while ( have_posts() ) { - global $product; - the_post(); - the_content(); - } + $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); - $description = ob_get_clean(); + return sprintf( + '
    +
    + %3$s +
    +
    ', + esc_attr( $classes_and_styles['classes'] ), + esc_attr( $classes_and_styles['styles'] ), + $tabs, + ); + } + protected function render_tabs(){ ob_start(); while ( have_posts() ) { - global $product; - the_post(); - wc_display_product_attributes($product); - } - - $product_attributes = ob_get_clean(); - - while ( have_posts() ) { - global $product; + global $product, $post; the_post(); - wp_list_comments( array( 'post_id' => the_ID() ) ); - } - - $comments = ob_get_clean(); - - if ( ! $product ) { - return 'hello'; - } - - $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); - - return sprintf( - '
    -
    - + ', + esc_attr( $key ), + esc_attr( $product_tab['title'] ), + ); -
    -

    Description

    -
    - %3$s -
    -
    + $tabs_content .= sprintf(' +
    +

    %2$s

    +
    -
    -

    Additional Information

    -
    - %4$s +
    -
    + ', + esc_attr( $key ), + esc_attr( $product_tab['title'] ), + ); + } + } + $tabs = sprintf(' +
      + %1$s +
    + + %2$s + + ', + $tabs_title, + $tabs_content + ); + echo $tabs; + } -
    -

    Reviews

    -
    - %5$s -
    -
    + $tabs = ob_get_clean(); -
    -
    ', - esc_attr( $classes_and_styles['classes'] ), - esc_attr( $classes_and_styles['styles'] ), - $description, - $product_attributes, - $comments - ); + return $tabs; } } From 9c90f710614bedec697cdccd429c0ef303820c90 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Fri, 27 Jan 2023 16:44:55 -0300 Subject: [PATCH 06/21] Use woocommerce_output_product_data_tabs function to retrieve tabs data --- .../blocks/single-product-details/block.tsx | 136 ++++++++---------- .../blocks/single-product-details/editor.scss | 4 +- src/BlockTypes/SingleProductDetails.php | 47 +----- 3 files changed, 65 insertions(+), 122 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/blocks/single-product-details/block.tsx index 1e06f0ed868..bd3ef45cd85 100644 --- a/assets/js/blocks/single-product-details/block.tsx +++ b/assets/js/blocks/single-product-details/block.tsx @@ -2,108 +2,92 @@ * External dependencies */ import classnames from 'classnames'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -const ReviewsTab = () => { - return
    tab
    ; -}; - -const AdditionalInformationTab = () => { - return
    tab
    ; -}; -const DescriptionTab = () => { - return ( -
    - { /* */ } -
    - ); -}; +interface SingleProductTab { + id: string; + title: string; + active: boolean; + content: string | undefined; +} -const ProductTabContent = ( { content } ) => { +const ProductTabTitle = ( { + id, + title, + active, +}: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => { return ( ); }; -const ProductTabTitle = ( { title, active } ) => { +const ProductTabContent = ( { + id, + content, +}: Pick< SingleProductTab, 'id' | 'content' > ) => { return ( -
  • _tab', { - active, - } ) } - id="tab-title-" +
    - { title } -
    • + { content } +
    ); }; -const ProductTabsList = ( { productTabs } ) => { +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 } ) => ( + + ) ); + const tabsContent = productTabs.map( ( { id, content } ) => ( + + ) ); + return (
      - { productTabs.map( ( productTab ) => ( - - ) ) } + { tabsTitle }
    - { productTabs.map( ( productTab ) => ( - - ) ) } - - { /* */ } + { tabsContent }
    ); }; -export const SingleProductDetails = ( props ) => { - console.log( { props } ); - return ( - - ); -}; - export default SingleProductDetails; diff --git a/assets/js/blocks/single-product-details/editor.scss b/assets/js/blocks/single-product-details/editor.scss index a6751d249f1..da60cc6b925 100644 --- a/assets/js/blocks/single-product-details/editor.scss +++ b/assets/js/blocks/single-product-details/editor.scss @@ -1,3 +1,5 @@ .wc-block-single-product-details { - + ul.tabs.li { + list-style-type: none; + } } diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index 5644b00d5ca..f45f0e68b7f 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -31,9 +31,7 @@ protected function render( $attributes, $content, $block ) { return sprintf( '
    -
    - %3$s -
    + %3$s
    ', esc_attr( $classes_and_styles['classes'] ), esc_attr( $classes_and_styles['styles'] ), @@ -45,49 +43,8 @@ protected function render_tabs(){ ob_start(); while ( have_posts() ) { - global $product, $post; the_post(); - $product_tabs = apply_filters( 'woocommerce_product_tabs', array() ); - $tabs_title = ''; - $tabs_content = ''; - if ( ! empty( $product_tabs ) ) { - foreach ( $product_tabs as $key => $product_tab ) { - $tabs_title .= sprintf(' - - ', - esc_attr( $key ), - esc_attr( $product_tab['title'] ), - ); - - $tabs_content .= sprintf(' -
    -

    %2$s

    -
    - -
    -
    - ', - esc_attr( $key ), - esc_attr( $product_tab['title'] ), - ); - } - } - $tabs = sprintf(' -
      - %1$s -
    - - %2$s - - ', - $tabs_title, - $tabs_content - ); - echo $tabs; + woocommerce_output_product_data_tabs(); } $tabs = ob_get_clean(); From eb0ce4a053d03992a4aff1600b2c519d1989c6f8 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Mon, 30 Jan 2023 14:38:31 -0300 Subject: [PATCH 07/21] Remove customizations for the Single Product Details block --- assets/js/blocks/single-product-details/block.json | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.json b/assets/js/blocks/single-product-details/block.json index 85bc5bf8647..97db7cb121a 100644 --- a/assets/js/blocks/single-product-details/block.json +++ b/assets/js/blocks/single-product-details/block.json @@ -5,16 +5,7 @@ "description": "A block that allows your customers to see details and reviews about the product.", "category": "woocommerce", "keywords": [ "WooCommerce" ], - "supports": { - "align": true, - "color": { - "text": true - }, - "typography": { - "fontSize": true, - "__experimentalFontFamily": true - } - }, + "supports": {}, "attributes": {}, "textdomain": "woo-gutenberg-products-block", "apiVersion": 2, From 2a4baadcb334e506f10c5c084e1a3c6475159aaa Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 16:13:05 -0300 Subject: [PATCH 08/21] Remove unnecessary console.log from the Edit.tsx file --- assets/js/blocks/single-product-details/edit.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/js/blocks/single-product-details/edit.tsx b/assets/js/blocks/single-product-details/edit.tsx index 78697ce9c07..88bc365f4b5 100644 --- a/assets/js/blocks/single-product-details/edit.tsx +++ b/assets/js/blocks/single-product-details/edit.tsx @@ -13,9 +13,7 @@ import Block from './block'; import { Attributes } from './types'; import './editor.scss'; -const Edit = ( { attributes, ...rest }: BlockEditProps< Attributes > ) => { - console.log( { attributes } ); - console.log( { rest } ); +const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { const { className } = attributes; const blockProps = useBlockProps( { className: classNames( 'wc-block-single-product-details', className ), From 8e05b718c2bd892740e2efd8b39d5440d7d787f8 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 16:45:44 -0300 Subject: [PATCH 09/21] Remove block classname from block wrapper --- assets/js/blocks/single-product-details/block.tsx | 4 +++- assets/js/blocks/single-product-details/edit.tsx | 3 +-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/blocks/single-product-details/block.tsx index bd3ef45cd85..37db65931f0 100644 --- a/assets/js/blocks/single-product-details/block.tsx +++ b/assets/js/blocks/single-product-details/block.tsx @@ -3,6 +3,7 @@ */ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies @@ -51,6 +52,7 @@ const ProductTabContent = ( { }; export const SingleProductDetails = () => { + const blockProps = useBlockProps(); const productTabs = [ { id: 'description', @@ -81,7 +83,7 @@ export const SingleProductDetails = () => { ) ); return ( -
    +
      { tabsTitle }
    diff --git a/assets/js/blocks/single-product-details/edit.tsx b/assets/js/blocks/single-product-details/edit.tsx index 88bc365f4b5..471f9f7e30b 100644 --- a/assets/js/blocks/single-product-details/edit.tsx +++ b/assets/js/blocks/single-product-details/edit.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import classNames from 'classnames'; import { useBlockProps } from '@wordpress/block-editor'; import { Disabled } from '@wordpress/components'; import type { BlockEditProps } from '@wordpress/blocks'; @@ -16,7 +15,7 @@ import './editor.scss'; const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { const { className } = attributes; const blockProps = useBlockProps( { - className: classNames( 'wc-block-single-product-details', className ), + className, } ); return ( From f70ab0cbfedabce29e0b225b636b2fd0892610eb Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 16:59:04 -0300 Subject: [PATCH 10/21] Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController --- src/BlockTemplatesController.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php index 19b3782b506..6b3b42f8f8f 100644 --- a/src/BlockTemplatesController.php +++ b/src/BlockTemplatesController.php @@ -67,7 +67,6 @@ 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 ); } From ad70695611dd9718c7e436d65a4cd151ad9f765b Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 17:51:12 -0300 Subject: [PATCH 11/21] Remove attributes property from the block registration --- assets/js/blocks/single-product-details/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/js/blocks/single-product-details/index.tsx b/assets/js/blocks/single-product-details/index.tsx index 09cb24071f9..d6ef97fddd2 100644 --- a/assets/js/blocks/single-product-details/index.tsx +++ b/assets/js/blocks/single-product-details/index.tsx @@ -10,9 +10,6 @@ import metadata from './block.json'; import edit from './edit'; registerBlockType( metadata, { - attributes: { - ...metadata.attributes, - }, edit, save() { return null; From fd83c09a5997ecaa8822550540fa9a19a5474bc6 Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 17:52:36 -0300 Subject: [PATCH 12/21] Remove isExperimental flag for the Single Product Details block --- bin/webpack-entries.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 6be7e9b9242..90d8e86e367 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -66,9 +66,7 @@ const blocks = { 'single-product': { isExperimental: true, }, - 'single-product-details': { - isExperimental: true, - }, + 'single-product-details': {}, 'stock-filter': {}, }; From 36611333e33ee453673b810ad57c689ffe57e32a Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 17:59:03 -0300 Subject: [PATCH 13/21] Remove get_classes_and_styles_by_attributes method from SingleProductDetails block --- src/BlockTypes/SingleProductDetails.php | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index f45f0e68b7f..17fb82cadad 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -27,14 +27,13 @@ class SingleProductDetails extends AbstractBlock { protected function render( $attributes, $content, $block ) { $tabs = $this->render_tabs(); - $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); + $classname = $attributes['className'] ?? ''; return sprintf( - '
    - %3$s + '
    + %2$s
    ', - esc_attr( $classes_and_styles['classes'] ), - esc_attr( $classes_and_styles['styles'] ), + esc_attr( $classname ), $tabs, ); } From 8a9196e3075d708699c0c97f5d8a5ac243c2de9e Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Tue, 31 Jan 2023 18:08:03 -0300 Subject: [PATCH 14/21] Prevent Single Product Details block from apppearing in Pages or Posts --- src/BlockTypesController.php | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php index 882000b8be7..dc04774cb93 100644 --- a/src/BlockTypesController.php +++ b/src/BlockTypesController.php @@ -255,6 +255,7 @@ protected function get_block_types() { 'CatalogSorting', 'ClassicTemplate', 'ProductResultsCount', + 'SingleProductDetails', 'StoreNotices', ] ); From edcac215129eb4b998474c4b83a64a5c02f77e2a Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Wed, 1 Feb 2023 16:36:32 -0300 Subject: [PATCH 15/21] Fix PHP Coding Standards warnings --- src/BlockTypes/SingleProductDetails.php | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/SingleProductDetails.php index 17fb82cadad..bda86189f87 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/SingleProductDetails.php @@ -34,11 +34,16 @@ protected function render( $attributes, $content, $block ) { %2$s
    ', esc_attr( $classname ), - $tabs, + $tabs ); } - protected function render_tabs(){ + /** + * Gets the tabs with their content to be rendered by the block. + * + * @return string The tabs html to be rendered by the block + */ + protected function render_tabs() { ob_start(); while ( have_posts() ) { From 0ba35e177114ed68a8559b81c091b37fbca08961 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 13 Feb 2023 14:11:48 +0100 Subject: [PATCH 16/21] update block name --- assets/js/blocks/single-product-details/block.json | 2 +- .../__fixtures__/single-product-details.fixture.json | 2 +- tests/e2e/specs/backend/single-produt-details.test.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/single-product-details/block.json b/assets/js/blocks/single-product-details/block.json index 97db7cb121a..ac3f47665af 100644 --- a/assets/js/blocks/single-product-details/block.json +++ b/assets/js/blocks/single-product-details/block.json @@ -1,7 +1,7 @@ { "name": "woocommerce/single-product-details", "version": "1.0.0", - "title": "Single Product Details", + "title": "Product Details", "description": "A block that allows your customers to see details and reviews about the product.", "category": "woocommerce", "keywords": [ "WooCommerce" ], diff --git a/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json index e8acbacb003..1df5149a095 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/single-product-details.fixture.json @@ -1 +1 @@ -{"title":"Single Product Details Block","pageContent":""} \ No newline at end of file +{"title":"Product Details Block","pageContent":""} diff --git a/tests/e2e/specs/backend/single-produt-details.test.js b/tests/e2e/specs/backend/single-produt-details.test.js index 5a6bc6f3cef..81eabe5fa40 100644 --- a/tests/e2e/specs/backend/single-produt-details.test.js +++ b/tests/e2e/specs/backend/single-produt-details.test.js @@ -10,7 +10,7 @@ import { visitBlockPage } from '@woocommerce/blocks-test-utils'; import { insertBlockDontWaitForInsertClose } from '../../utils.js'; const block = { - name: 'Single Product Details', + name: 'Product Details', slug: 'woocommerce/single-product-details', class: '.wc-block-single-product-details', }; From 93bcb28c76404a2b04ecce39cd203e1e3d83f0ea Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 13 Feb 2023 14:18:40 +0100 Subject: [PATCH 17/21] fix SCSS linter error --- assets/js/blocks/single-product-details/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/single-product-details/style.scss b/assets/js/blocks/single-product-details/style.scss index 8eb3a59b08c..e32e9c1da22 100644 --- a/assets/js/blocks/single-product-details/style.scss +++ b/assets/js/blocks/single-product-details/style.scss @@ -26,7 +26,7 @@ &:hover { text-decoration: none; - color: lighten($black, 10%); + color: color.adjust($black, $lightness: 10%); } } From 96fab8035cb9993b92dd982164b4b6eb3b5b4d40 Mon Sep 17 00:00:00 2001 From: Luigi Date: Tue, 14 Feb 2023 17:30:05 +0100 Subject: [PATCH 18/21] move blocks into product-elements folder and rename to product-details --- assets/js/atomic/blocks/index.js | 1 + .../product-details}/block.json | 3 ++- .../product-details}/block.tsx | 0 .../product-details}/edit.tsx | 1 - .../product-details/index.tsx | 24 +++++++++++++++++++ .../product-details}/style.scss | 2 +- .../product-details}/types.ts | 0 .../blocks/single-product-details/editor.scss | 5 ---- .../blocks/single-product-details/index.tsx | 17 ------------- bin/webpack-entries.js | 1 - ...eProductDetails.php => ProductDetails.php} | 8 +++---- src/BlockTypesController.php | 4 ++-- 12 files changed, 33 insertions(+), 33 deletions(-) rename assets/js/{blocks/single-product-details => atomic/blocks/product-elements/product-details}/block.json (86%) rename assets/js/{blocks/single-product-details => atomic/blocks/product-elements/product-details}/block.tsx (100%) rename assets/js/{blocks/single-product-details => atomic/blocks/product-elements/product-details}/edit.tsx (96%) create mode 100644 assets/js/atomic/blocks/product-elements/product-details/index.tsx rename assets/js/{blocks/single-product-details => atomic/blocks/product-elements/product-details}/style.scss (94%) rename assets/js/{blocks/single-product-details => atomic/blocks/product-elements/product-details}/types.ts (100%) delete mode 100644 assets/js/blocks/single-product-details/editor.scss delete mode 100644 assets/js/blocks/single-product-details/index.tsx rename src/BlockTypes/{SingleProductDetails.php => ProductDetails.php} (83%) diff --git a/assets/js/atomic/blocks/index.js b/assets/js/atomic/blocks/index.js index 6745263834d..29997853322 100644 --- a/assets/js/atomic/blocks/index.js +++ b/assets/js/atomic/blocks/index.js @@ -14,3 +14,4 @@ import './product-elements/tag-list'; import './product-elements/stock-indicator'; import './product-elements/add-to-cart'; import './product-elements/product-image-gallery'; +import './product-elements/product-details'; diff --git a/assets/js/blocks/single-product-details/block.json b/assets/js/atomic/blocks/product-elements/product-details/block.json similarity index 86% rename from assets/js/blocks/single-product-details/block.json rename to assets/js/atomic/blocks/product-elements/product-details/block.json index ac3f47665af..02deaacac05 100644 --- a/assets/js/blocks/single-product-details/block.json +++ b/assets/js/atomic/blocks/product-elements/product-details/block.json @@ -1,6 +1,7 @@ { - "name": "woocommerce/single-product-details", + "name": "woocommerce/product-details", "version": "1.0.0", + "icon": "info", "title": "Product Details", "description": "A block that allows your customers to see details and reviews about the product.", "category": "woocommerce", diff --git a/assets/js/blocks/single-product-details/block.tsx b/assets/js/atomic/blocks/product-elements/product-details/block.tsx similarity index 100% rename from assets/js/blocks/single-product-details/block.tsx rename to assets/js/atomic/blocks/product-elements/product-details/block.tsx diff --git a/assets/js/blocks/single-product-details/edit.tsx b/assets/js/atomic/blocks/product-elements/product-details/edit.tsx similarity index 96% rename from assets/js/blocks/single-product-details/edit.tsx rename to assets/js/atomic/blocks/product-elements/product-details/edit.tsx index 471f9f7e30b..6b8e4ab9f9c 100644 --- a/assets/js/blocks/single-product-details/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-details/edit.tsx @@ -10,7 +10,6 @@ import type { BlockEditProps } from '@wordpress/blocks'; */ import Block from './block'; import { Attributes } from './types'; -import './editor.scss'; const Edit = ( { attributes }: BlockEditProps< Attributes > ) => { const { className } = attributes; diff --git a/assets/js/atomic/blocks/product-elements/product-details/index.tsx b/assets/js/atomic/blocks/product-elements/product-details/index.tsx new file mode 100644 index 00000000000..6d2ec77578e --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/product-details/index.tsx @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; +import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +registerBlockSingleProductTemplate( { + registerBlockFn: () => { + // @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core. + registerBlockType( metadata, { + edit, + } ); + }, + unregisterBlockFn: () => { + unregisterBlockType( metadata.name ); + }, + blockName: metadata.name, +} ); diff --git a/assets/js/blocks/single-product-details/style.scss b/assets/js/atomic/blocks/product-elements/product-details/style.scss similarity index 94% rename from assets/js/blocks/single-product-details/style.scss rename to assets/js/atomic/blocks/product-elements/product-details/style.scss index e32e9c1da22..07b5c8031f0 100644 --- a/assets/js/blocks/single-product-details/style.scss +++ b/assets/js/atomic/blocks/product-elements/product-details/style.scss @@ -1,4 +1,4 @@ -.wp-block-woocommerce-single-product-details { +.wp-block-woocommerce-product-details { ul.tabs { list-style: none; padding: 0 0 0 1em; diff --git a/assets/js/blocks/single-product-details/types.ts b/assets/js/atomic/blocks/product-elements/product-details/types.ts similarity index 100% rename from assets/js/blocks/single-product-details/types.ts rename to assets/js/atomic/blocks/product-elements/product-details/types.ts diff --git a/assets/js/blocks/single-product-details/editor.scss b/assets/js/blocks/single-product-details/editor.scss deleted file mode 100644 index da60cc6b925..00000000000 --- a/assets/js/blocks/single-product-details/editor.scss +++ /dev/null @@ -1,5 +0,0 @@ -.wc-block-single-product-details { - ul.tabs.li { - list-style-type: none; - } -} diff --git a/assets/js/blocks/single-product-details/index.tsx b/assets/js/blocks/single-product-details/index.tsx deleted file mode 100644 index d6ef97fddd2..00000000000 --- a/assets/js/blocks/single-product-details/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/** - * External dependencies - */ -import { registerBlockType } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import metadata from './block.json'; -import edit from './edit'; - -registerBlockType( metadata, { - edit, - save() { - return null; - }, -} ); diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 90d8e86e367..46e0e773b92 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -66,7 +66,6 @@ const blocks = { 'single-product': { isExperimental: true, }, - 'single-product-details': {}, 'stock-filter': {}, }; diff --git a/src/BlockTypes/SingleProductDetails.php b/src/BlockTypes/ProductDetails.php similarity index 83% rename from src/BlockTypes/SingleProductDetails.php rename to src/BlockTypes/ProductDetails.php index bda86189f87..41e815dac72 100644 --- a/src/BlockTypes/SingleProductDetails.php +++ b/src/BlockTypes/ProductDetails.php @@ -2,18 +2,16 @@ namespace Automattic\WooCommerce\Blocks\BlockTypes; -use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils; - /** - * SingleProductDetails class. + * ProductDetails class. */ -class SingleProductDetails extends AbstractBlock { +class ProductDetails extends AbstractBlock { /** * Block name. * * @var string */ - protected $block_name = 'single-product-details'; + protected $block_name = 'product-details'; /** * Render the block. diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php index 3620c550dce..653b766daf2 100644 --- a/src/BlockTypesController.php +++ b/src/BlockTypesController.php @@ -207,7 +207,7 @@ protected function get_block_types() { 'RatingFilter', 'ReviewsByCategory', 'ReviewsByProduct', - 'SingleProductDetails', + 'ProductDetails', 'StockFilter', ]; @@ -256,7 +256,7 @@ protected function get_block_types() { 'CatalogSorting', 'ClassicTemplate', 'ProductResultsCount', - 'SingleProductDetails', + 'ProductDetails', 'StoreNotices', ] ); From 001031ca062d9477c6321d3690bfe84c18d44d5f Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Wed, 15 Feb 2023 08:37:30 +0100 Subject: [PATCH 19/21] Ensure the review form is properly rendered when the Product Details block is used alongside the Classic Single Product Block. --- src/BlockTypes/ProductDetails.php | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/BlockTypes/ProductDetails.php b/src/BlockTypes/ProductDetails.php index 41e815dac72..d4550c75aee 100644 --- a/src/BlockTypes/ProductDetails.php +++ b/src/BlockTypes/ProductDetails.php @@ -42,6 +42,10 @@ protected function render( $attributes, $content, $block ) { * @return string The tabs html to be rendered by the block */ protected function render_tabs() { + // This filter ensures the review form is properly rendered when the Product Details block is used alongside + // the Classic Single Product Block. It can be removed as soon as the Classic Single Product Block is deprecated. + add_filter( 'woocommerce_product_review_comment_form_args', array( $this, 'review_comment_form' ), 0 ); + ob_start(); while ( have_posts() ) { @@ -49,8 +53,30 @@ protected function render_tabs() { woocommerce_output_product_data_tabs(); } - $tabs = ob_get_clean(); + return ob_get_clean(); + } + + /** + * Ensures the review form is properly rendered when the Product Details block is used alongside the Classic Single Product Block. + * + * This method can be removed as soon as the Classic Single Product Block is deprecated. + * + * @param array $comment_form The comment form arguments. + * + * @return array The updated comment form arguments. + */ + public function review_comment_form( $comment_form ) { + $comment_form['comment_field'] = '
    '; + + $comment_form['comment_field'] .= '

    '; - return $tabs; + return $comment_form; } } From d8acb43f6f1a255c4aad752253875a43b79dc9d7 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Thu, 16 Feb 2023 15:45:45 +0100 Subject: [PATCH 20/21] Hide extra review stars via CSS --- .../product-details/style.scss | 5 ++++ src/BlockTypes/ProductDetails.php | 28 ------------------- 2 files changed, 5 insertions(+), 28 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-details/style.scss b/assets/js/atomic/blocks/product-elements/product-details/style.scss index 07b5c8031f0..dcdd2f3a237 100644 --- a/assets/js/atomic/blocks/product-elements/product-details/style.scss +++ b/assets/js/atomic/blocks/product-elements/product-details/style.scss @@ -43,4 +43,9 @@ } } } + // Ensures the review form is properly rendered when the Product Details block is used alongside + // the Classic Single Product Block. It can be removed when the Classic Single Product Block is deprecated. + .woocommerce-Reviews .comment-form-rating p.stars:nth-child(2) { + display: none; + } } diff --git a/src/BlockTypes/ProductDetails.php b/src/BlockTypes/ProductDetails.php index 5522d183033..ffe9c173611 100644 --- a/src/BlockTypes/ProductDetails.php +++ b/src/BlockTypes/ProductDetails.php @@ -49,10 +49,6 @@ protected function render( $attributes, $content, $block ) { * @return string The tabs html to be rendered by the block */ protected function render_tabs() { - // This filter ensures the review form is properly rendered when the Product Details block is used alongside - // the Classic Single Product Block. It can be removed as soon as the Classic Single Product Block is deprecated. - add_filter( 'woocommerce_product_review_comment_form_args', array( $this, 'review_comment_form' ), 0 ); - ob_start(); while ( have_posts() ) { @@ -62,28 +58,4 @@ protected function render_tabs() { return ob_get_clean(); } - - /** - * Ensures the review form is properly rendered when the Product Details block is used alongside the Classic Single Product Block. - * - * This method can be removed as soon as the Classic Single Product Block is deprecated. - * - * @param array $comment_form The comment form arguments. - * - * @return array The updated comment form arguments. - */ - public function review_comment_form( $comment_form ) { - $comment_form['comment_field'] = '
    '; - - $comment_form['comment_field'] .= '

    '; - - return $comment_form; - } } From 96617ea9da49bfcc22df61a51e8782c90677abce Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Thu, 16 Feb 2023 15:50:24 +0100 Subject: [PATCH 21/21] udpate doc --- .../atomic/blocks/product-elements/product-details/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-details/style.scss b/assets/js/atomic/blocks/product-elements/product-details/style.scss index dcdd2f3a237..399ee6b928b 100644 --- a/assets/js/atomic/blocks/product-elements/product-details/style.scss +++ b/assets/js/atomic/blocks/product-elements/product-details/style.scss @@ -43,8 +43,8 @@ } } } - // Ensures the review form is properly rendered when the Product Details block is used alongside - // the Classic Single Product Block. It can be removed when the Classic Single Product Block is deprecated. + // Ensures the stars review form is properly rendered when the Product Details block is used alongside + // the Classic Single Product Block. This can be removed as soon as the Classic Single Product Block is deprecated. .woocommerce-Reviews .comment-form-rating p.stars:nth-child(2) { display: none; }