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.
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
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!