From 93e06ed1393a47cc888355e2ea76dab097d9aec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 4 Jul 2023 13:06:48 +0200 Subject: [PATCH 01/11] Per block stylesheets (#9831) * Clean up blank lines * Update Webpack config * Update PHP logic to load block styles * Style fixes * Style fixes (II) * Style fixes (III) * Style fixes (IV) * Fix missing stylesheets in the Site Editor * Fix wrong return values in some PHP method docs * Fix missing ProductPrice stylesheet causing 404 in tests * Fix missing ProductGallery stylesheet causing 404 in tests --- assets/css/style.scss | 1 - .../blocks/product-elements/price/block.tsx | 1 - .../blocks/product-elements/price/style.scss | 11 ---- .../product-details/block.tsx | 4 -- .../product-details/index.tsx | 1 + .../product-reviews/block.tsx | 4 -- .../product-reviews/index.tsx | 1 + .../blocks/product-elements/rating/block.tsx | 5 -- .../base/components/country-input/style.scss | 4 ++ .../components/form-token-field/vendor.scss | 1 + .../base/components/product-price/style.scss | 12 ++++ .../base/components/product-rating/index.tsx | 1 + .../components/product-rating}/style.scss | 0 assets/js/blocks/breadcrumbs/index.tsx | 1 + .../payment-methods/payment-methods.js | 1 + .../cart-cross-sells-products/index.tsx | 1 + .../inner-blocks/cart-totals-block/edit.tsx | 1 - .../inner-blocks/cart-totals-block/index.tsx | 1 + .../inner-blocks/empty-cart-block/edit.tsx | 1 - .../inner-blocks/empty-cart-block/index.tsx | 1 + .../proceed-to-checkout-block/block.tsx | 1 - .../proceed-to-checkout-block/index.tsx | 1 + .../proceed-to-checkout-block/style.scss | 1 - assets/js/blocks/catalog-sorting/index.tsx | 1 + .../checkout-actions-block/block.tsx | 2 +- .../checkout-actions-block/index.tsx | 1 + .../checkout-fields-block/frontend.tsx | 5 -- .../checkout-fields-block/index.tsx | 1 + .../checkout-order-note-block/index.tsx | 1 + .../checkout-order-note-block}/style.scss | 2 +- .../checkout-payment-block/block.tsx | 4 -- .../checkout-pickup-options-block/block.tsx | 1 - .../checkout-pickup-options-block/index.tsx | 1 + .../checkout-shipping-method-block/block.tsx | 1 - .../checkout-shipping-method-block/index.tsx | 1 + .../checkout-shipping-methods-block/block.tsx | 5 -- .../checkout-shipping-methods-block/index.tsx | 1 + .../checkout-terms-block/frontend.tsx | 1 - .../checkout-terms-block/index.tsx | 2 + .../checkout-totals-block/frontend.tsx | 5 -- .../checkout-totals-block/index.tsx | 1 + .../js/blocks/checkout/order-notes/index.tsx | 5 -- assets/js/blocks/customer-account/index.tsx | 1 + .../js/blocks/product-results-count/index.tsx | 1 + assets/js/blocks/product-tag/index.tsx | 2 +- assets/js/blocks/product-template/index.tsx | 1 + .../search-list-control.tsx | 1 + bin/webpack-configs.js | 61 +++++-------------- bin/webpack-entries.js | 31 ++++------ .../components/checkbox-control/style.scss | 2 +- src/Assets/Api.php | 17 ++++-- src/AssetsController.php | 4 +- src/BlockTypes/AbstractBlock.php | 7 ++- src/BlockTypes/AbstractInnerBlock.php | 8 +++ src/BlockTypes/AbstractProductGrid.php | 10 +++ src/BlockTypes/AddToCartForm.php | 9 +++ src/BlockTypes/AttributeFilter.php | 9 +++ src/BlockTypes/Cart.php | 9 +++ src/BlockTypes/Checkout.php | 9 +++ src/BlockTypes/ClassicTemplate.php | 8 +++ src/BlockTypes/FilterWrapper.php | 9 +++ src/BlockTypes/MiniCart.php | 9 +++ src/BlockTypes/MiniCartContents.php | 9 +++ src/BlockTypes/ProceedToCheckoutBlock.php | 1 - src/BlockTypes/ProductCollection.php | 9 +++ src/BlockTypes/ProductGallery.php | 9 +++ src/BlockTypes/ProductPrice.php | 9 +++ src/BlockTypes/ProductRating.php | 9 +++ src/BlockTypes/RatingFilter.php | 9 +++ src/BlockTypes/RelatedProducts.php | 11 +++- src/BlockTypes/StockFilter.php | 9 +++ src/BlockTypes/StoreNotices.php | 9 +++ woocommerce-gutenberg-products-block.php | 1 - 73 files changed, 250 insertions(+), 140 deletions(-) delete mode 100644 assets/js/atomic/blocks/product-elements/price/style.scss rename assets/js/{atomic/blocks/product-elements/rating => base/components/product-rating}/style.scss (100%) rename assets/js/blocks/checkout/{order-notes => inner-blocks/checkout-order-note-block}/style.scss (79%) diff --git a/assets/css/style.scss b/assets/css/style.scss index 68c0cd14e91..756c24984ec 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -337,7 +337,6 @@ @include visually-hidden-focus-reveal(); } - .wp-block-group.woocommerce.product .up-sells.upsells.products { max-width: var(--wp--style--global--wide-size); } diff --git a/assets/js/atomic/blocks/product-elements/price/block.tsx b/assets/js/atomic/blocks/product-elements/price/block.tsx index 8561b00c3d6..3f66056631b 100644 --- a/assets/js/atomic/blocks/product-elements/price/block.tsx +++ b/assets/js/atomic/blocks/product-elements/price/block.tsx @@ -17,7 +17,6 @@ import type { HTMLAttributes } from 'react'; * Internal dependencies */ import type { BlockAttributes } from './types'; -import './style.scss'; type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >; diff --git a/assets/js/atomic/blocks/product-elements/price/style.scss b/assets/js/atomic/blocks/product-elements/price/style.scss deleted file mode 100644 index 5ff42437d25..00000000000 --- a/assets/js/atomic/blocks/product-elements/price/style.scss +++ /dev/null @@ -1,11 +0,0 @@ -.wc-block-components-product-price { - display: block; - - .wc-block-all-products & { - margin-bottom: $gap-small; - } - - ins { - text-decoration: none; - } -} diff --git a/assets/js/atomic/blocks/product-elements/product-details/block.tsx b/assets/js/atomic/blocks/product-elements/product-details/block.tsx index 74c46267b3a..2d2f95bfd03 100644 --- a/assets/js/atomic/blocks/product-elements/product-details/block.tsx +++ b/assets/js/atomic/blocks/product-elements/product-details/block.tsx @@ -5,10 +5,6 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ - interface SingleProductTab { id: string; title: string; diff --git a/assets/js/atomic/blocks/product-elements/product-details/index.tsx b/assets/js/atomic/blocks/product-elements/product-details/index.tsx index 0c3e05a1747..4a71b9963ae 100644 --- a/assets/js/atomic/blocks/product-elements/product-details/index.tsx +++ b/assets/js/atomic/blocks/product-elements/product-details/index.tsx @@ -10,6 +10,7 @@ import { productDetails } from '@woocommerce/icons'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; registerBlockSingleProductTemplate( { blockName: metadata.name, diff --git a/assets/js/atomic/blocks/product-elements/product-reviews/block.tsx b/assets/js/atomic/blocks/product-elements/product-reviews/block.tsx index 965cd18f8a0..da8d08aee9a 100644 --- a/assets/js/atomic/blocks/product-elements/product-reviews/block.tsx +++ b/assets/js/atomic/blocks/product-elements/product-reviews/block.tsx @@ -9,10 +9,6 @@ import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import { Notice } from '@wordpress/components'; -/** - * Internal dependencies - */ - export const ProductReviews = () => { const blockProps = useBlockProps(); diff --git a/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx b/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx index 20cbbe7ecd1..3dd9446baee 100644 --- a/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx +++ b/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx @@ -8,6 +8,7 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; registerBlockSingleProductTemplate( { blockName: metadata.name, diff --git a/assets/js/atomic/blocks/product-elements/rating/block.tsx b/assets/js/atomic/blocks/product-elements/rating/block.tsx index cd1dded900b..a113e573f79 100644 --- a/assets/js/atomic/blocks/product-elements/rating/block.tsx +++ b/assets/js/atomic/blocks/product-elements/rating/block.tsx @@ -11,11 +11,6 @@ import { useStyleProps } from '@woocommerce/base-hooks'; import { withProductDataContext } from '@woocommerce/shared-hocs'; import { isNumber, ProductResponseItem } from '@woocommerce/types'; -/** - * Internal dependencies - */ -import './style.scss'; - type RatingProps = { reviews: number; rating: number; diff --git a/assets/js/base/components/country-input/style.scss b/assets/js/base/components/country-input/style.scss index 576951e4ba6..003c302203e 100644 --- a/assets/js/base/components/country-input/style.scss +++ b/assets/js/base/components/country-input/style.scss @@ -1,3 +1,7 @@ +@import "node_modules/@wordpress/base-styles/breakpoints"; +@import "node_modules/@wordpress/base-styles/mixins"; +@import "node_modules/wordpress-components/src/combobox-control/style"; + .wc-block-components-country-input { margin-top: em($gap-large); } diff --git a/assets/js/base/components/form-token-field/vendor.scss b/assets/js/base/components/form-token-field/vendor.scss index 1da6718e9c3..273d47af58c 100644 --- a/assets/js/base/components/form-token-field/vendor.scss +++ b/assets/js/base/components/form-token-field/vendor.scss @@ -8,5 +8,6 @@ @import "node_modules/@wordpress/base-styles/mixins"; @import "node_modules/wordpress-components/src/popover/style"; @import "node_modules/wordpress-components/src/tooltip/style"; + @import "node_modules/wordpress-components/src/form-token-field/style"; /* stylelint-enable no-invalid-position-at-import-rule */ } diff --git a/assets/js/base/components/product-price/style.scss b/assets/js/base/components/product-price/style.scss index e3b7db30178..8e72d6413e8 100644 --- a/assets/js/base/components/product-price/style.scss +++ b/assets/js/base/components/product-price/style.scss @@ -13,6 +13,18 @@ } /*rtl:end:ignore*/ +.wc-block-components-product-price { + display: block; + + .wc-block-all-products .wc-block-components-product-price { + margin-bottom: $gap-small; + } + + ins { + text-decoration: none; + } +} + .wc-block-components-product-price__value { &.is-discounted { margin-left: 0.5em; diff --git a/assets/js/base/components/product-rating/index.tsx b/assets/js/base/components/product-rating/index.tsx index bc391b3fe70..5b9bd6a91e1 100644 --- a/assets/js/base/components/product-rating/index.tsx +++ b/assets/js/base/components/product-rating/index.tsx @@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ +import './style.scss'; const Rating = ( { className, diff --git a/assets/js/atomic/blocks/product-elements/rating/style.scss b/assets/js/base/components/product-rating/style.scss similarity index 100% rename from assets/js/atomic/blocks/product-elements/rating/style.scss rename to assets/js/base/components/product-rating/style.scss diff --git a/assets/js/blocks/breadcrumbs/index.tsx b/assets/js/blocks/breadcrumbs/index.tsx index 194aa54e9ad..ee6d49066b5 100644 --- a/assets/js/blocks/breadcrumbs/index.tsx +++ b/assets/js/blocks/breadcrumbs/index.tsx @@ -10,6 +10,7 @@ import { Icon, queryPagination } from '@wordpress/icons'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; const featurePluginSupport = { ...metadata.supports, diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js index a35312dc3f6..b4b207cfc8b 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js @@ -12,6 +12,7 @@ import { PAYMENT_STORE_KEY } from '@woocommerce/block-data'; import NoPaymentMethods from './no-payment-methods'; import PaymentMethodOptions from './payment-method-options'; import SavedPaymentMethodOptions from './saved-payment-method-options'; +import './style.scss'; /** * PaymentMethods component. diff --git a/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/index.tsx index 552ad127e34..1b303359d4a 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/index.tsx +++ b/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/index.tsx @@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/cart-cross-sells-products-block', { icon: { diff --git a/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx index 6707e86914f..f78a07ee392 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx @@ -9,7 +9,6 @@ import type { TemplateArray } from '@wordpress/blocks'; /** * Internal dependencies */ -import './style.scss'; import { useForcedLayout, getAllowedBlocks, diff --git a/assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx index 0cb78ff525f..d5f041722d3 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx +++ b/assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx @@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/cart-totals-block', { icon: { diff --git a/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx index d55c95784ea..2eecb03f2c1 100644 --- a/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx +++ b/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx @@ -15,7 +15,6 @@ import { useForcedLayout, getAllowedBlocks, } from '../../../cart-checkout-shared'; -import './style.scss'; const browseStoreTemplate = SHOP_URL ? [ diff --git a/assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx index 2902049d61e..dc1c28cdb9d 100644 --- a/assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx +++ b/assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx @@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/empty-cart-block', { icon: { diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index 6dc2e34644a..760138f9c10 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx @@ -16,7 +16,6 @@ import { useCartEventsContext } from '@woocommerce/base-context/providers'; /** * Internal dependencies */ -import './style.scss'; import { defaultButtonLabel } from './constants'; /** diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx index ba3058f0776..8ccfdcb9c75 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx @@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks'; */ import attributes from './attributes'; import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/proceed-to-checkout-block', { icon: { diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss index 06ef7f37a35..ec97ee8c1d8 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss +++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss @@ -44,4 +44,3 @@ } } } - diff --git a/assets/js/blocks/catalog-sorting/index.tsx b/assets/js/blocks/catalog-sorting/index.tsx index b83b17bf6af..0fd0be1eb50 100644 --- a/assets/js/blocks/catalog-sorting/index.tsx +++ b/assets/js/blocks/catalog-sorting/index.tsx @@ -10,6 +10,7 @@ import { totals } from '@woocommerce/icons'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; registerBlockType( metadata, { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx index 6e1302e6816..5896878c053 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx @@ -17,8 +17,8 @@ import { /** * Internal dependencies */ -import './style.scss'; import { defaultPlaceOrderButtonLabel } from './constants'; +import './style.scss'; const Block = ( { cartPageId, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/index.tsx index 8fe72c17446..8f5712b1b04 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/index.tsx @@ -10,6 +10,7 @@ import type { BlockConfiguration } from '@wordpress/blocks'; */ import attributes from './attributes'; import { Edit, Save } from './edit'; +import './style.scss'; const blockConfig: BlockConfiguration = { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx index 27cbaa28746..ad682af396e 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx @@ -4,11 +4,6 @@ import classnames from 'classnames'; import { Main } from '@woocommerce/base-components/sidebar-layout'; -/** - * Internal dependencies - */ -import './style.scss'; - const FrontendBlock = ( { children, className, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/index.tsx index d78238e3729..b31c89ffad3 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/index.tsx @@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-fields-block', { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/index.tsx index 71a1ebfdd70..2696f82b730 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/index.tsx @@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-order-note-block', { icon: { diff --git a/assets/js/blocks/checkout/order-notes/style.scss b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss similarity index 79% rename from assets/js/blocks/checkout/order-notes/style.scss rename to assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss index 02b0c71dc48..5920676ae91 100644 --- a/assets/js/blocks/checkout/order-notes/style.scss +++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss @@ -17,6 +17,6 @@ margin-top: $gap; } -.wc-block-checkout__order-notes.wc-block-components-checkout-step { +.wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step { padding-left: 0; } diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.tsx index de7f2979e4f..c204a044262 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.tsx @@ -1,7 +1,3 @@ -/** - * External dependencies - */ - /** * Internal dependencies */ diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx index c5fe3756deb..91771f5109e 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx @@ -26,7 +26,6 @@ import { LocalPickupSelect } from '@woocommerce/base-components/cart-checkout/lo /** * Internal dependencies */ -import './style.scss'; import ShippingRatesControlPackage from '../../../../base/components/cart-checkout/shipping-rates-control-package'; const getPickupLocation = ( diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/index.tsx index 89a01ceffc5..f173f14e506 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/index.tsx @@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks'; */ import { Edit, Save } from './edit'; import attributes from './attributes'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-pickup-options-block', { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx index b090729fb6f..190cb4fa3f2 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx @@ -17,7 +17,6 @@ import { isPackageRateCollectable } from '@woocommerce/base-utils'; /** * Internal dependencies */ -import './style.scss'; import { RatePrice, getLocalPickupPrices, getShippingPrices } from './shared'; import type { minMaxPrices } from './shared'; import { defaultLocalPickupText, defaultShippingText } from './constants'; diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/index.tsx index 1a0e1859673..6df154b730c 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/index.tsx @@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks'; */ import { Edit, Save } from './edit'; import attributes from './attributes'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-shipping-method-block', { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx index 68be42ddde5..e0ad9bc0c72 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx @@ -25,11 +25,6 @@ import type { import NoticeBanner from '@woocommerce/base-components/notice-banner'; import type { ReactElement } from 'react'; -/** - * Internal dependencies - */ -import './style.scss'; - /** * Renders a shipping rate control option. * diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/index.tsx index 972723db9e8..cb898b4663a 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/index.tsx @@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks'; */ import { Edit, Save } from './edit'; import attributes from './attributes'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-shipping-methods-block', { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx index b3de54291b9..46ffce5c4cc 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx @@ -14,7 +14,6 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data'; * Internal dependencies */ import { termsConsentDefaultText, termsCheckboxDefaultText } from './constants'; -import './style.scss'; const FrontendBlock = ( { text, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/index.tsx index 60ff1e045de..11d01e0a451 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/index.tsx @@ -3,10 +3,12 @@ */ import { Icon, customPostType } from '@wordpress/icons'; import { registerBlockType } from '@wordpress/blocks'; + /** * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-terms-block', { icon: { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx index 504483205a5..43f65fab2ac 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx @@ -5,11 +5,6 @@ import classnames from 'classnames'; import { Sidebar } from '@woocommerce/base-components/sidebar-layout'; import { StoreNoticesContainer } from '@woocommerce/blocks-checkout'; -/** - * Internal dependencies - */ -import './style.scss'; - const FrontendBlock = ( { children, className, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/index.tsx index aa3581bbf9d..95f48f855fc 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/index.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/index.tsx @@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks'; * Internal dependencies */ import { Edit, Save } from './edit'; +import './style.scss'; registerBlockType( 'woocommerce/checkout-totals-block', { icon: { diff --git a/assets/js/blocks/checkout/order-notes/index.tsx b/assets/js/blocks/checkout/order-notes/index.tsx index e68d616c953..e4345e3c340 100644 --- a/assets/js/blocks/checkout/order-notes/index.tsx +++ b/assets/js/blocks/checkout/order-notes/index.tsx @@ -6,11 +6,6 @@ import { useState } from '@wordpress/element'; import { CheckboxControl } from '@woocommerce/blocks-checkout'; import { Textarea } from '@woocommerce/base-components/textarea'; -/** - * Internal dependencies - */ -import './style.scss'; - interface CheckoutOrderNotesProps { disabled: boolean; onChange: ( orderNotes: string ) => void; diff --git a/assets/js/blocks/customer-account/index.tsx b/assets/js/blocks/customer-account/index.tsx index b1fc7e85f72..3f849b2c0f9 100644 --- a/assets/js/blocks/customer-account/index.tsx +++ b/assets/js/blocks/customer-account/index.tsx @@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; registerBlockType( metadata, { icon: { diff --git a/assets/js/blocks/product-results-count/index.tsx b/assets/js/blocks/product-results-count/index.tsx index b83b17bf6af..0fd0be1eb50 100644 --- a/assets/js/blocks/product-results-count/index.tsx +++ b/assets/js/blocks/product-results-count/index.tsx @@ -10,6 +10,7 @@ import { totals } from '@woocommerce/icons'; */ import metadata from './block.json'; import edit from './edit'; +import './style.scss'; registerBlockType( metadata, { icon: { diff --git a/assets/js/blocks/product-tag/index.tsx b/assets/js/blocks/product-tag/index.tsx index fae42bf2c6c..3e0f742b704 100644 --- a/assets/js/blocks/product-tag/index.tsx +++ b/assets/js/blocks/product-tag/index.tsx @@ -8,9 +8,9 @@ import { Icon, tag } from '@wordpress/icons'; /** * Internal dependencies */ -import './editor.scss'; import metadata from './block.json'; import { Edit } from './edit'; +import './editor.scss'; /** * Register and run the "Products by Tag" block. diff --git a/assets/js/blocks/product-template/index.tsx b/assets/js/blocks/product-template/index.tsx index 1686814d123..6fc7771cc96 100644 --- a/assets/js/blocks/product-template/index.tsx +++ b/assets/js/blocks/product-template/index.tsx @@ -11,6 +11,7 @@ import metadata from './block.json'; import edit from './edit'; import save from './save'; import icon from './icon'; +import './style.scss'; const blockConfig: BlockConfiguration = { ...metadata, diff --git a/assets/js/editor-components/search-list-control/search-list-control.tsx b/assets/js/editor-components/search-list-control/search-list-control.tsx index 225e7e6d204..27b057742c1 100644 --- a/assets/js/editor-components/search-list-control/search-list-control.tsx +++ b/assets/js/editor-components/search-list-control/search-list-control.tsx @@ -34,6 +34,7 @@ import type { ListItemsProps, SearchListItemsContainerProps, } from './types'; +import './style.scss'; const defaultRenderListItem = ( args: renderItemArgs ): JSX.Element => { return ; diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js index b5fb6f3f82d..8bda9599f84 100644 --- a/bin/webpack-configs.js +++ b/bin/webpack-configs.js @@ -660,62 +660,32 @@ const getStylingConfig = ( options = {} ) => { chunks: 'all', priority: 10, }, - vendorsStyle: { - test: /[\/\\]node_modules[\/\\].*?style\.s?css$/, - name: 'wc-blocks-vendors-style', - chunks: 'all', - priority: 7, - }, - blocksStyle: { - // Capture all stylesheets with name `style` or name that starts with underscore (abstracts). - test: /(style|_.*)\.scss$/, - name: 'wc-blocks-style', - chunks: 'all', - priority: 5, - }, }, }, }, module: { rules: [ { - test: /[\/\\]node_modules[\/\\].*?style\.s?css$/, - use: [ - MiniCssExtractPlugin.loader, - { loader: 'css-loader', options: { importLoaders: 1 } }, - 'postcss-loader', - { - loader: 'sass-loader', - options: { - sassOptions: { - includePaths: [ 'node_modules' ], - }, - additionalData: ( content ) => { - const styleImports = [ - 'colors', - 'breakpoints', - 'variables', - 'mixins', - 'animations', - 'z-index', - ] - .map( - ( imported ) => - `@import "~@wordpress/base-styles/${ imported }";` - ) - .join( ' ' ); - return styleImports + content; - }, - }, + test: /\.(j|t)sx?$/, + use: { + loader: 'babel-loader?cacheDirectory', + options: { + presets: [ '@wordpress/babel-preset-default' ], + plugins: [ + isProduction + ? require.resolve( + 'babel-plugin-transform-react-remove-prop-types' + ) + : false, + ].filter( Boolean ), }, - ], + }, }, { test: /\.s?css$/, - exclude: /node_modules/, use: [ MiniCssExtractPlugin.loader, - { loader: 'css-loader', options: { importLoaders: 1 } }, + 'css-loader', 'postcss-loader', { loader: 'sass-loader', @@ -761,6 +731,7 @@ const getStylingConfig = ( options = {} ) => { ], }, plugins: [ + ...getSharedPlugins( { bundleAnalyzerReportTitle: 'Styles' } ), new ProgressBarPlugin( getProgressBarPluginConfig( 'Styles' ) ), new WebpackRTLPlugin( { filename: `[name]${ fileSuffix }-rtl.css`, @@ -776,7 +747,7 @@ const getStylingConfig = ( options = {} ) => { ], resolve: { ...resolve, - extensions: [ '.js', '.ts', '.tsx' ], + extensions: [ '.js', '.jsx', '.ts', '.tsx' ], }, }; }; diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 0d61c431eb4..7e9ae06710a 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -110,27 +110,20 @@ const getBlockEntries = ( relativePath ) => { const entries = { styling: { - // @wordpress/components styles - 'custom-select-control-style': - './node_modules/wordpress-components/src/custom-select-control/style.scss', - 'snackbar-notice-style': - './node_modules/wordpress-components/src/snackbar/style.scss', - 'combobox-control-style': - './node_modules/wordpress-components/src/combobox-control/style.scss', - 'form-token-field-style': - './node_modules/wordpress-components/src/form-token-field/style.scss', + // Packages styles + 'packages-style': glob.sync( './packages/**/index.js' ), - 'general-style': glob.sync( './assets/**/*.scss', { - ignore: [ - // Block styles are added below. - './assets/js/blocks/*/*.scss', - ], - } ), - - 'packages-style': glob.sync( './packages/**/*.scss' ), + // Shared blocks code + 'wc-blocks': './assets/js/index.js', - 'reviews-style': './assets/js/blocks/reviews/editor.scss', - ...getBlockEntries( '**/*.scss' ), + // Blocks + 'product-image-gallery': + './assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts', + 'product-reviews': + './assets/js/atomic/blocks/product-elements/product-reviews/index.tsx', + 'product-details': + './assets/js/atomic/blocks/product-elements/product-details/index.tsx', + ...getBlockEntries( '{index,block,frontend}.{t,j}s{,x}' ), }, core: { wcBlocksRegistry: './assets/js/blocks-registry/index.js', diff --git a/packages/checkout/components/checkbox-control/style.scss b/packages/checkout/components/checkbox-control/style.scss index 71173748314..47843f0c52c 100644 --- a/packages/checkout/components/checkbox-control/style.scss +++ b/packages/checkout/components/checkbox-control/style.scss @@ -1,7 +1,7 @@ .wc-block-components-checkbox { @include reset-color(); @include reset-typography(); - margin-top: em($gap-large); + margin-top: em($gap); label { align-items: flex-start; diff --git a/src/Assets/Api.php b/src/Assets/Api.php index 7f950752248..9550be10897 100644 --- a/src/Assets/Api.php +++ b/src/Assets/Api.php @@ -233,17 +233,22 @@ function() use ( $handle ) { * @since 2.5.0 * @since 2.6.0 Change src to be relative source. * - * @param string $handle Name of the stylesheet. Should be unique. - * @param string $relative_src Relative source of the stylesheet to the plugin path. - * @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array. - * @param string $media Optional. The media for which this stylesheet has been defined. Default 'all'. Accepts media types like - * 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'. + * @param string $handle Name of the stylesheet. Should be unique. + * @param string $relative_src Relative source of the stylesheet to the plugin path. + * @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array. + * @param string $media Optional. The media for which this stylesheet has been defined. Default 'all'. Accepts media types like + * 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'. + * @param boolean $rtl Optional. Whether or not to register RTL styles. */ - public function register_style( $handle, $relative_src, $deps = [], $media = 'all' ) { + public function register_style( $handle, $relative_src, $deps = [], $media = 'all', $rtl = false ) { $filename = str_replace( plugins_url( '/', __DIR__ ), '', $relative_src ); $src = $this->get_asset_url( $relative_src ); $ver = $this->get_file_version( $filename ); wp_register_style( $handle, $src, $deps, $ver, $media ); + + if ( $rtl ) { + wp_style_add_data( $handle, 'rtl', 'replace' ); + } } /** diff --git a/src/AssetsController.php b/src/AssetsController.php index 6691c1ff586..bdfa549152f 100644 --- a/src/AssetsController.php +++ b/src/AssetsController.php @@ -47,9 +47,9 @@ protected function init() { * Register block scripts & styles. */ public function register_assets() { - $this->register_style( 'wc-blocks-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-vendors-style', 'css' ), __DIR__ ) ); + $this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true ); + $this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true ); $this->register_style( 'wc-blocks-editor-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-editor-style', 'css' ), __DIR__ ), [ 'wp-edit-blocks' ], 'all', true ); - $this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-style', 'css' ), __DIR__ ), [ 'wc-blocks-vendors-style' ], 'all', true ); $this->api->register_script( 'wc-blocks-middleware', 'build/wc-blocks-middleware.js', [], false ); $this->api->register_script( 'wc-blocks-data-store', 'build/wc-blocks-data.js', [ 'wc-blocks-middleware' ] ); diff --git a/src/BlockTypes/AbstractBlock.php b/src/BlockTypes/AbstractBlock.php index 75ff4f0e6d8..ba0c35a249b 100644 --- a/src/BlockTypes/AbstractBlock.php +++ b/src/BlockTypes/AbstractBlock.php @@ -300,11 +300,12 @@ protected function get_block_type_script( $key = null ) { /** * Get the frontend style handle for this block type. * - * @see $this->register_block_type() - * @return string|null + * @return string[]|null */ protected function get_block_type_style() { - return 'wc-blocks-style'; + $this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true ); + + return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ]; } /** diff --git a/src/BlockTypes/AbstractInnerBlock.php b/src/BlockTypes/AbstractInnerBlock.php index 07d75d591a9..6cf4aa3902a 100644 --- a/src/BlockTypes/AbstractInnerBlock.php +++ b/src/BlockTypes/AbstractInnerBlock.php @@ -54,4 +54,12 @@ protected function get_block_type_script( $key = null ) { return parent::get_block_type_script( $key ); } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } } diff --git a/src/BlockTypes/AbstractProductGrid.php b/src/BlockTypes/AbstractProductGrid.php index 8fe0641ac0b..3348a506cbc 100644 --- a/src/BlockTypes/AbstractProductGrid.php +++ b/src/BlockTypes/AbstractProductGrid.php @@ -686,4 +686,14 @@ protected function enqueue_data( array $attributes = [] ) { $this->asset_data_registry->add( 'default_rows', wc_get_theme_support( 'product_blocks::default_rows', 3 ), true ); $this->asset_data_registry->add( 'stock_status_options', wc_get_product_stock_status_options(), true ); } + + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + // Currently these blocks rely on the styles from the All Products block. + return [ 'wc-blocks-style', 'wc-blocks-style-all-products' ]; + } } diff --git a/src/BlockTypes/AddToCartForm.php b/src/BlockTypes/AddToCartForm.php index 2bb0c3de4de..0ec14752e72 100644 --- a/src/BlockTypes/AddToCartForm.php +++ b/src/BlockTypes/AddToCartForm.php @@ -176,6 +176,15 @@ protected function get_block_type_script( $key = null ) { return null; } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } + /** * It isn't necessary register block assets because it is a server side block. */ diff --git a/src/BlockTypes/AttributeFilter.php b/src/BlockTypes/AttributeFilter.php index 0979f6d2353..82be8c7eb9a 100644 --- a/src/BlockTypes/AttributeFilter.php +++ b/src/BlockTypes/AttributeFilter.php @@ -25,4 +25,13 @@ protected function enqueue_data( array $attributes = [] ) { parent::enqueue_data( $attributes ); $this->asset_data_registry->add( 'attributes', array_values( wc_get_attribute_taxonomies() ), true ); } + + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } } diff --git a/src/BlockTypes/Cart.php b/src/BlockTypes/Cart.php index 227351a0047..79068f52071 100644 --- a/src/BlockTypes/Cart.php +++ b/src/BlockTypes/Cart.php @@ -100,6 +100,15 @@ protected function get_block_type_script( $key = null ) { return $key ? $script[ $key ] : $script; } + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } + /** * Enqueue frontend assets for this block, just in time for rendering. * diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php index 758725cff81..c2019574b69 100644 --- a/src/BlockTypes/Checkout.php +++ b/src/BlockTypes/Checkout.php @@ -55,6 +55,15 @@ protected function get_block_type_script( $key = null ) { return $key ? $script[ $key ] : $script; } + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } + /** * Enqueue frontend assets for this block, just in time for rendering. * diff --git a/src/BlockTypes/ClassicTemplate.php b/src/BlockTypes/ClassicTemplate.php index 1ac9fcb49c5..bc24b6c34ed 100644 --- a/src/BlockTypes/ClassicTemplate.php +++ b/src/BlockTypes/ClassicTemplate.php @@ -390,4 +390,12 @@ function( $value ) use ( $stock_status ) { return $meta_query; } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } } diff --git a/src/BlockTypes/FilterWrapper.php b/src/BlockTypes/FilterWrapper.php index 58d027234bd..3bd42018298 100644 --- a/src/BlockTypes/FilterWrapper.php +++ b/src/BlockTypes/FilterWrapper.php @@ -11,4 +11,13 @@ class FilterWrapper extends AbstractBlock { * @var string */ protected $block_name = 'filter-wrapper'; + + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } } diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php index 84fb4096d7f..60b33ae98de 100644 --- a/src/BlockTypes/MiniCart.php +++ b/src/BlockTypes/MiniCart.php @@ -108,6 +108,15 @@ protected function get_block_type_script( $key = null ) { return $key ? $script[ $key ] : $script; } + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } + /** * Extra data passed through from server to client for block. * diff --git a/src/BlockTypes/MiniCartContents.php b/src/BlockTypes/MiniCartContents.php index 37ee9ee31ec..ee9f1fa16f4 100644 --- a/src/BlockTypes/MiniCartContents.php +++ b/src/BlockTypes/MiniCartContents.php @@ -45,6 +45,15 @@ protected function get_block_type_script( $key = null ) { return null; } + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } + /** * Render the markup for the Mini-Cart Contents block. * diff --git a/src/BlockTypes/ProceedToCheckoutBlock.php b/src/BlockTypes/ProceedToCheckoutBlock.php index e2a883eeca3..5a7b19177aa 100644 --- a/src/BlockTypes/ProceedToCheckoutBlock.php +++ b/src/BlockTypes/ProceedToCheckoutBlock.php @@ -12,7 +12,6 @@ class ProceedToCheckoutBlock extends AbstractInnerBlock { */ protected $block_name = 'proceed-to-checkout-block'; - /** * Extra data passed through from server to client for block. * diff --git a/src/BlockTypes/ProductCollection.php b/src/BlockTypes/ProductCollection.php index 615924ac29c..bcbc1cafcb6 100644 --- a/src/BlockTypes/ProductCollection.php +++ b/src/BlockTypes/ProductCollection.php @@ -46,6 +46,15 @@ protected function get_block_type_script( $key = null ) { return null; } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } + /** * Initialize this block type. * diff --git a/src/BlockTypes/ProductGallery.php b/src/BlockTypes/ProductGallery.php index 9f1d6d60c3a..ecb9b2470ce 100644 --- a/src/BlockTypes/ProductGallery.php +++ b/src/BlockTypes/ProductGallery.php @@ -11,4 +11,13 @@ class ProductGallery extends AbstractBlock { * @var string */ protected $block_name = 'product-gallery'; + + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } } diff --git a/src/BlockTypes/ProductPrice.php b/src/BlockTypes/ProductPrice.php index 038bd4be373..2b2235d08ff 100644 --- a/src/BlockTypes/ProductPrice.php +++ b/src/BlockTypes/ProductPrice.php @@ -46,6 +46,15 @@ protected function get_block_type_supports() { ); } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } + /** * Overwrite parent method to prevent script registration. * diff --git a/src/BlockTypes/ProductRating.php b/src/BlockTypes/ProductRating.php index ab7369a1cf9..2af740432f3 100644 --- a/src/BlockTypes/ProductRating.php +++ b/src/BlockTypes/ProductRating.php @@ -80,6 +80,15 @@ protected function register_block_type_assets() { return null; } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } + /** * Register the context. */ diff --git a/src/BlockTypes/RatingFilter.php b/src/BlockTypes/RatingFilter.php index 5968c6aac62..2e44896319d 100644 --- a/src/BlockTypes/RatingFilter.php +++ b/src/BlockTypes/RatingFilter.php @@ -22,4 +22,13 @@ class RatingFilter extends AbstractBlock { protected function get_block_type_script( $key = null ) { return null; } + + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } } diff --git a/src/BlockTypes/RelatedProducts.php b/src/BlockTypes/RelatedProducts.php index e89e22a57d2..f27f2bfb9c3 100644 --- a/src/BlockTypes/RelatedProducts.php +++ b/src/BlockTypes/RelatedProducts.php @@ -51,6 +51,15 @@ protected function register_block_type_assets() { return null; } + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } + /** * Update the query for the product query block. * @@ -122,8 +131,6 @@ public function render_block( string $content, array $block ) { return $content; } - - /** * Determines whether the block is a related products block. * diff --git a/src/BlockTypes/StockFilter.php b/src/BlockTypes/StockFilter.php index 3f0784d80e3..82fe9b696ee 100644 --- a/src/BlockTypes/StockFilter.php +++ b/src/BlockTypes/StockFilter.php @@ -33,4 +33,13 @@ protected function enqueue_data( array $stock_statuses = [] ) { public static function get_stock_status_query_var_values() { return array_keys( wc_get_product_stock_status_options() ); } + + /** + * Get the frontend style handle for this block type. + * + * @return string[] + */ + protected function get_block_type_style() { + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); + } } diff --git a/src/BlockTypes/StoreNotices.php b/src/BlockTypes/StoreNotices.php index f20ca6ee478..d346d31d05e 100644 --- a/src/BlockTypes/StoreNotices.php +++ b/src/BlockTypes/StoreNotices.php @@ -57,4 +57,13 @@ protected function render( $attributes, $content, $block ) { protected function get_block_type_script( $key = null ) { return null; } + + /** + * Get the frontend style handle for this block type. + * + * @return null + */ + protected function get_block_type_style() { + return null; + } } diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php index 0638184fd4b..96e958f9739 100644 --- a/woocommerce-gutenberg-products-block.php +++ b/woocommerce-gutenberg-products-block.php @@ -112,7 +112,6 @@ function () { ); } - /** * Autoload packages. * From c389cb7481e9f8849fa2c032e55ddbdf7fda1b1d Mon Sep 17 00:00:00 2001 From: Tarun Vijwani Date: Tue, 4 Jul 2023 15:16:26 +0400 Subject: [PATCH 02/11] Fix notice banner links for Legacy notices (#9996) --- assets/js/base/components/notice-banner/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/js/base/components/notice-banner/style.scss b/assets/js/base/components/notice-banner/style.scss index 395de052cb4..b3a9bc9f5de 100644 --- a/assets/js/base/components/notice-banner/style.scss +++ b/assets/js/base/components/notice-banner/style.scss @@ -43,7 +43,7 @@ } // Legacy notice compatibility. - .wc-forward.wp-element-button { + .wc-forward { float: right; color: $gray-800 !important; background: transparent; @@ -52,6 +52,8 @@ border: 0; appearance: none; opacity: 0.6; + text-decoration-line: underline; + text-underline-position: under; &:hover, &:focus, From 59f2ba9da21a672cbe3f87e7bbfcb10758dd5161 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 5 Jul 2023 08:51:02 +0200 Subject: [PATCH 03/11] Fix filter count display toggle (#10096) * fix save method * improve check * Only display counts if showCounts is true --------- Co-authored-by: Alexandre Lara --- assets/js/blocks/attribute-filter/index.tsx | 7 +------ assets/js/blocks/attribute-filter/utils.ts | 2 +- assets/js/blocks/rating-filter/index.tsx | 7 +------ assets/js/blocks/rating-filter/utils.ts | 2 +- assets/js/blocks/stock-filter/index.tsx | 7 +------ assets/js/blocks/stock-filter/utils.ts | 2 +- 6 files changed, 6 insertions(+), 21 deletions(-) diff --git a/assets/js/blocks/attribute-filter/index.tsx b/assets/js/blocks/attribute-filter/index.tsx index e66cdeb069d..f1e63575ff0 100644 --- a/assets/js/blocks/attribute-filter/index.tsx +++ b/assets/js/blocks/attribute-filter/index.tsx @@ -49,12 +49,7 @@ registerBlockType( metadata, { { ...useBlockProps.save( { className: classNames( 'is-loading', className ), } ) } - > - - + /> ); }, deprecated, diff --git a/assets/js/blocks/attribute-filter/utils.ts b/assets/js/blocks/attribute-filter/utils.ts index 2463243742e..f76609a4f58 100644 --- a/assets/js/blocks/attribute-filter/utils.ts +++ b/assets/js/blocks/attribute-filter/utils.ts @@ -127,7 +127,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { isString( data?.attributeId ) ? data.attributeId : '0', 10 ), - showCounts: data?.showCounts !== 'false', + showCounts: data?.showCounts === 'true', queryType: ( isString( data?.queryType ) && data.queryType ) || metadata.attributes.queryType.default, diff --git a/assets/js/blocks/rating-filter/index.tsx b/assets/js/blocks/rating-filter/index.tsx index 21c053dd5ef..35319dea5ef 100644 --- a/assets/js/blocks/rating-filter/index.tsx +++ b/assets/js/blocks/rating-filter/index.tsx @@ -36,12 +36,7 @@ registerBlockType( metadata, { { ...useBlockProps.save( { className: classNames( 'is-loading', className ), } ) } - > - - + /> ); }, deprecated, diff --git a/assets/js/blocks/rating-filter/utils.ts b/assets/js/blocks/rating-filter/utils.ts index 5b5209993f7..a6ba5a02ba6 100644 --- a/assets/js/blocks/rating-filter/utils.ts +++ b/assets/js/blocks/rating-filter/utils.ts @@ -38,7 +38,7 @@ export const formatSlug = ( slug: string ) => export const parseAttributes = ( data: Record< string, unknown > ) => { return { showFilterButton: data?.showFilterButton === 'true', - showCounts: data?.showCounts !== 'false', + showCounts: data?.showCounts === 'true', isPreview: false, displayStyle: ( isString( data?.displayStyle ) && data.displayStyle ) || diff --git a/assets/js/blocks/stock-filter/index.tsx b/assets/js/blocks/stock-filter/index.tsx index e887e7cdb58..3c610e511e5 100644 --- a/assets/js/blocks/stock-filter/index.tsx +++ b/assets/js/blocks/stock-filter/index.tsx @@ -38,12 +38,7 @@ registerBlockType( metadata, { { ...useBlockProps.save( { className: classNames( 'is-loading', className ), } ) } - > - - + /> ); }, deprecated, diff --git a/assets/js/blocks/stock-filter/utils.ts b/assets/js/blocks/stock-filter/utils.ts index d692e459316..3addadffd3c 100644 --- a/assets/js/blocks/stock-filter/utils.ts +++ b/assets/js/blocks/stock-filter/utils.ts @@ -48,7 +48,7 @@ export const parseAttributes = ( data: Record< string, unknown > ) => { parseInt( data.headingLevel, 10 ) ) || metadata.attributes.headingLevel.default, showFilterButton: data?.showFilterButton === 'true', - showCounts: data?.showCounts !== 'false', + showCounts: data?.showCounts === 'true', isPreview: false, displayStyle: ( isString( data?.displayStyle ) && data.displayStyle ) || From 004738abb079410f2cb58898d64b9a9667bf0349 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 5 Jul 2023 09:45:38 +0200 Subject: [PATCH 04/11] Products block: Improve stability E2E tests (#10075) --- .../products.block_theme.side_effects.spec.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts b/tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts index 314f85e505c..171dd358d09 100644 --- a/tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts +++ b/tests/e2e-pw/tests/products/products.block_theme.side_effects.spec.ts @@ -151,11 +151,12 @@ for ( const { parentClientId ); - await editor.saveSiteEditorEntities(); - - await page.waitForResponse( ( response ) => - response.url().includes( 'wp-json/wp/v2/templates/' ) - ); + await Promise.all( [ + editor.saveSiteEditorEntities(), + page.waitForResponse( ( response ) => + response.url().includes( 'wp-json/wp/v2/templates/' ) + ), + ] ); // @todo This is a workaround to wait for the save button to be enabled. It works only without Gutenberg enabled. We have to refactor this. await page From 87b3f9556bb077182e300799fd4b7065547c28a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Wed, 5 Jul 2023 10:30:20 +0200 Subject: [PATCH 05/11] Fix image over content (#10092) --- assets/js/atomic/blocks/product-elements/image/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/atomic/blocks/product-elements/image/style.scss b/assets/js/atomic/blocks/product-elements/image/style.scss index 7c08d449ee6..386227b1338 100644 --- a/assets/js/atomic/blocks/product-elements/image/style.scss +++ b/assets/js/atomic/blocks/product-elements/image/style.scss @@ -2,7 +2,6 @@ .wc-block-components-product-image { text-decoration: none; display: block; - position: relative; a { border-radius: inherit; From f2b4d545b27ac0cce1aa34aad9800a9c431ac1cd Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Wed, 5 Jul 2023 10:34:25 +0200 Subject: [PATCH 06/11] Add feedback form to the Product Collection block (#10079) * Add feedback form to the Product Collection block * Change the airtable link to the new one related to Product Collection --- .../product-collection/inspector-controls/index.tsx | 2 ++ assets/js/editor-components/feedback-prompt/index.tsx | 11 +++++++++++ 2 files changed, 13 insertions(+) diff --git a/assets/js/blocks/product-collection/inspector-controls/index.tsx b/assets/js/blocks/product-collection/inspector-controls/index.tsx index 7f4425cc9af..449ba990524 100644 --- a/assets/js/blocks/product-collection/inspector-controls/index.tsx +++ b/assets/js/blocks/product-collection/inspector-controls/index.tsx @@ -5,6 +5,7 @@ import type { BlockEditProps } from '@wordpress/blocks'; import { InspectorControls } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; +import { ProductCollectionFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; import { // @ts-expect-error Using experimental features // eslint-disable-next-line @wordpress/no-unsafe-wp-apis @@ -97,6 +98,7 @@ const ProductCollectionInspectorControls = ( /> ) : null } + ); }; diff --git a/assets/js/editor-components/feedback-prompt/index.tsx b/assets/js/editor-components/feedback-prompt/index.tsx index ef1b2c0aad4..44487defd1e 100644 --- a/assets/js/editor-components/feedback-prompt/index.tsx +++ b/assets/js/editor-components/feedback-prompt/index.tsx @@ -95,3 +95,14 @@ export const ProductQueryFeedbackPrompt = () => ( url={ 'https://airtable.com/shrFX5FAqmCY6hVYI' } /> ); + +export const ProductCollectionFeedbackPrompt = () => ( + +); From 635f102186dc09abf324b4655ab8a30e78d4fc89 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Wed, 5 Jul 2023 12:02:27 +0100 Subject: [PATCH 07/11] Fix cart and checkout conditionals when using a block based theme and templates (#10098) * Update conditionals to deal with templates instead of cart/checkout page objects * Include notice style in main entrypoint --- assets/js/index.js | 1 + src/Domain/Services/Notices.php | 11 ++--------- src/Utils/CartCheckoutUtils.php | 30 ++++++++++++++++++++++++++++++ 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/assets/js/index.js b/assets/js/index.js index 5fdfbdcc91c..3324889f387 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -14,6 +14,7 @@ import '../css/editor.scss'; import '../css/style.scss'; import './filters/block-list-block'; import './filters/get-block-attributes'; +import './base/components/notice-banner/style.scss'; setCategories( [ ...getCategories().filter( diff --git a/src/Domain/Services/Notices.php b/src/Domain/Services/Notices.php index 990681489b0..12090af3cf1 100644 --- a/src/Domain/Services/Notices.php +++ b/src/Domain/Services/Notices.php @@ -2,6 +2,7 @@ namespace Automattic\WooCommerce\Blocks\Domain\Services; use Automattic\WooCommerce\Blocks\Domain\Package; +use Automattic\WooCommerce\Blocks\Utils\CartCheckoutUtils; /** * Service class for adding new-style Notices to WooCommerce core. @@ -41,15 +42,7 @@ public function __construct( Package $package ) { * is using the new block based cart/checkout. */ public function init() { - // Core page IDs. - $cart_page_id = wc_get_page_id( 'cart' ); - $checkout_page_id = wc_get_page_id( 'checkout' ); - - // Checks a specific page (by ID) to see if it contains the named block. - $has_block_cart = $cart_page_id && has_block( 'woocommerce/cart', $cart_page_id ); - $has_block_checkout = $checkout_page_id && has_block( 'woocommerce/checkout', $checkout_page_id ); - - if ( $has_block_cart || $has_block_checkout ) { + if ( CartCheckoutUtils::is_cart_block_default() || CartCheckoutUtils::is_checkout_block_default() ) { add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] ); add_filter( 'wc_get_template', [ $this, 'get_notices_template' ], 10, 5 ); add_action( diff --git a/src/Utils/CartCheckoutUtils.php b/src/Utils/CartCheckoutUtils.php index 24f59c46f2d..e1d74d2c65e 100644 --- a/src/Utils/CartCheckoutUtils.php +++ b/src/Utils/CartCheckoutUtils.php @@ -12,6 +12,21 @@ class CartCheckoutUtils { * @return bool true if the WC cart page is using the Cart block. */ public static function is_cart_block_default() { + if ( wc_current_theme_is_fse_theme() ) { + // Ignore the pages and check the templates. + $templates_from_db = BlockTemplateUtils::get_block_templates_from_db( array( 'cart' ), 'wp_template' ); + + // If there is no template file, we're using default which does use the block. + if ( empty( $templates_from_db ) ) { + return true; + } + + foreach ( $templates_from_db as $template ) { + if ( has_block( 'woocommerce/cart', $template->content ) ) { + return true; + } + } + } $cart_page_id = wc_get_page_id( 'cart' ); return $cart_page_id && has_block( 'woocommerce/cart', $cart_page_id ); } @@ -22,6 +37,21 @@ public static function is_cart_block_default() { * @return bool true if the WC checkout page is using the Checkout block. */ public static function is_checkout_block_default() { + if ( wc_current_theme_is_fse_theme() ) { + // Ignore the pages and check the templates. + $templates_from_db = BlockTemplateUtils::get_block_templates_from_db( array( 'checkout' ), 'wp_template' ); + + // If there is no template file, we're using default which does use the block. + if ( empty( $templates_from_db ) ) { + return true; + } + + foreach ( $templates_from_db as $template ) { + if ( has_block( 'woocommerce/checkout', $template->content ) ) { + return true; + } + } + } $checkout_page_id = wc_get_page_id( 'checkout' ); return $checkout_page_id && has_block( 'woocommerce/checkout', $checkout_page_id ); } From 08cea7441674ff329462c586acd5aaa7c017c457 Mon Sep 17 00:00:00 2001 From: Roy Ho Date: Wed, 5 Jul 2023 06:16:36 -0700 Subject: [PATCH 08/11] Update/fixtures html (#10080) * Remove data attributes from fixture for active filters * Remove data attributes from fixture for filter by price * Remove data attributes from fixture for filter by attribute * Remove data attributes from fixture for filter by stock --- .../e2e/specs/backend/__fixtures__/active-filters.fixture.json | 2 +- .../__fixtures__/filter-products-by-attribute.fixture.json | 2 +- .../backend/__fixtures__/filter-products-by-price.fixture.json | 2 +- .../backend/__fixtures__/filter-products-by-stock.fixture.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/e2e/specs/backend/__fixtures__/active-filters.fixture.json b/tests/e2e/specs/backend/__fixtures__/active-filters.fixture.json index a07cc1b7a8a..157c101e084 100644 --- a/tests/e2e/specs/backend/__fixtures__/active-filters.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/active-filters.fixture.json @@ -1 +1 @@ -{"title":"Active Filters Block","pageContent":"

Active filters

"} +{"title":"Active Filters Block","pageContent":"

Active filters

"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json index 8a80d46777b..c76aec7acfb 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json @@ -1 +1 @@ -{"title":"Filter by Attribute Block","pageContent":"

Filter by Capacity

\n
\n"} +{"title":"Filter by Attribute Block","pageContent":"

Filter by Capacity

\n
\n"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json index 8a837d3b968..084ef7e90b5 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json @@ -1 +1 @@ -{"title":"Filter by Price Block","pageContent":"

Filter by price

"} +{"title":"Filter by Price Block","pageContent":"

Filter by price

"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json index bbdab9df40a..9f368f8b160 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json @@ -1 +1 @@ -{"title":"Filter Products by Stock Block","pageContent":"

Filter by stock status

"} +{"title":"Filter Products by Stock Block","pageContent":"

Filter by stock status

"} From 045e7b96d0773fb666f1e44447a1ad73dbe43c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 6 Jul 2023 09:25:29 +0200 Subject: [PATCH 09/11] Fix `Product Rating` styles & alignment (#10097) * Fix alignment not working on the editor * Fix style regression on rating --- .../atomic/blocks/product-elements/rating/block.tsx | 5 +++++ .../atomic/blocks/product-elements/rating/style.scss | 12 ++++++++++++ assets/js/base/components/product-rating/style.scss | 10 +++++++--- src/BlockTypes/ProductRating.php | 2 +- 4 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 assets/js/atomic/blocks/product-elements/rating/style.scss diff --git a/assets/js/atomic/blocks/product-elements/rating/block.tsx b/assets/js/atomic/blocks/product-elements/rating/block.tsx index a113e573f79..cd1dded900b 100644 --- a/assets/js/atomic/blocks/product-elements/rating/block.tsx +++ b/assets/js/atomic/blocks/product-elements/rating/block.tsx @@ -11,6 +11,11 @@ import { useStyleProps } from '@woocommerce/base-hooks'; import { withProductDataContext } from '@woocommerce/shared-hocs'; import { isNumber, ProductResponseItem } from '@woocommerce/types'; +/** + * Internal dependencies + */ +import './style.scss'; + type RatingProps = { reviews: number; rating: number; diff --git a/assets/js/atomic/blocks/product-elements/rating/style.scss b/assets/js/atomic/blocks/product-elements/rating/style.scss new file mode 100644 index 00000000000..37ad3a77033 --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/rating/style.scss @@ -0,0 +1,12 @@ +.wc-block-components-product-rating { + .wc-block-components-product-rating__container { + > * { + vertical-align: middle; + } + } + + .wc-block-components-product-rating__stars { + display: inline-block; + margin: 0; + } +} diff --git a/assets/js/base/components/product-rating/style.scss b/assets/js/base/components/product-rating/style.scss index 40b6adfdfbe..f373d67c12e 100644 --- a/assets/js/base/components/product-rating/style.scss +++ b/assets/js/base/components/product-rating/style.scss @@ -54,9 +54,13 @@ } &__container { - display: flex; - align-items: center; - column-gap: $gap-smaller; + > * { + vertical-align: middle; + } + } + + &__reviews_count { + margin-left: $gap-smaller; } &__norating-container { diff --git a/src/BlockTypes/ProductRating.php b/src/BlockTypes/ProductRating.php index 2af740432f3..d9dfec13379 100644 --- a/src/BlockTypes/ProductRating.php +++ b/src/BlockTypes/ProductRating.php @@ -86,7 +86,7 @@ protected function register_block_type_assets() { * @return null */ protected function get_block_type_style() { - return null; + return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] ); } /** From 1a7365dea60c282468193a5dfcdfc21edb18f593 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 6 Jul 2023 16:39:19 +0200 Subject: [PATCH 10/11] Fix Filter blocks e2e tests (#10116) * Revert "fix save method" This reverts commit f6623c55320bf55ee7fa3c23eb294f06d79ee4a5. * Revert "Revert "fix save method"" This reverts commit 739db2e3b0b62e10fbe1ebabd1ec6bbae8425b3c. * Update Filter by Attribute and Filter by Stock e2e test fixtures * Update Filter by Attribute 'can hide product count' test --- .../__fixtures__/filter-products-by-attribute.fixture.json | 2 +- .../__fixtures__/filter-products-by-stock.fixture.json | 2 +- tests/e2e/specs/backend/attribute-filter.test.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json index c76aec7acfb..27645325576 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-attribute.fixture.json @@ -1 +1 @@ -{"title":"Filter by Attribute Block","pageContent":"

Filter by Capacity

\n
\n"} +{"title":"Filter by Attribute Block","pageContent":"

Filter by Capacity

\n
\n"} diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json index 9f368f8b160..b9060024a19 100644 --- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json +++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-stock.fixture.json @@ -1 +1 @@ -{"title":"Filter Products by Stock Block","pageContent":"

Filter by stock status

"} +{"title":"Filter Products by Stock Block","pageContent":"

Filter by stock status

"} diff --git a/tests/e2e/specs/backend/attribute-filter.test.js b/tests/e2e/specs/backend/attribute-filter.test.js index 5b42cb1f7a0..a8650caf7cc 100644 --- a/tests/e2e/specs/backend/attribute-filter.test.js +++ b/tests/e2e/specs/backend/attribute-filter.test.js @@ -87,13 +87,13 @@ describe( `${ block.name } Block`, () => { } ); it( 'can hide product count', async () => { - await expect( page ).toMatchElement( + await expect( page ).not.toMatchElement( '.wc-filter-element-label-list-count' ); await expect( page ).toClick( 'label', { text: 'Display product count', } ); - await expect( page ).not.toMatchElement( + await expect( page ).toMatchElement( '.wc-filter-element-label-list-count' ); // reset From 7fe5f06a451319469f12123da026776c66292c0a Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 6 Jul 2023 17:08:39 +0200 Subject: [PATCH 11/11] Product Gallery: Add Large Image inner block (#10045) * Product Gallery: Add an new block base code * Product Gallery: Add experimental flag * Product Gallery: Add Large Image block code * Product Gallery Large Image: Remove unsed types * Product Gallery: Move the block from registerBlockType to registerBlockSingleProductTemplate * Product Gallery: Update icon * Product Gallery: Add missing icon import * Product Gallery Large Image: Add experimental mode check * Product Gallery Large Image: Deregister unnecessary block settings * Product Gallery Large Image: Add experimental flag to the Product Gallery Large Image and remove the icon override * Product Gallery Large Image: Add zoom and correct styling * Product Gallery Large Image: Remove commented out unnecessary code * Product Gallery Large Image: Re-add the removed action after capturing the large image html * Product Gallery Large Image: Update Large Image icon and description. Move metadata to the block.json file. --- assets/js/blocks/product-gallery/index.tsx | 4 +- .../product-gallery-large-image/block.json | 13 +++ .../product-gallery-large-image/edit.tsx | 34 ++++++++ .../product-gallery-large-image/icon.tsx | 18 +++++ .../product-gallery-large-image/index.tsx | 22 +++++ .../product-gallery-large-image/style.scss | 23 ++++++ bin/webpack-entries.js | 4 + src/BlockTypes/ProductGalleryLargeImage.php | 80 +++++++++++++++++++ src/BlockTypesController.php | 1 + 9 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json create mode 100644 assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx create mode 100644 assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx create mode 100644 assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx create mode 100644 assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss create mode 100644 src/BlockTypes/ProductGalleryLargeImage.php diff --git a/assets/js/blocks/product-gallery/index.tsx b/assets/js/blocks/product-gallery/index.tsx index 0ba762283ff..a7663318698 100644 --- a/assets/js/blocks/product-gallery/index.tsx +++ b/assets/js/blocks/product-gallery/index.tsx @@ -10,18 +10,18 @@ import { isExperimentalBuild } from '@woocommerce/block-settings'; import { Edit, Save } from './edit'; import metadata from './block.json'; import icon from './icon'; +import './inner-blocks/product-gallery-large-image'; if ( isExperimentalBuild() ) { registerBlockSingleProductTemplate( { blockName: metadata.name, - // @ts-expect-error: `metadata` currently does not have a type definition in WordPress core blockMetadata: metadata, blockSettings: { icon, - // @ts-expect-error `edit` can be extended to include other attributes edit: Edit, save: Save, ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: true, } ); } diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json new file mode 100644 index 00000000000..35552107136 --- /dev/null +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "woocommerce/product-gallery-large-image", + "version": "1.0.0", + "title": "Large Image", + "description": "Display the Large Image of a product.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "usesContext": [ "postId" ], + "textdomain": "woo-gutenberg-products-block", + "ancestor": [ "woocommerce/product-gallery" ] +} diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx new file mode 100644 index 00000000000..ca6e2a2b5cb --- /dev/null +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings'; +import { useBlockProps } from '@wordpress/block-editor'; +import { Disabled } from '@wordpress/components'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps( { + className: 'wc-block-editor-product-gallery_large-image', + } ); + const Placeholder = () => { + return ( +
+ Placeholder +
+ ); + }; + + return ( +
+ + + +
+ ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx new file mode 100644 index 00000000000..3cc6ac1133e --- /dev/null +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx @@ -0,0 +1,18 @@ +const Icon = () => ( + + + +); + +export default Icon; diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx new file mode 100644 index 00000000000..46f7c25bf95 --- /dev/null +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { isExperimentalBuild } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import icon from './icon'; +import { Edit, Save } from './edit'; +import metadata from './block.json'; +import './style.scss'; + +if ( isExperimentalBuild() ) { + // @ts-expect-error: `metadata` currently does not have a type definition in WordPress core + registerBlockType( metadata, { + icon, + edit: Edit, + save: Save, + } ); +} diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss new file mode 100644 index 00000000000..1f82c1b43fd --- /dev/null +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss @@ -0,0 +1,23 @@ +.woocommerce .wp-block-woocommerce-product-gallery-large-image { + position: relative; + // This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container + clear: both; + + span.onsale { + right: unset; + z-index: 1; + left: -1rem; + } +} + +// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container +.woocommerce .wp-block-woocommerce-product-gallery-large-image::after { + clear: both; + content: ""; + display: table; +} + + +.woocommerce .wp-block-woocommerce-product-gallery-large-image .woocommerce-product-gallery.images { + width: auto; +} diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 7e9ae06710a..be584009914 100644 --- a/bin/webpack-entries.js +++ b/bin/webpack-entries.js @@ -50,6 +50,10 @@ const blocks = { 'product-gallery': { isExperimental: true, }, + 'product-gallery-large-image': { + customDir: 'product-gallery/inner-blocks/product-gallery-large-image', + isExperimental: true, + }, 'product-new': {}, 'product-on-sale': {}, 'product-query': { diff --git a/src/BlockTypes/ProductGalleryLargeImage.php b/src/BlockTypes/ProductGalleryLargeImage.php new file mode 100644 index 00000000000..ae7de3e0d0c --- /dev/null +++ b/src/BlockTypes/ProductGalleryLargeImage.php @@ -0,0 +1,80 @@ +context['postId']; + + if ( ! isset( $post_id ) ) { + return ''; + } + + global $product; + + $previous_product = $product; + $product = wc_get_product( $post_id ); + if ( ! $product instanceof \WC_Product ) { + $product = $previous_product; + + return ''; + } + + if ( class_exists( 'WC_Frontend_Scripts' ) ) { + $frontend_scripts = new \WC_Frontend_Scripts(); + $frontend_scripts::load_scripts(); + } + + ob_start(); + woocommerce_show_product_sale_flash(); + $sale_badge_html = ob_get_clean(); + + ob_start(); + remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 ); + woocommerce_show_product_images(); + $product_image_gallery_html = ob_get_clean(); + add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 ); + + $product = $previous_product; + $classname = $attributes['className'] ?? ''; + return sprintf( + '
%2$s %3$s
', + esc_attr( $classname ), + $sale_badge_html, + $product_image_gallery_html + ); + } +} diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php index 1695cea0d22..5a62e04fb52 100644 --- a/src/BlockTypesController.php +++ b/src/BlockTypesController.php @@ -191,6 +191,7 @@ protected function get_block_types() { 'ProductCategories', 'ProductCategory', 'ProductGallery', + 'ProductGalleryLargeImage', 'ProductImage', 'ProductImageGallery', 'ProductNew',