Blocks

AMP-Accordion Block

by CreatorJan 26, 2021 1

The amp-accordion module is a list of sections with hidden content that is toggled open by clicking on the section title bar. This allows you to add content to your page without taking up much space in the visual field. It is useful for populating sidebars with content while keeping them manageable. The AMP-Accordion block lets you construct and style an accordion module using the block editor.

Settings Overview

Block Settings
- Force H-Tag : Force all heading tags in this block to use a specific H-Tag value (H1-H6) when rendered on the front end. This may be useful after you have entered your headings and decide that you’d like to change their tags without editing them individually.
- Retain Heading Classes : Heading block classes (used for “block styles”) are excluded by default because they might affect your accordion block styling settings, turn this on to retain those classes. They may still be affected by styles applied directly to the tag names. IE: h2, h3, h4{font-weight:bold;}
- Margins : All AMP Publisher blocks have a Top Margin and Bottom Margin setting allowing you to create space without having to insert a spacing block. [tutorial]
Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
- root object : Block Settings panel
  - heading objects : Section Heading panel
  - content objects : Section Content panel
Preview : You may toggle a preview of how your styling settings will affect the rendered accordion module. Click the “Eye” button in the top right corner of the block editor.

Object Map (DOM)

root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
- internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
  - amp-accordin module (div) untargeted node : The AMP component that turns the heading and content objects into an accordion.
    - heading object (div) targeted node from Section Heading panel : Styling is applied to each accordion title bar.
    - content object (div) targeted node from Section Content panel : Styling is applied to each accordion content area.
    - repeating heading and content objects : One pair for each accordion section (bellow).

Tutorial

The AMP-Accordion block uses standard WP core blocks inserted into the block editor and transforms them into the data needed to display an amp-accordion module. Each Heading block becomes the section (accordion bellow) title bar, the subsequent Paragraph and List blocks become the content for that section.

Insert an AMP-Accordion block into your page/post.
Create a section title bar by inserting a WordPress Heading block.
- The H-Tag value you choose for each heading block will affect the font size for that section’s title bar.
  - You can force uniformity across all section titles regradless of the H-Tag value you chose for each heading block.
    - Open the Block Settings panel in the block inspector (sidebar).
    - Choose a value from the Force H-Tag selector. All section titles will use this tag when rendering the block.
  - Our Accelerate theme provides styles for Heading blocks that can be supported by the AMP-Accordion block when constructing the section title bars.
    - Open the Block Settings panel.
    - Turn on the Retain Heading Classes setting. This will add a classname to the block that allows the section titles to honor the heading block style you have chosen for the site, depending on the H-Tag value of that title.
    - For example: you have chosen the “Double Lines” style for all heading blocks on the site, and you have applied it to H1, H2 and H3 blocks. Your accordion will have double lines above and below each section title when that section is created with an H1, H2 or H3 tag. Section titles created with an H4 tag will not get this style. If you force the accordion to use H3 tags then the H4 setion title will become an H3 and thus be styled.
Create content for the current section by inserting a combination of Paragraph and/or List blocks can be used to create the section content.
- Insert a list block or just start typing to create a paragraph block.
- Repeat until you have fleshed out the section content.
Start a new section by inserting another Heading block. This terminates the last section, all list and paragraph blocks before it will become the content for the previous heading.
Add content to the new section as needed.

FAQ Accordion

The AMP-Accordion block also accepts the FAQ Structured Data Block. This allows you to create an accordion that includes schema markup data used by Google. You can use a combination of heading, list and paragraph blocks to create non-markup section along with FAQ blocks for markup sections. The FAQ block questions get converted into accordion title bars and the answers become their content.

Insert an AMP-Accordion block into your page/post.
Insert an FAQ Structured Data Block into the AMP-Accordion block.
- Enter text into the Question text field, this will become the section title bar using an H4 tag.
- In the Answer area, insert any combination of heading, list and paragraph blocks to create the content.
  - Heading blocks are allowed in the FAQ block answer (also in markups), they will not be converted into accordion section title bars. This is the only way to include a heading tag in accordion content.
Any styling used to create the normal FAQ block (questions and answers) will be ignored and th FAQ block data/content is converted as needed.
Schema markup data will be included in the page head.

Example #1 – The info box above

We use the AMP-Accoridon block on every block tutorial page to provide the technicals without overwhelming the page. What you see is the default amp-accoridon component styling using H2 tags for titles. For the following examples are built with demo content that we can use to display custom styling of the accordion.

Example #2

The first example changes things up by centering the titles, removing the background and border, adding a shadow and then rounding the edges.

Section # 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

Section # 2

Section # 3

Insert an AMP-Accordion block into your page/post.
Create your accordion sections by inserting WordPress Heading, Paragraph and List blocks. [tutorial above]
Open the Section Heading panel in the block inspector (sidebar).
- Set the Text Alignment to “Center”.
- Set the Background Color to white (match your page background color). [tutorial]
- Set the Border Color to white. [tutorial] We did this to override the background and border colors set by AMP.
- Set the Border Width to 4px using the slider or by entering 4 in the number field. This creates space between the titles equal to twice the border width using the “invisible” border.
- Set Rounded Corners by Pixels to 100px (max). This will fully round the ends as long as the object height is 50px or less.
- In the Box Shadow section, set the Shadow Color to black. [tutorial]
- Turn on the Inset Shadow setting. This creates a shadow on the inside of the border. With rounded corners and some tweaking of the advanced shadow settings, this can almost pass as a 3D rounding effect.

Example #3

This example goes another direction with very visible colro changes and content with borders that flow into the titles.

Section # 1

Section # 2

Section # 3

Insert an AMP-Accordion block into your page/post.
Create your accordion sections by inserting WordPress Heading, Paragraph and List blocks. [tutorial above]
Open the Section Heading panel.
- Set the Font Color to white. [tutorial]
- Set the Background Color to black. [tutorial]
- Set the Border Color to a medium blue. [tutorial]
- Set the Border Width to 3px using the slider or by entering 3 in the number field. We’ll match this border in the Section Content.
Open the Section Content panel.
- Set the Border Color to match the medium blue chosen for the heading border.
- Set the Border Width to 3px. If you wish to meld the content better vertically you can turn off the Top and Bottom borders under Border Sides.
- In the Box Shadow section, set the Shadow Color to black. [tutorial]
- Turn on the Inset Shadow setting.
- Set the Padding to 20px using the slider or by entering 20 in the number field. [tutorial]

Pingback: AMP Publisher Blocks User Manual - AMPWPTools

Comments are closed.