A simple custom block delivered in a plugin.
Update: Andrew asked about the preview of blocks within the editor. I read up about preview block template files and I created a preview version of the accordion block and have it show the accordion open. I had to update gcb-accordion-block.php to check for the preview block template file.
On Facebook Carrie Dils asked members whether they would be interested in a tutorial on using Genesis Custom Blocks plugin. I decided to try use it to create a simple block.
Accordion block
Last year I used Advanced Custom Fields Pro to create a Flip Card block. The initial part where you set up the fields is very similar.
For an accordion block I just have a title field and a content field. The content field is not a WYSIWYG field as that is only available in the Pro version of the plugin.
I set an icon and a category and published the block.
I then needed to create a file in the theme: blocks/block-accordion-block.php. I kept this very simple.
I use the <details> tag because it delivers accordion behaviour without needing JavaScript (I found this when I saw the markup that the CoBlocks accordion block generated). I added classes to the <summary> and <div> elements to allow for styling though they aren’t really necessary.
Using the block
When writing a page or post you can choose the block like any other. You will be presented with the block’s fields.
The blocks look like they will on the front end because they have default browser styling. For more complicated custom blocks you can provide a preview template file (preview-accordion-block.php).
On the front end
This is how the blocks are displayed on the front end. I have clicked the first block title to expand it.
In a plugin folder
The Genesis Custom Blocks plugin expects that the block template file to be in a subdirectory of the theme. To make it easier to distribute the block code I chose to put it in a plugin. For this to work I needed to tell the plugin the new location of the template file. I used the ‘genesis_custom_blocks_template_path’ filter for this.
It only changes the template path for the Accordion block.
My plugin has 2 files:
- gcb-accordion-block.php
- blocks/block-accordion-block.php
Multiple template paths
In response to Carrie’s comment I wrote another quick plugin and I put its template file in the subdirectory. The block is called “Title Subtitle block” with 2 text fields, Title and Subtitle.
I tweaked the plugin to only change the template path for ‘blocks/block-title-subtitle-block.php‘
When I view all blocks I see the two different template paths.
Onward
Like with ACF Pro the world is now your oyster. Your block template file can be simple or quite complicated e.g. generating different markup based on field settings.
Nice, Damien. I’ve gotta say that you just introduced me to the HTML details tag! Awesome!
I agree with you about including the block templates via a plugin. Here’s some alternative code I snagged from Ryan Kienstra on making that happen. Same outcome as your code, just a little simpler.
https://gist.github.com/cdils/ee73652613a90bd0a3c2d1f1ab3be041
Cheers, Carrie
@Carrie – I only found out about the ‘details’ tag because CoBlocks provides an accordion block and I was running that on my test site.
Ryan’s code will break things if you have multiple plugins each providing the template file for its block. I just tried this morning and checking $template_names in the filter allows me to have multiple different template paths. I’ve updated the post with a section about this and included a screenshot of the ‘All Blocks’ listing with different template paths for each block.
Ah! Good to know — thanks for digging into it and sharing.
I’d like to know how the preview blocks should be rendered. Are these previewed on the back end? I see pictures on the left when you hover over it, is this the preview? Just trying to figure out what the preview block example would be but everyone seems to skip over it.
@Andrew – Thanks for your question – I’ve discovered preview blocks!
When you are editing a page you cannot interact with a Genesis Custom Block, so, for the Accordion block you need to preview it to try it out. This is a limitation on how Genesis Custom Blocks is designed.
The preview block is rendered as the block template file shows it. For the Accordion block you see the closed accordion.
Now, after investigating further I found that Genesis Custom Blocks looks for a preview block template file. I looked into how to make the accordion block (the ‘details’ tag) open and found that it supports an ‘open’ attribute.I created a preview version of the accordion block and have it show the accordion open.
I had to update gcb-accordion-block.php to check for the preview block template file.