Recipe Card Block

The Recipe Card Block is a Gutenberg block. You insert it, fill in the fields, and the front-end renders a beautifully styled recipe card with everything Google needs to show your post as a rich result. No shortcodes, no separate plugin, no leaving the block editor.

Inserting the block

In the block editor, click the + button (or type / on a new line), search for Recipe Card, and click. The block inserts at the cursor.

You can place the block anywhere in your post — most food bloggers put their narrative recipe story above the block, then the structured Recipe Card after a "Jump to Recipe" anchor. The block has its own visual identity, so it always reads as the canonical version of the recipe.

Recipe fields

Click into the block and use the right sidebar to fill in:

Recipe Details

• Recipe Name — the dish name (separate from your post title, which can be more conversational).
• Summary — a one-or-two-line teaser that appears below the title in the card and as description in Schema.
• Image — the hero image. Used in the card and as the Schema image.

Times & Yield

• Prep Time, Cook Time, Total Time — write naturally: "15 minutes", "1 hr 30 min", "2 hours".
• Servings — "4", "8 cookies", "1 loaf".
• Calories — per serving, e.g. "320 kcal".

Categorization

• Cuisine — Italian, Indian, Mexican, etc. Maps to recipeCuisine.
• Category — Breakfast, Dessert, Main Course. Maps to recipeCategory.
• Difficulty — Easy, Medium, Hard.

Ingredients

Add ingredients one at a time using the + Add ingredient button. Each becomes its own recipeIngredient in Schema.

On the front end, ingredients render with checkboxes — visitors can tick them off as they shop or cook. State is local to the page (no login, no cookies — it resets on refresh, which is what people expect).

Instructions

Same pattern: one step per row. Each instruction maps to a Schema HowToStep with the proper structure for Google's recipe rich results.

Front-end renders them as a numbered list with circular markers. The numbering is generated from the data, not hardcoded — so you can reorder steps freely without renumbering anything.

How Schema.org markup works

The block outputs a <script type="application/ld+json"> tag with full Recipe markup. Here's a (slightly simplified) example of what gets generated:

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Tuscan White Bean Soup",
  "image": "https://yoursite.com/wp-content/uploads/soup.jpg",
  "description": "Cannellini beans with rosemary and pancetta…",
  "recipeYield": "6 servings",
  "prepTime": "PT15M",
  "cookTime": "PT35M",
  "totalTime": "PT50M",
  "recipeCuisine": "Italian",
  "recipeCategory": "Soup",
  "recipeIngredient": [
    "4 oz pancetta, diced",
    "2 tbsp olive oil"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "position": 1,
      "text": "Render pancetta over medium heat…"
    }
  ]
}

You don't need to know any of this — the block writes it for you. But it's worth understanding that your recipes are now first-class citizens of the structured web, eligible for rich results, the Google Recipe carousel, voice assistants reading instructions aloud, and Pinterest's structured pin format.

Star ratings

The block renders five stars at the top of the card. Visitors click to rate. Ratings are stored as post meta and aggregated — the front-end shows the average and count, and these flow into the Schema as aggregateRating (only if there's at least one rating).

To prevent abuse, each visitor's rating is throttled by a 1-year cookie per post. They can rate once. Spam protection is built in — the AJAX endpoint requires a nonce — but if you want stricter limits, we recommend a general-purpose plugin like Akismet alongside.

The Print button

The print button at the top of the card opens a print-optimized stylesheet that strips navigation, sidebars, comments, and ads — leaving just the recipe. Tested on the major browsers and on mobile (where it usually opens the OS print sheet for "Save as PDF").

Theme portability

One of the design goals: your recipes are not locked to this theme. The block stores all data as block attributes inside the post content. If you switch themes later, your recipes remain — they'll render with the Pro plugin's stylesheet as long as the plugin is active. If you ever deactivate the plugin too, the data is still readable as a comment-style block in your post HTML.