# Egg Blocks — Introduction

Egg Blocks are a set of 21 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 four 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`
* **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.

<div><figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2F6XCS51UmjIS6gM6L7gJb%2Fimage.png?alt=media&#x26;token=ee1b295e-c264-4ea4-b79e-21e07706d19c" alt=""><figcaption></figcaption></figure> <figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FrmquwwtcDlBZ2hCGB4LY%2Fimage.png?alt=media&#x26;token=faf645eb-2eaa-4711-88ad-242c743f0839" alt=""><figcaption></figcaption></figure></div>

**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.

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FxQkjtNXkccOtvg9S48p3%2Fimage.png?alt=media&#x26;token=81d5a29c-8f9e-4f1f-b703-fe88681fd6a0" alt="" width="563"><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FCM3z9PSzFMEyQOz6BE7W%2Fimage.png?alt=media&#x26;token=1e30db90-7693-49ed-88e9-525d6f518f60" alt="" width="563"><figcaption></figcaption></figure>

#### 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 referenc&#x65;**.** Bind a product to a block in two steps:

Bind products in two steps:

* [Search for and add products](https://ce-docs.keywordrush.com/set-up-products/how-to-add-products) 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.

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2F3qHDbMVi3DwClucQHIsm%2Fimage.png?alt=media&#x26;token=6345b039-dc5a-49df-8935-0f20edb8fca7" alt=""><figcaption></figcaption></figure>

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: `<strong>`, `<em>`, `<a>`, `<code>`, 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ce-docs.keywordrush.com/egg-blocks/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.