Interactive · Gutenberg

Word Scramble block for WordPress

Interactive word unscramble game with categories, hints, scoring, and timer. Multiple difficulty levels.

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.

Get Blockenberg

What it actually does

Interactive word unscramble game with categories, hints, scoring, and timer. Multiple difficulty levels.

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 “Word Scramble” (block name `blockenberg/word-scramble` in block.json). Style it in the sidebar after insert.

How to use Word Scramble block for WordPress

  1. Install Blockenberg. Install from WordPress.org and activate the plugin.
  2. Insert the block. Edit a page, click +, search for “Word Scramble”, insert it. Category: Interactive.
  3. Configure inspector controls that exist on this block. Open Content. Set “Default Category”, “Default Difficulty”, “Time Limit (seconds)”, “Hints Allowed”.
  4. 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

ControlWhat the code does
Default CategorySelect control; the chosen value is saved on the block. block.json default: animals. Saved as `defaultCategory`.
Default DifficultySelect control; the chosen value is saved on the block. block.json default: medium. Saved as `defaultDifficulty`.
Time Limit (seconds)Numeric range control in the inspector. Range 20–300. block.json default: 60. Saved as `timeLimit`.
Hints AllowedNumeric range control in the inspector. Range 0–10. block.json default: 3. Saved as `hintsAllowed`.
Show TimerOn/off toggle in the inspector. On by default. Saved as `showTimer`.
Show ScoreOn/off toggle in the inspector. On by default. Saved as `showScore`.
Show StreakOn/off toggle in the inspector. On by default. Saved as `showStreak`.
Accent ColorColor control in the inspector. block.json default: #f59e0b. Saved as `accentColor`.
Correct ColorColor control in the inspector. block.json default: #22c55e. Saved as `correctColor`.
Wrong ColorColor control in the inspector. block.json default: #ef4444. Saved as `wrongColor`.
Section BackgroundColor control in the inspector. block.json default: #fffbeb. Saved as `sectionBg`.
Card BackgroundColor control in the inspector. block.json default: #ffffff. Saved as `cardBg`.
Title ColorColor control in the inspector. block.json default: #92400e. Saved as `titleColor`.

What the front-end script actually does

When this is the right block

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 Word Scramble block in WordPress?

Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Word Scramble”. It sits under Interactive. After insert, open Content and set “Default Category”, “Default Difficulty”, “Time Limit (seconds)”, “Hints Allowed”.

Does Word Scramble 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 Word Scramble Gutenberg block free?

Yes. Word Scramble ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.

Can I style Word Scramble 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

Get Blockenberg

Install Blockenberg from WordPress.org, then insert Word Scramble from the Gutenberg inserter.

Get Blockenberg