> For the complete documentation index, see [llms.txt](https://ce-docs.keywordrush.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ce-docs.keywordrush.com/egg-blocks/introduction.md). # Egg Blocks — Introduction Egg Blocks are a set of 25 purpose-built Gutenberg blocks included with Content Egg. They let you assemble a full product review, roundup, or buying guide from semantic, styled, structured blocks instead of raw paragraphs, headings, and tables. Each block is server-side rendered: what you see in the Gutenberg editor is the structure your visitors see on the frontend. Blocks come with multiple visual variants, a shared design system, and direct integration with Content Egg products. ### Contents 1. [Why Egg Blocks](#why-egg-blocks) 2. [Getting started](#getting-started) 3. [Core concepts](#core-concepts) 4. [Recipes](#recipes) *** ### Why Egg Blocks Writing product content in a generic editor usually means stitching together paragraphs, bullet lists, and shortcodes. Egg Blocks replace that ad-hoc approach with a library of editorial primitives organized into five groups: * **Article structure** — `intro`, `conclusion`, `section-header`, `toc`, `faq`, `callout`, `step-list` * **Editorial insights** — `key-takeaways`, `criteria`, `methodology`, `definitions`, `myth-fact`, `pros-cons` * **Product commerce** — `product-card`, `quick-picks`, `where-to-buy`, `comparison-table`, `verdict`, `rating-breakdown`, `specifications` * **Conversion & social proof** — `contextual-cta`, `pricing`, `testimonial`, `trust-signals` * **Navigation** — `related-posts` All blocks share consistent typography, spacing, and color tokens. You pick the block that matches the content you're writing and the theme handles the styling. #### Benefits over core Gutenberg blocks * **Semantic structure** — a `pros-cons` block carries more meaning than a two-column list; a `faq` block emits FAQPage JSON-LD automatically * **Product-aware** — product-bound blocks pull live price, availability, and CTA URL from Content Egg offers at render time — no stale prices in your content * **Consistent styling** — all blocks respect a single theme and color scheme setting * **Multiple variants** — most blocks offer 2–6 visual styles (default, compact, cards, inline, etc.) so the same data can match different article layouts * **AI-friendly** — the schema is stable and documented, so tools like the EggBlocks Writer skill can generate complete articles you copy-paste *** ### Getting started #### Inserting a block 1. Open a post or page in the WordPress block editor. 2. Click the **+** (Add block) button. 3. Type the block name (e.g. `pros cons`, `quick picks`, `faq`) into the block search, or open the **Egg Blocks** category. 4. Click the block to insert it.
**Configuring a block** Each block has a sidebar panel on the right containing its fields. Change the variant from the block toolbar or the sidebar — the block's fields stay the same, only the visual treatment changes.
#### Previewing Egg Blocks are server-side rendered, so the editor shows an accurate preview of the final layout. For product-bound blocks, you'll see live Content Egg data (prices, stock, logos) after you bind a product. *** ### Core concepts #### Variants Most blocks support 2–6 **variants** — alternative visual layouts for the same underlying data. Switching a variant never loses data. Examples: * `eggb/pros-cons` — `default`, `compact`, `highlight`, `inline` * `eggb/quick-picks` — `default`, `compact`, `alternatives`, `shelves`, `grid`, `highlight` * `eggb/faq` — `default` (accordion), `flat` (always-open list) Change the variant from the block toolbar or the sidebar. See each block's entry in the Block Reference for per-variant recommendations. #### Theme and color scheme Egg Blocks inherit two global settings: * **Theme** — controls typography, spacing, and border treatments across all blocks * **Color scheme** — `light`, `dark`, or `auto` (default: `auto`, which follows the site or reader preference) These are set once in **Content Egg → Settings → Egg Blocks settings** and apply to every block on the site. Individual blocks don't need per-block theme overrides. #### Changing block colors Egg Blocks pick up your site's color palette automatically — you don't set colors per block. To change the colors, update your theme's palette: * **Block themes** — go to **Appearance → Editor → Styles → Colors**. Changes apply site-wide, including all Egg Blocks. * **Classic themes** — most expose color controls under **Appearance → Customize → Colors**. The exact options depend on the theme. * **If neither is available** — your theme doesn't expose color controls in the dashboard. You can define or override palette colors in `theme.json`, or target the block's CSS classes with custom CSS.
#### Table of contents integration The `eggb/toc` block can run in two modes: * **Manual** — you fill in the TOC items directly. * **Auto** — the TOC collects items from other Egg Blocks on the same page. For a block to appear in an auto TOC it must have: * **Anchor** — becomes the wrapper HTML `id` and TOC link target. * **TOC label** — the text shown in the TOC. * **Include in TOC** — toggled on. Blocks that support TOC metadata include `intro`, `conclusion`, `faq`, `criteria`, `quick-picks`, `comparison-table`, `key-takeaways`, `methodology`, `section-header`, `step-list`, and `where-to-buy`. #### Product binding Product-bound blocks (`product-card`, `quick-picks`, `where-to-buy`, `comparison-table`, optionally `verdict`) connect to a Content Egg offer through a product reference. Bind products in two steps: * [Search for and add products](/set-up-products/how-to-add-products.md) to the post using the Content Egg meta box. * Click **Select Product** in the block panel and choose the product to bind to the block.
When the block renders, Content Egg resolves the reference and fills in: * Live price and currency * Stock status * Merchant logo and domain * Affiliate URL with click tracking * Product image You don't write these fields into the block yourself — they're owned by Content Egg and refreshed on a schedule. Editorial fields (your custom title, description, badge, chips, score) are yours to override. #### Rich text Some fields accept a small subset of inline HTML: ``, ``, ``, ``, and basic lists where the block permits. The renderer strips anything outside the allowed subset — don't paste arbitrary HTML, media, or scripts into rich-text fields. *** ### Recipes Common article types and the block sequences that work best for each. Use these as a starting point — swap variants and adjust the flow to fit your content. #### Single-product review ``` intro → key-takeaways (cards) → product-card (featured) → specifications → pros-cons (default) → rating-breakdown (default) → verdict (summary) → faq → conclusion ``` Use when you're reviewing one product in depth. #### Product roundup ("Best X") ``` intro → toc → key-takeaways → quick-picks (default) → repeated [section-header (editorial) + product-card + pros-cons (compact)] per product → comparison-table (default) → criteria (default, "how we picked") → faq → conclusion ``` Use for "best N of" listicles with 5+ products. #### Buying guide ``` intro → toc → criteria (default) → methodology → definitions → quick-picks (highlight) → faq → conclusion ``` Use when educational framing matters more than a specific product ranking. #### How-to / tutorial ``` intro (compact) → key-takeaways (inline) → step-list (default or cards) → callout (tip or warning) → faq → conclusion (compact) ``` Use for instructional or step-by-step content. #### Head-to-head comparison ``` intro → comparison-table (versus) → pros-cons (highlight) per contender → verdict (default) → faq ``` Use when comparing exactly two products. #### Explainer / informational ``` intro → toc (compact) → definitions → myth-fact (inline) → key-takeaways → conclusion ``` Use for category or concept explainers that don't recommend specific products.