Podcasts

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

Episodes

canvas_pod_episode

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

• Editor features: editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Topics (canvas_pod_topic)

Each item carries these extra settings on its edit screen:

• Aired

• Episode Apple

• Episode Audio

• Running Time

• Episode Google

• Episode

• Plays

• Episode Spotify

Blocks this design adds

Podcast Episodes

canvas-core/pod-episodes

Display episodes from the Episodes post type as a cover-art rail, a stacked list of player rows or a single featured line, or render a part of an episode page. In the block inserter it is named Canvas Podcast Episodes.

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

Layout

• LayoutDefaultCover Art Rail

  Which part of the episodes design this block draws. The first three list episodes; each "Single Episode" choice renders one section of the episode page you place it on.

  ChoicesCover Art RailPlayer RowsFeatured Episode LineSingle Episode - DetailsSingle Episode - Listen CTASingle Episode - Back + RelatedTopic Archive - Page Band

• Follow the Topic ArchiveDefaultOff

  On a topic archive, list that topic instead of the slug below. Elsewhere the slug is used as normal.

• Band EyebrowDefaultTopic

  Small line above the topic name in the archive band. Empty for none.

  Shown when Layout is "Topic Archive - Page Band"

• Band ClassesDefaultslider-element

  Classes on the archive band section.

  Shown when Layout is "Topic Archive - Page Band"

Query

• Topic SlugDefaultEmpty

  Show only the episodes in one topic, written as its slug (health, fashion …). Leave empty to show every episode.

• EpisodesDefault0

  0 shows all episodes.

• Order ByDefaultMenu Order

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

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Which end of that sequence comes first.

  ChoicesAscendingDescending

Display

• Wrapper TagDefaultdiv

  Element holding the episodes.

  Choicesdivul

• Wrapper ClassesDefaultswiper-wrapper

  Class names on the element holding the episodes. On the rail this is the Swiper track; on the player rows it is the column they stack inside.

• Record Identity ClassesDefaultOn

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

• Episode Number PrefixDefaultep:

  Wording placed before the episode number, so "1" reads as "ep:1". Leave empty for the bare number.

• Play IconDefaultbi-play-fill

  Icon on the play control of every episode.

• Play Control LabelDefaultPlay this episode

  Wording screen readers announce for the play control. It is not shown on screen.

• Detail SeparatorDefault·

  Character shown between the running time and the air date. Leave empty for a plain space.

Cover Art Rail

• Slide ClassesDefaultswiper-slide

  Class names on each slide of the rail.

• Cover Frame ClassesDefaultposition-relative d-flex flex-column vh-50

  Class names on the cover-art frame, which set how tall each slide stands.

• Overlay ClassesDefaultbg-overlay dark

  Class names on the layer holding the caption over the cover art.

• Overlay Body ClassesDefaultbg-overlay-content justify-content-end align-items-start flex-column p-4

  Class names positioning the caption inside the overlay.

• Episode Number ClassesDefaultmb-2 display-3

  Class names on the large episode number in the caption.

• Episode Number Link ClassesDefaulttext-white

  Class names on the link wrapping that number.

• Detail Line ClassesDefaulttext-smaller op-08 mb-3

  Class names on the running time and air date line of a slide.

• Platform Row ClassesDefaultd-flex align-items-center mb-3

  Class names on the row of platform links inside a slide.

• Lead Detail Line ClassesDefaultEmpty

  Class names on the running time and air date line of the FIRST slide only, for a design that gives its newest episode more emphasis. Leave empty and the first slide reads like the rest.

• Lead Platform Row ClassesDefaultEmpty

  Class names on the row of platform links of the FIRST slide only. Leave empty and the first slide reads like the rest.

• Platform Link ClassesDefaultme-2 audio-logos

  Class names on each platform link of a slide.

• Platform Icon SizeDefault28px

  Diameter of the round platform badges on a slide, as a CSS length. Leave empty for the stylesheet default.

• Play Glyph ClassesDefaultsmall text-dark

  Extra class names on the play glyph inside its badge.

• Cover Art ClassesDefaultswiper-slide-bg rounded-6

  Class names on the cover-art layer, including its corner radius.

• Cover Art ScrimDefaultlinear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%)

  Gradient laid over each cover so the caption stays readable. Leave empty for the bare photograph.

• Title ClassesDefaultmb-0 lh-base p-3

  Class names on the episode title beneath each cover.

• Title Link ClassesDefaulttext-dark

  Class names on the link wrapping that title.

• Title TagDefaulth3

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

  Choicesh2h3h4h5

• Apple Podcasts BadgeDefaultEmpty

  Image shown on the Apple Podcasts link of every slide. Leave empty to drop that link.

• Google Podcasts BadgeDefaultEmpty

  Image shown on the Google Podcasts link of every slide. Leave empty to drop that link.

• Spotify BadgeDefaultEmpty

  Image shown on the Spotify link of every slide. Leave empty to drop that link.

Player Rows

• Row ClassesDefaultcard border-0 mb-4

  Class names on each player row, including the space beneath it.

• Row Body ClassesDefaultcard-body px-4 shadow-sm rounded

  Class names on the panel inside each player row, setting its padding, shadow and corners.

• Row Grid ClassesDefaultrow align-items-center flex-row gx-2

  Class names on the grid that lays the play button, title, episode number and button side by side.

• Row Play Button ClassesDefaultcol-auto bg-color text-white square square-md h3 m-0 mx-2 d-flex justify-content-center align-items-center rounded-circle ps-2

  Class names on the round play button of a player row. The play icon is added to these.

• Row Play Button SizeDefault3rem

  Diameter of that button, as a CSS length. Leave empty for the stylesheet default.

• Row Title ClassesDefaultmb-0 col-7 fw-medium ms-2 font-secondary fst-italic

  Class names on the episode title in a player row.

• Row Number ClassesDefaultcol-auto op-06 small

  Class names on the episode number in a player row.

• Row Number PrefixDefaultEpisode -

  Wording placed before the number in a player row. Leave empty for the bare number.

• Row Button TextDefaultView Episodes

  Wording on the button at the end of a player row. Leave empty for no button.

• Row Button ClassesDefaultms-auto col-auto button button-small rounded button-border

  Class names that set the look of that button.

Featured Episode Line

• Featured Play ClassesDefaultcol-auto audio-logos me-2 bg-color text-white

  Class names on the play badge of the featured episode line.

• Featured Play SizeDefault48px

  Diameter of that badge, as a CSS length. Leave empty for the stylesheet default.

• Featured Body ClassesDefaultps-2 col

  Class names on the column holding the featured title and its running time.

• Featured Title ClassesDefaultfw-medium fs-5 text-transform-none lh-base mb-0

  Class names on the featured episode title.

• Featured Detail ClassesDefaultm-0 small op-07 mt-2

  Class names on the number and running time beneath that title.

• Featured Number PrefixDefaultEp

  Wording placed before the number on the featured line. Leave empty for the bare number.

Episode Page

• Episodes Page SlugDefaultepisodes

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

• Listen Page SlugDefaultepisodes

  Slug of the page the listen button links to when an episode carries no platform link of its own. Resolved to a portable permalink so the link is correct on any install or import. Empty = no button.

• CTA Button TextDefaultListen to this Episode

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

• Back Button TextDefaultBack to Episodes

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

• Related HeadingDefaultMore in this Topic

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