3ecd34e01a
* Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs |
||
|---|---|---|
| .. | ||
| README.md | ||
| block-assets.md | ||
| coding-guidelines.md | ||
| components.md | ||
| css-build-system.md | ||
| documentation-guidelines.md | ||
| e2e-guidelines.md | ||
| folder-structure.md | ||
| getting-started.md | ||
| javascript-build-system.md | ||
| javascript-testing.md | ||
| storybook-and-components.md | ||
README.md
Contributing
If you're a developer or contributor eager to get started with WooCommerce Block Development, this documentation folder is your perfect starting point.
Navigating this section
Getting Started
The Getting Started guide is your first step in this journey. This document provides comprehensive information about the tooling you'll need and the process of creating builds during the development phase.
Coding Guidelines
A set of guidelines exist to ensure development consistency and quality. The Coding Guidelines doc is your resource for understanding these best practices.
JavaScript Testing
Testing plays a crucial role in development. Our JavaScript Testing guide will walk you through the process of running automated JavaScript tests, providing a robust framework to ensure your code meets the requisite standards.
E2E Testing Guidelines
The E2E Testing Guidelines document offers a detailed understanding of the best practices related to End-to-End tests. E2E testing is a critical aspect of ensuring overall system integrity and functionality.
Developing Components (& Storybook)
For insight into our reusable components, their usage, and how to test them in Storybook, refer to the Developing Components (& Storybook) guide.
Block Script Assets
The Block Script Assets document elucidates how Block Script Assets are loaded and used in the development process. This guide is vital to understanding the role of script assets in block development.
JavaScript Build System
Our JavaScript Build System guide offers a detailed explanation of how JavaScript files are built. This is a crucial read for understanding the behind-the-scenes operations of your code.
CSS Build System
Last but not least, to get an insight into how CSS is built, refer to the CSS Build System guide. A firm grasp of this will ensure your CSS files meet the standards and quality expected.
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.