I created a video on selling and delivering plugin updates via FluentCart, driven by the number of people looking for a solution. Given Evato’s recent changes, for this video, I needed several different bits of content I wanted to share with everyone, especially as I had built my page with bricks and used the instant checkout links in FluentCart.
For those that don’t know, the instant checkout link shortcode/block is default-styled, so what I had to do to get it to work how I wanted in Bricks was strip out the block styles, and I did this using a snippet, so I needed to share this as I expected this to be the most asked question for those following along with the tutorial.
I have been adding code snippets to sites for a long time using a code block, but a lot of my tutorial code lives in a gist, and I am just replicating that gist on this site, for sharing with viewers, while I want them to come to TechArticles, sign up, and get Newsletters I didn’t want to have to replicate full snippets especially when some of my more complex ones are over 1000 lines in length.
I have previously tried embedding Gists on this site, and it hasn’t ended well at all, but I dedicated a bit of time to it and have created a custom shortcode and custom block for just this purpose. Preliminarily, I am quite happy with the base version I have created, which has a really good option set for how I work.
Block Settings
I have been able to capture all the settings I feel needed, and as well as picking which of the gist files to display, I can also select the revision, which is particularly useful if I want to freeze a code block in place. It has caching for all but the embed itself, i.e., the revisions and files.
It looks stylish, and I’ve even been able to add a nice little copy button for those who don’t want to leave the site when viewing gists. The view on GitHub settings works as per a normal gist embed.
I also allowed custom classes for the link and the wrapper, allowing the ability to set the custom height of the embed and tweaking of fonts and font sizing too.
What’s it look like?
I am pretty happy with how it looks, and while I expect some iteration, it has definitely fixed an issue I have had for a while. You can see the referenced FluentCart shortcode and the snippet to strip it below for context.
