Blog · Gutenberg
Nutrition Label block for WordPress
Display an FDA-style Nutrition Facts panel for recipes and food products with full nutrient fields, daily value percentages, and custom styling.
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
Display an FDA-style Nutrition Facts panel for recipes and food products with full nutrient fields, daily value percentages, and custom styling.
Inspector panels on this block: Serving Info, Fats, Carbs & Other, Vitamins & Minerals, Display, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Serving Size” (e.g. 1 cup (240g)).
Where to find it
Gutenberg inserter → Blog → search “Nutrition Label” (block name `blockenberg/nutrition-label` in block.json). Style it in the sidebar after insert.
How to use Nutrition Label block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Nutrition Label”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Serving Info. Set “Food Name (optional)”, “Serving Size”, “Servings Per Container”, “Calories”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Food Name (optional) | Text field in the inspector. Saved as `foodName`. |
| Serving Size | Text field in the inspector. e.g. 1 cup (240g). block.json default: 1 cup (240g). Saved as `servingSize`. |
| Servings Per Container | Text field in the inspector. block.json default: 2. Saved as `servingsPerContainer`. |
| Calories | Text field in the inspector. |
| Total Fat (g) | Text field in the inspector. |
| Saturated Fat (g) | Text field in the inspector. |
| Trans Fat (g) | Text field in the inspector. |
| Show Poly/Mono Fat | On/off toggle in the inspector. Off by default. Saved as `showPolyMono`. |
| Polyunsaturated Fat (g) | Text field in the inspector. |
| Monounsaturated Fat (g) | Text field in the inspector. |
| Cholesterol (mg) | Text field in the inspector. |
| Sodium (mg) | Text field in the inspector. |
| Total Carbohydrate (g) | Text field in the inspector. |
| Dietary Fiber (g) | Text field in the inspector. |
| Total Sugars (g) | Text field in the inspector. |
| Show Added Sugars | On/off toggle in the inspector. On by default. Saved as `showAddedSugars`. |
| Added Sugars (g) | Text field in the inspector. |
| Protein (g) | Text field in the inspector. |
| Show Vitamins Section | On/off toggle in the inspector. On by default. Saved as `showVitamins`. |
| Vitamin D (mcg) | Text field in the inspector. |
| Calcium (mg) | Text field in the inspector. |
| Iron (mg) | Text field in the inspector. |
| Potassium (mg) | Text field in the inspector. |
| Show Footnote | On/off toggle in the inspector. On by default. Saved as `showFootnote`. |
| Daily Value Reference (cal) | Text field in the inspector. block.json default: 2000. Saved as `dvRef`. |
| Base Font Size (px) | Numeric range control in the inspector. Range 10–20. block.json default: 14. Saved as `fontSize`. |
| Label Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Text Color | Color control in the inspector. block.json default: #000000. Saved as `accentColor`. |
| Border Color | Color control in the inspector. block.json default: #000000. Saved as `borderColor`. |
| Calorie Number | Color control in the inspector. block.json default: #000000. Saved as `calorieColor`. |
| % DV Color | Color control in the inspector. block.json default: #000000. Saved as `dvColor`. |
| Section Background | Color control in the inspector. Saved as `containerBg`. |
| Label Width (px) | Numeric range control in the inspector. Range 200–600. block.json default: 340. Saved as `labelWidth`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 3. Saved as `borderWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 0. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Display an FDA-style Nutrition Facts panel for recipes and food products with full nutrient fields, daily value percentages, and custom styling — that is the job of Nutrition Label, not a generic content block.
- Use it when you need the editor control labeled “Food Name (optional)”, which exists on this block’s inspector.
- It matches pages about nutrition, calories, food.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
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 Nutrition Label block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Nutrition Label”. It sits under Blog. After insert, open Serving Info and set “Food Name (optional)”, “Serving Size”, “Servings Per Container”, “Calories”.
What makes Nutrition Label different from other Blockenberg blocks?
Display an FDA-style Nutrition Facts panel for recipes and food products with full nutrient fields, daily value percentages, and custom styling. Inspector labels on this block include “Food Name (optional)”, “Serving Size”, “Servings Per Container”, “Calories”.
Is the Nutrition Label Gutenberg block free?
Yes. Nutrition Label ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Nutrition Label 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: Serving Info, Fats, Carbs & Other, Vitamins & Minerals).
Related blog blocks
Recipe Card
Full-featured recipe card with ingredients, steps, nutrition facts, ratings, and Recipe JSON-LD structured data.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Nutrition Label from the Gutenberg inserter.