Recipes

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

Recipes

canvas_recipe_item

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

• Editor features: comments, custom-fields, editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Recipe Categories (canvas_recipe_item_cat)

Each item carries these extra settings on its edit screen:

• Item Calories

• Item Carbs

• Item Chef

• Item Energy

• Item Fat

• Item Hero Image

• Item Ingredients

• Item Level

• Item Preparation

• Item Protein

• Item Rating

• Item Reviews

• Item Sugar

• Item Time

• Item Video

• Item Video Image

• Item Week

• Item Week Dark

• Item Week Image

• Item Week Text

• Item Week Title

Blocks this design adds

Recipe Categories

canvas-core/recipe-categories

A row of expanding photo tiles linking to recipe categories. In the block inserter it is named Canvas Recipe Categories.

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

Layout

• Wrapper ClassesDefaultrecipe-categories justify-content-center

  Class names on the strip holding the tiles. Change the alignment part to push the tiles left or right instead of centring them.

• Reveal AnimationDefaultfadeInUp

  Animation name applied to every tile. Empty = no reveal.

• Delay Step (ms)Default100

  Each tile is delayed by this much more than the one before it. A row may override its own delay.

Settings

• Category TilesDefaultEmpty

  The tiles in the strip, each one linking to a recipe category. A tile with no label and no background image is skipped.

  Each row of Category Tiles takes:

  • LabelDefaultEmpty

    Wording shown on the tile, and the alternative text for its icon.

  • Background Image

    Photograph filling the tile behind the label.

  • Icon Image

    Small image shown above the label, for a line drawing or badge over the photograph.

  • Category SlugDefaultEmpty

    Recipe Category term slug. Its archive link is resolved at render time.

  • Custom URLDefaultEmpty

    Used when no category slug is given.

  • Delay Override (ms)DefaultEmpty

    Wait before this tile animates in, replacing the staggered delay worked out from its position.

Recipe Items

canvas-core/recipe-items

Display recipes from the Recipes post type as a card grid, a featured carousel, or the regions of a recipe single page. In the block inserter it is named Canvas Recipe Items.

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

Layout

• LayoutDefaultRecipe Card Grid

  Which part of the recipe design this block draws. The first three list several recipes; every "Single" choice renders one section of the recipe page you place it on.

  ChoicesRecipe Card GridRecipes of the Week SlidesLatest Posts CardsSingle - Hero BandSingle - Nutrition StripSingle - Ingredients ListSingle - Preparation ListSingle - Video ThumbnailSingle - Print IconSingle - Download ButtonSingle - Share IconsSingle - Previous / Nextand 1 more

Query

• Category SlugDefaultEmpty

  Recipe Category term slug to filter by. Empty = all recipes.

• ItemsDefault12

  0 shows all items.

• Order ByDefaultDate

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

  ChoicesDateMenu OrderTitleRatingComment Count

• OrderDefaultDescending

  Which end of that sequence comes first: newest and highest first, or oldest and lowest first.

  ChoicesDescendingAscending

• PaginateDefaultOff

  Read the page number from the URL and append Previous / Next buttons.

• Allow URL SortingDefaultOff

  Honour a ?sort= value of popular, recent, liked or commented.

• Featured Recipes OnlyDefaultOff

  Restrict the query to recipes marked as Recipe of the Week.

Display

• Row ClassesDefaultrow g-0

  Class names on the row wrapping the cards. Swap the gap part to open space between them.

• Column ClassesDefaultcol-sm-4 col-6

  Class names on each card column, which is what sets how many cards sit side by side at each screen width.

• First Column Inline StyleDefaultEmpty

  Inline style applied to the first card column only (the related row opens with a left border).

• Author PrefixDefaultBy

  Wording placed before the chef name on a card. Include the trailing space.

• Card Date FormatDefaultM j, Y

  How the date on each card is written, using the same format codes as the WordPress date settings.

• Chefs Page SlugDefaultchefs

  Slug of the page introducing the chefs. Each card author links to that page and the chef's own section anchor, resolved server-side so it survives export and import. Empty = no link.

• Recipes Page SlugDefaultrecipes

  Slug of the page carrying the recipe listing, used for the pagination links and the category eyebrow.

• Next Button TextDefaultNext

  Wording on the link to the following page of recipes.

• Previous Button TextDefaultPrevious

  Wording on the link back to the preceding page of recipes.

• Recipe Button TextDefaultView Recipe

  Wording on the button that opens a recipe from a Recipes of the Week slide.

• Post Card Link TextDefaultLearn More

  Wording on the link at the foot of each card in the Latest Posts layout.

Icons

• Difficulty Icon

  Picture shown above the difficulty figure in the stat strip. Leave it unset for the figure on its own.

• Time Icon

  Picture shown above the cooking time in the stat strip.

• Ingredients Icon

  Picture shown above the ingredient count, which is counted from the recipe's own ingredient list.

• Reviews Icon

  Picture shown above the review count in the stat strip.

• Calories Icon

  Picture shown above the calorie figure on a Recipes of the Week slide.

• Icon Width

  How wide every stat picture is drawn, in pixels. The height follows the picture.

  Default: 30.

Single

• Hero Section ClassesDefaultslider-element dark parallax include-header

  Class names on the banner behind the recipe title. They carry the light text, the parallax scroll and the header overlap.

• Hero Inline StyleDefaultpadding: 230px 0;

  Appended after the per-recipe background declaration.

• Hero Title ClassesDefaulttext-transform-none fw-bold mb-5 display-4

  Class names on the recipe title in the banner, setting its size, weight and letter casing.

• Nutrition LabelsDefaultEnergy Calories Sugar Fat Carbs Protein

  One label per line, in the order Energy, Calories, Sugar, Fat, Carbs, Protein.

• Download Button TextDefaultDownload

  Wording on the button that downloads the recipe file.

• Download Button IconDefaultbi-cloud-download

  Icon shown on the download button.

• Instagram Profile URLDefaultEmpty

  Target of the share row's Instagram icon (a profile link: Instagram has no share endpoint).

• Related RecipesDefault4

  How many other recipes appear under the one being read. Set 0 to leave the related row out.

• Related HeadingDefaultEmpty

  Empty renders the related row with no heading of its own.

• Back Button TextDefaultEmpty

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

• Feature Strip ClassesDefaultslider-features

  Class names on the strip of difficulty, time, ingredient and review figures.

• Video Thumbnail HeightDefault300

  How tall the video still stands, in pixels, before the reader plays it.