Interactive · Gutenberg
Bingo Card block for WordPress
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
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
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Inspector panels on this block: Content, Game Settings. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Interactive → search “Bingo Card” (block name `blockenberg/bingo-card` in block.json). Style it in the sidebar after insert.
How to use Bingo Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Bingo Card”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Subtitle”, “Show Title”, “Show Subtitle”.
- 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 |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Bingo!. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Mark called numbers on your card. Saved as `subtitle`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show Number Caller | On/off toggle in the inspector. On by default. Saved as `showCaller`. |
| Show Called Numbers List | On/off toggle in the inspector. On by default. Saved as `showCalledList`. |
| Auto-Call Numbers | On/off toggle in the inspector. Off by default. Saved as `autoCall`. |
| Auto-Call Interval (seconds) | Numeric range control in the inspector. Range 2–30. block.json default: 5. Saved as `autoCallInterval`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Subtitle (Subtitle Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtitleTypo`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–900. block.json default: 600. Saved as `contentMaxWidth`. |
| Accent Color | Color control in the inspector. block.json default: #f59e0b. Saved as `accentColor`. |
| Marked Cell Color | Color control in the inspector. block.json default: #f59e0b. Saved as `markedColor`. |
| Bingo Win Color | Color control in the inspector. block.json default: #22c55e. Saved as `bingoColor`. |
| FREE Space Color | Color control in the inspector. block.json default: #6366f1. Saved as `freeColor`. |
| Header Background | Color control in the inspector. block.json default: #1e3a5f. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Cell Background | Color control in the inspector. block.json default: #ffffff. Saved as `cellBg`. |
| Cell Text | Color control in the inspector. block.json default: #1f2937. Saved as `cellColor`. |
| Section Background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Title Color | Color control in the inspector. block.json default: #1e3a5f. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- JavaScript functions that perform the math: generateCard.
When this is the right block
- Interactive 5×5 Bingo card with number calling, win detection, and celebration animations — that is the job of Bingo Card, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about bingo, game, card.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
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 Bingo Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Bingo Card”. It sits under Interactive. After insert, open Content and set “Content — Title”, “Subtitle”, “Show Title”, “Show Subtitle”.
Does Bingo Card need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Bingo Card Gutenberg block free?
Yes. Bingo Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Bingo Card 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: Content, Game Settings).
Related interactive blocks
Snake Game
Classic Snake game playable in the browser. Keyboard and on-screen touch controls, high-score tracking, multiple speed levels and color themes.
Tic-Tac-Toe
Playable Tic-Tac-Toe game with AI opponent, score tracking, custom symbols, and multiple difficulty modes.
Trivia Game
A timed multiple-choice trivia game with built-in questions across Science, History, Geography, and Pop Culture categories.
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Dice Roller
Interactive dice roller supporting d4, d6, d8, d10, d12, d20 and d100. Roll multiple dice, see individual results, totals, and past roll history.
Interactive Steps
Step-by-step wizard or process block with clickable numbered steps that reveal different content panels.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Bingo Card from the Gutenberg inserter.