WordPress.org
Get WordPress

Make WordPress Core

Changes between Initial Version and Version 8 of Ticket #65900


Ignore:
Timestamp:
08/18/2026 02:25:55 PM (2 months ago)
Author:
sabernhardt
Comment:

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #65900

    • Property Milestone 7.1 → 7.1.1
    • Property Component General → Editor

  • Ticket #65900 – Description

    initial v8  
    1 Changes introduced in #74744 changed accordion content styles from display none to display hidden. This change caused visibility bug, padding devined in Accordion Panel take a space under the title
     1Changes introduced in [https://github.com/WordPress/gutenberg/pull/74744 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
    22
    3 Steps to reproduce. add accordion to the page.
    4 Set padding to Accordion Panel , for example 100px top, 100px bottom.
    5 For better observabiliry, add 1px border for Accordion item
     3=== Steps to reproduce.
     4- Add accordion to the page.
     5- Set padding to Accordion Panel , for example 100px top, 100px bottom.
     6- For better observability, add 1px border for Accordion item
    67
    78
    89Now open frontend page. And you will see huge gap with no content.
    910
    10 Issue
     11=== Issue
    1112
    12 Changes introduced in #74744 changed the accordion content styles from display: none to visibility: hidden.
     13Changes introduced in [https://github.com/WordPress/gutenberg/pull/74744 GB74744] changed the accordion content styles from `display: none` to `visibility: hidden`.
    1314
    1415This 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.
    1516
    16 Steps to Reproduce
    17 Add an Accordion to a page.
    18 Set padding on the Accordion Panel, for example:
    19 Top: 100px
    20 Bottom: 100px
    21 For better visibility of the issue, add a 1px border to the Accordion Item.
    22 Open the page on the frontend.
     17=== Steps to Reproduce
     18- Add an Accordion to a page.
     19- Set padding on the Accordion Panel, for example:
     20  - Top: 100px
     21  - Bottom: 100px
     22- For better visibility of the issue, add a 1px border to the Accordion Item.
     23- Open the page on the frontend.
    2324
    2425As a result -
    2526A large empty gap appears below the accordion title, even though the accordion content is hidden.
    2627
    27 The panel  padding still takes up space because visibility: hidden hides the content visually but does not remove it from the layout.
     28The panel  padding still takes up space because `visibility: hidden` hides the content visually but does not remove it from the layout.
    2829
    29 Expected Result
     30=== Expected Result
    3031
    31 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.
     32When 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.