Custom blocks can be created with the help of plug-in library which I’m not a fan of. We can also use ACF which is probably pretty quick and easy but I’m a developer I want to code things from scratch and I use plugins.

So I’ve been learning to build custom Gutenberg plugins from scratch with React.

I followed the two examples shown in the become a wordpress developer course and the first one was text-based only multi choice question and answer block. Really cool some great concepts but no image.

The second block had an image but it was pulling the data from a custom post type. My whole reason for wanting to create a custom block is to avoid a custom post type. This block was more about showing how to make a to a relationship between a block and another piece of content, in this case a feature professor.

So what about adding an image? What I want to do is create a teams page That lists out a bunch of teams each with an image a title and a description. I don’t want to use a built-in block because I want to have more flexibility over the design. Instead of having a custom post type, I want the user to be able to add a block add a team block on the teams page. They should be able to edit the content and select the photo from the media library.

Here is the first article I read regarding adding the media file uploader to a custom block.

The channel “Alessandro Castellani” has some good content in lusing the media upload as a background-image with an overlay with custom range slider.

After spending a few hours going down this path to create a custom teams block that just had an image title and description, I implemented with a custom post type using advanced custom fields and rendered in a PHP template I was done inside of an hour.