Canvas Docs

Youtube Creator

Import the Youtube Creator 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 Youtube Creator 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.

Content types this design adds

Films

canvas_yt_film

One item is called a Film. You will find them in their own admin menu once the design is installed.

  • Editor features: custom-fields, editor, excerpt, page-attributes, thumbnail, title
  • Grouped by: Pillars (canvas_yt_pillar)

Each item carries these extra settings on its edit screen:

  • Published Line

  • Runtime

  • Player Embed URL

  • View Count

Blocks this design adds

Channel Films

canvas-core/yt-films

Films from the Films post type as episode cards: thumbnail, runtime badge, play button, title and the view count. Optionally limited to one content pillar, or set to the related row on a film page. In the block inserter it is named Canvas Channel Films.

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

The Channel Films settings in the block editor sidebar

Layout

  • LayoutDefaultCard Grid

    Card Grid lists films. Film Header opens a film page with its pillar, title, view line and player. Related Films drops the film being read and shows its companions from the same pillar, for the row at the foot of a film page. Pillar Header opens a pillar page with that pillar's name and description.

    ChoicesCard GridFilm Header (on a film page)Related Films (on a film page)Pillar Header (on a pillar page)

Query

  • Follow the Pillar Being ViewedDefaultOff

    On a pillar page, show that pillar rather than the one named below, so one layout serves every pillar.

  • Pillar SlugDefaultEmpty

    Show only the films in one content pillar, written as its slug. Leave empty to show every film.

    Shown when Follow the Pillar Being Viewed is off

  • FilmsDefault6

    How many films the grid shows. 0 shows all of them.

  • Order ByDefaultMenu Order

    What decides the sequence. Menu Order lets you arrange the films by hand on the Films list screen.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Which end of that sequence comes first.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow g-4

    Class names on the row holding the cards, which is where the space between them is set.

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

    Class names on each card column, which set how many films sit side by side at each screen width.

  • Card ClassesDefaultcr-vidcard

    Class names on the card itself, which carry its hover lift and text colour.

  • Title TagDefaulth3

    Heading level of the film title, so the page keeps a sensible outline wherever the grid is placed.

    Choicesh2h3h4h5

  • Thumbnail SizeDefaultFull

    Which generated size of the film thumbnail the card loads. The card crops it to widescreen either way.

    ChoicesFullLargeMedium LargeMedium

  • Show Runtime BadgeDefaultOn

    The runtime written in the corner of the thumbnail, taken from each film's Duration.

  • Show Play ButtonDefaultOn

    The round play button that fades in over the thumbnail on hover.

  • Play IconDefaultbi-play-fill

    Glyph inside the play button.

    Shown when Show Play Button is on

  • Show View Count LineDefaultOn

    The line under the title carrying each film's view count and how long ago it went up.

  • Views IconDefaultbi-eye

    Glyph before the view count.

    Shown when Show View Count Line is on

  • Meta SeparatorDefault·

    Character drawn between the view count and the published line.

    Shown when Show View Count Line is on

  • Record Identity ClassesDefaultOn

    Adds WordPress's own per-record classes to each column, which plugins and custom styling use to reach one film.

  • Films Page SlugDefaultfilms

    Slug of the page listing every film. The pillar eyebrow on a film page links to it. Empty = no link.

  • Film Page Title ClassesDefaultdisplay-4 fw-bold cr-h2 mb-3

    Class names on the film title at the top of a film page.

    Shown when Layout is "Film Header (on a film page)"

  • Player ClassesDefaultcr-top__player

    Class names on the frame around the film player on a film page.

    Shown when Layout is "Film Header (on a film page)"

  • Related HeadingDefaultMore from this pillar

    Wording above the related row at the foot of a film page. Empty = no heading.

    Shown when Layout is "Related Films (on a film page)"

  • Pillar EyebrowDefaultThe library · one pillar

    Small line above the pillar name on a pillar page. Empty = no eyebrow.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Title ClassesDefaultdisplay-4 fw-bold cr-h2

    Class names on the pillar name at the top of a pillar page.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Description ClassesDefaulttext-white-50 mt-3 cr-sub

    Class names on the pillar description beneath its name.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Header Row ClassesDefaultrow align-items-end mb-5

    Class names on the row holding the pillar name and the link beside it.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Name Column ClassesDefaultcol-lg-7

    Class names on the column holding the eyebrow, pillar name and description.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Link Column ClassesDefaultcol-lg-5 text-lg-end mt-3 mt-lg-0

    Class names on the column holding the link back to the full library.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Link TextDefaultEvery film

    Wording of the link back to the films listing. Empty = no link.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Link IconDefaultbi-arrow-up-right

    Glyph after the link back to the films listing.

    Shown when Layout is "Pillar Header (on a pillar page)"

  • Pillar Link ClassesDefaultcr-link-arrow

    Class names on the link back to the films listing.

    Shown when Layout is "Pillar Header (on a pillar page)"

Channel Merch

canvas-core/yt-merch

WooCommerce products as merch cards: photograph with a corner badge, product name, short description, price and an add-to-cart link. In the block inserter it is named Canvas Channel Merch.

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

The Channel Merch settings in the block editor sidebar

Query

  • ProductsDefaultOne product category

    Which products the cards show.

    ChoicesOne product categoryFeatured 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"

  • Number of ProductsDefault3

    How many products the grid shows.

  • Order ByDefaultMenu Order

    What decides the sequence of the products.

    ChoicesMenu OrderDateNamePrice

  • OrderDefaultAscending

    Which end of that sequence comes first.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow g-4

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

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

    Class names on each card column: how many products sit side by side at each width.

  • Card ClassesDefaultcr-product

    Class names on the card itself, which carry its frame and hover lift.

  • Image SizeDefaultFull

    Which generated size of the product image the card shows.

    ChoicesFullLargeWooCommerce SingleWooCommerce Thumbnail

  • Button Icon ClassesDefaultms-1

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

Content

  • Badge AttributeDefaultBadge

    Name of the product attribute holding the corner badge wording ("Bestseller", "New drop"). Empty hides the badge.

  • Badge Style AttributeDefaultBadge Style

    Name of the product attribute naming the badge colour variant ("new", "limit"). Empty leaves every badge in the default colour.

  • Show Short DescriptionDefaultOn

    The line of copy under the product name, taken from the product's short description.

  • 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 link that adds the product to the cart.

  • Add to Cart IconDefaultbi-arrow-right

    Icon after the add-to-cart wording.

  • Sold Out TextDefaultSold out

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

Was this page helpful?