Effects · Gutenberg
Crypto Price Ticker block for WordPress
Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval.
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
Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval.
Inspector panels on this block: Coins & Currency, Layout, Data Fields, Label. Those titles come from index.js, not from a shared template.
Behavior controls: “Coin IDs (CoinGecko, comma-separated)” (e.g. bitcoin,ethereum,solana,dogecoin); “Currency” options: USD ($), EUR (€), GBP (£), JPY (¥), BTC (₿); “Display Layout” options: Scrolling Ticker, Cards Grid, Table.
Where to find it
Gutenberg inserter → Effects → search “Crypto Price Ticker” (block name `blockenberg/stock-ticker` in block.json). Style it in the sidebar after insert.
How to use Crypto Price Ticker block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Crypto Price Ticker”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Coins & Currency. Set “Coin IDs (CoinGecko, comma-separated)”, “Currency”, “Currency Symbol”, “Refresh Interval (seconds)”.
- 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 |
|---|---|
| Coin IDs (CoinGecko, comma-separated) | Text field in the inspector. e.g. bitcoin,ethereum,solana,dogecoin. block.json default: bitcoin,ethereum,solana,cardano,dogecoin,polkadot. Saved as `coins`. |
| Currency | Select control; the chosen value is saved on the block. Options: USD ($); EUR (€); GBP (£); JPY (¥); BTC (₿); ETH (Ξ). block.json default: usd. Saved as `currency`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currencySymbol`. |
| Refresh Interval (seconds) | Numeric range control in the inspector. Range 10–3600. block.json default: 60. Saved as `refreshInterval`. |
| Display Layout | Select control; the chosen value is saved on the block. Options: Scrolling Ticker; Cards Grid; Table. block.json default: ticker. Saved as `layout`. |
| Scroll Speed (seconds/loop) | Numeric range control in the inspector. Range 10–120. block.json default: 40. Saved as `tickerSpeed`. |
| Pause on Hover | On/off toggle in the inspector. On by default. Saved as `pauseOnHover`. |
| Card Columns | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `cardColumns`. |
| Show 24h Price Change | On/off toggle in the inspector. On by default. Saved as `showChange`. |
| Show Volume | On/off toggle in the inspector. Off by default. Saved as `showVolume`. |
| Show Market Cap | On/off toggle in the inspector. Off by default. Saved as `showMarketCap`. |
| Show Coin Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show Ticker Symbol | On/off toggle in the inspector. On by default. Saved as `showSymbol`. |
| Show LIVE Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Text | Text field in the inspector. block.json default: LIVE. Saved as `labelText`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `borderRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Card Background | Color control in the inspector. block.json default: #1e293b. Saved as `cardBg`. |
| Text Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `textColor`. |
| Accent / Label | Color control in the inspector. block.json default: #38bdf8. Saved as `accentColor`. |
| Price Up (▲) | Color control in the inspector. block.json default: #22c55e. Saved as `upColor`. |
| Price Down (▼) | Color control in the inspector. block.json default: #ef4444. Saved as `downColor`. |
| Border Color | Color control in the inspector. block.json default: #334155. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval — that is the job of Crypto Price Ticker, not a generic content block.
- Use it when you need the editor control labeled “Coin IDs (CoinGecko, comma-separated)”, which exists on this block’s inspector.
- It matches pages about crypto, bitcoin, price.
- Inserter grouping: motion, overlays, and visual treatments.
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 Crypto Price Ticker block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Crypto Price Ticker”. It sits under Effects. After insert, open Coins & Currency and set “Coin IDs (CoinGecko, comma-separated)”, “Currency”, “Currency Symbol”, “Refresh Interval (seconds)”.
What makes Crypto Price Ticker different from other Blockenberg blocks?
Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval. Inspector labels on this block include “Coin IDs (CoinGecko, comma-separated)”, “Currency”, “Currency Symbol”, “Refresh Interval (seconds)”.
Is the Crypto Price Ticker Gutenberg block free?
Yes. Crypto Price Ticker ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Crypto Price Ticker 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: Coins & Currency, Layout, Data Fields, Label).
Related effects blocks
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Rotating Banner
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Crypto Price Ticker from the Gutenberg inserter.