Gear

Import the Gear design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Gear and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Blocks this design adds

Gear Products

canvas-core/gear-products

A WooCommerce product grid in the Gear card shape: a tall photograph with the tag, name, price and shop link over its foot. In the block inserter it is named Canvas Gear Products.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Query

• ProductsDefaultLatest products

  Which products the grid pulls in.

  ChoicesLatest productsFeatured productsA product categoryA product tag

• Category slugDefaultEmpty

  Comma-separated product category slugs. Slugs travel between sites, so the grid keeps working after an import.

  Shown when Products is "A product category"

• Tag slugDefaultEmpty

  Comma-separated product tag slugs. Slugs travel between sites, so the grid keeps working after an import.

  Shown when Products is "A product tag"

• Number of productsDefault3

  How many products to show.

• Order byDefaultStore order

  What to sort the products by.

  ChoicesStore orderDateTitlePrice

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

Layout

• Grid classesDefaultrow g-4

  Classes on the row wrapping the product cards.

• Column classesDefaultcol-md-4

  Classes on each column, which is where the number of cards per row is set.

• Card classesDefaultwr-product-card

  Classes on the box around one product.

• Photo box classesDefaultwr-product-img

  Classes on the picture area at the top of a card.

• Overlay classesDefaultwr-product-overlay

  Classes on the panel under the picture that holds the tag, name, price and link.

• Image sizeDefaultwoocommerce_thumbnail

  Which stored size of the product photo to load.

Card

• Show the tagDefaultOn

  Show a small label above the product name.

• Tag reads fromDefaultProduct tags

  Whether the label reads the product tags or the product categories. The first one on the product is used.

  ChoicesProduct tagsProduct categoriesShown when Show the tag is on

• Tag classesDefaultwr-product-tag

  Classes on the label above the product name.

  Shown when Show the tag is on

• Name classesDefaultwr-product-name

  Classes on the product name.

• Name LinesDefaultOne line (let the card wrap it)

  Two balanced lines breaks the product name at the word boundary that leaves both lines closest in length, which is how the design sets its names.

  ChoicesOne line (let the card wrap it)Two balanced lines

• Show the priceDefaultOn

  Show the product price.

• Price classesDefaultwr-product-price

  Classes on the price.

  Shown when Show the price is on

• Price PrefixDefaultEmpty

  Text placed before the figure, for a range that starts at this price.

  Shown when Show the price is on

• Price DecimalsDefault0

  How many decimal places the price shows. 0 rounds it to a whole figure.

  Shown when Show the price is on

• Show the shop linkDefaultOn

  Show a link from each card to the product page.

• Shop Link TextDefaultShop Now

  Wording on the product link.

  Shown when Show the shop link is on

• Shop Link ClassesDefaultwr-product-link

  Classes on the product link.

  Shown when Show the shop link is on

• Shop Link IconDefaultuil uil-arrow-right

  Icon shown after the link wording. Empty shows none.

  Shown when Show the shop link is on