Update: With the upcoming release of WordPress 5.0, we have recently updated the Organic Profile Block plugin and this tutorial for Gutenberg 4.2.0+ compatibility.
A rebirth of WordPress is underway. Like it or not, Gutenberg is coming, and it is going to change things. So, with all the buzz about Gutenberg, we decided to build our first custom block. In this post I’ll outline how the block was created, the resources used, and my feelings on the subject.
Let me preface this post by stating that I’m primarily a WordPress theme designer and developer. I’ve dabbled in a few plugins as well, but my JavaScript experience is limited to simple jQuery.
When I discovered that blocks were primarily developed in the ES5 and ESNext JavaScript languages, I was intimidated. Despite my ignorance of JavaScript and the lack of documentation on blocks, I managed to build a custom block. I learned a great deal in the process.
A Custom Block For Profiles
I found a handful of helpful resources for building custom blocks. However, the examples were extremely simple. I wanted to create something more practical. So, I settled on building a Profile Block for displaying a personal profile with social media links.
The Profile Block features an image, name, title, bio and social media links. It provided the opportunity to create a “RichText” block with custom controls and inspector options. Essentially, it utilizes every aspect of blocks.
The Profile Block plugin is available on Github and the WordPress plugin directory.
