Create Reviews by Product block #658

Aljullu · 2019-06-27T17:14:34Z

Fixes #588.

Note: don't merge this PR to master until all TODO follow-ups are merged into this branch.

Accessibility

I've tested using only a keyboard (no mouse)
I've tested using a screen reader
All animations respect prefers-reduced-motion
All text has at least a 4.5 color contrast with its background

Screenshots

How to test the changes in this Pull Request:

In a new or existing post/page add a Reviews by Product block.
Try interacting with the settings on the sidebar and verify the block updates accordingly.

Todo

Aljullu · 2019-07-01T17:15:51Z

Posting here some of the challenges/thoughts I found while working on this, in case @mikejolley or somebody else has any suggestions on them.

I doubted whether this block had to be Server Side Rendered or not. I chose to make it SSR, so this way the block will better honor the current theme, but I'm not sure if that's the best solution since we want the block to be interactive in the frontend (it should allow changing the orderby option and there must be a Load more button). Any thoughts here?
I'm not sure what's the correct way to add styles to blocks. I'm re-using the reviews markup, so they show up correctly once the post is published:

but the theme doesn't style them in the editor:

Do you know what's the correct solution here? Should I add specific styles only for the editor, should I write styles that would affect both the editor and the published post or should I not have reused the reviews' markup at all? 🤔

mikejolley · 2019-07-02T09:37:34Z

@Aljullu The approach recently taken in the grids was to use SSR so that WP hooks and filters can be used on both the frontend and in the editor to adjust content/markup, but to try to create our own styles and use unique class names.

This is so we can style the block independently of the theme which means:

We can make the editor and frontend match by default (you only need to use the style.css as this is also pulled into the editor).
Themes can style blocks independently of other Woo styles
There is less chance to conflict with other theme styles

The styles we use can be based on the default reviews appearance, or we can create something new which may need design.

Aljullu · 2019-07-03T09:03:36Z

@mikejolley thanks for the explanation, it was really helpful! I did some refactoring so we use different classnames and created a style.scss file so we have the same styles in the editor and the frontend.

assets/js/blocks/reviews-by-product/block.js

src/BlockTypes/ReviewsByProduct.php

src/Assets.php

* Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable

…mponentId (#811)

* Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state

…818)

* Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content

* Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products

* Split 'block.js' into smaller chunks * Move frontend blocks to their specific folder * Order imports * Typo * Add frontend components proptypes * Fix indentation * Call 'this.getDefaultArgs' directly inside 'getReviews' * Move access to wc_product_block_data to the top of the file * Rename 'frontend' folder to 'base' * Rename base components and move styles to their folder

* Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled>

