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 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;
}));