Blocks for GitHub - WordPress Plugin

When I hire developers, one of the first things I look at is their GitHub profile. In fact, there’s a field in our application form specifically for the GitHub profile URL. If that field is blank, it’s hard for me to look further unless they have other excellent traits.

A GitHub profile is an excellent showcase of a developer’s expertise, experience, and contributions. So, why not proudly display it on your WordPress site?

Until now, there has been no great way to do this, so I created the Blocks for GitHub plugin:

The “Blocks for GitHub” WordPress.org profile icon

Creating the Plugin

I initially thought there had to be a plugin already created for this that I could easily install and use. While one existed, it was umm…. lackluster at best – I couldn’t use it.

This left me with two options: create one myself or attempt to recreate my GitHub content in a non-dynamic way. I knew I wanted something that would update dynamically over time, so that left me with option 1: create a plugin allowing users to display GitHub content via a WordPress block.

Introducing Blocks for GitHub

This niche plugin allows developers, organizations, and more to pull in content from GitHub and display it nicely on their websites. Currently, the plugin includes blocks for displaying repository and organization content.

The block showcasing a GitHub profile.

No API Key Required

One key decision I made early on was to skip API key requirements. While I considered requiring them, it added too much friction to the user experience. Instead, the plugin uses public GitHub API endpoints, making it much more accessible for users.

The Development Journey

After getting the initial code ready, I submitted it to WordPress.org’s plugin review team. A few days later, I received approval to push the block live.

Then… life caught up with me.

I knew there were a few final touches I wanted to add before launch. Creating the content, logo, screenshots, and imagery for WordPress.org wasn’t a small task. I also needed to implement a GitHub action-based deployment process.

So, the plugin sat there for more than a year. “Launch Blocks for GitHub” remained on my task list, waiting for the motivation to complete the final tasks for release. Finally, during this year’s holiday downtime, I carved out enough time to finish and launch it.

Check out the block view for WordPress’ GitHub repo:

Development Decisions and Learnings

Am I completely happy with the code? Absolutely not. It could use refactoring, organization, and some cleanup. But that doesn’t mean it’s not fast and lean. The development process taught me valuable lessons about block development:

  1. Server-Side vs. Client-Side Rendering: I went back and forth on this decision. At one point, I completely refactored the plugin to be fully client-side before reverting to server-side rendering.
  2. API Authentication: The decision to skip API keys came from prioritizing user experience. Requiring keys would mean asking users to grant certain permissions – a step that could make some uncomfortable and affect adoption.
  3. Design Decisions: Looking back, I should have used Tailwind CSS, which I’ve grown fond of over the last year. While the current design is clean, there’s room for improvement with color schemes, layouts, and dark mode support.
  4. PHP Implementation: The backend code is truly MVP (Minimum Viable Product), and I look forward to refactoring it soon.

Current Features

The plugin currently has two main blocks:

GitHub Profile Block

  • Profile picture and bio display
  • Location and website information
  • Follow button with follower count
  • Customizable display options

Repository Block

  • Repository description and statistics
  • Star count and fork information
  • Last update timestamps
  • Customizable repository display options

The Road Ahead

The next big feature I’m excited about is a GitHub contribution heatmap that you can embed on your website – you know, the one that displays contributions over time with various shades of green depending on the number of commits. I think it would look awesome on a portfolio or resume website, with options to span full width, be constrained, or go vertical.

Another feature on my radar is Gist integration. Gists are incredibly popular for embedding code blocks on websites, and I want to add a dedicated block that makes this process seamless. The plan is to let users select any Gist and embed it with proper code highlighting. I’m considering including various display options like customizable font sizes and color schemes – giving developers full control over how their code snippets appear on their sites. This would be particularly useful for tutorial sites and development blogs where code presentation really matters.

Community Response and Future Plans

When I announced it last week, the response was encouraging. The plugin was picked up by various newsletters and reposted by WordPress influencers, giving me hope for growing active installs over time.

I want to be clear about one thing: this plugin will always be free. That’s my pledge. If you’re interested in contributing, it’s entirely open source – check out the GitHub repository and contribution guidelines.

Whether it becomes popular or not, I’m committed to maintaining it and keeping the lights on. The positive initial reception suggests there’s genuine interest in the WordPress community for better GitHub integration.

Similar Posts