…ing (#863)

* Prevent interaction with slider * Show input fields toggle * Placeholder content and icons * Update dependency rimraf to v2.7.0 (#858) * placeholder styling * remove unnecessary config (#862) * Filter button and styling * Show/hide placeholder based on product count * Update dependency rimraf to v2.7.1 (#867) * Use correct parameter order for implode. Solves deprecation notice in PHP 7.4 (#857) * Add description to blocks added in last releases (#869) * Limit max width * Prevent wrap * handles src file * Introduce withCategory HOC for featured category block (#846) * Introduce withCategory hoc * Refactor featured category to use new hoc * Update docblocks * Add README note for PHP deprecation notices * Remove screen-reader-text css rules (#849) * Align stars left (#866) * bool * Create Reviews by Product block (#658) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Fix import of WithComponentID * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Fix bundlesize config not picking frontend files (#840) * Reviews by Product: split 'block.js' into smaller chunks (#841) * Split 'block.js' into smaller chunks * Move frontend blocks to their specific folder * Order imports * Typo * Add frontend components proptypes * Fix indentation * Call 'this.getDefaultArgs' directly inside 'getReviews' * Move access to wc_product_block_data to the top of the file * Rename 'frontend' folder to 'base' * Rename base components and move styles to their folder * Fix Reviews by Product using rating count instead of review count (#860) * Improve Reviews by Product accessibility (#861) * Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled> * Reviews: fix reviews without rating not appearing when sorting by rating (#863) * Update assets/css/style.scss Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Pin dependencies (#872) * Update dependency webpack to v4.39.2 (#855) * Update dependency @woocommerce/components to v3.2.0 (#875) * Update Reviews styles so it looks the same in the editor and the frontend (#871) * Update Node.js to v10.16.3 (#874) * Move wc_product_block_data variables to constants file (#870) * Update dependency webpack-cli to v3.3.7 (#880) * Add changelog script (#878) * Add changelog script * Adapt changelog script to WooCommerce Blocks * Minor improvements * Update dependency lint-staged to v9.2.3 (#879) * Pin dependencies (#883) * Update dependency eslint to v6.2.0 (#881) * Reviews by category block (#804) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Inital block setup * Fix import of WithComponentID * Render the category reviews * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Update based on product reviews * Cleanup after master merge * Implement content hiding and placeholder states for reviews blocks * Output product names and adjust css * Review permalink * Remove old read-more component which was moved * showProductName is already part of passed attributes * CSS tweaks for missing elements * Move dir * Move product reviews block * Move shared uitils * update paths * frontend paths * Update paths * shared attributes * switch to constants * Shared review block code * Replace constants * Fix hidden content bug * star alignment * Update dependency eslint to v6.2.1 (#890) * remove JSON parse * remove comment * No need for important rules * Fix error appearing on Reviews by Product when there were no reviews (#884) * Fix error appearing on Reviews by Product when there were no reviews * Revert "Fix error appearing on Reviews by Product when there were no reviews" This reverts commit 73e95b3. * Move withProduct() HOC to editor-block.js * Revert "Move withProduct() HOC to editor-block.js" This reverts commit ae95157. * Move renderNoReviews back to edit.js * Move no reviews placeholder to its own component * Remove usage of 'RawHTML' * Fix propTypes * Remove unnecessary escapeHTML * revise labels * Move component to base * Add price text

* Basic component setup * Working slider * Validation * styling * Update webpack config to fix ie11 * ie progress * styling improvements * improve events * IE shim * Fix samsung internet styles * Add aria * remove old methods * event handling * Tweak size and width of inputs * reset progress * shorthand notation for setstate * Inline comment for textare usage * Remove pointless comparison * destruct from state * zindex comment * Move out currency settings and validation * enforce int for min and max state * Use woocommerce/settings * showInputFields prop * Filter Products by Price: Block creation (#865) * Prevent interaction with slider * Show input fields toggle * Placeholder content and icons * Update dependency rimraf to v2.7.0 (#858) * placeholder styling * remove unnecessary config (#862) * Filter button and styling * Show/hide placeholder based on product count * Update dependency rimraf to v2.7.1 (#867) * Use correct parameter order for implode. Solves deprecation notice in PHP 7.4 (#857) * Add description to blocks added in last releases (#869) * Limit max width * Prevent wrap * handles src file * Introduce withCategory HOC for featured category block (#846) * Introduce withCategory hoc * Refactor featured category to use new hoc * Update docblocks * Add README note for PHP deprecation notices * Remove screen-reader-text css rules (#849) * Align stars left (#866) * bool * Create Reviews by Product block (#658) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Fix import of WithComponentID * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Fix bundlesize config not picking frontend files (#840) * Reviews by Product: split 'block.js' into smaller chunks (#841) * Split 'block.js' into smaller chunks * Move frontend blocks to their specific folder * Order imports * Typo * Add frontend components proptypes * Fix indentation * Call 'this.getDefaultArgs' directly inside 'getReviews' * Move access to wc_product_block_data to the top of the file * Rename 'frontend' folder to 'base' * Rename base components and move styles to their folder * Fix Reviews by Product using rating count instead of review count (#860) * Improve Reviews by Product accessibility (#861) * Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled> * Reviews: fix reviews without rating not appearing when sorting by rating (#863) * Update assets/css/style.scss Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Pin dependencies (#872) * Update dependency webpack to v4.39.2 (#855) * Update dependency @woocommerce/components to v3.2.0 (#875) * Update Reviews styles so it looks the same in the editor and the frontend (#871) * Update Node.js to v10.16.3 (#874) * Move wc_product_block_data variables to constants file (#870) * Update dependency webpack-cli to v3.3.7 (#880) * Add changelog script (#878) * Add changelog script * Adapt changelog script to WooCommerce Blocks * Minor improvements * Update dependency lint-staged to v9.2.3 (#879) * Pin dependencies (#883) * Update dependency eslint to v6.2.0 (#881) * Reviews by category block (#804) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Inital block setup * Fix import of WithComponentID * Render the category reviews * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Update based on product reviews * Cleanup after master merge * Implement content hiding and placeholder states for reviews blocks * Output product names and adjust css * Review permalink * Remove old read-more component which was moved * showProductName is already part of passed attributes * CSS tweaks for missing elements * Move dir * Move product reviews block * Move shared uitils * update paths * frontend paths * Update paths * shared attributes * switch to constants * Shared review block code * Replace constants * Fix hidden content bug * star alignment * Update dependency eslint to v6.2.1 (#890) * remove JSON parse * remove comment * No need for important rules * Fix error appearing on Reviews by Product when there were no reviews (#884) * Fix error appearing on Reviews by Product when there were no reviews * Revert "Fix error appearing on Reviews by Product when there were no reviews" This reverts commit 73e95b3. * Move withProduct() HOC to editor-block.js * Revert "Move withProduct() HOC to editor-block.js" This reverts commit ae95157. * Move renderNoReviews back to edit.js * Move no reviews placeholder to its own component * Remove usage of 'RawHTML' * Fix propTypes * Remove unnecessary escapeHTML * revise labels * Move component to base * Add price text * Update design to latest figma * update from master * Fixed merge conflicts with settings * Fix formatting * Update to use react hooks * Progress hooking up price slider * Fixes usage of data store for min/max * Added loading state * Fix useQueryStateByKey setter * Product list integration * Inital state and preventing too many queries * Style fixes * Button loading styles * Package conflict * useCallback * Remove duplication * variable name feedback * Implement useCallback on functions * useMemo for getProgressStyle * Block feedback * Use get_block_asset_build_path * Remove old settings from merge conflict * Move sketch file to .prefixed dir * Removed render methods * Exclude price filter from legacy build * Feedback

Create Reviews by Product block

e62f8f2

Aljullu added [Status] In Progress type: new block Applied to work that introduces a new block (typically used on an epic issue). labels Jun 27, 2019

Aljullu added this to the 2.3 milestone Jun 27, 2019

Aljullu self-assigned this Jun 27, 2019

Honor Content settings

ae1065a

Aljullu force-pushed the add/588-reviews-by-product-block branch from edff966 to ae1065a Compare June 28, 2019 11:15

Aljullu added 6 commits June 28, 2019 14:11

Fix wrong className

f1ca809

Load new wc-packages file

7b4e9cd

Add reviews-by-product JS files to webpack config

0cb8dab

Merge branch 'master' into add/588-reviews-by-product-block

036b726

Cleanup

48a5ac3

Remove error messages

d2300e5

Aljullu added 4 commits July 2, 2019 12:08

Add Reviews by Product icon

a042220

Update sort options

b71af2e

Allow additional CSS classes attribute

5df7338

Refactor block styles

9634bf6

Aljullu force-pushed the add/588-reviews-by-product-block branch from bb11f01 to 9634bf6 Compare July 3, 2019 10:17

Aljullu added status: needs review and removed status: in progress labels Jul 4, 2019

Aljullu requested a review from a team July 4, 2019 08:43

Aljullu marked this pull request as ready for review July 4, 2019 08:47

mikejolley reviewed Jul 4, 2019

View reviewed changes

assets/js/blocks/reviews-by-product/block.js Outdated Show resolved Hide resolved

src/BlockTypes/ReviewsByProduct.php Outdated Show resolved Hide resolved

src/Assets.php Outdated Show resolved Hide resolved

Fix wrong default for reviews_orderby

130eb81

Aljullu force-pushed the add/588-reviews-by-product-block branch from a09194a to 7a10762 Compare July 4, 2019 10:27

Don't enforce CSS chunks

4442afd

Aljullu force-pushed the add/588-reviews-by-product-block branch from 7a10762 to 4442afd Compare July 4, 2019 10:27

mikejolley mentioned this pull request Aug 5, 2019

Reviews by category block #804

Merged

mikejolley self-assigned this Aug 6, 2019

mikejolley mentioned this pull request Aug 6, 2019

Reviews by product: Update review styling and content #806

Merged

Aljullu and others added 5 commits August 7, 2019 12:30

Reviews by Product: prevent importing all HOCs and import only withCo…

56c5812

…mponentId (#811)

Add missing parameter doc in renderReview (#820)

9d8f74c

Fix Reviews by Product order by select not honoring default setting (#…

12b81b2

…818)

Merge branch 'master' into add/588-reviews-by-product-block

995ed9f

This was referenced Aug 9, 2019

Use withProduct HOC in ReviewsByProductEditor #828

Merged

Reviews: only save wrapper element to post #830

Merged

mikejolley and others added 5 commits August 12, 2019 12:54

Use withProduct HOC in ReviewsByProductEditor (#828)

f73f21b

* Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products

Reviews: only save wrapper element to post (#830)

043fa6f

Merge branch 'master' into add/588-reviews-by-product-block

32a4d1b

Fix bundlesize config not picking frontend files (#840)

23511a5

Aljullu mentioned this pull request Aug 14, 2019

Improve Reviews by Product accessibility #861

Merged

4 tasks

Aljullu added 4 commits August 15, 2019 10:06

Fix Reviews by Product using rating count instead of review count (#860)

e8fef34

Improve Reviews by Product accessibility (#861)

cdb9d26

* Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled>

Reviews: fix reviews without rating not appearing when sorting by rat…

7f6de2d

…ing (#863)

Merge branch 'master' into add/588-reviews-by-product-block

8191c87

Aljullu merged commit 5271e39 into master Aug 15, 2019

Aljullu deleted the add/588-reviews-by-product-block branch December 3, 2019 14:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Reviews by Product block #658

Create Reviews by Product block #658

Aljullu commented Jun 27, 2019 •

edited

Loading

Aljullu commented Jul 1, 2019

mikejolley commented Jul 2, 2019

Aljullu commented Jul 3, 2019

Create Reviews by Product block #658

Create Reviews by Product block #658

Conversation

Aljullu commented Jun 27, 2019 • edited Loading

Accessibility

Screenshots

How to test the changes in this Pull Request:

Todo

Aljullu commented Jul 1, 2019

mikejolley commented Jul 2, 2019

Aljullu commented Jul 3, 2019

Aljullu commented Jun 27, 2019 •

edited

Loading