Frequently asked questions

List frequently asked questions in an accordion layout

link Block names

t2/faq, t2/faq-item, t2/faq-item-post

link Properties (t2.json)

• template

  string[][]['t2/faq-item']

  Override the default innerblock template.

• allowedBlocks

  string[]'core/heading', 'core/list', 'core/paragraph'

  Allowed inner blocks

link

features

• includeInTableOfContent

  booleantrue

  Show a FAQ item in the Table of Content.

• hasPostType

  booleanfalse

  Add a FAQ post type and a post insert block.

• hasTitleTag

  booleanfalse

  Enables a FAQ title HTML tag toolbar.

link

layout.icons

• size

  number24

  Icon size.

• closed

  stringchevronDown

  Icon used when the accordion item is closed. The icon need to be registered as a T2 icon.

• open

  stringchevronUp

  Icon used when the accordion item is open. The icon need to be registered as a T2 icon.

link Style properties

• • Heading color

  • --t2-faq-color-heading
  • Theme.json: wp.custom.t2-faq.color.heading
  • Default: inherit

• • Icon color

  • --t2-faq-color-icon
  • Theme.json: wp.custom.t2-faq.color.icon
  • Default: currentColor

• • Heading font family

  • --t2-faq-typography-heading-font-family
  • Theme.json: wp.custom.t2-faq.typography.heading-font-family
  • Default: inherit

• • Heading font size

  • --t2-faq-typography-heading-font-size
  • Theme.json: wp.custom.t2-faq.typography.heading-font-size
  • Default: 1.125em

• • Heading font weight

  • --t2-faq-typography-heading-font-weight
  • Theme.json: wp.custom.t2-faq.typography.heading-font-weight
  • Default: 700

• • Heading line-height

  • --t2-faq-typography-heading-line-height
  • Theme.json: wp.custom.t2-faq.typography.heading-line-height
  • Default: 1.5

• • Item border

  • --t2-faq-item-border
  • Theme.json: wp.custom.t2-faq.item-border
  • Default: thin

• • Item padding

  • --t2-faq-item-padding
  • Default: 1rem

• • Base margin

  • --t2-faq-spacing-margin
  • Default: 1.75em

• • Item margin

  • --t2-faq-spacing-item-margin
  • Theme.json: wp.custom.t2-faq.spacing.item-margin
  • Default: 0

link Adding a custom action

You can add a custom actions to the FAQ block by using the beforeFaqOpen,
afterFaqOpen, beforeFaqClose or the afterFaqClose function. These function
takes a callback that will be called when the FAQ block is opens/closes. The
callback will receive the FAQ panel and trigger element as parameters.
The callback should return a promise that resolves when the close action is
complete.

Example:

window.beforeFaqClose((panel) => new Promise((resolve) => {
	const animation = panel.animate(
		[{ opacity: 1 }, { opacity: 0 }],
		{ duration: 200, easing: 'ease-in-out' },
	);

	animation.onfinish = resolve;
}));