diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx index 02d7ec714ee..db4db52604a 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx @@ -20,11 +20,6 @@ import { isNumber, ProductResponseItem } from '@woocommerce/types'; */ import './style.scss'; -type Props = { - textAlign?: string; - className?: string; -}; - type RatingProps = { reviews: number; rating: number; @@ -109,17 +104,38 @@ const AddReview = ( props: AddReviewProps ): JSX.Element | null => { ) : null; }; -/** - * Product Rating Block Component. - * - * @param {Object} props Incoming props. - * @param {string} [props.className] CSS Class name for the component. - * @param {string} [props.textAlign] Text alignment. - * - * @return {*} The component. - */ -export const Block = ( props: Props ): JSX.Element | null => { - const { textAlign } = props; +const ReviewsCount = ( props: { reviews: number } ): JSX.Element => { + const { reviews } = props; + + const reviewsCount = sprintf( + /* translators: %s is referring to the total of reviews for a product */ + _n( + '(%s customer review)', + '(%s customer reviews)', + reviews, + 'woo-gutenberg-products-block' + ), + reviews + ); + + return ( + + { reviewsCount } + + ); +}; + +interface ProductRatingProps { + className?: string; + textAlign?: string; + isDescendentOfSingleProductBlock: boolean; + isDescendentOfQueryLoop: boolean; + postId: number; + productId: number; +} + +export const Block = ( props: ProductRatingProps ): JSX.Element | null => { + const { textAlign, isDescendentOfSingleProductBlock } = props; const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); const rating = getAverageRating( product ); @@ -157,7 +173,12 @@ export const Block = ( props: Props ): JSX.Element | null => { ...spacingProps.style, } } > - { content } +
+ { content } + { reviews && isDescendentOfSingleProductBlock ? ( + + ) : null } +
); }; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss index 870c4f2dfc0..2d7a5fe3acd 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss @@ -58,10 +58,15 @@ } } -.wc-block-single-product { +.wp-block-woocommerce-single-product { .wc-block-components-product-rating__stars { margin: 0; } + .wc-block-components-product-rating__container { + display: flex; + align-items: center; + column-gap: $gap-smaller; + } } .wc-block-all-products, diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index 39178e497a0..612f69d1fa0 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -255,7 +255,6 @@ }, "node_modules/@ampproject/remapping": { "version": "2.2.0", - "devOptional": true, "license": "Apache-2.0", "dependencies": { "@jridgewell/gen-mapping": "^0.1.0", @@ -318,7 +317,6 @@ }, "node_modules/@babel/compat-data": { "version": "7.18.8", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -326,7 +324,6 @@ }, "node_modules/@babel/core": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.1.0", @@ -380,7 +377,6 @@ }, "node_modules/@babel/generator": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.9", @@ -393,7 +389,6 @@ }, "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": { "version": "0.3.2", - "devOptional": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.0.1", @@ -429,7 +424,6 @@ }, "node_modules/@babel/helper-compilation-targets": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.18.8", @@ -499,7 +493,6 @@ }, "node_modules/@babel/helper-environment-visitor": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -518,7 +511,6 @@ }, "node_modules/@babel/helper-function-name": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/template": "^7.18.6", @@ -530,7 +522,6 @@ }, "node_modules/@babel/helper-hoist-variables": { "version": "7.18.6", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -562,7 +553,6 @@ }, "node_modules/@babel/helper-module-transforms": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/helper-environment-visitor": "^7.18.9", @@ -593,7 +583,6 @@ "version": "7.20.2", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -628,7 +617,6 @@ }, "node_modules/@babel/helper-simple-access": { "version": "7.18.6", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -651,7 +639,6 @@ }, "node_modules/@babel/helper-split-export-declaration": { "version": "7.18.6", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -678,7 +665,6 @@ }, "node_modules/@babel/helper-validator-option": { "version": "7.18.6", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -700,7 +686,6 @@ }, "node_modules/@babel/helpers": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/template": "^7.18.6", @@ -782,7 +767,6 @@ }, "node_modules/@babel/parser": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "bin": { "parser": "bin/babel-parser.js" @@ -1223,7 +1207,6 @@ }, "node_modules/@babel/plugin-syntax-jsx": { "version": "7.18.6", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.18.6" @@ -2207,7 +2190,6 @@ }, "node_modules/@babel/template": { "version": "7.18.6", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.18.6", @@ -2220,7 +2202,6 @@ }, "node_modules/@babel/traverse": { "version": "7.18.9", - "devOptional": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.18.6", @@ -2411,32 +2392,52 @@ } }, "node_modules/@emotion/babel-plugin": { - "version": "11.10.6", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz", - "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==", + "version": "11.9.2", + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.16.7", - "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.0", - "@emotion/memoize": "^0.8.0", - "@emotion/serialize": "^1.1.1", - "babel-plugin-macros": "^3.1.0", + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", "find-root": "^1.1.0", "source-map": "^0.5.7", - "stylis": "4.1.3" + "stylis": "4.0.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" } }, "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", - "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + "version": "0.7.5", + "license": "MIT" }, - "node_modules/@emotion/babel-plugin/node_modules/stylis": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", - "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": { + "version": "2.8.0", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": { + "version": "6.0.0", + "license": "MIT", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } }, "node_modules/@emotion/cache": { "version": "11.9.3", @@ -2469,9 +2470,8 @@ } }, "node_modules/@emotion/hash": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", - "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + "version": "0.8.0", + "license": "MIT" }, "node_modules/@emotion/is-prop-valid": { "version": "0.8.8", @@ -2515,53 +2515,73 @@ "license": "MIT" }, "node_modules/@emotion/serialize": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", - "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "version": "1.0.4", + "license": "MIT", "dependencies": { - "@emotion/hash": "^0.9.0", - "@emotion/memoize": "^0.8.0", - "@emotion/unitless": "^0.8.0", - "@emotion/utils": "^1.2.0", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", "csstype": "^3.0.2" } }, - "node_modules/@emotion/serialize/node_modules/@emotion/memoize": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", - "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" - }, - "node_modules/@emotion/serialize/node_modules/@emotion/utils": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", - "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" - }, "node_modules/@emotion/sheet": { "version": "1.1.1", "license": "MIT" }, "node_modules/@emotion/styled": { - "version": "11.10.6", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz", - "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==", + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz", + "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==", "dependencies": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.10.6", + "@emotion/babel-plugin": "^11.10.5", "@emotion/is-prop-valid": "^1.2.0", "@emotion/serialize": "^1.1.1", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", "@emotion/utils": "^1.2.0" }, "peerDependencies": { + "@babel/core": "^7.0.0", "@emotion/react": "^11.0.0-rc.0", "react": ">=16.8.0" }, "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, "@types/react": { "optional": true } } }, + "node_modules/@emotion/styled/node_modules/@emotion/babel-plugin": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", + "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/styled/node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + }, "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", @@ -2575,15 +2595,36 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" }, + "node_modules/@emotion/styled/node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/styled/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, "node_modules/@emotion/styled/node_modules/@emotion/utils": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" }, + "node_modules/@emotion/styled/node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, "node_modules/@emotion/unitless": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", - "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + "version": "0.7.5", + "license": "MIT" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.0", @@ -4313,7 +4354,6 @@ }, "node_modules/@jridgewell/gen-mapping": { "version": "0.1.1", - "devOptional": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.0.0", @@ -4325,7 +4365,6 @@ }, "node_modules/@jridgewell/resolve-uri": { "version": "3.0.6", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -4333,7 +4372,6 @@ }, "node_modules/@jridgewell/set-array": { "version": "1.1.0", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -4363,12 +4401,10 @@ }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.11", - "devOptional": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.15", - "devOptional": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", @@ -20432,7 +20468,6 @@ }, "node_modules/browserslist": { "version": "4.20.3", - "devOptional": true, "funding": [ { "type": "opencollective", @@ -20460,7 +20495,6 @@ }, "node_modules/browserslist/node_modules/picocolors": { "version": "1.0.0", - "devOptional": true, "license": "ISC" }, "node_modules/bser": { @@ -20793,7 +20827,6 @@ }, "node_modules/caniuse-lite": { "version": "1.0.30001335", - "devOptional": true, "funding": [ { "type": "opencollective", @@ -23821,7 +23854,6 @@ }, "node_modules/debug": { "version": "4.3.4", - "devOptional": true, "license": "MIT", "dependencies": { "ms": "2.1.2" @@ -24944,7 +24976,6 @@ }, "node_modules/electron-to-chromium": { "version": "1.4.129", - "devOptional": true, "license": "ISC" }, "node_modules/element-resize-detector": { @@ -25306,7 +25337,6 @@ }, "node_modules/escalade": { "version": "3.1.1", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6" @@ -27825,7 +27855,6 @@ }, "node_modules/gensync": { "version": "1.0.0-beta.2", - "devOptional": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -28265,7 +28294,6 @@ }, "node_modules/globals": { "version": "11.12.0", - "devOptional": true, "license": "MIT", "engines": { "node": ">=4" @@ -34625,7 +34653,6 @@ }, "node_modules/jsesc": { "version": "2.5.2", - "devOptional": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -37922,7 +37949,6 @@ }, "node_modules/ms": { "version": "2.1.2", - "devOptional": true, "license": "MIT" }, "node_modules/multicast-dns": { @@ -38221,7 +38247,6 @@ }, "node_modules/node-releases": { "version": "2.0.4", - "devOptional": true, "license": "MIT" }, "node_modules/node-stream-zip": { @@ -44357,7 +44382,6 @@ }, "node_modules/semver": { "version": "6.3.0", - "devOptional": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -50565,7 +50589,6 @@ }, "@ampproject/remapping": { "version": "2.2.0", - "devOptional": true, "requires": { "@jridgewell/gen-mapping": "^0.1.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -50603,12 +50626,10 @@ } }, "@babel/compat-data": { - "version": "7.18.8", - "devOptional": true + "version": "7.18.8" }, "@babel/core": { "version": "7.18.9", - "devOptional": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.18.6", @@ -50644,7 +50665,6 @@ }, "@babel/generator": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/types": "^7.18.9", "@jridgewell/gen-mapping": "^0.3.2", @@ -50653,7 +50673,6 @@ "dependencies": { "@jridgewell/gen-mapping": { "version": "0.3.2", - "devOptional": true, "requires": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -50679,7 +50698,6 @@ }, "@babel/helper-compilation-targets": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/compat-data": "^7.18.8", "@babel/helper-validator-option": "^7.18.6", @@ -50723,8 +50741,7 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.18.9", - "devOptional": true + "version": "7.18.9" }, "@babel/helper-explode-assignable-expression": { "version": "7.16.7", @@ -50735,7 +50752,6 @@ }, "@babel/helper-function-name": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/template": "^7.18.6", "@babel/types": "^7.18.9" @@ -50743,7 +50759,6 @@ }, "@babel/helper-hoist-variables": { "version": "7.18.6", - "devOptional": true, "requires": { "@babel/types": "^7.18.6" } @@ -50763,7 +50778,6 @@ }, "@babel/helper-module-transforms": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/helper-environment-visitor": "^7.18.9", "@babel/helper-module-imports": "^7.18.6", @@ -50785,8 +50799,7 @@ "@babel/helper-plugin-utils": { "version": "7.20.2", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", - "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", - "dev": true + "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==" }, "@babel/helper-remap-async-to-generator": { "version": "7.16.8", @@ -50810,7 +50823,6 @@ }, "@babel/helper-simple-access": { "version": "7.18.6", - "devOptional": true, "requires": { "@babel/types": "^7.18.6" } @@ -50826,7 +50838,6 @@ }, "@babel/helper-split-export-declaration": { "version": "7.18.6", - "devOptional": true, "requires": { "@babel/types": "^7.18.6" } @@ -50842,8 +50853,7 @@ "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" }, "@babel/helper-validator-option": { - "version": "7.18.6", - "devOptional": true + "version": "7.18.6" }, "@babel/helper-wrap-function": { "version": "7.16.8", @@ -50857,7 +50867,6 @@ }, "@babel/helpers": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/template": "^7.18.6", "@babel/traverse": "^7.18.9", @@ -50910,8 +50919,7 @@ } }, "@babel/parser": { - "version": "7.18.9", - "devOptional": true + "version": "7.18.9" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.16.7", @@ -51157,7 +51165,6 @@ }, "@babel/plugin-syntax-jsx": { "version": "7.18.6", - "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.18.6" } @@ -51744,7 +51751,6 @@ }, "@babel/template": { "version": "7.18.6", - "devOptional": true, "requires": { "@babel/code-frame": "^7.18.6", "@babel/parser": "^7.18.6", @@ -51753,7 +51759,6 @@ }, "@babel/traverse": { "version": "7.18.9", - "devOptional": true, "requires": { "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.18.9", @@ -51891,32 +51896,42 @@ } }, "@emotion/babel-plugin": { - "version": "11.10.6", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz", - "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==", + "version": "11.9.2", "requires": { - "@babel/helper-module-imports": "^7.16.7", - "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.0", - "@emotion/memoize": "^0.8.0", - "@emotion/serialize": "^1.1.1", - "babel-plugin-macros": "^3.1.0", + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", "find-root": "^1.1.0", "source-map": "^0.5.7", - "stylis": "4.1.3" + "stylis": "4.0.13" }, "dependencies": { "@emotion/memoize": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", - "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + "version": "0.7.5" }, - "stylis": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", - "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + "babel-plugin-macros": { + "version": "2.8.0", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "cosmiconfig": { + "version": "6.0.0", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } } } }, @@ -51941,9 +51956,7 @@ } }, "@emotion/hash": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", - "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + "version": "0.8.0" }, "@emotion/is-prop-valid": { "version": "0.8.8", @@ -51973,45 +51986,55 @@ } }, "@emotion/serialize": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", - "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "version": "1.0.4", "requires": { - "@emotion/hash": "^0.9.0", - "@emotion/memoize": "^0.8.0", - "@emotion/unitless": "^0.8.0", - "@emotion/utils": "^1.2.0", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", "csstype": "^3.0.2" - }, - "dependencies": { - "@emotion/memoize": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", - "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" - }, - "@emotion/utils": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", - "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" - } } }, "@emotion/sheet": { "version": "1.1.1" }, "@emotion/styled": { - "version": "11.10.6", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz", - "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==", + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz", + "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==", "requires": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.10.6", + "@emotion/babel-plugin": "^11.10.5", "@emotion/is-prop-valid": "^1.2.0", "@emotion/serialize": "^1.1.1", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", "@emotion/utils": "^1.2.0" }, "dependencies": { + "@emotion/babel-plugin": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", + "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + } + }, + "@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + }, "@emotion/is-prop-valid": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", @@ -52025,17 +52048,37 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" }, + "@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "requires": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, "@emotion/utils": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" + }, + "stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" } } }, "@emotion/unitless": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", - "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + "version": "0.7.5" }, "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.0", @@ -53311,19 +53354,16 @@ }, "@jridgewell/gen-mapping": { "version": "0.1.1", - "devOptional": true, "requires": { "@jridgewell/set-array": "^1.0.0", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "@jridgewell/resolve-uri": { - "version": "3.0.6", - "devOptional": true + "version": "3.0.6" }, "@jridgewell/set-array": { - "version": "1.1.0", - "devOptional": true + "version": "1.1.0" }, "@jridgewell/source-map": { "version": "0.3.2", @@ -53345,12 +53385,10 @@ } }, "@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "devOptional": true + "version": "1.4.11" }, "@jridgewell/trace-mapping": { "version": "0.3.15", - "devOptional": true, "requires": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -64640,7 +64678,6 @@ }, "browserslist": { "version": "4.20.3", - "devOptional": true, "requires": { "caniuse-lite": "^1.0.30001332", "electron-to-chromium": "^1.4.118", @@ -64650,8 +64687,7 @@ }, "dependencies": { "picocolors": { - "version": "1.0.0", - "devOptional": true + "version": "1.0.0" } } }, @@ -64884,8 +64920,7 @@ } }, "caniuse-lite": { - "version": "1.0.30001335", - "devOptional": true + "version": "1.0.30001335" }, "capital-case": { "version": "1.0.4", @@ -66922,7 +66957,6 @@ }, "debug": { "version": "4.3.4", - "devOptional": true, "requires": { "ms": "2.1.2" } @@ -67685,8 +67719,7 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.129", - "devOptional": true + "version": "1.4.129" }, "element-resize-detector": { "version": "1.2.4", @@ -67957,8 +67990,7 @@ "dev": true }, "escalade": { - "version": "3.1.1", - "devOptional": true + "version": "3.1.1" }, "escape-html": { "version": "1.0.3", @@ -69636,8 +69668,7 @@ } }, "gensync": { - "version": "1.0.0-beta.2", - "devOptional": true + "version": "1.0.0-beta.2" }, "get-caller-file": { "version": "2.0.5" @@ -69916,8 +69947,7 @@ } }, "globals": { - "version": "11.12.0", - "devOptional": true + "version": "11.12.0" }, "globalthis": { "version": "1.0.3", @@ -74317,8 +74347,7 @@ } }, "jsesc": { - "version": "2.5.2", - "devOptional": true + "version": "2.5.2" }, "json-buffer": { "version": "3.0.1", @@ -76692,8 +76721,7 @@ "dev": true }, "ms": { - "version": "2.1.2", - "devOptional": true + "version": "2.1.2" }, "multicast-dns": { "version": "7.2.4", @@ -76917,8 +76945,7 @@ } }, "node-releases": { - "version": "2.0.4", - "devOptional": true + "version": "2.0.4" }, "node-stream-zip": { "version": "1.15.0", @@ -81018,8 +81045,7 @@ } }, "semver": { - "version": "6.3.0", - "devOptional": true + "version": "6.3.0" }, "semver-diff": { "version": "2.1.0", diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php index d4db5a061c9..4384756312f 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php @@ -51,6 +51,24 @@ class ProductRating extends AbstractBlock { ); } + /** + * Get the block's attributes. + * + * @param array $attributes Block attributes. Default empty array. + * @return array Block attributes merged with defaults. + */ + private function parse_attributes( $attributes ) { + // These should match what's set in JS `registerBlockType`. + $defaults = array( + 'productId' => 0, + 'isDescendentOfQueryLoop' => false, + 'textAlign' => '', + 'isDescendentOfSingleProductBlock' => false, + ); + + return wp_parse_args( $attributes, $defaults ); + } + /** * Overwrite parent method to prevent script registration. * @@ -68,28 +86,6 @@ class ProductRating extends AbstractBlock { return [ 'query', 'queryId', 'postId' ]; } - /** - * Filter the output from wc_get_rating_html. - * - * @param string $html Star rating markup. Default empty string. - * @param float $rating Rating being shown. - * @param int $count Total number of ratings. - * @return string - */ - public function filter_rating_html( $html, $rating, $count ) { - $product_permalink = get_permalink(); - if ( 0 < $rating || false === $product_permalink ) { - /* translators: %s: rating */ - $label = sprintf( __( 'Rated %s out of 5', 'woo-gutenberg-products-block' ), $rating ); - $html = ''; - } else { - $product_review_url = esc_url( $product_permalink . '#reviews' ); - $html = '' . __( 'Add review', 'woo-gutenberg-products-block' ) . ''; - } - - return $html; - } - /** * Include and render the block. * @@ -109,13 +105,77 @@ class ProductRating extends AbstractBlock { $product = wc_get_product( $post_id ); if ( $product ) { + $product_reviews_count = $product->get_review_count(); + $product_rating = $product->get_average_rating(); + $parsed_attributes = $this->parse_attributes( $attributes ); + $is_descendent_of_single_product_block = $parsed_attributes['isDescendentOfSingleProductBlock']; $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); $text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes ); + /** + * Filter the output from wc_get_rating_html. + * + * @param string $html Star rating markup. Default empty string. + * @param float $rating Rating being shown. + * @param int $count Total number of ratings. + * @return string + */ + $filter_rating_html = function( $html, $rating, $count ) use ( $product_rating, $product_reviews_count, $is_descendent_of_single_product_block ) { + $product_permalink = get_permalink(); + $reviews_count = $count; + $average_rating = $rating; + + if ( $product_rating ) { + $average_rating = $product_rating; + } + + if ( $product_reviews_count ) { + $reviews_count = $product_reviews_count; + } + + if ( 0 < $average_rating || false === $product_permalink ) { + /* translators: %s: rating */ + $label = sprintf( __( 'Rated %s out of 5', 'woo-gutenberg-products-block' ), $average_rating ); + $customer_reviews_count = sprintf( + /* translators: %s is referring to the total of reviews for a product */ + _n( + '(%s customer review)', + '(%s customer reviews)', + $reviews_count, + 'woo-gutenberg-products-block' + ), + esc_html( $reviews_count ) + ); + $reviews_count_html = sprintf( + ' + %1$s + ', + $customer_reviews_count + ); + $html = sprintf( + '
+ + %3$s +
+ ', + esc_attr( $label ), + wc_get_star_rating_html( $average_rating, $reviews_count ), + $is_descendent_of_single_product_block ? $reviews_count_html : '' + ); + } else { + $product_review_url = esc_url( $product_permalink . '#reviews' ); + $html = '' . __( 'Add review', 'woo-gutenberg-products-block' ) . ''; + } + + return $html; + }; + add_filter( 'woocommerce_product_get_rating_html', - [ $this, 'filter_rating_html' ], + $filter_rating_html, 10, 3 );