Interactive · Gutenberg
Tetris Game block for WordPress
A fully playable Tetris game block. Supports keyboard and on-screen controls, levels, score, and rich style customization.
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
A fully playable Tetris game block. Supports keyboard and on-screen controls, levels, score, and rich style customization.
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 “Tetris Game” (block name `blockenberg/tetris` in block.json). Style it in the sidebar after insert.
How to use Tetris Game block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tetris Game”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Content. Set “Starting Level”, “Show Ghost Piece”, “Show Next Piece”, “Show Score”.
- 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 |
|---|---|
| Starting Level | Numeric range control in the inspector. Range 1–15. block.json default: 1. Saved as `startLevel`. |
| Show Ghost Piece | On/off toggle in the inspector. On by default. Saved as `showGhost`. |
| Show Next Piece | On/off toggle in the inspector. On by default. Saved as `showNext`. |
| Show Score | On/off toggle in the inspector. On by default. Saved as `showScore`. |
| Show Level | On/off toggle in the inspector. On by default. Saved as `showLevel`. |
| Show Lines | On/off toggle in the inspector. On by default. Saved as `showLines`. |
| Cell Size (px) | Numeric range control in the inspector. Range 18–40. block.json default: 30. Saved as `cellSize`. |
| Section Background | Color control in the inspector. block.json default: #0f0e17. Saved as `sectionBg`. |
| UI Background | Color control in the inspector. block.json default: #0f0e17. Saved as `bgColor`. |
| Board Background | Color control in the inspector. block.json default: #1a1a2e. Saved as `boardBg`. |
| Grid Lines | Color control in the inspector. block.json default: #16213e. Saved as `gridColor`. |
| Ghost Piece | Color control in the inspector. block.json default: rgba(255,255,255,0.12). Saved as `ghostColor`. |
| Title / Text | Color control in the inspector. block.json default: #fffffe. Saved as `titleColor`. |
| Accent | Color control in the inspector. block.json default: #ff8906. Saved as `accentColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
- Keyboard handlers move focus between items.
When this is the right block
- A fully playable Tetris game block. Supports keyboard and on-screen controls, levels, score, and rich style customization — that is the job of Tetris Game, not a generic content block.
- Use it when you need the editor control labeled “Starting Level”, which exists on this block’s inspector.
- It matches pages about tetris, game, puzzle.
- Inserter grouping: quizzes, games, and click-to-reveal experiences.
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 Tetris Game block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tetris Game”. It sits under Interactive. After insert, open Content and set “Starting Level”, “Show Ghost Piece”, “Show Next Piece”, “Show Score”.
What makes Tetris Game different from other Blockenberg blocks?
A fully playable Tetris game block. Supports keyboard and on-screen controls, levels, score, and rich style customization. Inspector labels on this block include “Starting Level”, “Show Ghost Piece”, “Show Next Piece”, “Show Score”.
Is the Tetris Game Gutenberg block free?
Yes. Tetris Game ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tetris Game 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
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Memory Game
Interactive card-flip memory matching game with emoji themes, difficulty levels, move counter, timer, and best score tracking.
Snake Game
Classic Snake game playable in the browser. Keyboard and on-screen touch controls, high-score tracking, multiple speed levels and color themes.
Sudoku
Interactive Sudoku puzzle with difficulty levels, hints, mistake tracking, and timer. Full WYSIWYG preview in editor.
Word Scramble
Interactive word unscramble game with categories, hints, scoring, and timer. Multiple difficulty levels.
Bingo Card
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Tetris Game from the Gutenberg inserter.