0763655d42
* render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout |
||
|---|---|---|
| .. | ||
| block-title | ||
| error-placeholder | ||
| grid-content-control | ||
| grid-layout-control | ||
| heading-toolbar | ||
| icons | ||
| product-attribute-term-control | ||
| product-category-control | ||
| product-control | ||
| product-orderby-control | ||
| product-preview | ||
| product-tag-control | ||
| products-control | ||
| text-toolbar-button | ||
| toggle-button-control | ||
| utils | ||
| README.md | ||
README.md
Components
These are shared components used by the blocks. If there's a component that is more universally useful, it should go into @woocommerce/components– these components are specific to the Gutenberg context.
The *-control components here are designed to exist in the InspectorControls sidebar, or in a Placeholder component for the "edit state" of a block.
GridContentControl
A combination of toggle controls for content visibility in product grids.
GridLayoutControl
A combination of range controls for product grid layout settings.
ProductOrderbyControl
A pre-configured SelectControl for product orderby settings.
ProductPreview
Display a preview for a given product.
ProductAttributeTermControl
A component using SearchListControl to show product attributes as selectable options. Only allows for selecting attribute terms from one attribute at a time (multiple terms can be selected).
ProductCategoryControl
A component using SearchListControl to show product categories as selectable options. Options are displayed in hierarchy. Can select multiple categories.
ProductControl
A component using SearchListControl to show products as selectable options. Only one product can be selected at a time.
ProductsControl
A component using SearchListControl to show products as selectable options. Multiple products can be selected at once.
Icons
These are a collection of custom icons used by the blocks or components, usually from Material.
Utilities
There are some functions that work across components, these have been extracted into this utilities folder.
Block Title
A block that is responsible for showing the title for some of our blocks.