跳到主要内容

CSS 样式设置用于主题

块和组件的类名​

[!IMPORTANT] 我们强烈建议不要基于现有的块类名编写 CSS 代码，并且尽可能使用全局样式。 我们特别不建议编写依赖于某个块是另一个块的子元素的 CSS 选择器，因为用户可以自由地移动块，这很容易导致代码中断。 类似于 WordPress 本身，我们认为组件、块和块模板中的 HTML 结构是“私有”的，并且可能会在未来进一步更改，因此使用 CSS 针对块或块模板的内部结构_不建议也不支持_。

WooCommerce Blocks 遵循 BEM 的类名规范，如 我们的编码指南 中所述。 所有类名都以以下两个前缀之一开头：

  • .wc-block-: 特定于单个块的类名。
  • .wc-block-components-: 特定于组件的类名。 该组件可能被不同的块重复使用。

块类名和组件类名的组合允许主题全局或仅在特定块中对每个组件进行样式设置。 例如，您可以将所有价格设置为斜体：

/* 这将应用于所有块中的价格 */
.wc-block-components-formatted-money-amount {
	font-style: italic;
}

但是，如果您只想在结账块中将其设置为斜体，则可以添加块选择器：

/* 这将应用于结账块中的价格 */
.wc-block-checkout .wc-block-components-formatted-money-amount {
	font-style: italic;
}

注意： 为了向后兼容，某些组件可能具有同时具有两个前缀的类名（例如：wc-block-sort-select 和 wc-block-components-sort-select）。 在这些情况下，以 .wc-block- 开头的类名已过时，不应在新代码中使用。 它将在未来的版本中被移除。 如果一个元素具有两个类，请始终使用以 .wc-block-components- 开头的类。

容器查询类名​

某些组件具有根据容器宽度而变化的响应式类。 使用这些类而不是 CSS 媒体查询的原因是为了适应添加块的容器（CSS 媒体查询仅允许响应视口大小）。

这些类是：

容器宽度类名
>700pxis-large
521px-700pxis-medium
401px-520pxis-small
<=400pxis-mobile

例如，如果我们要使结账字号在容器宽度为 521px 或更大的情况下增加 10%，可以使用以下代码：

.wc-block-checkout.is-medium,
.wc-block-checkout.is-large {
	font-size: 1.1em;
}

CSS 容器查询在购物车和结账模块中的应用​

WooCommerce 将购物车和结账模块的顶层包装器定义为 CSS 容器。这些容器使用 container-type: inline-size：

.wp-block-woocommerce-checkout {
	container-type: inline-size;
}

开发者可以使用 CSS 容器查询 (@container) 来根据父容器的宽度来设置子 组件 的样式，从而避免使用像 .is-large 这样的通过 JavaScript 添加的类，这些类被认为是过时的。虽然为了向后 兼容性，旧的类仍然存在，但我们建议使用容器方法来实现更简洁的样式和更少的布局变化。

注意： 只要在结账模块的包装器和要设置样式的 元素 之间没有其他容器，容器查询就能正常工作。如果在您的 主题 或插件中定义了额外的 CSS 容器，它们可能会干扰容器查询的行为。

提供了 SCSS 混合宏，作为方便的辅助工具，用于针对之前由类如 .is-large、.is-medium、.is-small 和 .is-mobile 定义的相同宽度 断点。这些混合宏可以更轻松地根据容器宽度来设置购物车和结账模块内部内容的样式。

// 之前，使用 JavaScript 生成的 CSS 类
.is-large {
	.your-class {
		padding: 2rem;
	}
}

// 之后，使用容器混合宏
@include cart-checkout-large-container {
	.your-class {
		padding: 2rem;
	}
}

// 之后，使用纯 CSS
@container (min-width: 700px) {
	.your-class {
		padding: 2rem;
	}
}

WC Blocks 与主题样式冲突在语义元素中的问题​

WooCommerce Blocks 使用 HTML 元素，其依据是它们的语义含义，而不是它们的默认布局。这意味着，有时块可能会使用锚链接 (<a>)，但将其显示为按钮。或者反过来，<button> 可能会显示为文本链接。类似地，标题可能会显示为普通文本。

在这种情况下，Blocks 包含一些 CSS 重置，以撤销 主题 引入的大部分默认样式。如果一个 <button> 显示为文本链接，它很可能具有背景、边框等的重置。这通常可以解决大部分问题，但在某些情况下，如果 主题 具有具有更高特异性的特定 CSS 选择器，这些 CSS 重置可能无法生效。在这种情况下，我们强烈建议 主题 开发者降低其选择器的特异性，以便 Blocks 的样式具有更高的优先级。如果无法做到这一点，主题 可以在其之上编写 CSS 重置。

隐藏的元素​

WC Blocks 使用 hidden HTML 属性 来隐藏一些 元素，使其在用户界面中不显示，并且不被辅助技术读取。如果您的 主题 具有一些通用的样式，这些样式会修改块 元素 的 CSS display 属性（例如：div { display: block; }），请确保正确处理 hidden 属性：div[hidden] { display: none; }。

WooCommerce 的旧类（.price, .star-rating, .button...）​

WooCommerce 区块在很大程度上避免使用没有前缀的旧类。 但是，您可能会发现一些为了向后兼容而添加的旧类。 我们仍然建议主题尽可能使用带有前缀的类，这可以避免与其他插件、编辑器等的冲突。

Customizing the WooCommerce Blocks theme​

You can customize the WooCommerce Blocks theme by adding custom CSS. You can also use the wc_enqueue_scripts action to add custom JavaScript.

Here are some examples:

  • To change the color of the "Add to cart" button, you can use the following CSS:
.wc-block-button {
  background-color: %s;
}
  • To add a custom JavaScript file, you can use the following code:
wp.customize.control(
  'wc_blocks_custom_js',
  {
    type: 'file',
    label: 'Select JavaScript file',
    priority: 10,
    attribute: 'src',
    value: '',
  }
)

Compatibility​

WooCommerce Blocks is compatible with all major browsers and versions of WooCommerce. However, some features may not be available in all browsers.

For more information on compatibility, please see the WooCommerce Blocks documentation.

Other plugins​

WooCommerce Blocks is compatible with most other plugins. However, some plugins may not be compatible with WooCommerce Blocks.

If you are having trouble with a plugin, please contact the plugin developer for support.

Troubleshooting​

If you are having trouble with WooCommerce Blocks, please see the WooCommerce Blocks troubleshooting guide.

Support​

If you have any questions or need help with WooCommerce Blocks, please contact us at support@woocommerce.com.

Contributing​

We welcome contributions from the community. If you would like to contribute to WooCommerce Blocks, please see the WooCommerce Blocks contribution guidelines.

License​

WooCommerce Blocks is licensed under the GPL-2.0+ license.

Table of Contents​

WooCommerce Blocks​

WooCommerce Blocks is a collection of blocks for the Gutenberg editor. These blocks allow you to easily add WooCommerce functionality to your website.

The WooCommerce Blocks are designed to be easy to use and customize. You can use them to create a variety of different types of pages, including product pages, category pages, and cart pages.

The WooCommerce Blocks are also designed to be compatible with a wide range of themes and plugins.

Adding a WooCommerce Blocks theme​

To add a WooCommerce Blocks theme, you will need to install the WooCommerce plugin and the WooCommerce Blocks plugin.

Once you have installed the plugins, you can activate the WooCommerce Blocks theme by going to the "Appearance" > "Themes" page in the WordPress admin panel.

Using the WooCommerce Blocks editor​

The WooCommerce Blocks editor is a powerful tool for creating WooCommerce pages. It allows you to easily add and edit WooCommerce content.

The WooCommerce Blocks editor is also designed to be compatible with a wide range of themes and plugins.

Editing a WooCommerce Blocks page​

To edit a WooCommerce Blocks page, you will need to open the page in the WordPress editor.

Once you have opened the page, you can click on the "Edit" button to open the WooCommerce Blocks editor.

Finding a WooCommerce Blocks page​

To find a WooCommerce Blocks page, you can use the search function in the WordPress admin panel.

You can also use the "Pages" > "All Pages" page to view a list of all of your pages.

Locking a WooCommerce Blocks page​

You can lock a WooCommerce Blocks page to prevent it from being edited.

To lock a page, you will need to open the page in the WordPress editor and click on the "Lock" button.

Using the WooCommerce Blocks API​

The WooCommerce Blocks API allows you to programmatically access and modify WooCommerce content.

You can use the API to create new WooCommerce pages, edit existing pages, and retrieve data from WooCommerce.

For more information​

For more information on WooCommerce Blocks, please see the WooCommerce Blocks documentation.

Rating​

Please rate this document.

Back​

返回

From​

从

In​

在

Use​

使用