The UCSC Accordion Block may be in use for some time. Meanwhile, WordPress has introduced a Details Block that performs the same function. With the accordion block, we enqueue an accordion.css file; however, this style-sheet targets the <details> element, rather than a class. The result is that these same styles are applied to the Core Details Block. Moreover, the Accordion Block is developed in a manner that prevents us from targeting it with custom styles via the Theme. We are able to target the Details Block with custom styles, as it is part of Core.
Steps to fix this
Edit accordion.css style-sheet to target only the .ucsc-block-accordion class, which is already part of the accordion block plugin
Add a details.css style-sheet with custom Details Block styles and enqueue it via functions.php
Add the style variation options in the styles.js file in the Theme
Making these changes will allow users to continue using the Accordion Block with it's limited style options, but also utilize the Details block with a few fancy icons.
The UCSC Accordion Block may be in use for some time. Meanwhile, WordPress has introduced a Details Block that performs the same function. With the accordion block, we enqueue an
accordion.cssfile; however, this style-sheet targets the<details>element, rather than a class. The result is that these same styles are applied to the Core Details Block. Moreover, the Accordion Block is developed in a manner that prevents us from targeting it with custom styles via the Theme. We are able to target the Details Block with custom styles, as it is part of Core.Steps to fix this
accordion.cssstyle-sheet to target only the.ucsc-block-accordionclass, which is already part of the accordion block plugindetails.cssstyle-sheet with custom Details Block styles and enqueue it viafunctions.phpstyles.jsfile in the ThemeMaking these changes will allow users to continue using the Accordion Block with it's limited style options, but also utilize the Details block with a few fancy icons.