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

Replace new lines with empty strings when outputting category list #4587

Merged
merged 4 commits into from Aug 20, 2021

Conversation

opr
Copy link
Contributor

@opr opr commented Aug 16, 2021

This PR will replace new lines in the Product Category List block with empty strings before rendering it.

This is because the code is written in such a way that newlines end up in the string, these eventually end up parsing into <br> elements.

If the new lines are removed, no <br> elements are added.

This PR also moves the text within the <a> onto the same line, to remove excess spaces from the string.

Finally, the product count is also enclosed in parentheses, so it matches the preview in the block editor.

Fixes #4577

Screenshots

Before After
image image

How to test the changes in this Pull Request:

  1. Add the Product Category List block to a page.
  2. Go to WooCommerce > Settings > Products and set the Shop Page to be the page above.
  3. Visit the page and ensure the list is rendered correctly with no excess linebreaks.

Changelog

Prevent Product Category List from displaying incorrectly when used on the shop page.

This is because br tags are being added because of linebreaks in the string. If we replace the linebreaks with empty strings they won't be converted into br elements.
@opr opr added status: needs review type: bug The issue/PR concerns a confirmed bug. block: product categories list Issues related to the Product Categories List block. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. labels Aug 16, 2021
@opr opr self-assigned this Aug 16, 2021
@opr opr requested a review from a team as a code owner August 16, 2021 16:41
@opr opr requested review from senadir and removed request for a team August 16, 2021 16:41
@github-actions
Copy link
Contributor

github-actions bot commented Aug 16, 2021

Size Change: 0 B

Total Size: 1.13 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.25 kB
build/active-filters.js 7.83 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37.1 kB
build/all-reviews.js 9.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.66 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B
build/atomic-block-components/add-to-cart-frontend.js 8.39 kB
build/atomic-block-components/add-to-cart.js 7.74 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 468 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.34 kB
build/atomic-block-components/price-frontend.js 2.1 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 561 B
build/atomic-block-components/rating.js 566 B
build/atomic-block-components/sale-badge-frontend.js 859 B
build/atomic-block-components/sale-badge.js 867 B
build/atomic-block-components/sku-frontend.js 388 B
build/atomic-block-components/sku.js 394 B
build/atomic-block-components/stock-indicator-frontend.js 610 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 905 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 466 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.43 kB
build/atomic-block-components/title.js 1.28 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 11.9 kB
build/blocks-checkout.js 21.2 kB
build/cart-frontend.js 90.6 kB
build/cart.js 45.8 kB
build/checkout-blocks/sample.js 173 B
build/checkout-frontend.js 94.7 kB
build/checkout-i2-frontend.js 51.6 kB
build/checkout-i2.js 48.7 kB
build/checkout.js 48.8 kB
build/featured-category.js 7.81 kB
build/featured-product.js 9.51 kB
build/handpicked-products.js 6.35 kB
build/price-filter-frontend.js 14.4 kB
build/price-filter.js 9.56 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.69 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.56 kB
build/product-new.js 6.85 kB
build/product-on-sale.js 7.21 kB
build/product-search.js 2.66 kB
build/product-tag.js 6.67 kB
build/product-top-rated.js 6.82 kB
build/products-by-attribute.js 7.79 kB
build/reviews-by-category.js 11.6 kB
build/reviews-by-product.js 13.1 kB
build/reviews-frontend.js 9.01 kB
build/single-product-frontend.js 26 kB
build/single-product.js 9.8 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 20.2 kB
build/vendors--atomic-block-components/price-frontend.js 5.71 kB
build/wc-blocks-data.js 11 kB
build/wc-blocks-editor-style-rtl.css 15.3 kB
build/wc-blocks-editor-style.css 15.4 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 2.74 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 20 kB
build/wc-blocks-style.css 20 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 253 kB
build/wc-blocks.js 3.5 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests well.
I'm seeing parentheses, even though you reverted them? not sure why.

@github-actions github-actions bot added this to the 5.8.0 milestone Aug 18, 2021
@nerrad nerrad merged commit 69df825 into trunk Aug 20, 2021
@nerrad nerrad deleted the fix/category-list-linebreaks branch August 20, 2021 11:57
@nerrad nerrad changed the title Replace new lines with empty strings when outputting catgeory list Replace new lines with empty strings when outputting category list Aug 31, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product categories list Issues related to the Product Categories List block. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Categories List block: Layout issues when used on Shop archive page
3 participants