5036c69638
* Add clear and fill input test util * Add tests for Filter Products by Price * Add class name to filter products by price block in editor * Update wp-env * Fix formatting * Update lock * Revert "Update lock" This reverts commit f4e809e000430eea3972c94fd2aea0a19ba6961b. * Create product attributes during setup * Remove product attributes during teardown * Add attributes in fixture-data * Add two new products, for attribute testing * Load attributes into store and apply them to products * Add class to Filter by Attribute when editing This is so it can be targeted in E2E tests more easily. * Add tests for Filter Product by Attribute * Fix formatting in attribute-filter.test.js * Add tests for active filters block * Add doc block for ensuteCleanAttributes * Update wording of title test in all filter block E2E * Update test wording to read better * Update snapshots * Use pptr-testing-library selectors to click elements This makes the tests easier to reason with, and lets us take a step back from the implementation details (classnames etc.) * Add saveOrPublish test util * Use pptr-testing-library selectors to click elements in attribute filter * Use pptr-testing-library selectors to click elements in price filter * Add `puppeteer-testing-library` * Use puppeteer-testing-library API to look for H6 button * Use correct argument in jest-puppeteer.dev.config * Update package.json & package-lock.json * remove tests for 5.3 * remove snapshots * Remove ensureCleanAttributes * Remove puppeteer-testing-library, install missing expect-puppeteer package and update tests The puppeteer-testing-library, although added by gutenberg is not actively used. I have removed it and realised that the added functionality can be easily replaced by expect-puppeteer. This is a package that we specify in the jest configuration but it was not part of our package.json. The selectors from puppeteer-testing-library have been replaced with .toClick and the utility clearAndFillInput with .toFill The Filter by Attribute block has been skiped until tests are fixed. * Add back setupPageSettings to jest setup * Fix filter by attribute block test * Fix linting error Co-authored-by: Raluca Stan <ralucastn@gmail.com> |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| cart-checkout | ||
| featured-category | ||
| featured-product | ||
| handpicked-products | ||
| legacy-template | ||
| price-filter | ||
| product-best-sellers | ||
| product-categories | ||
| product-category | ||
| product-new | ||
| product-on-sale | ||
| product-search | ||
| product-tag | ||
| product-top-rated | ||
| products | ||
| products-by-attribute | ||
| reviews | ||
| single-product | ||
| stock-filter | ||
| README.md | ||
README.md
Blocks
Our blocks are generally made up of up to 4 files:
|- block.js
|- editor.scss
|- index.js
|- style.scss
The only required file is index.js, this sets up the block using registerBlockType. Each block has edit and save functions.
The scss files are split so that things in style are added to the editor and frontend, while styles in editor are only added to the editor. Most of our blocks should use core components that won't need CSS though.
Editing
A simple edit function can live in index.js, but most blocks are a little more complicated, so the edit function instead returns a Block component, which lives in block.js. By using a component, we can use React lifecycle methods to fetch data or save state.
The Newest Products block is a good example to read over, this is a simple block that fetches the products and renders them using the ProductPreview component.
We include settings in the sidebar, called the Inspector in gutenberg. See an example of this.
Other blocks have the concept of an "edit state", like when you need to pick a product in the Featured Product block, or pick a category in the Products by Category block.