{"id":7,"date":"2026-05-03T15:52:30","date_gmt":"2026-05-03T15:52:30","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/recipe-card-block\/"},"modified":"2026-05-03T15:52:30","modified_gmt":"2026-05-03T15:52:30","slug":"recipe-card-block","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/recipe-card-block\/","title":{"rendered":"Recipe Card Block"},"content":{"rendered":"\n<p class=\"is-lede\">The Recipe Card Block is the heart of the Pro plugin \u2014 a Gutenberg block with full Schema.org markup, ingredient and instruction tracking, ratings, and one-tap printing.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"insert\">Inserting the block<\/h2>\n\n\n\n<p>In the block editor, click the <strong>+<\/strong> button (or type <code>\/<\/code> on a new line), search for <em>Recipe Card<\/em>, and click. The block inserts at the cursor.<\/p>\n\n\n\n<p>You can place the block anywhere in your post \u2014 most food bloggers put their narrative recipe story above the block, then the structured Recipe Card after a &#8220;Jump to Recipe&#8221; anchor. The block has its own visual identity, so it always reads as the canonical version of the recipe.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fields\">Recipe fields<\/h2>\n\n\n\n<p>Click into the block and use the right sidebar to fill in:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"recipe-details\">Recipe Details<\/h3>\n\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Recipe Name<\/strong> \u2014 the dish name (separate from your post title, which can be more conversational).<\/li>\n<li><strong>Summary<\/strong> \u2014 a one-or-two-line teaser that appears below the title in the card and as <code>description<\/code> in Schema.<\/li>\n<li><strong>Image<\/strong> \u2014 the hero image. Used in the card and as the Schema <code>image<\/code>.<\/li>\n<\/ul>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"times-yield\">Times &#038; Yield<\/h3>\n\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prep Time<\/strong>, <strong>Cook Time<\/strong>, <strong>Total Time<\/strong> \u2014 write naturally: &#8220;15 minutes&#8221;, &#8220;1 hr 30 min&#8221;, &#8220;2 hours&#8221;.<\/li>\n<li><strong>Servings<\/strong> \u2014 &#8220;4&#8221;, &#8220;8 cookies&#8221;, &#8220;1 loaf&#8221;.<\/li>\n<li><strong>Calories<\/strong> \u2014 per serving, e.g. &#8220;320 kcal&#8221;.<\/li>\n<\/ul>\n\n\n\n\n<div class=\"wp-block-group is-callout is-callout-info\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><p><strong>About time formats:<\/strong> The block parses your natural-language times into ISO 8601 durations (<code>PT1H30M<\/code>, <code>PT15M<\/code>) for Schema. You write the way humans read; we hand machines what they need.<\/p><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"categorization\">Categorization<\/h3>\n\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cuisine<\/strong> \u2014 Italian, Indian, Mexican, etc. Maps to <code>recipeCuisine<\/code>.<\/li>\n<li><strong>Category<\/strong> \u2014 Breakfast, Dessert, Main Course. Maps to <code>recipeCategory<\/code>.<\/li>\n<li><strong>Difficulty<\/strong> \u2014 Easy, Medium, Hard.<\/li>\n<\/ul>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ingredients\">Ingredients<\/h3>\n\n\n\n<p>Add ingredients one at a time using the <em>+ Add ingredient<\/em> button. Each becomes its own <code>recipeIngredient<\/code> in Schema.<\/p>\n\n\n\n<p>On the front end, ingredients render with checkboxes \u2014 visitors can tick them off as they shop or cook. State is local to the page (no login, no cookies \u2014 it resets on refresh, which is what people expect).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"instructions\">Instructions<\/h3>\n\n\n\n<p>Same pattern: one step per row. Each instruction maps to a Schema <code>HowToStep<\/code> with the proper structure for Google&#8217;s recipe rich results.<\/p>\n\n\n\n<p>Front-end renders them as a numbered list with circular markers. The numbering is generated from the data, not hardcoded \u2014 so you can reorder steps freely without renumbering anything.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"schema\">How Schema.org markup works<\/h2>\n\n\n\n<p>The block outputs a <code>&lt;script type=\"application\/ld+json\"&gt;<\/code> tag with full <a href=\"https:\/\/schema.org\/Recipe\" rel=\"noopener\" target=\"_blank\">Recipe<\/a> markup. Here&#8217;s a (slightly simplified) example of what gets generated:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Recipe\",\n  \"name\": \"Tuscan White Bean Soup\",\n  \"image\": \"https:\/\/yoursite.com\/wp-content\/uploads\/soup.jpg\",\n  \"description\": \"Cannellini beans with rosemary and pancetta\u2026\",\n  \"recipeYield\": \"6 servings\",\n  \"prepTime\": \"PT15M\",\n  \"cookTime\": \"PT35M\",\n  \"totalTime\": \"PT50M\",\n  \"recipeCuisine\": \"Italian\",\n  \"recipeCategory\": \"Soup\",\n  \"recipeIngredient\": [\n    \"4 oz pancetta, diced\",\n    \"2 tbsp olive oil\"\n  ],\n  \"recipeInstructions\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"text\": \"Render pancetta over medium heat\u2026\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n<p>You don&#8217;t need to know any of this \u2014 the block writes it for you. But it&#8217;s worth understanding that <strong>your recipes are now first-class citizens of the structured web<\/strong>, eligible for rich results, the Google Recipe carousel, voice assistants reading instructions aloud, and Pinterest&#8217;s structured pin format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ratings\">Star ratings<\/h2>\n\n\n\n<p>The block renders five stars at the top of the card. Visitors click to rate. Ratings are stored as post meta and aggregated \u2014 the front-end shows the average and count, and these flow into the Schema as <code>aggregateRating<\/code> (only if there&#8217;s at least one rating).<\/p>\n\n\n\n<p>To prevent abuse, each visitor&#8217;s rating is throttled by a 1-year cookie per post. They can rate once. Spam protection is built in \u2014 the AJAX endpoint requires a nonce \u2014 but if you want stricter limits, we recommend a general-purpose plugin like Akismet alongside.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"print\">The Print button<\/h2>\n\n\n\n<p>The print button at the top of the card opens a print-optimized stylesheet that strips navigation, sidebars, comments, and ads \u2014 leaving just the recipe. Tested on the major browsers and on mobile (where it usually opens the OS print sheet for &#8220;Save as PDF&#8221;).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"theme-portability\">Theme portability<\/h2>\n\n\n\n<p>One of the design goals: <strong>your recipes are not locked to this theme.<\/strong> The block stores all data as block attributes inside the post content. If you switch themes later, your recipes remain \u2014 they&#8217;ll render with the Pro plugin&#8217;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.<\/p>\n\n\n\n<div class=\"wp-block-group is-callout is-callout-tip\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><p><strong>Tip:<\/strong> If you&#8217;re migrating from another recipe plugin (WP Recipe Maker, Tasty Recipes, etc.), see the <a href=\"\/food-recipes-wordpress-theme\/faq\/#migrating\">FAQ on migration<\/a> \u2014 there&#8217;s no automated importer yet, but the manual process is straightforward for sites with a handful of recipes.<\/p><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Recipe Card Block is the heart of the Pro plugin \u2014 a Gutenberg block with full Schema.org markup, ingredient and instruction tracking, ratings, and one-tap <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-pro-features"],"_links":{"self":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}