Theming Gutenberg: the FAQ block

In our previous post on how to theme our HowTo content block for Gutenberg, I explained the HTML structure of the block. I walked you through a few approaches to styling the generated block to make it blend in with your theme. With the release of Yoast 8.2 we’ve not only included the HowTo structured data block, but also the so-called FAQ structured data block.

If you are new to structured data, read all about it here.

The FAQ block

With our FAQ block, you can now, very easily, add a set of questions (and corresponding answers) to a post or page. This is based on Schema.org’s ‘Question’ format, so search engines actually understand that your post or page addresses a question, as posed by a user. And in the future, Google will show your post or page as such in its search results.

The markup

Our FAQ content block can be broken down into two elements. A strong tag with a question, and an answer in a paragraph tag. These two elements are wrapped into two div tags. The markup looks as follows:

<div class="schema-faq wp-block-yoast-faq-block">
    <div class="schema-faq-section" id="faq-question-1617342662545">
        <strong class="schema-faq-question">Thequestion</strong>
        <p class="schema-faq-answer">The answer</p>
    </div>
</div>

Once again, we’ve set some sensible defaults for the block such as emphasizing the question by wrapping it inside a <strong> tag. Besides that, the block will inherit the styling you have in place for these standard HTML elements (see the example below). If you want to take the styling of the block a little further and actually customize it, then read on!

Styling the FAQ block

Styling the supplied class names

As you can see, the structure of the FAQ block isn’t all that complex. This makes styling the block quite straightforward. As we’ve described above, we always aim to set sensible defaults for our blocks, but if you want to take the styling a bit further, you can do so by targeting the supplied class names:

• The ‘schema-faq’ class for the block itself
• The ‘schema-faq-title’ class for the title of the block
• The ‘schema-faq-section’ class for the section holding the question and answer
• The ‘schema-faq-question’ class for the actual question
• The ‘schema-faq-answer’ class for the answer

Styling by setting your own custom class name

If you want to use your own custom class name, you can set one under ‘Advanced’ in the ‘Block’ section of the Gutenberg sidebar. As you can see in the example below, we’ve added a custom class name (‘custom-class’) to the block under ‘Advanced’. This class name will be added to the block element itself.

Inspiration for styling an FAQ page

An FAQ page on your website can be as simple as the default output of our FAQ content block; a question in bold with the answer underneath. But if your list with addressed questions is quite extensive, such a page can become cluttered quickly. We want to leave you with a few quick suggestions that might help you set up your page.

Use a clear visual separation between each question

Users will most likely scan your page, searching for a relevant question they need answering. Therefore it is important to set each question (and answer) apart and to emphasize the question. Below is a (very) quick suggestion on how to achieve this.

Use collapsible headers

An often seen solution is the use of a so-called collapsible header (or accordion), where the answer is hidden and is made visible by clicking on the question. Technically, this is a bit harder to set up. A lot of solutions still rely on JavaScript. If you’re not that proficient in JavaScript (and don’t really mind the overhead code) you could check out a library like jQuery UI or frameworks like Bootstrap or Foundation (which offer accordion components) for easy implementation.

We are seeing more and more CSS only solutions. Especially CodePen is a great place to check out ideas that others came up with. Keep in mind to check browser support though. Some of these solutions can be somewhat experimental!

Suggestions? Join in!

Of course, there are loads of different solutions fathomable on how to go about this. If you have any suggestion, from a design – or technical perspective, we encourage you to share them in the comments! Do you have questions about this specific content block, Gutenberg in general or about CSS and HTML in general; feel free to leave a comment as well!

Read more: How to build an FAQ page with Gutenberg and Yoast SEO »