From 5098bb116908a5cd8ab61780ba50d2259482148b Mon Sep 17 00:00:00 2001 From: piinthecloud Date: Tue, 20 Aug 2024 13:19:47 +0200 Subject: [PATCH] create block theme folder (#50638) * create block theme folder * add changelog * update titles --- docs/block-theme-development/README.md | 5 ++ .../cart-and-checkout.md | 21 ++----- .../block-theme-development}/css-styling.md | 30 ++++------ .../theming-woo-blocks.md | 26 ++------ docs/docs-manifest.json | 59 +++++++++++++------ docs/theme-development/README.md | 6 +- plugins/woocommerce/changelog/move-theme-docs | 4 ++ 7 files changed, 77 insertions(+), 74 deletions(-) create mode 100644 docs/block-theme-development/README.md rename {plugins/woocommerce-blocks/docs/designers/theming => docs/block-theme-development}/cart-and-checkout.md (81%) rename {plugins/woocommerce-blocks/docs/designers/theming => docs/block-theme-development}/css-styling.md (69%) rename plugins/woocommerce-blocks/docs/designers/theming/README.md => docs/block-theme-development/theming-woo-blocks.md (91%) create mode 100644 plugins/woocommerce/changelog/move-theme-docs diff --git a/docs/block-theme-development/README.md b/docs/block-theme-development/README.md new file mode 100644 index 00000000000..7b2564c7433 --- /dev/null +++ b/docs/block-theme-development/README.md @@ -0,0 +1,5 @@ +--- +category_title: Block Theme Development +category_slug: block-theme-development +post_title: Block theme development +--- \ No newline at end of file diff --git a/plugins/woocommerce-blocks/docs/designers/theming/cart-and-checkout.md b/docs/block-theme-development/cart-and-checkout.md similarity index 81% rename from plugins/woocommerce-blocks/docs/designers/theming/cart-and-checkout.md rename to docs/block-theme-development/cart-and-checkout.md index 5af905846d8..f3151f8fa5c 100644 --- a/plugins/woocommerce-blocks/docs/designers/theming/cart-and-checkout.md +++ b/docs/block-theme-development/cart-and-checkout.md @@ -1,13 +1,12 @@ -# Cart and Checkout Blocks Theming +--- +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 - -- [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 ![Order summary screenshot with custom styles for the item quantity badge](https://user-images.githubusercontent.com/3616980/83863109-2e421c80-a723-11ea-9bf7-2033a96cf5b2.png) - ---- - -[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) - - diff --git a/plugins/woocommerce-blocks/docs/designers/theming/css-styling.md b/docs/block-theme-development/css-styling.md similarity index 69% rename from plugins/woocommerce-blocks/docs/designers/theming/css-styling.md rename to docs/block-theme-development/css-styling.md index 978dfb7444d..2470d621ae0 100644 --- a/plugins/woocommerce-blocks/docs/designers/theming/css-styling.md +++ b/docs/block-theme-development/css-styling.md @@ -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 (``) but display it as a button. Or the other way around, a `