Resources

FAQ Accordion User Manual

by Creator

Both the FAQ and Accordion blocks use nested blocks to construct their respective answer / below content. If you are not familiar with nested blocks: they are blocks within other blocks. A parent block designates a nested content area where other blocks may be inserted in the same way they would be inserted into the root level.

FAQ Structured Data Block

The FAQ block inserts a styleable (or invisible) Question and Answer onto the page that uses FAQPage Schema markups to include them Google search results for the page. The markups are not included in the rendered object, it is instead included in the page header using JSON script (preferred method). This allows you include the FAQ data on the page without including it visually on the page.

You may spread out FAQ blocks anywhere in your page content, the data will be gathered and structured in the order they are found.

Create a Q&A

  • Enter your question and answer.
    • The Question is standard text field, nothing fancy, just simple enter your question.
    • The Answer to your question is created by inserting any combination of WP core Heading, Paragraph and List blocks into the answer’s nested content area.
    • The FAQ is limited to these specific blocks and text to meet Google’s FAQPage requirements.
  • Setup your display options.
    • By default the block uses standard text styling from the page, with the question field bolded.
    • In the Block Settings panel you have options text color and styling options to the entire block. These settings apply to all text within the block, both qustion and answer.
    • You may choose to style them seperately with settings available in the Question Styling and Answer Styling panels.
    • You also have optoins for how / if to display the “Q” and “A” prefixes in the Q & A Options & Styling panel.
      • If you do not wish to include them, you may turn them off.
      • By default they are the letters “Q” and “A”, but you may enter any text you wish to use instead. (IE: “Question” and “Answer” or maybe “Problem” and “Solution”)
      • You may size and style them as well as set a specific to create a standard indent for the question and answer.

AMP Accordion

The AMP Accordion block lets you nest WP core Heading, Paragraph and List blocks to create an AMP powered accordion module. The headings become the accordion bars, and anything between/after them become the toggled bellow content. The FAQ block can be nested as well, with the question becoming the bar and the answer becoming it’s content. The Accordion block editor is just an interface, not a representation of the accordion, which is rendered on the website by AMP.

Create an Accordion

  • Start with the Heading block. This will become the first bar of your accordion.
    • You may choose an H-Tag assignment for each bar (H1 – H6), these assignments will be included in Google’s schema.
    • You may choose to force a specific H-Tag across the accordion by setting it in the Accordion Settings panel.
    • By default the accordion ignores the Accelerate theme’s CSS style settings for Heading blocks and tags. You may choose to include this class to match the Heading block styles ou have set. This setting is also found in the Accordion Settings panel.
    • AMP includes some basic styling with it’s component, but you may create your own styling using the style settings in the block’s Section Heading and Section Content panels.
  • Next insert the content for the bar, which is closed (hidden) upon page load, then is toggled opened or closed by clicking on the bar.
    • You may insert any combination of Paragraph blocks (just start typing) and List blocks.
    • Anything you create after a heading becomes the content for that heading, up until you insert another heading.
    • The accordion is limited to these specific blocks to meet AMP requirements.
  • The FAQ block may also be inserted into the Accordion block, it becomes it’s own bar and bellow.
    • You may use a combination of core and FAQ blocks to create an accordion. The bellows will work seamlessly together, and the FAQ markups will be included
    • Any heading blocks included in the answer field are converted from H-Tags to avoid issues with AMP using them to render the accordion.