Canvas Docs

AI Coding

Import the AI Coding 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 AI Coding 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

Capabilities

canvas_aicode_feat

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

  • Editor features: custom-fields, editor, excerpt, page-attributes, title

Each item carries these extra settings on its edit screen:

  • Feat Icon

  • Feat Label

  • Feat Summary

Blocks this design adds

Capability Grid

canvas-core/aicode-capabilities

A grid of capability records, each shown as an icon, a name and a one-line summary. In the block inserter it is named Capability Grid.

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

The Capability Grid settings in the block editor sidebar

Content

  • LayoutDefaultCard Grid

    The grid and the list show every capability; the other two render the open record and only appear on a capability page.

    ChoicesCard GridLinked ListRecord HeaderRecord Related Row

  • Capabilities to ShowDefault0

    Zero shows every published capability.

  • Order ByDefaultManual Order

    What to sort the capabilities by.

    ChoicesManual OrderDateTitle

  • OrderDefaultAscending

    Read the sort order forwards or backwards.

    ChoicesAscendingDescending

  • Link Cards to the Capability PageDefaultOff

    Wraps each card in a link. Leave off where the grid is presentational.

  • Capability Index SlugDefaultcapabilities

    The page the record header and the back link point at.

  • Back Link TextDefaultAll capabilities

    Wording on the link back to the capability index. Empty renders no link.

  • Related Row HeadingDefaultMore capabilities

    Heading above the row of other capabilities.

Layout

  • Grid Row ClassesDefaultrow g-4 mt-2

    Classes on the row wrapping the capability cards.

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

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

  • Card ClassesDefaultcp-feat-card

    Classes on the box around one capability.

  • Icon Tile ClassesDefaultcp-feat-icon

    Classes on the square tile behind the icon.

  • Icon Tile Inline StyleDefaultwidth: 48px; height: 48px; border-radius: 10px; background: rgba(99,102,241,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.3s ease;

    Inline style on the icon tile: its size, corner rounding and fill.

  • Icon Inline StyleDefaultfont-size: 1.25rem; color: #6366f1;

    Inline style on the icon itself: its size and colour.

  • Card Title ElementDefaultHeading 3

    Which element carries the capability name on a card.

    ChoicesHeading 2Heading 3Heading 4Plain BoxInline Text

  • Card Title ClassesDefaultEmpty

    Classes on the capability name.

  • Card Title Inline StyleDefaultfont-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; color: #f1f5f9; margin-bottom: 10px;

    Inline style on the capability name.

  • Card Summary ClassesDefaultEmpty

    Classes on the one-line summary under the name.

  • Card Summary Inline StyleDefaultfont-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #94a3b8; line-height: 1.7; margin: 0;

    Inline style on the one-line summary.

  • List Row ClassesDefaultrow g-4

    Classes on the row wrapping the linked list.

    Shown when Layout is "Linked List" or "Record Related Row"

  • List Column ClassesDefaultcol-lg-6

    Classes on each column of the linked list.

    Shown when Layout is "Linked List" or "Record Related Row"

  • List Card ClassesDefaultcp-cap-row

    Classes on each linked row.

    Shown when Layout is "Linked List" or "Record Related Row"

  • Add Record ClassesDefaultOff

    Adds the standard per-record classes to each card, so other styling and scripts can target one capability.

Dot Grid Backdrop

canvas-core/aicode-dot-grid

A field of evenly spaced dots that fills the box behind it, for a section that needs a technical backdrop. In the block inserter it is named Dot Grid Backdrop.

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

The Dot Grid Backdrop settings in the block editor sidebar

Settings

  • Pattern NameDefaultcp-dots

    Internal name for this dot field. Change it only when two dot grids sit on the same page and need different settings.

  • Dot Spacing (px)Default24

    How far apart the dots sit, measured from one dot to the next.

  • Dot RadiusDefault1.5

    Radius of a single dot, in pixels.

  • Dot ColourDefault#6366f1

    Colour of the dots.

Layout

  • Field WidthDefault100%

    How wide the dot field is. Leave at 100% to fill its box.

  • Field HeightDefault100%

    How tall the dot field is. Leave at 100% to fill its box.

Was this page helpful?