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

Add to Cart Form Block > Ensure the editor preview is properly displayed with the Gutenberg plugin disabled #8582

Merged
merged 5 commits into from
Mar 1, 2023

Conversation

nefeline
Copy link
Contributor

@nefeline nefeline commented Feb 28, 2023

This change ensures the editor preview for the Add to Cart Button form is displayed correctly while having the Gutenberg plugin disabled: in this particular case, as it turns out, some CSS selectors differ depending on the version of Gutenberg we are on.

Props to @Aljullu for identifying this inconsistency and @imanish003 for the initial flag!

Screenshots

Before After
Screenshot 2023-02-28 at 21 59 39 Screenshot 2023-02-28 at 23 30 34

Testing

User Facing Testing

  1. Ensure you have the Gutenberg plugin disabled.
  2. With a block theme enabled, head over to Edit site > Templates > Single Product and click on Edit.
  3. Add the "Add to Cart Form" block to this template.
  4. Ensure the input is displayed correctly, as demonstrated in the screenshot.
  5. Enable the Gutenberg plugin.
  6. Ensure the input is displayed correctly as well.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@nefeline nefeline self-assigned this Feb 28, 2023
@woocommercebot woocommercebot requested review from a team and roykho and removed request for a team February 28, 2023 22:50
@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8582.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
single-product-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 493
  • Total errors: 2341

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 28, 2023

Size Change: +36 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/all-products.js 36.5 kB -2 B (0%)
build/wc-blocks-editor-style-rtl.css 5.74 kB +19 B (0%)
build/wc-blocks-editor-style.css 5.75 kB +19 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.33 kB
build/all-products-frontend.js 11.7 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.08 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.35 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/cart-frontend.js 28.9 kB
build/cart.js 47.4 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.28 kB
build/checkout-blocks/shipping-methods-frontend.js 4.56 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 30.5 kB
build/checkout.js 44.2 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.5 kB
build/featured-product.js 13.7 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
build/legacy-template.js 5.28 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.3 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.71 kB
build/product-add-to-cart.js 8.61 kB
build/product-best-sellers.js 7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-button.js 3.99 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 2.23 kB
build/product-image.js 4.09 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price-frontend.js 2.32 kB
build/product-price.js 1.58 kB
build/product-query.js 6.6 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator-frontend.js 1.31 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.07 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 9.94 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.14 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.7 kB
build/wc-blocks-style.css 26.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Confirming it fixes the issue, so approving. 🚢

Not a blocker, but I'm wondering if we should try to mimic the frontend markdown in the editor? Ie: we could add classes like wp-element-button to the button, that would ensure the button styles are more similar to the frontend as it will inherit theme styling. Currently, they look quite different:

Editor (with Pixl) Frontend (with Pixl)
imatge imatge

@nefeline
Copy link
Contributor Author

nefeline commented Mar 1, 2023

Thanks for the review 🙌 !

Not a blocker, but I'm wondering if we should try to mimic the frontend markdown in the editor? Ie: we could add classes like wp-element-button to the button, that would ensure the button styles are more similar to the frontend as it will inherit theme styling.

Good idea! I'm opening a separate issue for this.

@nefeline nefeline merged commit 0984663 into trunk Mar 1, 2023
@nefeline nefeline deleted the fix/add-to-cart-form-editor-styles branch March 1, 2023 09:39
dinhtungdu pushed a commit that referenced this pull request Mar 1, 2023
…yed with the Gutenberg plugin disabled (#8582)

* Update the editor styles for the add to cart form button so it is properly displayed with the Gutenberg plugin disabled.

* update for the input height.

* update the min-height
@dinhtungdu dinhtungdu added this to the 9.7.0 milestone Mar 1, 2023
dinhtungdu added a commit that referenced this pull request Mar 1, 2023
* Empty commit for release pull request

* update 9.7.0 changelog for readme.txt

* bump WC versions

* 9.7.0 testing notes

* Update 970.md

* remove 7945 and update 8489 testing note

* Remove 8264 testing notes

* remove 8482 from testing instructions

* Fix alignment of Add to Cart form block (#8578)

* update testing zip after cherry-picking 8578

* update changelog

* Move testing steps #8438 to experimental section (#8580)

* Fix image is not showing at correct position (#8585)

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* fix 8478 testing note

* fix md error cause the last section hidden

* Add to Cart Form Block > Ensure the editor preview is properly displayed with the Gutenberg plugin disabled (#8582)

* Update the editor styles for the add to cart form button so it is properly displayed with the Gutenberg plugin disabled.

* update for the input height.

* update the min-height

* update testing zip link

* Bumping version strings to new version.

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants