# Odds Table Block

`💁 since version 1.7` DinOdds adds an **Odds Table** block (`dinodds/odds`, shown in the editor as **DinOdds Odds**) to the block editor. It shows the same table as the [`[odds]` shortcode](https://docs.affkraft.com/dinodds/plugin-shortcodes), with a settings sidebar and a live preview, so you don't need to write attributes by hand.

## Insert the block

1. Edit a post or page and click the **+** inserter (or type `/odds` on an empty line).
2. Search for **DinOdds Odds**. It is in the **Widgets** category.
3. Choose a league in the block's sidebar settings. Until you do, the block shows a placeholder asking you to choose one.

You can also let DinOdds create a draft post with the block already in it during the [first-run setup](https://docs.affkraft.com/dinodds/plugin-setup).

## Block settings

Select the block and open the sidebar (the settings icon in the top right). The settings are in two panels.

### Odds table panel

| Setting | What it does |
| --- | --- |
| **League** | The league whose odds you want to show. Required. Changing the league clears the selected match. |
| **Match** | Choose **All matches** (default) or one upcoming game of the selected league, listed as `Away @ Home (date)`. Disabled until a league is chosen. |
| **Style** | **Style 1** or **Style 2**. See [Shortcode styles](https://docs.affkraft.com/dinodds/plugin-shortcodes#shortcode-styles). |
| **Layout** | **Top** or **Inline**: where the sportsbook links appear. Hidden when Style 2 is selected, because Style 2 has no layout option. |
| **Odds type** | The odds type shown first: **Spread**, **Moneyline** or **Total**. |
| **Show type selector** | Whether visitors can switch between the odds types. |

### Bookies panel

A checkbox for each sportsbook in your feed, in the saved order from the [Sportsbooks tab](https://docs.affkraft.com/dinodds/affiliate-settings); tables show the selected sportsbooks in that order too. Leave all of them unchecked to show every sportsbook.

### Defaults

Settings you don't change in the block follow the site-wide defaults from the [Display tab](https://docs.affkraft.com/dinodds/colors). The sidebar shows the current default value. Once you change a setting in the block, that table keeps its own value even if the defaults change later.

## Live preview

Once a league is chosen, the block shows the real table in the editor, using your cached odds, and updates it shortly after each change. The preview is read-only: you can't click inside it. The front-end script isn't loaded in the editor, so the arrows and the type selector only work on the live page.

## Alignment and CSS class

* **Alignment.** The block supports **Wide** and **Full width** alignment, if your theme supports them.
* **Additional CSS class(es).** Open the **Advanced** section of the sidebar to add your own class. It is added to the block's wrapper element around the table. The first class you enter is also added to the table itself as `df-odds--{class}`, the same as the shortcode's `class` attribute, so you can target either.

## Convert an existing shortcode

If a post already has an `[odds]` shortcode in a **Shortcode** block, select that block and use the block toolbar's transform button to change it to **DinOdds Odds**. The league, sportsbooks, style, layout, type, selector, away and home values are carried over, and the shortcode's `class` becomes the block's Additional CSS class. Only a Shortcode block whose text starts with `[odds` offers this.

Existing shortcodes keep working, there's no need to convert them.

## Notes

* The block is rendered on the server as a placeholder, and the visitor's browser loads the odds. See [REST endpoint](https://docs.affkraft.com/dinodds/rest-api) and [caching](https://docs.affkraft.com/dinodds/troubleshooting#caching).
* Which posts use a block or shortcode is listed in the **Used on** section of the [Overview tab](https://docs.affkraft.com/dinodds/plugin-settings#overview).
* AI assistants can also insert and edit the block in draft posts: see [AI & Abilities](https://docs.affkraft.com/dinodds/ai).