Branding Studio

Import the Branding Studio 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 Branding Studio 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.

Blocks this design adds

Branding Studio Work

canvas-core/brand-studio-works

Display portfolio projects as before and after cards, render the pieces of a single project page (category, name and summary, the project card, other projects), or draw a button to every project. In the block inserter it is named Canvas Branding Studio Work.

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

Layout

• LayoutDefaultProject Cards

  Which part of the work design this block draws. Project Cards lists the projects; each "Single Project" choice renders one piece of the project page you place it on; Link Button draws one button to every project or to a section of the front page.

  ChoicesProject CardsSingle Project - CategoryName and SummarySingle Project - Project CardSingle Project - Other ProjectsLink Button

Query

• Category SlugDefaultEmpty

  Show only the projects in one portfolio category, written as its slug. Leave empty to show them all.

• Follow the Category PageDefaultOff

  On a portfolio category page, show only that category and ignore the slug above. Off everywhere else.

• ProjectsDefault0

  0 shows every project. The other-projects layout shows two when this is left at 0.

• Order ByDefaultMenu Order

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

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Which end of that sequence comes first.

  ChoicesAscendingDescending

Display

• Row ClassesDefaultrow g-1

  Class names on the row holding the cards.

• Column ClassesDefaultcol-12 col-lg-6

  Class names on the column around each card, which set how many sit side by side.

• Card ClassesDefaultsm-portfolio-card

  Class names on each project card.

• Before Half ClassesDefaultcard-before

  Class names on the left half of a card, which shows the Before Image.

• After Half ClassesDefaultcard-after

  Class names on the right half of a card, which shows the featured image.

• Divider ClassesDefaultcard-divider

  Class names on the rule between the two halves. Leave empty for no rule.

• Caption ClassesDefaultcard-footer

  Class names on the caption bar across the foot of a card.

• Name ClassesDefaultbrand-name

  Class names on the project name inside the caption.

• Category ClassesDefaultbrand-industry

  Class names on the category line under the name. Leave empty to hide the line.

• Link NamesDefaultOff

  Make each project name a link to that project's own page, and the whole card clickable with it. Off leaves the cards as plain captions.

• Image SizeDefaultfull

  Registered image size used for both halves of a card.

• Record Identity ClassesDefaultOn

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

Single

• Category Eyebrow ClassesDefaulthero-wordmark

  Class names on the small category line above the project name. Leave empty to hide it.

  Shown when Layout is "Single Project - Category, Name and Summary"

• Link the CategoryDefaultOn

  Link the category line to that category's page of projects.

  Shown when Layout is "Single Project - Category, Name and Summary"

• Project Name ElementDefaulth1

  Element the project name is written into at the top of its own page. H1 is right when the name is the page's subject.

  Choicesh1h2Shown when Layout is "Single Project - Category, Name and Summary"

• Project Name ClassesDefaultEmpty

  Class names on the project name at the top of its own page.

  Shown when Layout is "Single Project - Category, Name and Summary"

• Summary ClassesDefaulthero-sub

  Class names on the project summary under the name, taken from its excerpt. Leave empty to hide it.

  Shown when Layout is "Single Project - Category, Name and Summary"

Link

• Link ToDefaultEvery project (portfolio page)

  Where the button goes. Both are worked out when the page is shown, so the link stays right if the site moves.

  ChoicesEvery project (portfolio page)A section of the front pageShown when Layout is "Link Button"

• Front Page SectionDefaultinquiry

  The HTML anchor of the front page section to open, without the #.

  Shown when Layout is "Link Button" and Link To is "A section of the front page"

• Button TextDefaultSee the full case library →

  Wording on the button.

  Shown when Layout is "Link Button"

• Button ClassesDefaultsm-portfolio-cta

  Class names that set the look of the button.

  Shown when Layout is "Link Button"