Accordion holds list of accordion items
Accordion item contains accordion heading and accordion panel
Accordion heading reveals or hides accordion panel

Block example

Details of this accordion item are shown in accordion panel.

theme.json

Accordion

core/accordion

Category	Configuration
Color	background: Available gradient: Available text: Available link: —
Typography	fontSize: Available lineHeight: Available fitText: — textAlign: — textColumns: — textIndent: —
Spacing	padding: Available margin: Available blockGap: Available
Border	border: Available radius: Available
Filter	duotone: —
Shadow	Available
Css	Available

Json example

"core/accordion": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--large)",
            "bottomRight": "var(--wp--preset--border-radius--large)",
            "topLeft": "var(--wp--preset--border-radius--large)",
            "topRight": "var(--wp--preset--border-radius--large)"
        }
    },
    "css": "overflow: hidden;",
    "spacing": {
        "blockGap": "var(--wp--preset--spacing--extra-small)"
    }
}

Accordion item

core/accordion-item

Category	Configuration
Color	background: Available gradient: Available text: Available link: —
Typography	fontSize: Available lineHeight: Available fitText: — textAlign: — textColumns: — textIndent: —
Spacing	padding: — margin: Available blockGap: Available
Border	border: Available radius: Available
Filter	duotone: —
Shadow	Available
Css	Available

Json example

"core/accordion-item": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--small)",
            "bottomRight": "var(--wp--preset--border-radius--small)",
            "topLeft": "var(--wp--preset--border-radius--small)",
            "topRight": "var(--wp--preset--border-radius--small)"
        }
    },
    "css": "",
    "spacing": {
        "blockGap": "var(--wp--preset--spacing--extra-small)"
    }
}

Accordion heading

core/accordion-heading

Category	Configuration
Color	background: Available gradient: Available text: Available link: —
Typography	fontSize: Available lineHeight: — fitText: — textAlign: — textColumns: — textIndent: —
Spacing	padding: Available margin: — blockGap: —
Border	border: Available radius: Available
Filter	duotone: —
Shadow	Available
Css	Available

Json example

"core/accordion-heading": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--small)",
            "bottomRight": "var(--wp--preset--border-radius--small)",
            "topLeft": "var(--wp--preset--border-radius--small)",
            "topRight": "var(--wp--preset--border-radius--small)"
        }
    },
    "css": "&  .wp-block-accordion-heading__toggle {\nborder-radius: var(--wp--preset--border-radius--small);\nbackground-color: var(--wp--preset--color--surface-container);\npadding: var(--wp--preset--spacing--normal);\ntransition: opacity var(--wp--custom--transition-normal), background-color var(--wp--custom--transition-normal);\n}\n\n& .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {\ntext-decoration: none !important;\n}\n\n& .wp-block-accordion-heading__toggle:hover {\nbackground-color: var(--wp--preset--color--secondary-container);\n}\n\n& .wp-block-accordion-heading__toggle:active {\nopacity: 0.8;\n}",
    "spacing": {
        "padding": {
            "bottom": "0",
            "left": "0",
            "right": "0",
            "top": "0"
        }
    },
    "typography": {
        "fontFamily": "var(--wp--preset--font-family--comfortaa)",
        "fontSize": "var(--wp--preset--font-size--body-large)"
    }
}

Accordion panel

core/accordion-panel

Category	Configuration
Color	background: Available gradient: Available text: Available link: —
Typography	fontSize: Available lineHeight: Available fitText: — textAlign: — textColumns: — textIndent: —
Spacing	padding: Available margin: — blockGap: Available
Border	border: Available radius: Available
Filter	duotone: —
Shadow	Available
Css	Available

Json example

"core/accordion-panel": {
    "border": {
        "radius": {
            "bottomLeft": "var(--wp--preset--border-radius--small)",
            "bottomRight": "var(--wp--preset--border-radius--small)",
            "topLeft": "var(--wp--preset--border-radius--small)",
            "topRight": "var(--wp--preset--border-radius--small)"
        }
    },
    "css": "background-color: var(--wp--preset--color--surface-container)",
    "spacing": {
        "blockGap": "var(--wp--preset--spacing--small)",
        "padding": {
            "bottom": "var(--wp--preset--spacing--normal)",
            "left": "var(--wp--preset--spacing--normal)",
            "right": "var(--wp--preset--spacing--normal)",
            "top": "var(--wp--preset--spacing--normal)"
        }
    },
    "typography": {
        "fontSize": "var(--wp--preset--font-size--body-medium)"
    }
}