Gutenberg – FAQ Block

Create a question where you can click to show the answer.

⚠️ Requires: Theme Support h-faq-block-v2

Features

1. Auto JSON-LD Schema - It automatically combines all FAQ block into Schema data.

   It will make your FAQ content appear like this in Google:

   

2. Modern Markup - It uses <details> element and the color chosen is applied as CSS Variable.

Markup

<details class="wp-block-h-faq" style="--textColor:#ffffff; --bgColor:#197d62">
  <summary class="wp-block-h-faq__question">The question</summary>
  <div class="wp-block-h-faq__answer">
    <p>The answer</p>
    <p>...</p>
  </div>
</details>

Styling

This plugin doesn't come with the front-end CSS. If you want a similar style with the admin one, here you go:

SASS Format

.wp-block-h-faq
  --bgColor: #e5e5e5
  --textColor: var(--text, #191e23)

  border: 2px solid var(--bgColor)
  border-radius: 4px

.wp-block-h-faq__question
  position: relative
  cursor: pointer
  padding: 0.75rem 1rem 0.75rem 2rem
  margin: -1px
  background-color: var(--bgColor)

  font-size: 20px
  color: var(--textColor)
  line-height: 1.25

  transition: all .25s ease-in-out

  &:hover
    opacity: .8
  &:active
    transition: none
    transform: translateY(1px)

  &::-webkit-details-marker
    display: none
  &::marker
    display: none
    font-size: 0

  &::before
    content: "+"
    position: absolute
    left: 0.75rem
    display: inline-block
    margin-right: 0.75rem
    font-family: monospace

    [open] &
      content: "-"
  
  [open] &
    opacity: 1


.wp-block-h-faq__answer
  padding: 1rem 1.5rem

  p + p
    margin-top: 1rem

CSS Format

.wp-block-h-faq {
  --bgColor: #e5e5e5;
  --textColor: var(--text, #191e23);
  border: 2px solid var(--bgColor);
  border-radius: 4px;
}

.wp-block-h-faq__question {
  position: relative;
  cursor: pointer;
  padding: 0.75rem 1rem 0.75rem 2rem;
  margin: -1px;
  background-color: var(--bgColor);
  font-size: 20px;
  color: var(--textColor);
  line-height: 1.25;
  transition: all 0.25s ease-in-out;
}
.wp-block-h-faq__question:hover {
  opacity: 0.8;
}
.wp-block-h-faq__question:active {
  transition: none;
  transform: translateY(1px);
}
.wp-block-h-faq__question::-webkit-details-marker {
  display: none;
}
.wp-block-h-faq__question::marker {
  display: none;
  font-size: 0;
}
.wp-block-h-faq__question::before {
  content: "+";
  position: absolute;
  left: 0.75rem;
  display: inline-block;
  margin-right: 0.75rem;
  font-family: monospace;
}
[open] .wp-block-h-faq__question::before {
  content: "-";
}
[open] .wp-block-h-faq__question {
  opacity: 1;
}

.wp-block-h-faq__answer {
  padding: 1rem 1.5rem;
}
.wp-block-h-faq__answer p + p {
  margin-top: 1rem;
}