Accordion header. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-header))

- **Name:** core/accordion-header

- **Experimental:** true

- **Category:** design

- **Parent:** core/accordion-item

- **Supports:** anchor, border, color (background, gradient, text), interactivity, shadow, spacing (margin, padding), typography (fontSize, textAlign), ~~align~~

- **Attributes:** iconPosition, level, levelOptions, openByDefault, showIcon, textAlignment, title

A single accordion that displays a header and expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-item))

- **Name:** core/accordion-item

- **Experimental:** true

- **Category:** design

- **Parent:** core/accordions

- **Allowed Blocks:** core/accordion-header, core/accordion-panel

- **Supports:** align (full, wide), color (background, gradient, text), interactivity, shadow, spacing (blockGap, margin)

- **Attributes:** openByDefault

Accordion Panel ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-panel))

- **Name:** core/accordion-panel

- **Experimental:** true

- **Category:** design

- **Parent:** core/accordion-item

- **Supports:** border, color (background, gradient, text), interactivity, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)

- **Attributes:** allowedBlocks, isSelected, openByDefault, templateLock

A group of Accordion headers and associated expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordions))

- **Name:** core/accordions

- **Experimental:** true

- **Category:** design

- **Allowed Blocks:** core/accordion-item

- **Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), ~~html~~

- **Attributes:** allowedBlocks, autoclose, iconPosition, showIcon

'accordion-header',

'accordion-panel',

'accordion-item.php' => 'core/accordion-item',

'accordions.php' => 'core/accordions',

"./accordions/view": "./build-module/accordions/view.js",

{

"$schema": "https://schemas.wp.org/trunk/block.json",

"apiVersion": 3,

"name": "core/accordion-header",

"version": "0.1.0",

"title": "Accordion Header",

"category": "design",

"description": "Accordion header.",

"example": {},

"__experimental": true,

"parent": [ "core/accordion-item" ],

"usesContext": [

"core/accordion-icon-position",

"core/accordion-show-icon"

],

"supports": {

"anchor": true,

"color": {

"background": true,

"gradient": true

},

"align": false,

"border": true,

"interactivity": true,

"spacing": {

"padding": true,

"margin": [ "top", "bottom" ],

"__experimentalDefaultControls": {

"padding": true,

"margin": true

}

},

"__experimentalBorder": {

"color": true,

"radius": true,

"style": true,

"width": true,

"__experimentalDefaultControls": {

"color": true,

"radius": true,

"style": true,

"width": true

}

},

"typography": {

"textAlign": true,

"fontSize": true,

"__experimentalFontFamily": true,

"__experimentalFontWeight": true,

"__experimentalFontStyle": true,

"__experimentalTextTransform": true,

"__experimentalTextDecoration": true,

"__experimentalLetterSpacing": true,

"__experimentalDefaultControls": {

"fontSize": true,

"fontFamily": true

}

},

"shadow": true

},

"attributes": {

"openByDefault": {

"type": "boolean",

"default": false

},

"title": {

"type": "rich-text",

"source": "rich-text",

"selector": "span"

},

"level": {

"type": "number",

"default": 3

},

"levelOptions": {

"type": "array"

},

"textAlignment": {

"type": "string",

"default": "left"

},

"iconPosition": {

"type": "string",

"enum": [ "left", "right" ],

"default": "right"

},

"showIcon": {

"type": "boolean",

"default": true

}

},

"textdomain": "default"

}

import clsx from 'clsx';

import { __ } from '@wordpress/i18n';

import { useEffect } from '@wordpress/element';

import {

useBlockProps,

__experimentalUseBorderProps as useBorderProps,

__experimentalUseColorProps as useColorProps,

__experimentalGetSpacingClassesAndStyles as useSpacingProps,

__experimentalGetShadowClassesAndStyles as useShadowProps,

BlockControls,

HeadingLevelDropdown,

RichText,

} from '@wordpress/block-editor';

import { ToolbarGroup } from '@wordpress/components';

import { plus } from '../accordion-item/icons';

const ICONS = {

plus,

export default function Edit( { attributes, setAttributes, context } ) {

const { level, title, textAlign, levelOptions } = attributes;

const {

'core/accordion-icon-position': iconPosition,

'core/accordion-show-icon': showIcon,

} = context;

const TagName = 'h' + level;

// Set icon attributes.

useEffect( () => {

if ( iconPosition !== undefined && showIcon !== undefined ) {

setAttributes( {

iconPosition,

showIcon,

} );

}

}, [ iconPosition, showIcon, setAttributes ] );

const blockProps = useBlockProps();

const borderProps = useBorderProps( attributes );

const colorProps = useColorProps( attributes );

const spacingProps = useSpacingProps( attributes );

const shadowProps = useShadowProps( attributes );

const Icon = ICONS.plus;

const shouldShowIcon = showIcon && Icon;

return (

<>

<BlockControls>

<ToolbarGroup>

<HeadingLevelDropdown

value={ level }

options={ levelOptions }

onChange={ ( newLevel ) =>

setAttributes( { level: newLevel } )

}

/>

</ToolbarGroup>

</BlockControls>

<TagName

{ ...blockProps }

className={ clsx(

blockProps.className,

colorProps.className,

borderProps.className,

'accordion-item__heading',

{

[ `has-custom-font-size` ]: blockProps.style.fontSize,

[ `icon-position-left` ]: iconPosition === 'left',

[ `has-text-align-${ textAlign }` ]: textAlign,

}

) }

style={ {

...borderProps.style,

...colorProps.style,

...shadowProps.style,

} }

>

<button

className={ clsx( 'accordion-item__toggle' ) }

style={ {

...spacingProps.style,

} }

>

<RichText

allowedFormats={ [

'core/bold',

'core/italic',

'core/image',

'core/strikethrough',

] }

disableLineBreaks

tagName="span"

value={ title }

onChange={ ( newTitle ) =>

setAttributes( { title: newTitle } )

}

placeholder={ __( 'Accordion title' ) }

/>

{ shouldShowIcon && (

<span

className={ clsx( `accordion-item__toggle-icon`, {

'has-icon-plus': true,

} ) }

style={ {

// TO-DO: make this configurable

width: `1.2em`,

height: `1.2em`,

} }

>

{ Icon && <Icon width="1.2em" height="1.2em" /> }

</span>

) }

</button>

</TagName>

</>

);

import { accordionHeader } from '@wordpress/icons';

import edit from './edit';

import save from './save';

import metadata from './block.json';

import initBlock from '../utils/init-block';

const { name } = metadata;

export { metadata, name };

export const settings = {

icon: accordionHeader,

example: {},

edit,

save,

export const init = () => initBlock( { name, metadata, settings } );

import { init } from './';

export default init();