A WordPress editor plugin that that handles embedding (raw) files from GitHub Gists.
With FF Block Gist Embed you can embed files from GitHub Gists. It adds a block named ‘Gist Embed’ to the WordPress editor interface. For every instance of this block, you can:
- Select one or more files from the same Gist URL to be embedded in your post.
- Include the vendor stylesheet that handles the styling of Gist embeds (see the FAQ for more information).
- Choose whether or not to embed the Gist files as raw content.
Roadmap
We would like to bring some additional features soon. Some of the things we have planned, are:
- Caching the content of files
- Manually change the order of the files from a Gist within a block
- Automatically get the list of files after a valid Gist URL is entered in the input field
Screenshots
Gist Embed is found under the 'Embeds' section in the 'Add block' dialog.
You can enter (or more likely, copy-paste) a Gist URL. In the sidebar, you have the option to include the vendor stylesheet (checked by default) and the option to embed the content from that Gist URL as raw content.
When clicking on the 'Get files' button, the block retrieves and lists all the files related to that Gist. You can check every file you want to include in your post.
An example of an embedded CSS file.
Can I embed multiple Gist files from the same block?
Yes, you can. However, this plugin lists all the files from the same Gist in the same order as on gist.github.com. If you need to list files in a different order than on gist.github.com, use multiple Gist Embed blocks.
Do Gist embeds get the correct styling automatically?
By default, Gist Embed is configured to load vendor stylesheets for Gist embeds (each Gist comes packed with CSS that handles the styling for the embed containers on the frontend).
You can select whether or not to load vendor stylesheets for each Gist Embed block by (un)checking the ‘Include stylesheet’ checkbox in the sidebar menu (see the screenshots).
Please note: this checkbox is checked by default for each Gist Embed block. Performance-wise, it is advised to uncheck this checkbox for all but one of the Gist Embed blocks on the same post.
Can I embed raw files from Gists?
There is an option to embed the checked file(s) from the Gist Embed block as raw content in the sidebar (unchecked by default).
By checking this checkbox, the content from each checked file is loaded as raw content instead of embedded in a Gist embed container. This could be useful for HTML prototypes, for example.
Note that if you check this checkbox, the vendor stylesheet is never loaded for this block.
Does this plugin support block alignment options?
Yes. Provided your active theme supports the ‘wide’ and ‘full’ alignment options, you can configure each block to align wide or take up the full width. The CSS classes that are added, are alignwide and alignfull, respectively. Your theme should already apply the correct styling for these classes.
ChangeLog
1.0.2
- Resolve possible errors displayed if block is used but no Gist URL is entered.
1.0.1
- Check the first file of the Gist by default. If a Gist contains only one file, the checkbox for that file is disabled.
- Correctly list the files of a Gist when the GitHub username contains dashes.
1.0.0
- This is our first release.
