Canvas Docs

Doctors

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

Doctors

canvas_docs_doctor

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

  • Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

  • Doctor Bio

  • Experience

  • Languages

  • Qualifications

  • Doctor Role

Specialties

canvas_docs_service

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

  • Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

  • Service Area

  • Consultants

  • Service Dept

  • Service Dept Title

  • Clinic Hours

  • Service Intro

  • Location

  • Service Point Icon

  • Service Points

  • Service Points Style

  • Service Summary

Blocks this design adds

Doctors

canvas-core/docs-doctors

Portrait tiles of your practitioners with their name and specialty, driven by the doctor records, plus the doctor single layouts. In the block inserter it is named Canvas Doctors.

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

The Doctors settings in the block editor sidebar

Layout

  • LayoutDefaultDoctor Tiles

    Which part of the design this block draws: the row of doctor tiles, or one of the three pieces that build a single doctor page. The single pieces render nothing anywhere else.

    ChoicesDoctor TilesSingle Doctor - AttributesSingle Doctor - CTASingle Doctor - Back + Related

Query

  • DoctorsDefault0

    0 shows every published doctor.

  • Skip FirstDefault0

    How many doctors to step over before the row starts. Use it to run a long line-up across two rows.

  • Order ByDefaultMenu Order

    What decides the sequence doctors appear in: the order you arranged them in, when each was published, or the doctor name.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow row-cols-lg-6 row-cols-sm-2 row-cols-1 g-4

    Style classes on the row holding the tiles, which is what decides how many fit across it.

  • Row Inline StyleDefaultEmpty

    Styling written straight onto the row, usually a small nudge so two rows sit slightly offset from one another.

  • Tile ClassesDefaultcol

    Style classes on each doctor tile.

  • Portrait ClassesDefaultrounded-6 mb-2

    Style classes on the portrait itself, such as the corner rounding and the gap under it.

  • Name ElementDefaultH4

    Which heading level the doctor name is written as. Match it to the headings around the row so the page outline stays in order.

    ChoicesH2H3H4H5H6Span

  • Name ClassesDefaultmb-0

    Style classes on the doctor name.

  • Specialty ClassesDefaultfw-light

    Style classes on the specialty caption under the name.

  • Link Tiles to the Doctor PageDefaultOff

    Off renders each tile as a plain panel. On makes the whole tile a link to that doctor.

  • Portrait SizeDefaultLarge

    Which stored size of the portrait the tiles load. A smaller size makes a long line-up quicker to arrive, at the cost of sharpness on large screens.

    ChoicesFullLargeMediumThumbnail

  • Media Marker ClassDefaultOn

    Adds the media library's own wp-image class to each portrait, which is what keeps the picture in proportion when its column scales it. Turn it off only for a design that sizes the photograph itself.

  • Load Portraits EagerlyDefaultOff

    Load every portrait straight away instead of waiting until it scrolls into view. Turn it on when a script measures the row as the page loads.

  • Doctors Page SlugDefaultdoctors

    Slug of the doctors landing page. The single layouts resolve it for the specialty eyebrow and the back button. Empty = no link.

  • CTA Page SlugDefaultcontact

    Slug of the page the single-cta button links to. Resolved to a portable permalink. Empty = no button.

  • CTA Button TextDefaultRequest an Appointment

    Wording on the button at the foot of a doctor page. Leave it empty and no button appears.

  • Back Button TextDefaultBack to Doctors

    Wording on the button that returns a visitor from a doctor page to the full line-up. Leave it empty and no button appears.

  • Related Row HeadingDefaultMore of our Doctors

    Heading above the row of other doctors at the foot of a doctor page. Leave it empty to show them with no heading.

  • Related DoctorsDefault6

    How many other doctors that row holds. Set it to 0 to leave the row out.

Medical Specialties

canvas-core/docs-services

The specialty card grid and the department tab set, driven by the specialty records, plus the specialty single layouts. In the block inserter it is named Canvas Medical Specialties.

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

The Medical Specialties settings in the block editor sidebar

Layout

  • LayoutDefaultSpecialty Cards

    Which part of the design this block draws: the specialty card grid, the department tab strip, the department panels, or one of the three pieces that build a single specialty page. The single pieces render nothing anywhere else.

    ChoicesSpecialty CardsDepartment Tab StripDepartment PanelsSingle Specialty - AttributesSingle Specialty - CTASingle Specialty - Back + Related

Query

  • SpecialtiesDefault0

    0 shows every published specialty.

  • Order ByDefaultMenu Order

    What decides the sequence specialties appear in: the order you arranged them in, when each was published, or the specialty name. The department tabs always follow their own department position.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Cards

  • Grid ClassesDefaultrow row-cols-xl-5 row-cols-lg-4 row-cols-sm-2 row-cols-1 services-categories g-4 align-items-stretch

    Style classes on the grid holding the specialty cards, which is what decides how many fit across it.

  • Card ClassesDefaultservices-category-item

    Style classes on each specialty card. The design numbers the cards from this class, so keep it if you want the counters.

  • Card Link ClassesDefaultcard border-0 rounded-6

    Style classes on the link that fills each card.

  • Card Body ClassesDefaultcard-body justify-content-center align-items-center px-4 py-5 text-center

    Style classes on the padded box inside each card.

  • Card Title ElementDefaultH4

    Which heading level the specialty name is written as on a card. Match it to the headings around the grid so the page outline stays in order.

    ChoicesH2H3H4H5H6

  • Card Title ClassesDefaultmy-1

    Style classes on the specialty name inside a card.

  • Card Summary ClassesDefaulttext-smaller

    Style classes on the short line of conditions under the specialty name.

