Kindergarten

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

Programs

canvas_kinder_class

One item is called a Program. 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: Age Groups (canvas_kinder_age)

Each item carries these extra settings on its edit screen:

  • Monthly Fee

  • Class Intro

  • Class Points

  • Teacher Ratio

  • Schedule

  • Lead Teacher

Blocks this design adds

Kindergarten Programs

canvas-core/kinder-classes

Display programs from the Programs post type as cards, optionally for one age group, or render a single program page (details, enrolment call to action, related programs). In the block inserter it is named Canvas Kindergarten Programs.

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

The Kindergarten Programs settings in the block editor sidebar

Layout

  • LayoutDefaultCards Grid

    Which part of the programs design this block draws. Cards Grid lists them; each "Single Program" choice renders one section of the program page you place it on.

    ChoicesCards GridSingle Program - DetailsSingle Program - Enrolment CTASingle Program - Back + Related

Query

  • Age Group SlugDefaultEmpty

    Show only the programs in one age group, written as its slug (toddler, preschool …). Leave empty to show every program.

  • ItemsDefault0

    0 shows all programs.

  • Order ByDefaultMenu Order

    What decides the sequence of the programs. Menu Order lets you arrange them by hand on the programs list screen.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Which end of that sequence comes first.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow col-mb-30

    Class names on the row holding the cards, setting the space between them.

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

    Class names on each card column, which is what sets how many programs sit side by side at each screen width.

  • Card ClassesDefaultcard border-0 h-100 shadow-sm

    Class names on the card itself, from its border and shadow to whether it stretches to the tallest card in the row.

  • Card Header ClassesDefaultcard-header font-primary p-4

    Class names on the coloured band carrying the program name. Add the age group's colour class here (color1 to color4) so a whole group of cards shares one accent.

  • Card Header TagDefaulth3

    Heading level of the program name, so the page keeps a sensible outline wherever the row is placed.

    Choicesh2h3h4h5

  • Card Body ClassesDefaultcard-body p-4

    Class names on the card body, which set its padding.

  • Bullet List ClassesDefaultps-3 mt-4 mb-0

    Class names on the list of what the program covers.

  • Bullet ClassesDefaultmb-3

    Class names on each bullet, which set the space between them.

  • Card Link TextDefaultLearn More

    Wording on the link at the foot of each card. Leave empty for no link.

  • Card Link ClassesDefaultmore-link fst-normal ms-3

    Class names that set the look of that link.

  • Card Link IconDefaultbi-arrow-right

    Icon shown after the link text. Leave empty for text alone.

  • Record Identity ClassesDefaultOn

    Add WordPress's own per-record classes (post id, type, status) to each column.

  • Programs Page SlugDefaultour-programs

    Slug of the programs landing page. The single layouts resolve it to a portable permalink for the age eyebrow and the "Back to Programs" button. Empty = no link.

  • Enrolment Page SlugDefaultcontacts

    Slug of the page the single-cta enrolment button links to. Resolved to a portable permalink so the link is correct on any install or import. Empty = no button.

  • CTA Button TextDefaultEnroll in this Program

    Wording on the enrolment button. Leave empty for no button.

  • Back Button TextDefaultBack to Programs

    Wording on the button returning the reader to the programs listing. Leave empty for no button.

  • Related HeadingDefaultMore in this Age Group

    Title above the row of other programs. Leave empty to show the row with no title.

Kindergarten News

canvas-core/kinder-news

A row of latest news entries: cover image with a wave cut into its foot, a round date badge and the headline. In the block inserter it is named Canvas Kindergarten News.

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

The Kindergarten News settings in the block editor sidebar

Query

  • PostsDefault3

    How many news entries to show.

  • Category SlugDefaultEmpty

    Show only posts from one category, written as its slug. Leave empty for every category.

  • Order ByDefaultDate

    What decides the sequence of the entries.

    ChoicesDateTitleMenu Order

  • OrderDefaultAscending

    Which end of that sequence comes first.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow gutter-50

    Class names on the row holding the entries, setting the space between them.

  • Column ClassesDefaultcol-lg-4

    Class names on each entry column, which set how many entries sit side by side.

  • Entry Wrapper ClassesDefaultposts-md

    Class names on the wrapper around each entry, which pick the post-list size.

  • Image Wrapper ClassesDefaultentry-image position-relative mb-md-4

    Class names on the box holding the cover image, the wave and the date badge.

  • Image ClassesDefaultrounded-5

    Class names on the cover image itself, which set how round its corners are.

  • Image SizeDefaultLarge

    Which stored size of the cover image to serve.

    ChoicesFullLargeMediumThumbnail

  • Date BadgeDefaultOn

    Show the round month and day badge over the corner of the cover image.

  • Date Badge ClassesDefaultentry-date

    Class names on that badge.

    Shown when Date Badge is on

  • Title Wrapper ClassesDefaultentry-title text-transform-none

    Class names on the box around the headline, which set its casing.

  • Title TagDefaulth3

    Heading level of the headline, so the page keeps a sensible outline.

    Choicesh2h3h4

  • Title Link ClassesDefaultls-0 h3

    Class names on the headline link, which set its size and letter spacing.

  • Record Identity ClassesDefaultOn

    Add WordPress's own per-record classes (post id, type, status) to each column.

Wave

  • Wave ShapeDefaultwave-5

    Name of the shape cut into the foot of the cover image. Leave empty for a straight edge.

  • Wave WidthDefault110

    How wide the wave is drawn, as a percentage of the image.

  • Wave HeightDefault30

    How tall the wave is, in pixels.

  • Wave ColourDefaultEmpty

    Colour the wave is filled with. Match it to the band the entries sit on so the cut looks like part of the background.

Was this page helpful?