Display Podcast Transcripts Using an Accordion Block

In WordPress 5.8, users now have the ability to embed PDF files into posts. When using the File Block with a PDF, an option shows up in the sidebar to embed the file inline. Since I use the Automated Transcripts service by Castos which transcribes my podcast audio into text within a PDF, I thought this would be a good way to display the transcription. But it turns out that’s not the case.

I reached out to Deborah Edwards-Oñoro on Twitter because she knows a thing or two about accessibility and the best way to display podcast transcriptions but she’s not a fan of the PDF format on websites. Christina Workman suggested that I copy the text from the PDF and display it on the site along with the podcast using an accordion block.

At first, I thought all I needed was a collapsible text area block but upon searching Google and the WordPress plugin directory, I discovered that most of the solutions were part of a collection of blocks. So I wasn’t going to get the block I needed unless I was willing to take on the other 20-40 blocks that came with it. Ideally, plugin authors would separate each block and make them available for download while also providing a bulk option or at least a way for users to create their own bundles from the blocks offered.

The first plugin I tried was the Details Summary Block. But after installing and trying to use it, I discovered that you couldn’t add spaces between words in the title area of the block. It also didn’t work smoothly with 5,000 lines of text.

You might look at the screenshot above and wonder I even bothered to give the plugin a try. Despite the warnings, a lot of plugins can get by over the years without the need for updates. Granted, this was is related to the Block Editor so it probably needed to be kept updated.

The second plugin I tried which turned out to be the winner is called Lightweight Accordion. This plugin enables users to add an accordion to a post with a shortcode or a block. It uses no JavaScript. Instead, it uses the native details HTML tag and a few lines of code to generate little impact on site performance.

Below is what it looks like in a post. Simply give it a title and then write or paste the text you want in the text area.

The block has options to be expanded by default, display a border, and assign an HTML tag to the title. Assigning an existing HTML tag to the title is very convenient. For example, if you set it as H2, it will most likely blend in with your theme. So from now on, when I have my podcasts transcribed, I’ll copy the text from the PDF file, put it in an accordion block so users can read it as plain text on the show notes posts. The options for downloading or reading the PDF on-site will be unchanged.