d6e4dd5eb3
* WIP Product Gallery: Add the Thumbnails block * Product Gallery Thumbnails: Add block settings * Add template for the Product Gallery block * Add template for the Product Gallery block. Add the rest of the files. * Product Gallery Thumbnails: Add context settings sharing between the Product Gallery and Thumbnails block. * Product Gallery Thumbnails: Add UI functionality and frontend functionality. Add settings for the Thumbnails in both places - Product Gallery and the Thumbnails block. * Product Gallery Thumbnails: Move the static template ouside of the component * Make sure the context is set before accesing the array values * Product Gallery Thumbnails: Move the setGroupAttributes() function outside of the component * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Update the Features Flags and Experimental Interfaces doc * Product Gallery Thumbnails: Fix TS error * Product Gallery Thumbnails: Remove unused stylesheet * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Remove unused context and fix the thumbnails bottom position styling on the frontend. * Product Gallery Thumbnails: Allow the user to move the horizontal thumbnails above the large image and don't overwrite that automatically * Product Gallery Thumbnails: Add code comments and remove the incorrect conditional check when moving thumbnails up and down * Product Gallery Thumbnails: Fix the eslint dependency error * Product Gallery Thumbnails: Refactor Product Gallery edit code and move the logic to a utils file * Product Gallery Thumbnails: Update the utils file * Product Gallery Thumbnails: Update the utils file. Fix comment indentation * Product Gallery Thumbnails: Fix undefined variable html when only 1 product image is set * Product Gallery: Rename clientId to productGalleryClientId * Product Gallery Thumbnails: Combine the useEffect code having the same dependencies * Product Gallery Thumbnails: Combine all useEffect code together * Product Gallery Thumbnails: Add a ThumbnailsPosition enum * Product Gallery Thumbnails: Update the thumbnailsPosition to an enum * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Fix TS errors * Product Gallery Thumbnails: Add missing dependency * Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails position bug when initially adding the Product Gallery block * Product Gallery: Add crop, zoom and full-screen settings * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Replace ts-ignore with ts-expect-error * Product Gallery Thumbnails: Revert back to ts-ignore * Revert "Product Gallery: Add crop, zoom and full-screen settings" This reverts commit 840654197619e2611029b81990493387ae0b543d. |
||
|---|---|---|
| .. | ||
| library | ||
| stories | ||
| README.md | ||
| index.js | ||
README.md
Icons
Table of contents
WooCommerce Blocks Icons Library.
Usage
Note we use the Icon component from @wordpress/icons. We use some SVG icons from @woocommerce/icons for WC Blocks specific icons, but we also use existing icons from @wordpress/icons.
import { woo } from '@woocommerce/icons';
import { Icon, postComments } from '@wordpress/icons';
<Icon icon={ woo } /> // icon from '@woocommerce/icons'
<Icon icon={ postComments } /> // icon from '@wordpress/icons'
<Icon icon={ woo } size={ 16 } />
<Icon icon={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />
Adding Icons
Before adding a new icon, make sure the icon is not already included in the Library that comes with @wordpress/icons package. If there is no existing icon suitable:
- Add the icon file to
./libraryfolder. - Make sure to use
SVGprimitive from@wordpress/primitivesand not a native svg.SVGoffers more accessibility features. - Remove width and height since they're handled by Icon.
- Remove any hardcoded colors on the svg. If necessary, use
CurrentColor. - Export the Icon in
./library/index.js.
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.