Illustrator

Import the Illustrator 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 Illustrator 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

Illustrator Prints

canvas-core/illus-prints

WooCommerce products as framed print cards: edition, name, price, size pills and an add-to-cart button, with a sold-out veil when stock runs out. In the block inserter it is named Canvas Illustrator Prints.

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

Query

• ProductsDefaultOne product category

  Which products the cards show.

  ChoicesOne product categoryOne product tagFeatured productsMost recent products

• Category SlugDefaultEmpty

  Slug of the product category to show. A slug travels with the demo, so the same grid works after import.

  Shown when Products is "One product category"

• Tag SlugDefaultEmpty

  Slug of the product tag to show.

  Shown when Products is "One product tag"

• Number of PrintsDefault4

  How many prints the grid shows.

• Order ByDefaultMenu Order

  What decides the sequence: the order you arranged the products in, when each was added, its name or its price.

  ChoicesMenu OrderDateNamePrice

• OrderDefaultAscending

  Whether that sequence runs forwards or backwards.

  ChoicesAscendingDescending

Display

• Grid ClassesDefaultrow g-4

  Classes on the grid holding the cards, which is where the gutter is set.

• Column ClassesDefaultcol-lg-3 col-md-6

  Bootstrap column classes on each card: how many prints sit side by side at each width.

• Card Frame ColoursDefault#f25c78 #ffd166 #00b4a6 #7c3aed

  One colour per line. The cards take these in turn and start again from the top.

• Card Frame WidthDefault3px

  Thickness of the coloured frame around each card.

• Image SizeDefaultFull

  Which generated size of the product image the card shows. The card crops it to a 2:3 portrait.

  ChoicesFullLargeWooCommerce SingleWooCommerce Thumbnail

• Button Icon ClassesDefaultme-2

  Utility classes on the button icon: the design spaces it from the wording.

Content

• Edition AttributeDefaultEdition

  Name of the product attribute holding the edition line above the print name (for example "Limited Edition: 50 prints"). Empty hides the line.

• Size AttributeDefaultSize

  Name of the product attribute whose values become the size pills. Empty hides the pills.

• Show PriceDefaultOn

  The product price, written as a bare figure in the store currency.

• Price DecimalsDefault0

  Decimal places in the price. The design writes whole figures.

  Shown when Show Price is on

• Add to Cart TextDefaultAdd to Cart

  Wording on the button that adds the print to the cart.

• Add to Cart IconDefaultbi-cart3

  Icon before the add-to-cart wording.

• Sold Out Button TextDefaultSold Out

  Wording the button takes when the print is out of stock. It then opens the product page instead of the cart.

• Sold Out IconDefaultbi-x-circle

  Icon before the sold-out wording.

• Sold Out BadgeDefault✦ Sold Out

  The badge drawn over the photograph of an out-of-stock print. Empty removes the veil.

Illustrator Works

canvas-core/illus-works

Portfolio items as a filterable grid of square cards with coloured frames, or the pieces of a single project page. In the block inserter it is named Canvas Illustrator Works.

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

Layout

• LayoutDefaultWork Grid with Filter Bar

  Which part of the design this block draws: the filterable grid of work, or one of the three pieces that build a single project page. The single pieces render nothing anywhere else.

  ChoicesWork Grid with Filter BarSingle Work: Category and DetailsSingle Work: Commission ButtonSingle Work: Back Link and More Work

Query

• Category SlugDefaultEmpty

  Show only the work in one category, written as its slug (editorial, patterns …). Leave empty to show every piece.

• Follow the Category PageDefaultOff

  On a work category page, show only that category and ignore the slug above. Off everywhere else.

• ItemsDefault0

  0 shows every published portfolio item.

• Order ByDefaultMenu Order

  What decides the sequence the work appears in: the order you arranged it in, when each item was published, or its name.

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Whether that sequence runs forwards or backwards. With Order By set to Date, Descending puts the newest item first.

  ChoicesAscendingDescending

Display

• Show Filter BarDefaultOn

  A row of category pills above the grid. Clicking one shows only that category; the first pill shows everything.

  Shown when Layout is "Work Grid with Filter Bar"

• Show-All Pill TextDefaultAll

  Label of the first pill, the one that clears the filter.

  Shown when Show Filter Bar is on

• Filter CategoriesDefaultEmpty

  Category slugs, one per line, in the order the pills should appear. Leave empty to list every category that has work in it.

  Shown when Show Filter Bar is on

• Filter Bar ClassesDefaultEmpty

  Classes on the row holding the pills. The design centres them with its own inline layout; add utilities here if a page needs different spacing.

  Shown when Show Filter Bar is on

• Filter Bar Inline StyleDefaultdisplay: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 56px;

  Inline style on the pill row: how the design centres the pills and spaces them from the grid.

  Shown when Show Filter Bar is on

• Grid ClassesDefaultrow g-4

  Classes on the grid holding the cards, which is where the gutter is set.

• Column ClassesDefaultcol-lg-3 col-sm-6 col-6

  Bootstrap column classes on each card: how many cards sit side by side at each width.

• Card Frame ColoursDefault#f25c78 #ffd166 #00b4a6 #7c3aed

  One colour per line. The cards take these in turn and start again from the top, so four colours give every fifth card the same frame.

• Card Frame WidthDefault3px

  Thickness of the coloured frame around each card.

• Image SizeDefaultFull

  Which generated size of the featured image the card shows. The card crops it square.

  ChoicesFullLargeMediumThumbnail

• Project Link TextDefaultView Project

  Wording of the button that appears over a card on hover and opens the project. Empty hides the button.

• Work Page SlugDefaultEmpty

  Slug of the page that lists the work. The single pieces link the category eyebrow and the back button to it. Empty links them to the front page.

• Work Section AnchorDefaultwork

  The id of the section holding the grid on that page, appended to the link as a fragment so the visitor lands on the grid itself.

• Commission Page SlugDefaultcontact

  Slug of the page the commission button opens. Resolved to a portable permalink so it is correct on any install. Empty hides the button.

• Commission Button TextDefaultCommission a Piece Like This

  Wording on the button that invites a visitor to get in touch from a project page. Empty hides the button.

• Back Button TextDefaultBack to My Work

  Wording on the button that returns a visitor from a project page to the work grid. Empty hides the button.

• More Work HeadingDefaultMore Work

  Heading above the row of other projects at the foot of a project page. Empty shows the projects with no heading.

• More Work ItemsDefault4

  How many other projects the foot of a project page shows, same category first.