Interactive · Gutenberg
2048 Game block for WordPress
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
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
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Inspector panels on this block: Content, Board Settings. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Interactive → search “2048 Game” (block name `blockenberg/2048-game` in block.json). Style it in the sidebar after insert.
How to use 2048 Game block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “2048 Game”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Content. Set “Board Size (px)”, “Tile Radius (px)”, “Grid Gap (px)”, “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 |
|---|---|
| Board Size (px) | Numeric range control in the inspector. Range 260–560. block.json default: 380. Saved as `boardSize`. |
| Tile Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `tileRadius`. |
| Grid Gap (px) | Numeric range control in the inspector. Range 4–20. block.json default: 10. Saved as `gridGap`. |
| Show Score | On/off toggle in the inspector. On by default. Saved as `showScore`. |
| Show Best Score | On/off toggle in the inspector. On by default. Saved as `showBestScore`. |
| Animate Tiles | On/off toggle in the inspector. On by default. Saved as `animateTiles`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtitleTypo`. |
| Grid Background | Color control in the inspector. block.json default: #bbada0. Saved as `gridBg`. |
| Empty Tile | Color control in the inspector. block.json default: #cdc1b4. Saved as `tileBg`. |
| Section Background | Color control in the inspector. block.json default: #fef9ee. Saved as `sectionBg`. |
| Title / Text | Color control in the inspector. block.json default: #776e65. Saved as `titleColor`. |
| Score Header | Color control in the inspector. block.json default: #bbada0. Saved as `scoreHeaderBg`. |
| New Game Button | Color control in the inspector. block.json default: #8f7a66. Saved as `newGameBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- It writes to localStorage in the visitor’s browser, not to wp_options.
- Keyboard handlers move focus between items.
- JavaScript functions that perform the math: makeScoreBox, updateScoreUI.
When this is the right block
- The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile — that is the job of 2048 Game, not a generic content block.
- Use it when you need the editor control labeled “Board Size (px)”, which exists on this block’s inspector.
- It matches pages about 2048, game, puzzle.
- 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 2048 Game block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “2048 Game”. It sits under Interactive. After insert, open Content and set “Board Size (px)”, “Tile Radius (px)”, “Grid Gap (px)”, “Show Score”.
Does 2048 Game 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 2048 Game Gutenberg block free?
Yes. 2048 Game ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style 2048 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, Board Settings).
Related interactive blocks
Memory Game
Interactive card-flip memory matching game with emoji themes, difficulty levels, move counter, timer, and best score tracking.
Sudoku
Interactive Sudoku puzzle with difficulty levels, hints, mistake tracking, and timer. Full WYSIWYG preview in editor.
Tetris Game
A fully playable Tetris game block. Supports keyboard and on-screen controls, levels, score, and rich style customization.
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.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert 2048 Game from the Gutenberg inserter.