Blog · Gutenberg
Recipe Card block for WordPress
Full-featured recipe card with ingredients, steps, nutrition facts, ratings, and Recipe JSON-LD structured data.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Full-featured recipe card with ingredients, steps, nutrition facts, ratings, and Recipe JSON-LD structured data.
Inspector panels on this block: Basic Info, Photo, Times & Servings, Ingredients, Instructions, Nutrition, Rating, Notes. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Blog → search “Recipe Card” (block name `blockenberg/recipe-card` in block.json). Style it in the sidebar after insert.
How to use Recipe Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Recipe Card”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Basic Info. Set “Recipe Name”, “Description”, “Difficulty”, “Cuisine”.
- Check the published page. The view script reads HTML data attributes: data-recipe, data-schema. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Recipe Name | Text field in the inspector. block.json default: Classic Pancakes. Saved as `recipeName`. |
| Description | Multiline text field in the inspector. block.json default: Fluffy, golden pancakes the whole family will love. Ready in 30 minutes.. Saved as `description`. |
| Difficulty | Select control; the chosen value is saved on the block. block.json default: Easy. Saved as `difficulty`. |
| Cuisine | Text field in the inspector. block.json default: American. Saved as `cuisine`. |
| Category | Text field in the inspector. block.json default: Breakfast. Saved as `category`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Body / Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `bodyTypo`. |
| Prep Time | Text field in the inspector. block.json default: 10 min. Saved as `prepTime`. |
| Cook Time | Text field in the inspector. block.json default: 20 min. Saved as `cookTime`. |
| Total Time | Text field in the inspector. block.json default: 30 min. Saved as `totalTime`. |
| Servings | Text field in the inspector. block.json default: 4 servings. Saved as `servings`. |
| One ingredient per line | Multiline text field in the inspector. block.json default: 1 cup all-purpose flour 1 tbsp sugar 1 tsp baking powder ½ tsp baking soda ¼ tsp salt 1 cup buttermilk 1 egg 2 tbsp melted butter. Saved as `ingredients`. |
| One step per line | Multiline text field in the inspector. block.json default: Mix dry ingredients in a large bowl. Whisk wet ingredients separately. Combine wet and dry ingredients until just mixed. Heat a skillet over medium heat and grease lightly. Pour ¼ cup batter per pancake and cook until bubbles form. Flip and cook 1-2 more minutes until golden.. Saved as `instructions`. |
| Show Nutrition | On/off toggle in the inspector. On by default. Saved as `showNutrition`. |
| Calories | Text field in the inspector. block.json default: 285. Saved as `calories`. |
| Protein | Text field in the inspector. block.json default: 8g. Saved as `protein`. |
| Carbs | Text field in the inspector. block.json default: 42g. Saved as `carbs`. |
| Fat | Text field in the inspector. block.json default: 9g. Saved as `fat`. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Star Rating (1-5) | Numeric range control in the inspector. Range 1–5. block.json default: 5. Saved as `rating`. |
| Review Count | Text field in the inspector. block.json default: 24. Saved as `ratingCount`. |
| Chef Notes (optional) | Multiline text field in the inspector. Saved as `notes`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Schema.org Markup | On/off toggle in the inspector. On by default. Saved as `schemaEnabled`. |
| Accent Color | Color control in the inspector. block.json default: #f59e0b. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-recipe, data-schema.
- When schema is on, the script injects FAQPage JSON-LD into the document.
When this is the right block
- Full-featured recipe card with ingredients, steps, nutrition facts, ratings, and Recipe JSON-LD structured data — that is the job of Recipe Card, not a generic content block.
- Use it when you need the editor control labeled “Recipe Name”, which exists on this block’s inspector.
- It matches pages about recipe, food, cooking.
- Pick this when you want FAQPage JSON-LD from the same markup visitors click.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Recipe Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Recipe Card”. It sits under Blog. After insert, open Basic Info and set “Recipe Name”, “Description”, “Difficulty”, “Cuisine”.
Does Recipe Card output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the Recipe Card Gutenberg block free?
Yes. Recipe Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Recipe Card to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Basic Info, Photo, Times & Servings, Ingredients).
Related blog blocks
HowTo Schema
Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images.
Nutrition Label
Display an FDA-style Nutrition Facts panel for recipes and food products with full nutrient fields, daily value percentages, and custom styling.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Learning Path
Display a structured learning path with steps, skill tags, durations and type indicators.
Review Box
Professional review card with score, pros/cons, and Schema.org markup.
Tutorial Card
A structured tutorial block with steps, prerequisites, materials, learning outcomes, and progress tracking.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Recipe Card from the Gutenberg inserter.