AB Accordion <summary> should add a element before the text

[sarahannnicholson]

So far, this library has been great! Thanks for all the hard work! I opened this issue but it might not be an 'issue' and might be more of a question.

Problem

I am trying to style the accordion <summary> element using word press as a headless CMS.

However, when trying to apply specific styles to the <summary> element "text-decoration: underline" it doesn't style the UI even though its in the CSS. This seems like a limitation of the <summary> element.

Solution

A solution to this, would be to make a pull request to add an HTML element between the text and the <summary> element. I see your demo for the accordion has a <p> element inside the <summary> element.

Question How'd that <p> tag get in there?

• Was it from editing the HTML in WordPress for this accordion block? Cause if I do that, I get this validation issue: This block contains unexpected or invalid content. Having raw HTML in WordPress isn't a great solution for this anyways.

Anyways, I am just a little confused how the demo for the accordion has <p> tags inside the <summary> and how I can get that. Preferably without turning my entire accordion into HTML.

[mikemcalister]

Hi there,

The <p> element is added automatically as part of the RichText output in the summary title. I didn't need to edit the HTML or anything like that. You could target that for styles by doing something like .ab-block-accordion summary p { text-decoration: underline; }

Check out this article for more details about how to style certain elements in the block. The details/summary block can have some limitations because of how it relies on browser technology instead of external JS or CSS. Hope that helps!

[sarahannnicholson]

The <p> element is added automatically as part of the RichText output in the summary title

Hmm, interesting. Maybe I am doing something wrong because I don't see a <p> tag :(

Atomic Blocks - Gutenberg Blocks Collection version: 1.4.23

Steps to Reproduce

1. Have the plugin installed already with version 1.4.23
2. Create a new page
3. Click the '+' icon in the editor
4. Select the 'Atomic Blocks' drop-down
5. Select the 'AB Accordion block'
6. Type 'Test' as the title, and 'Testing' into the body/collapsible region
7. Ensure you are focused on the block, and select the vertical 3 dots
8. Click 'Edit as HTML' Note:

Additionally:

1. Save and click 'preview'
2. Open Chrome devtools on the preview page and inspect the accordion

Note:

Additionally hitting this endpoint https://{my-wp-domain}/wp-json/wp/v2/pages:

I can't add these styles

.ab-block-accordion summary p { text-decoration: underline; }

because there is no <p> tag.

[mindctrl]

I've confirmed what @sarahannnicholson is seeing. Looks like the <p> element was lost here: https://github.com/studiopress/atomic-blocks/commit/06fc1cee02518ab1272643689a4c3e6bc8e4db24