Bike

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

Rental Items

canvas_bike_rental

One item is called a Rental Item. 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: Rental Categories (canvas_bike_rental_category)

Each item carries these extra settings on its edit screen:

• Frame

• Gears

• Daily Rate

Blocks this design adds

Rental Calculator

canvas-core/bike-calculator

Two range sliders: quantity and duration: that price a rental at a set daily rate. In the block inserter it is named Canvas Rental Calculator.

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

Quantity

• Quantity LabelDefaultSelect Number of Bikes

  The wording shown under the quantity slider.

• Quantity MinimumDefault1

  The smallest number a visitor can slide down to.

• Quantity MaximumDefault5

  The largest number a visitor can slide up to. Set it to the most you are willing to hire out at once.

• Quantity Starting ValueDefault1

  Where the quantity slider rests when the page loads, which also sets the first total the visitor sees.

• Quantity SuffixDefaultBike(s)

  Shown after the value on the slider handle, separated by a space.

• Quantity Input IDDefaultEmpty

  Optional. Set it to associate the label with the control.

• Quantity Input ClassDefaultrange-slider-bikes

  The class carried by the quantity control. The calculator also uses it to find that control, so keep it unique on the page.

Duration

• Duration LabelDefaultSelect Number of Days

  The wording shown under the duration slider.

• Duration MinimumDefault1

  The shortest hire a visitor can slide down to.

• Duration MaximumDefault30

  The longest hire a visitor can slide up to.

• Duration Starting ValueDefault4

  Where the duration slider rests when the page loads. A typical hire length here shows a realistic price straight away.

• Duration SuffixDefaultDays

  Shown after the value on the slider handle, separated by a space.

• Duration Input IDDefaultEmpty

  Optional. Set it to associate the label with the control.

• Duration Input ClassDefaultrange-slider-days

  The class carried by the duration control. The calculator also uses it to find that control, so keep it unique on the page.

Pricing

• Rate Per Unit Per DayDefault2

  Total = quantity x duration x this rate.

• Currency SymbolDefault$

  The symbol placed in front of the running total.

• Total Output SelectorDefault.pricing-price

  Where on the page the running total is written. The default points at the price line of the pricing card; to send it elsewhere give that element an ID in its Advanced panel and enter the ID here with a leading hash.

Layout

• Row ClassesDefaultrow

  Style classes on the row that holds both sliders.

• Column ClassesDefaultcol-6

  Style classes on the column each slider sits in. The default gives each half the row, so the two sit side by side.

• Label ClassesDefaultmt-2

  Style classes on both slider labels, which is what sets the gap between a slider and its wording.

Bike Rentals

canvas-core/bike-rentals

Display rental items from the Rental Items post type as media rows or tiles, or render a single rental item page (attributes, booking CTA, related items). In the block inserter it is named Canvas Bike Rentals.

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

Layout

• LayoutDefaultMedia Rows

  Which part of the design this block draws: rows of picture and text, picture tiles with a caption over them, or one of the three pieces that build a single item page. The single pieces render nothing anywhere else.

  ChoicesMedia RowsTilesSingle Item - AttributesSingle Item - Booking CTASingle Item - Back + Related

Query

• Category SlugDefaultEmpty

  Show only items in this rental category. Empty shows every item.

• ItemsDefault0

  0 shows all items.

• Order ByDefaultMenu Order

  What decides the sequence items appear in: the order you arranged them in, when each was published, or the item 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

• Row ClassesDefaultrow

  Style classes on the row that holds the items.

• Column ClassesDefaultcol-lg-6

  Style classes on the column each item sits in. This is what decides how many items fit across the row at each screen width.

• Extra Column Classes (per position)DefaultEmpty

  One line per column position, added after the column classes. The list repeats, so three lines cover a grid of any length. Leave a line empty for no extra classes.

• Tile Classes (per position)Defaultportfolio-item border d-block bg1 portfolio-item border d-block

  Tiles layout only. One line per tile position; the list repeats, which is how the alternating background is expressed.

  Shown when Layout is "Tiles"

• Media Row ClassesDefaultmedia row

  Style classes on the inner row that pairs a picture with its text.

  Shown when Layout is "Media Rows"

• Image ClassesDefaultcol-sm-5 p-5 p-sm-0 pe-sm-3

  Style classes on the picture side of an item. The default gives it a little under half the row and insets it once the two sit side by side.

• Image WidthDefault230

  Width attribute on the item image. 0 omits it.

  Shown when Layout is "Media Rows"

• Body ClassesDefaultcol-sm-7 media-body

  Style classes on the text side of an item, which holds the name, the description and the button.

  Shown when Layout is "Media Rows"

• Title ClassesDefaultmb-3

  Style classes on the item name, which is what sets the gap under it.

• Description ClassesDefaultmb-3 text-black-50

  Style classes on the item description. The default softens it to a lighter grey than the name above it.

  Shown when Layout is "Media Rows"

• Tile Image Wrapper ClassesDefaultportfolio-image

  Style classes on the picture area of a tile.

  Shown when Layout is "Tiles"

• Tile Caption ClassesDefaultportfolio-desc d-flex align-items-center justify-content-between position-absolute w-100

  Style classes on the caption bar of a tile. The default lays the name and the rate on one line at opposite ends and floats the bar over the picture.

  Shown when Layout is "Tiles"

• Tile Caption StyleDefaultbottom: 0; padding: 0 20px 15px;

  Styling written straight onto the caption bar. The default sits it against the bottom edge of the tile with a little breathing room.

  Shown when Layout is "Tiles"

• Rate ClassesDefaulttext-dark

  Style classes on the rate shown in a tile caption.

  Shown when Layout is "Tiles"

• Rate FormatDefault$ %s/Day

  How a rental rate reads on a tile. %s is replaced with the item's own rate.

• Card Button TextDefaultView More

  Wording on the button that opens the full item page from a row.

  Shown when Layout is "Media Rows"

• Card Button ClassesDefaultbutton button-shadow button-rounded fw-normal ls-0 m-0 text-transform-none

  Style classes on that button, which is what gives it its rounded shape and soft shadow.

  Shown when Layout is "Media Rows"

• Record Identity ClassesDefaultOn

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

• Rentals Page SlugDefaultfleet

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

• Booking Page SlugDefaultcontact

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

• CTA Button TextDefaultRent This Bike

  Wording on the booking button at the foot of an item page. Leave it empty and no button appears.

• Back Button TextDefaultBack to the Fleet

  Wording on the button that returns a visitor from an item page to the listing. Leave it empty and no button appears.

• Related HeadingDefaultMore to Rent

  Heading above the row of other items at the foot of an item page. Leave it empty to show them with no heading.

• Related Row ClassesDefaultrow

  Column classes for the related row are taken from the Column Classes field.