Yoast’s SEO “FAQ Gutenberg Block” is an amazing tool, which we widely use in our SEO company on most of our clients` websites. It also provides a Schema structured data for FAQ, which enables a rich preview in search results.

The FAQ block is printed in a common markup, inheriting all the styles, which gives us the opportunity to do whatever feels good in terms of design and UX.

The initial styling for our FAQ

The following simple CSS code makes the FAQ stand out a bit and prepares our block for further folding ability. You need to add this code into your child-theme`s styles.css:

/* colors & borders */
.wp-block-yoast-faq-block {
    border-top:1px solid #eee;
}
.wp-block-yoast-faq-block .schema-faq-question {
    border-bottom:1px solid #eee;
}
.wp-block-yoast-faq-block .schema-faq-question:hover,
.wp-block-yoast-faq-block .fcp-opened .schema-faq-question {
    background-color:#fafafa;
}
.wp-block-yoast-faq-block .schema-faq-answer,
.wp-block-yoast-faq-block .fcp-opened .schema-faq-answer {
    border-bottom:1px solid #eee;
}

/* layout */
.wp-block-yoast-faq-block .schema-faq-question {
    display:block;
    padding:10px;
    position:relative;
}
.wp-block-yoast-faq-block.fcp-faq .schema-faq-question {
    cursor:pointer;
}
.wp-block-yoast-faq-block .schema-faq-answer {
    margin:0;
    padding:12px 10px;
}

/* bullet before a question */
.wp-block-yoast-faq-block .schema-faq-question:before {
    /* position gap */
    margin-top:-2px;
}
.wp-block-yoast-faq-block .schema-faq-question,
.wp-block-yoast-faq-block .schema-faq-answer {
    padding-left:34px;
}
.wp-block-yoast-faq-block .schema-faq-question:before {
    content:'';
    display:block;
    border:2px solid #dedede;
    border-width:0px 2px 2px 0px;
    width:9px;
    height:9px;
    box-sizing:border-box;
    position:absolute;
    left:14px;
}
.wp-block-yoast-faq-block.fcp-faq .schema-faq-question:before {
    top:16px;
    transform:rotate(-45deg);
    transition:all 0.3s 0.3s ease;
}
.wp-block-yoast-faq-block .schema-faq-question:before,
.wp-block-yoast-faq-block.fcp-faq .fcp-opened .schema-faq-question:before {
    top:14px;
    transform:rotate(45deg);
}

/* transition */
.wp-block-yoast-faq-block.fcp-faq .schema-faq-answer {
    max-height:0;
    overflow:hidden;
    border-bottom-width:0;
    padding-top:0;
    padding-bottom:0;
    transition:padding-bottom 0.3s ease-in, max-height 0.4s ease-in, padding-top 0.1s 0.4s ease-out, border-bottom-width 0s 0.5s linear;
}
.wp-block-yoast-faq-block .fcp-opened .schema-faq-answer {
    max-height:9999px;
    border-bottom-width:1px;
    padding-top:12px;
    padding-bottom:20px;
    transition:padding-top 0.2s ease-in, max-height 0.3s 0.2s linear, padding-bottom 0.4s 0.2s ease;
}

The codes above will make your Yoast`s FAQ look like our FAQ box below. But will inherit your WordPress Theme’s font family, color, and font-size:

Answers to our FAQ Adjustment

Does the closed state effect the indexing?

According to the latest Google statements, the current method of hiding the text should not affect the indexing in a bad way.

Can I have two or more FAQ blocks?

Yoasts FAQ block is allowed to be added only once for the correct Schema reason.

To “solve” it, we suggest creating a FAQ section which covers all the question in one block. You could use HTML anchors from the positions, where you would need a separate block.

How do I implement all those codes?

WordPress provides many ways of implementation of such codes. The topic deserves a separate article to cover all possibilities. If you don’t know how to do it, just install our provided plugin.

Can I use Yoast’s FAQ block with Divi Builder or TinyMCE?

Not directly, BUT check out our solution for implementing Yoast’s FAQ in Divi and TinyMCE, as we use Divi themes pretty often.

Fold/toggle the Yoast’s FAQ

Along with mentioned above CSS code, the following JavaScript will make the FAQ folded and foldable:

jQuery( document ).ready( function($) {

    $( '.wp-block-yoast-faq-block' ).addClass( 'fcp-faq' );
    $( '.wp-block-yoast-faq-block .schema-faq-question' ).click( function() {
        $( this ).parent().toggleClass( 'fcp-opened' );
    });

});

The difference between toggleable/foldable and accordion is that an accordion closes the opened item, as soon as you open a new question.

This code will archieve a accordion view:

jQuery( document ).ready( function($) {

    $( '.wp-block-yoast-faq-block' ).addClass( 'fcp-faq' );
    $( '.wp-block-yoast-faq-block .schema-faq-question' ).click( function() {
        $( '.fcp-opened' ).removeClass( 'fcp-opened' );
        $( this ).parent().addClass( 'fcp-opened' );
    });

});

Implementation

WordPress provides many ways for adding front-end code to a website. I would recommend adding the codes to your existing child theme. But if you don’t know how to implement these codes, installing the following plugin would be the simplest solution:

A remark

By now in exactly four out of ~30 cases, different behavior of Yoast’s FAQ block appeared – the HTML code gets slightly corrupt due to different implementation methods.

  • One issue appears in a very old legacy project with Gutenberg editor not native, but a plugin.
  • The other issues are caused by WPBakery Page Builder’s Gutenberg blocks.

The correct layout:

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <strong class="schema-faq-question">Question?</strong>
    <p class="schema-faq-answer">
      Answer
      <br>
      <br>
      Second paragraph
    </p>
  </div>
</div>

Basically, if you use the Standard-WordPress Gutenberg Editor, our codes above will work just fine.

The Modified layout examples:

Gutenberg plugin:

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <strong class="schema-faq-question">Question</strong>
    <p></p>
    <p class="schema-faq-answer">Answer</p>
    <p>Second paragraph</p>
    <p></p>
  </div>
</div>

Gutenberg block of WPBakery Page Builder:

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <p><strong class="schema-faq-question">Quesion?</strong></p>
    <p class="schema-faq-answer">Answer</p>
    <p>Second paragraph</p>
  </div>
</div>

It is not hard to notice the difference. Our provided codes above will work differently or not work for these cases. In this case, you would need to adjust our provided CSS a little bit. Anyway: Here is a simpler solution.

jQuery( document ).ready( function($) {

    // change the WPBakery layout to common
    $( '.wp-block-yoast-faq-block p > .schema-faq-question' ).parent().replaceWith( function() {
        return $( '.schema-faq-question', this );
    });

    // change the Gutenberg plugin layout to common
    $( '.wp-block-yoast-faq-block p:empty' ).remove();

    // replace paragraphs break to <br>
    $( '.wp-block-yoast-faq-block .schema-faq-answer ~ p' ).each( function() {
        var $self = $( this ),
            $answer = $self.parent().children( '.schema-faq-answer' );
        $answer.html( $answer.html() + '<br><br>' + $self.html() );
        $self.remove();
    });
});

The code above finds the corrupt FAQ blocks and removes the code parts that are not supposed to be there.

Hint: Our provided plugin already contains these codes. Everything is supposed to work properly in these cases.