Skip to content

Accordion Panel block: remove extra div #71436

@t-hamano

Description

@t-hamano

What problem does this address?

The Accordion block outputs the following HTML:

<div class="wp-block-accordion">
  <div  class="wp-block-accordion-content">
    <h3 class="wp-block-accordion-header accordion-content__heading">
      <button class="accordion-content__toggle">
        <span>Accordion Title</span>
        <span class="accordion-content__toggle-icon has-icon-plus">
          <span>+</span>
        </span>
      </button>
    </h3>
    <div class="wp-block-accordion-panel">
      <div class="accordion-content__wrapper">
      </div>
    </div>
  </div>
</div>

I'm not sure why the Accordion Panel block has an additional accordion-content__wrapper div.

What is your proposed solution?

Remove the accordion-content__wrapper div. Furthermore. Furthermore, the HTML could be simplified to something like this:

export default function save() {
	const blockProps = useBlockProps.save();
	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
	return <div { ...innerBlocksProps } />;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions