create block theme folder (#50638)
* create block theme folder * add changelog * update titles
This commit is contained in:
piinthecloud
GitHub
parent
905fe2246f
commit
5098bb1169
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
category_title: Block Theme Development
|
||||
category_slug: block-theme-development
|
||||
post_title: Block theme development
|
||||
---
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
# Cart and Checkout Blocks Theming <!-- omit in toc -->
|
||||
---
|
||||
post_title: Cart and checkout blocks theming
|
||||
menu_title: Cart and Checkout Blocks Theming
|
||||
tags: reference
|
||||
---
|
||||
|
||||
> [!IMPORTANT]
|
||||
> We strongly discourage writing CSS code based on existing block class names and prioritize using global styles when possible. We especially discourage writing CSS selectors that rely on a specific block being a descendant of another one, as users can move blocks around freely, so they are prone to breaking. Similar to WordPress itself, we consider the HTML structure within components, blocks, and block templates to be “private”, and subject to further change in the future, so using CSS to target the internals of a block or a block template is _not recommended or supported_.
|
||||
> We strongly discourage writing CSS code based on existing block class names and prioritize using global styles when possible. We especially discourage writing CSS selectors that rely on a specific block being a descendant of another one, as users can move blocks around freely, so they are prone to breaking. Similar to WordPress itself, we consider the HTML structure within components, blocks, and block templates to be "private", and subject to further change in the future, so using CSS to target the internals of a block or a block template is _not recommended or supported_.
|
||||
|
||||
## Table of Contents <!-- omit in toc -->
|
||||
|
||||
- [Buttons](#buttons)
|
||||
- [Mobile submit container](#mobile-submit-container)
|
||||
- [Item quantity badge](#item-quantity-badge)
|
||||
|
||||
## Buttons
|
||||
|
||||
|
|
@ -81,13 +80,5 @@ By default, it uses a combination of black and white borders and shadows so it h
|
|||
|
||||
|
||||
|
||||
<!-- FEEDBACK -->
|
||||
|
||||
---
|
||||
|
||||
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
|
||||
|
||||
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/designers/theming/cart-and-checkout.md)
|
||||
|
||||
<!-- /FEEDBACK -->
|
||||
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
# CSS Styling
|
||||
---
|
||||
post_title: CSS styling for themes
|
||||
menu_title: CSS Styling for Themes
|
||||
tags: reference
|
||||
---
|
||||
|
||||
## Block and component class names
|
||||
|
||||
> [!IMPORTANT]
|
||||
> We strongly discourage writing CSS code based on existing block class names and prioritize using global styles when possible. We especially discourage writing CSS selectors that rely on a specific block being a descendant of another one, as users can move blocks around freely, so they are prone to breaking. Similar to WordPress itself, we consider the HTML structure within components, blocks, and block templates to be “private”, and subject to further change in the future, so using CSS to target the internals of a block or a block template is _not recommended or supported_.
|
||||
> We strongly discourage writing CSS code based on existing block class names and prioritize using global styles when possible. We especially discourage writing CSS selectors that rely on a specific block being a descendant of another one, as users can move blocks around freely, so they are prone to breaking. Similar to WordPress itself, we consider the HTML structure within components, blocks, and block templates to be "private", and subject to further change in the future, so using CSS to target the internals of a block or a block template is _not recommended or supported_.
|
||||
|
||||
WooCommerce Blocks follows BEM for class names, as [stated in our coding guidelines](../../contributors/coding-guidelines.md). All classes start with one of these two prefixes:
|
||||
WooCommerce Blocks follows BEM for class names, as [stated in our coding guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md). All classes start with one of these two prefixes:
|
||||
|
||||
* `.wc-block-`: class names specific to a single block.
|
||||
* `.wc-block-components-`: class names specific to a component. The component might be reused by different blocks.
|
||||
|
|
@ -38,10 +42,10 @@ Those classes are:
|
|||
|
||||
Container width | Class name
|
||||
----------------|------------
|
||||
\>700px | `is-large`
|
||||
\>700px | `is-large`
|
||||
521px-700px | `is-medium`
|
||||
401px-520px | `is-small`
|
||||
<=400px | `is-mobile`
|
||||
<=400px | `is-mobile`
|
||||
|
||||
As an example, if we wanted to do the Checkout font size 10% larger when the container has a width of 521px or wider, we could do so with this code:
|
||||
|
||||
|
|
@ -54,9 +58,9 @@ As an example, if we wanted to do the Checkout font size 10% larger when the con
|
|||
|
||||
## WC Blocks _vs._ theme style conflicts for semantic elements
|
||||
|
||||
WooCommerce Blocks uses HTML elements according to their semantic meaning, not their default layout. That means that some times blocks might use an anchor link (`<a>`) but display it as a button. Or the other way around, a `<button>` might be displayed as a text link. Similarly, headings might be displayed as regular text.
|
||||
WooCommerce Blocks uses HTML elements according to their semantic meaning, not their default layout. That means that some times blocks might use an anchor link (`<a>`) but display it as a button. Or the other way around, a `<button>` might be displayed as a text link. Similarly, headings might be displayed as regular text.
|
||||
|
||||
In these cases, Blocks include some CSS resets to undo most default styles introduced by themes. A `<button>` that is displayed as a text link will probably have resets for the background, border, etc. That will solve most conflicts out-of-the-box but in some occasions those CSS resets might not have effect if the theme has a specific CSS selector with higher specificity. When that happens, we really encourage theme developers to decrease their selectors specificity so Blocks styles have preference, if that's not possible, themes can write CSS resets on top.
|
||||
In these cases, Blocks include some CSS resets to undo most default styles introduced by themes. A `<button>` that is displayed as a text link will probably have resets for the background, border, etc. That will solve most conflicts out-of-the-box but in some occasions those CSS resets might not have effect if the theme has a specific CSS selector with higher specificity. When that happens, we really encourage theme developers to decrease their selectors specificity so Blocks styles have preference, if that's not possible, themes can write CSS resets on top.
|
||||
|
||||
## Hidden elements
|
||||
|
||||
|
|
@ -66,15 +70,3 @@ WC Blocks use the [`hidden` HTML attribute](https://developer.mozilla.org/en-US/
|
|||
|
||||
WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. However, you might find some of them that have been added for backwards compatibility. We still encourage themes to use the prefixed classes when possible, this avoids conflicts with other plugins, the editor, etc.
|
||||
|
||||
## Blocks
|
||||
|
||||
* [Filter blocks](filter-blocks.md)
|
||||
* [Cart and Checkout](cart-and-checkout.md)
|
||||
|
||||
## Other docs
|
||||
|
||||
* [Product grid blocks style update in 2.7.0](product-grid-270.md)
|
||||
* [Class names update in 2.8.0](class-names-update-280.md)
|
||||
* [Class names update in 3.3.0](class-names-update-330.md)
|
||||
* [Class names update in 3.4.0](class-names-update-340.md)
|
||||
* [Class names update in 4.6.0](class-names-update-460.md)
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
# Theming
|
||||
---
|
||||
post_title: Theming for Woo blocks
|
||||
menu_title: Theming for Woo Blocks
|
||||
tags: reference
|
||||
---
|
||||
|
||||
This page includes documentation about theming WooCommerce blocks and block themes.
|
||||
|
||||
---
|
||||
|
||||
**Note:** this document assumes some previous knowledge about block theme development and some WordPress concepts. If you are completely new to block theme development, please check [Develop Your First Low-Code Block Theme](https://learn.wordpress.org/course/develop-your-first-low-code-block-theme/)
|
||||
to learn about block theme development, and explore
|
||||
the [Create Block Theme plugin](https://wordpress.org/plugins/create-block-theme/) tool when you're ready to create a
|
||||
new theme.
|
||||
|
||||
---
|
||||
|
||||
## General concepts
|
||||
|
||||
### Block templates
|
||||
|
|
@ -81,19 +82,4 @@ Before
|
|||
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
||||
<img src="https://github.com/woocommerce/woocommerce/assets/3616980/fbc11b83-f47b-4b25-bdeb-df798b251cce" width="210" alt="Product Collection block showing the Product Price block with default styles" /> | <img src="https://github.com/woocommerce/woocommerce/assets/3616980/c9730445-b9df-4e96-8204-a10896ac2c5a" width="210" alt="Product Collection block showing the Product Price styled with background and text colors and italic and bold typography" /> <!-- markdownlint-disable-line no-inline-html -->
|
||||
|
||||
You can find more [documentation on global styles](https://developer.wordpress.org/themes/global-settings-and-styles/styles/) in developer.wordpress.org. You can also find the [list of WooCommerce blocks and their names in the docs](../../block-references/block-references.md).
|
||||
|
||||
## Other docs
|
||||
|
||||
- [CSS styling](css-styling.md)
|
||||
|
||||
<!-- FEEDBACK -->
|
||||
|
||||
---
|
||||
|
||||
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
|
||||
|
||||
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/designers/theming/README.md)
|
||||
|
||||
<!-- /FEEDBACK -->
|
||||
|
||||
You can find more [documentation on global styles](https://developer.wordpress.org/themes/global-settings-and-styles/styles/) in developer.wordpress.org. You can also find the [list of WooCommerce blocks and their names in the docs](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-blocks/docs/block-references/block-references.md).
|
||||
|
|
@ -13,6 +13,41 @@
|
|||
}
|
||||
],
|
||||
"categories": [
|
||||
{
|
||||
"content": "",
|
||||
"category_slug": "block-theme-development",
|
||||
"category_title": "Block Theme Development",
|
||||
"posts": [
|
||||
{
|
||||
"post_title": "Theming for Woo blocks",
|
||||
"menu_title": "Theming for Woo Blocks",
|
||||
"tags": "reference",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/block-theme-development/theming-woo-blocks.md",
|
||||
"hash": "4e0614ad8cb28735cfc8a3e3331c28386d1ceeadb1d1ce8fe529f2846e06b631",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/block-theme-development/theming-woo-blocks.md",
|
||||
"id": "90b16f4143d6db728d5ed6dce2ee2c60bdcfdbf6"
|
||||
},
|
||||
{
|
||||
"post_title": "CSS styling for themes",
|
||||
"menu_title": "CSS Styling for Themes",
|
||||
"tags": "reference",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/block-theme-development/css-styling.md",
|
||||
"hash": "422b2e0008ad1809a50c61851abe5c43c6f6743f216bcd9ba7dc5251f65e749d",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/block-theme-development/css-styling.md",
|
||||
"id": "55b3452119141753ee1eaeee5f8d471ab362945b"
|
||||
},
|
||||
{
|
||||
"post_title": "Cart and checkout blocks theming",
|
||||
"menu_title": "Cart and Checkout Blocks Theming",
|
||||
"tags": "reference",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/block-theme-development/cart-and-checkout.md",
|
||||
"hash": "bb65130caa017d16d84226d0383d5441113ebb1c4a7e5f05c52a6ebf56514aa3",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/block-theme-development/cart-and-checkout.md",
|
||||
"id": "8ff3a904e51ef1a07a0a6b0c77b0134a2cb0a8e5"
|
||||
}
|
||||
],
|
||||
"categories": []
|
||||
},
|
||||
{
|
||||
"content": "\nDiscover tutorials and guides for creating custom WooCommerce stores. This section is your toolkit for building advanced, modern online shops that meet the needs of merchants and customers alike.\n",
|
||||
"category_slug": "building-a-woo-store",
|
||||
|
|
@ -1016,7 +1051,7 @@
|
|||
"menu_title": "DOM Events",
|
||||
"tags": "how-to",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/product-collection-block/dom-events.md",
|
||||
"hash": "78bce4ab5b5e902232b5ff73fd7a7c197e4f4417a490ccb45c9a27400d003787",
|
||||
"hash": "fbad20bc55cc569161e80478c0789db3c34cf35513e669554af36db1de967a26",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/product-collection-block/dom-events.md",
|
||||
"id": "c8d247b91472740075871e6b57a9583d893ac650"
|
||||
}
|
||||
|
|
@ -1319,9 +1354,9 @@
|
|||
"categories": []
|
||||
},
|
||||
{
|
||||
"content": "\nLearn to design and integrate custom themes in WooCommerce, focusing on responsive design and ecommerce optimization.\n\nThis document was created for use when developing classic themes. Check this other document for [block theme development](../../plugins/woocommerce-blocks/docs/designers/theming/README.md).\n",
|
||||
"content": "\nLearn to design and integrate custom themes in WooCommerce, focusing on responsive design and ecommerce optimization.\n\nFor blocks themes, see our [block theme documentation](/docs/category/block-theme-development).\n",
|
||||
"category_slug": "theme-development",
|
||||
"category_title": "Theme Development",
|
||||
"category_title": "Classic Theme Development",
|
||||
"posts": [
|
||||
{
|
||||
"post_title": "Thumbnail image regeneration",
|
||||
|
|
@ -1345,10 +1380,7 @@
|
|||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/template-structure.md",
|
||||
"hash": "6099b3a45f91390d9dd239f496eaf531be2b638c666858d6a066051ce915176a",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/template-structure.md",
|
||||
"id": "34bfebec9fc45e680976814928a7b8a1778af14e",
|
||||
"links": {
|
||||
"../../plugins/woocommerce-blocks/docs/designers/theming/README.md": "64ff2179eb307d2bcd8d9736b3249ca56b77ba0c"
|
||||
}
|
||||
"id": "34bfebec9fc45e680976814928a7b8a1778af14e"
|
||||
},
|
||||
{
|
||||
"post_title": "How to set up and use a child theme",
|
||||
|
|
@ -1357,10 +1389,7 @@
|
|||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/set-up-a-child-theme.md",
|
||||
"hash": "b362d5ddd34d8b81f6a2ee2369dd2cd68e51700836a85f96d629e87d564b0844",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/set-up-a-child-theme.md",
|
||||
"id": "00b6916595cbde7766f080260a9ea26f53f3271c",
|
||||
"links": {
|
||||
"../../plugins/woocommerce-blocks/docs/designers/theming/README.md": "64ff2179eb307d2bcd8d9736b3249ca56b77ba0c"
|
||||
}
|
||||
"id": "00b6916595cbde7766f080260a9ea26f53f3271c"
|
||||
},
|
||||
{
|
||||
"post_title": "Image sizing for theme developers",
|
||||
|
|
@ -1371,7 +1400,6 @@
|
|||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/image-sizes.md",
|
||||
"id": "3f5301ac3040d38bc449b440733da6a466209df3",
|
||||
"links": {
|
||||
"../../plugins/woocommerce-blocks/docs/designers/theming/README.md": "64ff2179eb307d2bcd8d9736b3249ca56b77ba0c",
|
||||
"./thumbnail-image-regeneration.md": "733e1b16276d64f128ba0e337ca68ec3de0bf68f"
|
||||
}
|
||||
},
|
||||
|
|
@ -1399,10 +1427,7 @@
|
|||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/classic-theme-developer-handbook.md",
|
||||
"hash": "1194437fbc2ec82d60c8b73a9742ec650bd90fe734758c3a2b27ed852d4d14f7",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/classic-theme-developer-handbook.md",
|
||||
"id": "c2fde53e1dc3efbded3cfe1fb4df27136a3799a4",
|
||||
"links": {
|
||||
"../../plugins/woocommerce-blocks/docs/designers/theming/README.md": "64ff2179eb307d2bcd8d9736b3249ca56b77ba0c"
|
||||
}
|
||||
"id": "c2fde53e1dc3efbded3cfe1fb4df27136a3799a4"
|
||||
}
|
||||
],
|
||||
"categories": []
|
||||
|
|
@ -1706,5 +1731,5 @@
|
|||
"categories": []
|
||||
}
|
||||
],
|
||||
"hash": "402a928bfa0399c09151423796f98caeb8f99a70f8a4cf009db6703ec7949468"
|
||||
"hash": "f9d109f3f4a559fd581e0352724943500327c36c821086f3be280e73a6e33fb7"
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
category_title: Theme Development
|
||||
category_title: Classic Theme Development
|
||||
category_slug: theme-development
|
||||
post_title: Theme Development
|
||||
post_title: Classic theme development
|
||||
---
|
||||
|
||||
Learn to design and integrate custom themes in WooCommerce, focusing on responsive design and ecommerce optimization.
|
||||
|
||||
This document was created for use when developing classic themes. Check this other document for [block theme development](../../plugins/woocommerce-blocks/docs/designers/theming/README.md).
|
||||
For blocks themes, see our [block theme documentation](/docs/category/block-theme-development).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
move block theme docs to docs site folder
|
||||
Loading…
Reference in New Issue