Commit Graph

69 Commits

Author SHA1 Message Date
Kelly Dwan d2f1aa6c44 Update grid blocks preview to match width of products on the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/489)
* Update grid blocks preview to match width of products on the front end

* Remove max-width from CSS, set it on the preview itself so we can use the dynamic theme width

* Override block thumbnail width for multiple column layouts

Previously larger thumbnails would cause multiple column layouts to break and wrap early. This enforces the column width for those cases

* Add the thumbnail size to images, to prevent larger images in multiple col layouts

* Update snapshot to new preview markup
2019-03-15 12:48:46 -04:00
Kelly Dwan 9fa9257430 Blocks: Add rating to grid previews (https://github.com/woocommerce/woocommerce-blocks/pull/472)
* Add rating stars to the product preview

* Add rating to the visibility controls
2019-03-06 13:50:32 -05:00
Kelly Dwan 17ff1aa886 Blocks: Add new content controls to grid blocks (https://github.com/woocommerce/woocommerce-blocks/pull/440)
* Component: GridContentControl for controlling visibility of product content

* Add the content control to all grid blocks

* Use CSS to hide the content on the front end

* Fix missing translation functions
2019-02-21 14:00:47 -05:00
Kelly Dwan 2a00a897d5 Components: Move SearchListControl to woocommerce/components (https://github.com/woocommerce/woocommerce-blocks/pull/442)
* Switch to using the SearchListControl from woocommerce/components

* Remove unused mixin
2019-02-21 13:07:08 -05:00
Kelly Dwan b14a37f7b5 Update CSS build process (https://github.com/woocommerce/woocommerce-blocks/pull/439)
* Split apart editor and frontend styles

* Remove the empty JS files after each build

* Pull out editor and style CSS files into two single, separate files
Rename products-grid CSS, add a “global” front end stylesheet

* Update style registration to use these two new global CSS files

* Merge style JS files into vendors before deleting them

* Remove empty file to fix lint error

* Check for file before reading from it

When watching, not all the file stubs are created, so this errors out.
2019-02-19 16:09:36 -05:00
Kelly Dwan a503af9e51 Add space between the icon and placeholder title (https://github.com/woocommerce/woocommerce-blocks/pull/421) 2019-02-18 09:48:34 -05:00
Kelly Dwan 71b448f8b6 Build: Split out vendor files into separate, shared JS & CSS files (https://github.com/woocommerce/woocommerce-blocks/pull/314)
* Add splitchunks to webpack config to combine node_modules imports into a vendors script

* Move legacy CSS into legacy folder

* Get components css without needing to use relative path

* Add vendors css file
2019-01-14 15:33:17 -05:00
Kelly Dwan 0d720183aa Add "Featured Product" block preview (https://github.com/woocommerce/woocommerce-blocks/pull/308)
* Add classnames package

* Add background image & initial styles

* Only show inspector controls when not in edit-mode

* Add overlay color + opacity controls

* Add content alignment

* Fix display of content

* Add content toggles

* Update styles from feedback

* Display the "Featured Product" block on the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/310)

* Add render_callback to dynamically render product

* Set a size for the product description

* Remove fallback placeholder image

* Reset the background color for the placeholder component

Previously this was overriding storefront's custom background color CSS

* Update nested conditional

* Remove unnecessary style

* "Featured Product" Block: Add link to the product to the block (https://github.com/woocommerce/woocommerce-blocks/pull/311)

* Featured Product Block: Add link to the product to the block

* Add a better link label for screen reader users

* Match core button styles, fix alignment of button-link
2019-01-13 12:22:15 -05:00
Kelly Dwan 6a1c1490cb Split blocks into separate JS files (https://github.com/woocommerce/woocommerce-blocks/pull/305)
This lets us use the functionality of `register_block_type` to automatically enqueue the scripts and styles used by blocks in the editor, and eventually, styles on the frontend as well. Also adds cssnano to minify our CSS.
2019-01-10 13:16:37 -05:00
Kelly Dwan 03eaddd197 New block: add "Hand-picked Products" block (https://github.com/woocommerce/woocommerce-blocks/pull/276)
* Add ProductsControl component to search and select products

* Add “Hand-picked Products” block

* Update hand-picked & new product icons

* Prevent API request when no products are selected

* Remove rows setting

* Update shortcode/query helpers for the handpicked products

* Remove shortcode from post if no product IDs are passed

Rendering a shortcode with `ids=‘’` will show all products, as if the ids param wasn’t there. The expected outcome would be no products are shown, we we achieve by removing the shortcode.

* Remove unused rows attribute

* Update accessible spoken notice

* Add a variable to hold whether there are selected products

* Fix copy-paste comments
2018-12-21 19:10:17 -05:00
Kelly Dwan ba8ce223cf Use em-dashes to indent child categories/attributes instead of padding (https://github.com/woocommerce/woocommerce-blocks/pull/265) 2018-12-19 17:34:28 -05:00
Kelly Dwan 3bccfda459 Category Selection: Add support for category operator (https://github.com/woocommerce/woocommerce-blocks/pull/251)
* Add core breakpoint 480px, remove non-core breakpoints

* Add the optional operator & save callback

* Add the catOperator as a valid attribute

* Enable cat operator for Products by Category

* Add cat_operator support the products API endpoint

* Enable cat_operator in the shortcode and query utils

* Pluralize the “nothing found” string if we have multiple categories

* Fix style in the inspector panel

* Add category operator support to the Best Sellers product block

* Add cat_operator support to On Sale Products block

* Update label & margin
2018-12-17 15:16:01 -05:00
Kelly Dwan 43675515af Block: Add new "Best Selling Products" block (https://github.com/woocommerce/woocommerce-blocks/pull/221)
* Move from a JS file per block registration to one file registering all blocks

This will let webpack combine shared libraries, like gridicons

* Move global block settings to the “before all scripts” section

These shouldn’t be tied to a specific block file, since they’re used across all blocks

* Register both block types

We can also remove the scripts, since we enqueue these below

* Update getShortcode & getQuery to handle different block types

* Pass block type name to getQuery

* Update shared attributes - edit_mode is not a universal option, but categories will be

Categories is shared, but orderby is not

* Add “Best Selling Products” block

* Add a shared class name for product grid blocks

* Fix failing tests
2018-12-13 12:19:55 -05:00
Kelly Dwan e3dab1cbcc Product preview: Update "Add to cart" button to inherit theme's button styles (https://github.com/woocommerce/woocommerce-blocks/pull/223)
* Remove button styling & add classes to inherit style from core button

* Update to CSS grid

* Prevent warnings when running autoprefixer

* Update spacing in preview

* Update snapshots to reflect button markup change

* Switch to flexbox for IE 11 support

* Remove CSS grid autoprefixer support

* Fix spacing on preview items

* Fix stylelint issue

* Remove unnecessary rule
2018-12-13 12:19:06 -05:00
Kelly Dwan 02f8aa1091 Add styles for better reusable block preview (https://github.com/woocommerce/woocommerce-blocks/pull/210)
* Add styles for better reusable block preview

* Fix class names for legacy block preview style

* Check that `products` exists before checking length

* Fix stylelint issues
2018-12-04 15:40:00 -05:00
Kelly Dwan f0f62b5caa Category Selection: Always show "selected" section (https://github.com/woocommerce/woocommerce-blocks/pull/192)
* Always show the selected tags section, with a min-height to prevent jumping when selecting tags

* Only show the “clear all” button if there are selected items

* Update snapshot tests

* Update height for sidebar category selection
2018-12-03 16:05:12 -05:00
Kelly Dwan b8bdc2bf27 Category Selection: Add hierarchy support for nested categories (https://github.com/woocommerce/woocommerce-blocks/pull/179)
* Add buildTermsTree to handle hierarchical list input

* Append items if their parent is not in the given list

* Add `breadcrumbs` property to hierarchical list

* Display the “breadcrumbs” parent categories when searching

* Use display properties

we’re providing alternative text for screen reader users, so we can just toggle display values for the prefix

* Add all parent categories to name provided for screen readers

* Display parent category when parent is a currently selected item

* Add the depth class to items in defaultRenderItem

* Add a test for a hierarchical item list

* Clean up hierarchy docblock & commented-out code

* Update proptype

* Update depth CSS so we still indent very nested categories
2018-11-30 16:37:58 -05:00
Kelly Dwan 4ac52b3cf3 Create a reusable search + list control for category selection (https://github.com/woocommerce/woocommerce-blocks/pull/166)
* Add new components for ProductCategoryControl, using a reusable SearchListControl

* Add sass variables from wc-admin

* Finish styling

* Save selected categories as selected for the block

* Style sidebar version of control

* Filter the categories list, highlight search term in result

* Filter out selected items in the filter list function

* Add spacing in the placeholder, remove unnecessary stylesheet

* Add a more descriptive label for screen readers

* Remove category references from list item options

* Switch to a configurable object of messages, so SearchListControl can be more customizable

* Add screen-reader message for toggling “done” and moving into preview

* Remove call to getProductCategoryControl

The component is simple enough to just drop in now :)

* Add documentation for all props

* Add padding to placeholder

* Rename fallbackrenderItem to defaultRenderItem

* Add a variable to save the selected count

* Add `isDestructive` to make link red

* Update item style

* Add a hover/focus background color
2018-11-29 13:10:08 -05:00
Kelly Dwan 6a50ebde8b Adds continuous integration testing with travis (https://github.com/woocommerce/woocommerce-blocks/pull/156)
* Add travis to run JS & CSS linting, JS tests, and PHPUnit tests

* Move API initiation out of the gutenberg/files check

So that php tests run without having to build the JS files

* Add very basic product endpoint tests

* Fix stylelint issues in CSS

* Remove e2e setup, replace with dependency setup

* Add missing install step

* Remove cache for now

* Add specific `har-validator` dependency because v 5.1.2 has disappeared

* Only run npm install for the JS test job

* Check for installed plugins

* Update install location

* Fix typo in plugin name

* Check the BRANCH variable, rather than TRAVIS_PULL_REQUEST_BRANCH, which is only set on PR runs

* Remove debug command

* A change to trigger CI

* Set the expected node & npm versions

* Remove copy-pasted command, does not apply
2018-11-27 12:12:48 -05:00
Kelly Dwan c98e607a6f Add the "edit mode" toggle to the product category block (https://github.com/woocommerce/woocommerce-blocks/pull/144)
* Add sass mixins and variables

* Add an edit mode toggle, with the ability to choose categories

* Only add align classes when align is defined
2018-11-21 11:33:21 -05:00
Kelly Dwan 2231c829d1 Add a basic product category block (https://github.com/woocommerce/woocommerce-blocks/pull/136)
* Add a second block, for “products by category”

* Fetch products in the given category, when attributes change

* Display the resulting products

* Style the product preview

* Create utils folder, move shared attributes

* Move getQuery to shared utils folder

* Create a helper function to get the shortcode string

* Support the menu_order setting

* Support center/wide/full alignment

* Update PropTypes

* Add tests

* Add text domain to translation functions
2018-11-19 11:33:17 -05:00
Kelly Dwan 702da46571 Add stylelint to find and fix css code style issues (https://github.com/woocommerce/woocommerce-blocks/pull/126)
* Add stylelint & WP gutenberg configuration

* Fix stylelint issues
2018-11-15 10:45:49 -05:00
Kelly Dwan 140f4e5ed6 Update build process (https://github.com/woocommerce/woocommerce-blocks/pull/122)
* Add api-fetch dependency

* Remove compiled files from the repo

* Update build process, remove grunt

* Import CSS into block, as we now extract CSS via webpack to build

* Update enqueue scripts to reflect new build locations

* Detect if build files don’t exist, and instruct users to build project

* Update readme with build instructions

* Clarify where to run npm commands in info notice

* Only enqueue our JS files if we know they exist

* Clarify version compatibility between WC and WP 5.0
2018-11-13 14:12:32 -05:00
Tiago Noronha 37a7a0ca6c Fade padding fix 2018-09-06 18:53:36 +01:00
claudiulodro 34f6d14bb1 Add best seller and top rated scopes 2018-04-25 12:03:08 -07:00
Tiago Noronha 75a4b1b294 Increase search input CSS specificity 2018-04-23 16:55:01 +01:00
claudiulodro 5b24ae57e4 Fix broken padding from latest gberg update 2018-04-19 09:16:38 -07:00
claudiulodro 3b55ae7c66 Bring up-to-date with master 2018-04-11 08:44:56 -07:00
Tiago Noronha d509148d5b Set results images to specific size 2018-04-10 16:54:06 +01:00
Tiago Noronha a0110a982c Hide outline and remove button when results are visible 2018-04-10 16:42:37 +01:00
Tiago Noronha a3b9df0e55 Change outline color 2018-04-10 15:01:31 +01:00
Tiago Noronha f387eb4312 Selected products overflow fix 2018-04-10 14:44:12 +01:00
James Koster e4bbd11cbc Don't show "selected products" label when no products are selected
The instructions in the search input are adequate
2018-04-09 14:46:42 +01:00
James Koster 09bf724059 dropdown / hover styles 2018-04-09 14:32:54 +01:00
James Koster d1566fb0d2 Update block scope details design 2018-04-09 13:53:38 +01:00
Tiago Noronha f83c958eec Remove button tag around selected product checkmark 2018-04-07 00:34:47 +01:00
Tiago Noronha f4bfda9832 Updated individual products design 2018-04-06 23:57:20 +01:00
claudiulodro 6cb26a20c8 Style and fix bug 2018-04-06 14:03:06 -07:00
Tiago Noronha 710e8d03eb Closes woocommerce/woocommerce-blocks#73: Search result row should be clickable 2018-04-05 16:55:36 +01:00
claudiulodro bc8e85006c Remove list view woocommerce/woocommerce-blocks#70 2018-04-02 11:46:57 -07:00
Tiago Noronha f238cbbca0 Change cursor for current display and prevent option from being selected 2018-03-15 15:07:09 +00:00
Tiago Noronha a92bc86761 Add active state to scope switcher 2018-03-14 15:11:36 +00:00
claudiulodro 8dbc87ee37 Fix layout issues with column/row settings 2018-03-09 11:33:57 -08:00
Tiago Noronha c00f32506c Tweak popover margin 2018-03-02 00:24:45 +00:00
Tiago Noronha 0104cf3c3e Removed fixed attribute item size 2018-03-01 19:43:21 +00:00
Tiago Noronha eae0dbcd1c Remove hidden sidebar hack, fixed width counts, and simple blocks styling 2018-03-01 19:24:12 +00:00
Tiago Noronha 365d05ee6a Add max-height to individual product search results 2018-02-27 15:41:03 +00:00
Tiago Noronha a011a91057 Align bottom gradient when there are no results 2018-02-27 15:36:20 +00:00
Tiago Noronha 3ce176a8d8 Add background to search results parent div 2018-02-27 15:12:14 +00:00
Tiago Noronha 5a1532d64c Fix max width percentage 2018-02-27 14:47:15 +00:00