Accordion item have additional spacing after changes in #74744

[bigdigitala]

Changes introduced in ​GB74744 changed accordion content styles from display none to display hidden. This change caused visibility bug, padding defined in Accordion Panel take a space under the title

Steps to reproduce.

• Add accordion to the page.
• Set padding to Accordion Panel , for example 100px top, 100px bottom.
• For better observability, add 1px border for Accordion item

Now open frontend page. And you will see huge gap with no content.

Issue

Changes introduced in ​GB74744 changed the accordion content styles from display: none to visibility: hidden.

This causes a visibility/layout bug where padding defined on the Accordion Panel still occupies space even when the panel content is hidden. As a result, the hidden accordion content creates a large empty gap below the accordion title.

Steps to Reproduce

• Add an Accordion to a page.
• Set padding on the Accordion Panel, for example:
  • Top: 100px
  • Bottom: 100px
• For better visibility of the issue, add a 1px border to the Accordion Item.
• Open the page on the frontend.

As a result -
A large empty gap appears below the accordion title, even though the accordion content is hidden.

The panel padding still takes up space because visibility: hidden hides the content visually but does not remove it from the layout.

Expected Result

When the accordion panel is closed, its content and associated spacing should not occupy any layout space, as was the case when display: none was used.

[blackstar1991]

Can you add image with this problem? (In some default template and turn off all plugins).

I didn't see this problem in my template. There may be a problem with your personal theme styles.

[bigdigitala]

screenshoot on 2025 theme

[bigdigitala]

Here also a prebuild accordion code

<!-- wp:accordion {"style":{"border":{"width":"1px"}}} -->
<div role="group" class="wp-block-accordion" style="border-width:1px"><!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading has-icon has-icon-right"><button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">title</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"top":"142px","bottom":"142px","left":"142px","right":"142px"}}}} -->
<div role="region" class="wp-block-accordion-panel" style="padding-top:142px;padding-right:142px;padding-bottom:142px;padding-left:142px"><!-- wp:paragraph -->
<p>content </p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->

[bigdigitala]

Replying to blackstar1991:

Can you add image with this problem? (In some default template and turn off all plugins).

I didn't see this problem in my template. There may be a problem with your personal theme styles.

Added screenshoot on 2025 theme and brebuild accordion code .

[blackstar1991]

It's your personal problem. Just look what element (or ruls) add style="padding-top:142px;padding-right:142px;padding-bottom:142px;padding-left:142px" for your elements.

In my case this element look like:

<!-- wp:accordion -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading has-icon has-icon-right"><button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">ddfgdfg</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>dfgdfgdfg</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item -->

<!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading has-icon has-icon-right"><button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">ddfgdfg</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>dfgdfgdfg</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->

no external styles.

[blackstar1991]

Just turn off all plugins. Or make the same on a clear new wordpress template.

[bigdigitala]

Replying to blackstar1991:

Just turn off all plugins. Or make the same on a clear new wordpress template.

I see you forgot one imprortant reproduction step mentioned in ticket description

Set padding on the Accordion Panel

so Open any accordion -> accordion item -> accordion panel and define top/bottom padding . Save page and check frontend view. There woul dbe huge gaps

All this reproduced on clear wp 7.1 , no plugins, 2025 theme.

[wildworks]

Changes introduced in #74744 changed accordion content styles from display none to display hidden.Changes introduced in #74744 changed accordion content styles from display none to display hidden.

This was a necessary change to enable searching for hidden tabs in the browser. See ​https://github.com/WordPress/gutenberg/pull/74744

We have already started the 7.1 dry run, and as I do not consider this a critical issue, I will punt this to 7.1.1.

[wildworks]

Gutenberg PR to fix this issue: ​https://github.com/WordPress/gutenberg/pull/81782

[wildworks]

This issue has been fixed upstream and the fix should be cherry-picked for the 7.1.1 release. ​https://github.com/WordPress/gutenberg/pull/82383