Departments

  • Tab Strip ClassesDefaultnav nav-pills mb-5 justify-content-center

    Style classes on the row of department tabs.

  • Tab Strip IDDefaultcategories-tab

    The id the tab strip carries, which the design styles the pills through. Empty adds no id.

  • Tab Item ClassesDefaultnav-item

    Style classes on each tab in the strip.

  • Tab Button ClassesDefaultnav-link

    Style classes on each tab button. The open tab also takes an active class.

  • Panels Wrapper ClassesDefaulttab-content px-lg-6

    Style classes on the box holding the department panels.

  • Panels Wrapper IDDefaultpills-tabContent

    The id the panels box carries. Empty adds no id.

  • Panel ID PrefixDefaultpills-

    What each panel id starts with. The rest of the id is the specialty slug, so a tab and its panel always agree.

  • Panel ClassesDefaulttab-pane fade

    Style classes on every department panel. The open panel also takes show and active.

  • Panel Row ClassesDefaultrow justify-content-between align-items-stretch

    Style classes on the row that splits a panel into its text and picture halves.

  • Panel Text Column ClassesDefaultcol-md-5

    Style classes on the text half of a panel, which is what sets its width.

  • Panel Picture Column ClassesDefaultcol-md-6

    Style classes on the picture half of a panel, which is what sets its width.

  • Panel Heading ElementDefaultH3

    Which heading level a department panel opens with.

    ChoicesH2H3H4

  • Panel Heading ClassesDefaultdisplay-5

    Style classes on a department panel heading.

  • Panel Lead ClassesDefaultEmpty

    Style classes on the opening paragraph of a panel whose highlights are a ticked list.

  • Panel Lead Classes (labelled rows)Defaultmb-0

    Style classes on the opening paragraph of a panel whose highlights are labelled rows, where a rule sits between the two instead of a margin.

  • Panel Rule ClassesDefaultline my-4

    Style classes on the rule drawn between the lead paragraph and labelled highlight rows. Empty draws no rule.

  • Highlight List ClassesDefaultlist-unstyled text-larger

    Style classes on the ticked highlight list.

  • Highlight Item ClassesDefaultmb-3

    Style classes on each entry of the ticked highlight list.

  • Labelled Row ClassesDefaultd-inline-flex

    Style classes on each labelled highlight row.

  • Highlight Label ClassesDefaultfw-semibold color fs-5

    Style classes on the bold label that opens a labelled highlight row.

  • Highlight Icon ClassesDefaultbi-check-circle-fill me-2 color-yellow

    Icon classes on the tick beside each highlight in a ticked list. A specialty can override this on its own screen.

  • Highlight Icon Classes (labelled rows)Defaultbi-check-circle-fill me-2 fs-4 color-yellow

    Icon classes on the tick beside each labelled highlight row, which the design draws larger.

  • Panel FlourishDefault0

    The small decorative mark placed above the heading of every department panel. Leave it empty for no flourish.

  • Panel Flourish ClassesDefaultposition-absolute top-0 start-0 translate-middle d-none d-md-block

    Style classes that place the flourish against the corner of the panel.

  • Panel Flourish WidthDefault36

    How wide the flourish is drawn, in pixels. 0 adds no width.

  • Panel Picture ClassesDefaultrounded-6 h-100 object-cover

    Style classes on the department photograph.

  • Media Marker ClassDefaultOn

    Adds the media library's own wp-image class to each department photograph, which is what keeps the picture in proportion when its column scales it.

  • Picture SizeDefaultLarge

    Which stored size of the department photograph the panels load.

    ChoicesFullLargeMediumThumbnail

Display

  • Specialties Page SlugDefaultservices

    Slug of the specialties landing page. The single layouts resolve it for the care-area eyebrow and the back button. Empty = no link.

  • CTA Page SlugDefaultcontact

    Slug of the page the single-cta button links to. Resolved to a portable permalink. Empty = no button.

  • CTA Button TextDefaultRequest an Appointment

    Wording on the button at the foot of a specialty page. Leave it empty and no button appears.

  • Back Button TextDefaultBack to Specialties

    Wording on the button that returns a visitor from a specialty page to the full list. Leave it empty and no button appears.

  • Related Row HeadingDefaultOther Specialties

    Heading above the row of other specialties at the foot of a specialty page. Leave it empty to show them with no heading.

  • Related SpecialtiesDefault5

    How many other specialties that row holds. Set it to 0 to leave the row out.

Was this page helpful?