Developers · Gutenberg
GitHub Card block for WordPress
Display a GitHub user profile or repository card with live stats fetched from the GitHub API.
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
Display a GitHub user profile or repository card with live stats fetched from the GitHub API.
Inspector panels on this block: GitHub Source, Display, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Card Type” options: Repository, User Profile; “Repository Name” (Just the repo name, not the full URL); “Cache Duration (minutes)” (Stores API response in localStorage to avoid rate limits); “Layout — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Developers → search “GitHub Card” (block name `blockenberg/github-card` in block.json). Style it in the sidebar after insert.
How to use GitHub Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “GitHub Card”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open GitHub Source. Set “Card Type”, “GitHub Username”, “Repository Name”, “Cache Duration (minutes)”.
- Check the published page. The view script reads HTML data attributes: data-lang, 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 |
|---|---|
| Card Type | Select control; the chosen value is saved on the block. Options: Repository; User Profile. block.json default: repo. Saved as `mode`. |
| GitHub Username | Text field in the inspector. Saved as `username`. |
| Repository Name | Text field in the inspector. Just the repo name, not the full URL. Saved as `repoName`. |
| Cache Duration (minutes) | Numeric range control in the inspector. Stores API response in localStorage to avoid rate limits. Range 5–1440. block.json default: 60. Saved as `cacheMinutes`. |
| Open Links in New Tab | On/off toggle in the inspector. On by default. Saved as `openInNewTab`. |
| Show Avatar | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Show Bio / Description | On/off toggle in the inspector. On by default. Saved as `showBio`. |
| Show Stats | On/off toggle in the inspector. On by default. Saved as `showStats`. |
| Show Language | On/off toggle in the inspector. On by default. Saved as `showLanguage`. |
| Show Topics | On/off toggle in the inspector. On by default. Saved as `showTopics`. |
| Show Last Updated | On/off toggle in the inspector. On by default. Saved as `showLastUpdate`. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align2`. |
| Max Width (px) | Numeric range control in the inspector. Range 280–800. block.json default: 480. Saved as `maxWidth`. |
| Padding (px) | Numeric range control in the inspector. Range 12–48. block.json default: 24. Saved as `padding`. |
| Corner Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Avatar Size (px) | Numeric range control in the inspector. Range 32–120. block.json default: 64. Saved as `avatarSize`. |
| Card Background | Color control in the inspector. block.json default: #0d1117. Saved as `cardBg`. |
| Heading / Name | Color control in the inspector. block.json default: #e6edf3. Saved as `headingColor`. |
| Description | Color control in the inspector. block.json default: #8b949e. Saved as `descColor`. |
| Meta / Stats Label | Color control in the inspector. block.json default: #8b949e. Saved as `metaColor`. |
| Link / Accent | Color control in the inspector. block.json default: #58a6ff. Saved as `linkColor`. |
| Stat Tile Background | Color control in the inspector. block.json default: #161b22. Saved as `statBg`. |
| Colors — Border | Color control in the inspector. block.json default: #30363d. Saved as `borderColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-lang, data-opts.
- It writes to localStorage in the visitor’s browser, not to wp_options.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- Display a GitHub user profile or repository card with live stats fetched from the GitHub API — that is the job of GitHub Card, not a generic content block.
- Use it when you need the editor control labeled “Card Type”, which exists on this block’s inspector.
- It matches pages about github, card, repository.
- Inserter grouping: docs sites, utilities, and developer landing pages.
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 GitHub Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “GitHub Card”. It sits under Developers. After insert, open GitHub Source and set “Card Type”, “GitHub Username”, “Repository Name”, “Cache Duration (minutes)”.
Where does GitHub Card store visitor state?
In localStorage on that browser. Clearing site data resets it. It is not a WordPress user meta field unless render.php says so.
Is the GitHub Card Gutenberg block free?
Yes. GitHub Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style GitHub 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: GitHub Source, Display, Layout).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
Cron Builder
Visual cron expression builder. Edit each field individually, see a human-readable description, choose from common presets, preview next run times, and copy the final expression.
Hash Generator
Generate MD5, SHA-1, SHA-256 and SHA-512 cryptographic hashes from any text input. Useful for developers, security professionals and data integrity checks.
JSON Formatter
Validate, format (pretty-print), and minify JSON with syntax highlighting and one-click copy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert GitHub Card from the Gutenberg inserter.