Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 247d8f7

Browse files
author
Tarun Vijwani
authored
Merge branch 'trunk' into release/9.9.0
2 parents 8947a3b + 2caa016 commit 247d8f7

File tree

28 files changed

+459
-103
lines changed

28 files changed

+459
-103
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16.13.2
1+
16.15.0

‎assets/js/atomic/blocks/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ import './product-elements/add-to-cart';
1414
import './product-elements/add-to-cart-form';
1515
import './product-elements/product-image-gallery';
1616
import './product-elements/product-details';
17+
import './product-elements/product-reviews';
1718
import './product-elements/related-products';
1819
import './product-elements/product-meta';

‎assets/js/atomic/blocks/product-elements/image/supports.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* External dependencies
44
*/
55
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
6-
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
6+
import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
77

88
/**
99
* Internal dependencies
@@ -20,9 +20,10 @@ export const supports = {
2020
fontSize: true,
2121
__experimentalSkipSerialization: true,
2222
},
23-
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
23+
...( typeof getSpacingClassesAndStyles === 'function' && {
2424
spacing: {
2525
margin: true,
26+
padding: true,
2627
__experimentalSkipSerialization: true,
2728
},
2829
} ),

‎assets/js/atomic/blocks/product-elements/product-reviews/block.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "woocommerce/product-reviews",
3+
"version": "1.0.0",
4+
"icon": "admin-comments",
5+
"title": "Product Reviews",
6+
"description": "A block that shows the reviews for a product.",
7+
"category": "woocommerce",
8+
"keywords": [ "WooCommerce" ],
9+
"supports": {},
10+
"attributes": {},
11+
"usesContext": [ "postId" ],
12+
"textdomain": "woo-gutenberg-products-block",
13+
"apiVersion": 2,
14+
"$schema": "https://schemas.wp.org/trunk/block.json"
15+
}

‎assets/js/atomic/blocks/product-elements/product-reviews/block.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// We are using anchors as mere placeholders to replicate the front-end look.
2+
/* eslint-disable jsx-a11y/anchor-is-valid */
3+
4+
/**
5+
* External dependencies
6+
*/
7+
import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
8+
import { __ } from '@wordpress/i18n';
9+
import { useBlockProps } from '@wordpress/block-editor';
10+
import { Notice } from '@wordpress/components';
11+
12+
/**
13+
* Internal dependencies
14+
*/
15+
16+
export const ProductReviews = () => {
17+
const blockProps = useBlockProps();
18+
19+
return (
20+
<div { ...blockProps }>
21+
<Notice
22+
className={ 'wc-block-editor-related-products__notice' }
23+
status={ 'info' }
24+
isDismissible={ false }
25+
>
26+
<p>
27+
{ __(
28+
'The products reviews and the form to add a new review will be displayed here according to your theme. The look you see here is not representative of what is going to look like, this is just a placeholder.',
29+
'woo-gutenberg-products-block'
30+
) }
31+
</p>
32+
</Notice>
33+
<h2>
34+
{ __(
35+
'3 reviews for this product',
36+
'woo-gutenberg-products-block'
37+
) }
38+
</h2>
39+
<img
40+
src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-reviews.svg` }
41+
alt="Placeholder"
42+
/>
43+
<h3>{ __( 'Add a review', 'woo-gutenberg-products-block' ) }</h3>
44+
<div className="wp-block-woocommerce-product-reviews__editor__form-container">
45+
<div className="wp-block-woocommerce-product-reviews__editor__row">
46+
<span>
47+
{ __(
48+
'Your rating *',
49+
'woo-gutenberg-products-block'
50+
) }
51+
</span>
52+
<p className="wp-block-woocommerce-product-reviews__editor__stars"></p>
53+
</div>
54+
<div className="wp-block-woocommerce-product-reviews__editor__row">
55+
<span>
56+
{ __(
57+
'Your review *',
58+
'woo-gutenberg-products-block'
59+
) }
60+
</span>
61+
<textarea />
62+
</div>
63+
<input
64+
type="submit"
65+
className="submit wp-block-button__link wp-element-button"
66+
value={ __( 'Submit', 'woo-gutenberg-products-block' ) }
67+
/>
68+
</div>
69+
</div>
70+
);
71+
};
72+
73+
export default ProductReviews;

‎assets/js/atomic/blocks/product-elements/product-reviews/edit.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { useBlockProps } from '@wordpress/block-editor';
5+
import { Disabled } from '@wordpress/components';
6+
import type { BlockEditProps } from '@wordpress/blocks';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import Block from './block';
12+
import { Attributes } from './types';
13+
14+
const Edit = ( { attributes }: BlockEditProps< Attributes > ) => {
15+
const { className } = attributes;
16+
const blockProps = useBlockProps( {
17+
className,
18+
} );
19+
20+
return (
21+
<>
22+
<div { ...blockProps }>
23+
<Disabled>
24+
<Block />
25+
</Disabled>
26+
</div>
27+
</>
28+
);
29+
};
30+
31+
export default Edit;

‎assets/js/atomic/blocks/product-elements/product-reviews/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
5+
import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import metadata from './block.json';
11+
import edit from './edit';
12+
13+
registerBlockSingleProductTemplate( {
14+
registerBlockFn: () => {
15+
// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
16+
registerBlockType( metadata, {
17+
edit,
18+
} );
19+
},
20+
unregisterBlockFn: () => {
21+
unregisterBlockType( metadata.name );
22+
},
23+
blockName: metadata.name,
24+
} );

‎assets/js/atomic/blocks/product-elements/product-reviews/style.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.wp-block-woocommerce-product-reviews {
2+
img {
3+
max-width: 600px;
4+
}
5+
6+
.submit {
7+
margin-top: 2rem;
8+
}
9+
}
10+
11+
.wp-block-woocommerce-product-reviews__editor__row {
12+
align-items: center;
13+
display: flex;
14+
gap: 2rem;
15+
16+
> span {
17+
flex-basis: 20%;
18+
}
19+
20+
textarea,
21+
.wp-block-woocommerce-product-reviews__editor__stars {
22+
flex-grow: 1;
23+
margin-right: 1rem;
24+
}
25+
26+
textarea {
27+
flex-grow: 1;
28+
height: 8rem;
29+
}
30+
}
31+
32+
.wp-block-woocommerce-product-reviews__editor__stars {
33+
display: inline-block;
34+
overflow: hidden;
35+
position: relative;
36+
width: 5.3em;
37+
height: 1.618em;
38+
line-height: 1.618;
39+
font-size: 1em;
40+
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
41+
font-family: star;
42+
font-weight: 400;
43+
44+
&::before {
45+
color: inherit;
46+
content: "SSSSS";
47+
position: absolute;
48+
left: 0;
49+
right: 0;
50+
top: 0;
51+
white-space: nowrap;
52+
}
53+
}

‎assets/js/atomic/blocks/product-elements/product-reviews/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface Attributes {
2+
className?: string;
3+
}

‎assets/js/base/context/providers/editor-context.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ interface EditorContextType {
1919

2020
// Get data by name.
2121
getPreviewData: ( name: string ) => Record< string, unknown >;
22+
23+
// Indicates whether in the preview context.
24+
isPreview?: boolean;
2225
}
2326

2427
const EditorContext = createContext( {
@@ -38,11 +41,13 @@ export const EditorProvider = ( {
3841
currentPostId = 0,
3942
previewData = {},
4043
currentView = '',
44+
isPreview = false,
4145
}: {
4246
children: React.ReactChildren;
4347
currentPostId?: number | undefined;
4448
previewData?: Record< string, unknown > | undefined;
4549
currentView?: string | undefined;
50+
isPreview?: boolean | undefined;
4651
} ) => {
4752
const editingPostId = useSelect(
4853
( select ): number =>
@@ -68,6 +73,7 @@ export const EditorProvider = ( {
6873
currentView,
6974
previewData,
7075
getPreviewData,
76+
isPreview,
7177
};
7278

7379
return (

0 commit comments

Comments
 (0)