8c35002247
* Add minimum structure for Single Product Details block * Add Product Image Gallery woocommerce/woocommerce-blocks#8233 Add Product Image Gallery * Add tests for Single Product Details block * Add the initial basis for the Add to Cart button * Trigger the single product add to cart action for each product type. * wip: create block structure and add initial styles * Add block details to the SingleProductDetails.php file * Rename the block from add-to-cart-button to add-to-cart-form * Update to use the cart icon. * Implement the skeleton for the editor preview. * Render tabs title with empty content * Use woocommerce_output_product_data_tabs function to retrieve tabs data * Update styles and add Notice for the display in the Editor. * Update CSS. * Add base tests for the new Add to Cart Form component. * Add Product Image Gallery block * remove support global styles * remove support global styles * Update the button CSS. * Remove customizations for the Single Product Details block * Update styles for the cart form. * update td style. * Update divs and CSS. * Use conventional input instead of the experimental InputControl * address CSS feedback * add support for the custom classname * remove save function * Remove unnecessary console.log from the Edit.tsx file * Remove block classname from block wrapper * Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController * Remove attributes property from the block registration * Remove isExperimental flag for the Single Product Details block * Remove get_classes_and_styles_by_attributes method from SingleProductDetails block * Prevent Single Product Details block from apppearing in Pages or Posts * add second parameter to the subscribe function * Implement the new design and copy provided for the editor. * Make the notice compatible with dark themes. * Some additional CSS tweaks * adjust the padding for the input * wrap the Single Product Template in a div with the product class * Fix PHP Coding Standards warnings * improve logic and increase coverage of unit test * improve logic and increase coverage of unit test * fix test * format HTML * fix edge case * update @types/wordpress__data package * update placeholder, icon and description * update tsconfig * update block name * fix SCSS linter error * address feedback * create SingleProductTemplateCompatibility class * Add Hooks compatibility * remove not used file * remove not used files * Add compatibility layer for the Single Product template * fix check * address feedback * remove unused import * double empty line * remove logic in the constructor * remove hook * generate the docs * add missing hooks * fix docs * address feedback * fix linter * fix import * Disable compatibility layer when the WooCommerce Product Grid Block block and WooCommerce Single Product Block are used (https://github.com/woocommerce/woocommerce-blocks/pull/8538) * disable compatibility layer via hook * update docs * generate the docs * fix version * fix import * fix code after merge --------- Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com> |
||
|---|---|---|
| .. | ||
| contributors | ||
| designers/theming | ||
| examples | ||
| internal-developers | ||
| third-party-developers/extensibility | ||
| README.md | ||
README.md
WooCommerce Blocks Handbook
Table of Contents
The WooCommerce Blocks Handbook provides documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
Contributors
Want to contribute to the WooCommerce Blocks plugin? The following documents offer information that can help you get started.
Internal developers
Are you an internal developer? The following documents offer information about the different blocks, the Block Client APIs, the Store API, the templates and the testing process.
- Blocks
- Block Data
- Block Client APIs
- Data store
- Editor Components
- Icons
- Store API (REST API)
- Storybook
- Templates
- Testing
- Translations
Third-party developers
Are you a third-party developer? The following documents explain how to extend the WooCommerce Blocks plugin with your custom extension.
- Extensibility
- Hooks
- REST API
- Checkout Payment Methods
- Checkout Blocks
Designers
Are you a designer? The following documents explain how to apply design-changes to the WooCommerce Blocks plugin.
Developer Resources
Tools
- @woocommerce/extend-cart-checkout-block This is a template to be used with @wordpress/create-block to create a WooCommerce Blocks extension starting point. It also showcases how to use some extensibility points, e.g. registering an inner block in the Checkout Block, applying filters to certain texts such as the place order button, using Slot/Fill and how to change the behaviour of the Store API.
Articles
The following posts from developer.woocommerce.com provide deeper insights into the WooCommerce Blocks development.
- Store API is now considered stable
- Available Extensibility Interfaces for The Cart and Checkout Blocks
- How The Checkout Block Processes An Order
- New @wordpress/data stores in WooCommerce Blocks
Tutorials
The following tutorials from developer.woocommerce.com help you with extending the WooCommerce Blocks plugin.
- Hiding Shipping and Payment Options in the Cart and Checkout Blocks
- Integrating your Payment Method with Cart and Checkout Blocks
- Exposing Payment Options in the Checkout Block
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.