Per block stylesheets (https://github.com/woocommerce/woocommerce-blocks/pull/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
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
50aee9846b
commit
df3ff6793e
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import type { HTMLAttributes } from 'react';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import type { BlockAttributes } from './types';
|
||||
import './style.scss';
|
||||
|
||||
type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.wc-block-components-product-price {
|
||||
display: block;
|
||||
|
||||
.wc-block-all-products & {
|
||||
margin-bottom: $gap-small;
|
||||
}
|
||||
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
const Rating = ( {
|
||||
className,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import {
|
|||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout-shared';
|
||||
import './style.scss';
|
||||
|
||||
const browseStoreTemplate = SHOP_URL
|
||||
? [
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import { useCartEventsContext } from '@woocommerce/base-context/providers';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { defaultButtonLabel } from './constants';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -44,4 +44,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { totals } from '@woocommerce/icons';
|
|||
*/
|
||||
import metadata from './block.json';
|
||||
import edit from './edit';
|
||||
import './style.scss';
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { defaultPlaceOrderButtonLabel } from './constants';
|
||||
import './style.scss';
|
||||
|
||||
const Block = ( {
|
||||
cartPageId,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
|
|||
*/
|
||||
import metadata from './block.json';
|
||||
import edit from './edit';
|
||||
import './style.scss';
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { totals } from '@woocommerce/icons';
|
|||
*/
|
||||
import metadata from './block.json';
|
||||
import edit from './edit';
|
||||
import './style.scss';
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import type {
|
|||
ListItemsProps,
|
||||
SearchListItemsContainerProps,
|
||||
} from './types';
|
||||
import './style.scss';
|
||||
|
||||
const defaultRenderListItem = ( args: renderItemArgs ): JSX.Element => {
|
||||
return <SearchListItem { ...args } />;
|
||||
|
|
|
|||
|
|
@ -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' ],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
],
|
||||
} ),
|
||||
// Shared blocks code
|
||||
'wc-blocks': './assets/js/index.js',
|
||||
|
||||
'packages-style': glob.sync( './packages/**/*.scss' ),
|
||||
|
||||
'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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -233,17 +233,22 @@ class Api {
|
|||
* @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' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@ final class AssetsController {
|
|||
* 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' ] );
|
||||
|
|
|
|||
|
|
@ -300,11 +300,12 @@ abstract class AbstractBlock {
|
|||
/**
|
||||
* 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 ];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -54,4 +54,12 @@ abstract class AbstractInnerBlock extends AbstractBlock {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -686,4 +686,14 @@ abstract class AbstractProductGrid extends AbstractDynamicBlock {
|
|||
$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' ];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,6 +176,15 @@ class AddToCartForm extends AbstractBlock {
|
|||
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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -25,4 +25,13 @@ class AttributeFilter extends AbstractBlock {
|
|||
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' ] );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,6 +100,15 @@ class Cart extends AbstractBlock {
|
|||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -55,6 +55,15 @@ class Checkout extends AbstractBlock {
|
|||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -390,4 +390,12 @@ class ClassicTemplate extends AbstractDynamicBlock {
|
|||
return $meta_query;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the frontend style handle for this block type.
|
||||
*
|
||||
* @return null
|
||||
*/
|
||||
protected function get_block_type_style() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,15 @@ class MiniCart extends AbstractBlock {
|
|||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -45,6 +45,15 @@ class MiniCartContents extends AbstractBlock {
|
|||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -46,6 +46,15 @@ class ProductCollection extends AbstractBlock {
|
|||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,15 @@ class ProductPrice extends AbstractBlock {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -80,6 +80,15 @@ class ProductRating extends AbstractBlock {
|
|||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the frontend style handle for this block type.
|
||||
*
|
||||
* @return null
|
||||
*/
|
||||
protected function get_block_type_style() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the context.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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' ] );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,15 @@ class RelatedProducts extends AbstractBlock {
|
|||
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 @@ class RelatedProducts extends AbstractBlock {
|
|||
return $content;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Determines whether the block is a related products block.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -33,4 +33,13 @@ class StockFilter extends AbstractBlock {
|
|||
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' ] );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,4 +57,13 @@ class StoreNotices extends AbstractBlock {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,6 @@ if ( woocommerce_blocks_is_development_version() && ( ! defined( 'JETPACK_AUTOLO
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Autoload packages.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue