Skip to content

Commit a323410

Browse files
iamtakashiclaude
andcommitted
Use spacers instead of padding in FAQ accordion panels
Closed accordion panels keep their own padding visible: core's closed state and the theme's first-paint collapse rule both hide content only, and the padding is an inline style no stylesheet rule can cleanly beat (upstream: WordPress/gutenberg#80776). The FAQ answers' bottom padding therefore rendered as a gap under every closed question on the front end, while the editor, which hides panels outright, showed none. Convert the five panels to the convention the filter sidebars already use: blockGap 0 with a trailing spacing-30 spacer. Spacers are content, so the collapsed state clips them, and the open spacing is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent 7030dc7 commit a323410

1 file changed

Lines changed: 35 additions & 15 deletions

File tree

‎themes/purple/patterns/about-faq-question-list.php‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@
2424
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle" style="padding-top:0.88rem;padding-bottom:0.88rem"><span class="wp-block-accordion-heading__toggle-title"><?php esc_html_e( 'What’s the difference between cashmere and wool?', 'purple' ); ?></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
2525
<!-- /wp:accordion-heading -->
2626

27-
<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}}} -->
28-
<div role="region" class="wp-block-accordion-panel" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
27+
<!-- wp:accordion-panel {"style":{"spacing":{"blockGap":"0"}}} -->
28+
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
2929
<p><?php esc_html_e( 'Wool is a natural fiber harvested from sheep. It’s known for its durability, breathability, and excellent insulation properties. Wool fibers are thicker and more robust than cashmere, making them ideal for outerwear, suits, and knitwear designed for long-term wear and colder climates. Cashmere is a natural fiber obtained from the undercoat of cashmere goats, primarily found in regions like Mongolia, Nepal, and northern China. Renowned for its exceptional softness, warmth, and lightweight feel, cashmere is significantly finer than sheep’s wool, which gives it a smooth, almost silky texture against the skin.', 'purple' ); ?></p>
30-
<!-- /wp:paragraph --></div>
30+
<!-- /wp:paragraph -->
31+
32+
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
33+
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
34+
<!-- /wp:spacer --></div>
3135
<!-- /wp:accordion-panel --></div>
3236
<!-- /wp:accordion-item -->
3337

@@ -36,10 +40,14 @@
3640
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle" style="padding-top:0.88rem;padding-bottom:0.88rem"><span class="wp-block-accordion-heading__toggle-title"><?php esc_html_e( 'How should I wash my knitwear?', 'purple' ); ?></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
3741
<!-- /wp:accordion-heading -->
3842

39-
<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}}} -->
40-
<div role="region" class="wp-block-accordion-panel" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
43+
<!-- wp:accordion-panel {"style":{"spacing":{"blockGap":"0"}}} -->
44+
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
4145
<p><?php esc_html_e( 'Wool is a natural fiber harvested from sheep. It’s known for its durability, breathability, and excellent insulation properties. Wool fibers are thicker and more robust than cashmere, making them ideal for outerwear, suits, and knitwear designed for long-term wear and colder climates. Cashmere is a natural fiber obtained from the undercoat of cashmere goats, primarily found in regions like Mongolia, Nepal, and northern China. Renowned for its exceptional softness, warmth, and lightweight feel, cashmere is significantly finer than sheep’s wool, which gives it a smooth, almost silky texture against the skin.', 'purple' ); ?></p>
42-
<!-- /wp:paragraph --></div>
46+
<!-- /wp:paragraph -->
47+
48+
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
49+
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
50+
<!-- /wp:spacer --></div>
4351
<!-- /wp:accordion-panel --></div>
4452
<!-- /wp:accordion-item -->
4553

@@ -48,10 +56,14 @@
4856
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle" style="padding-top:0.88rem;padding-bottom:0.88rem"><span class="wp-block-accordion-heading__toggle-title"><?php esc_html_e( 'Why does my knitwear pill and how can I prevent it?', 'purple' ); ?></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
4957
<!-- /wp:accordion-heading -->
5058

51-
<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}}} -->
52-
<div role="region" class="wp-block-accordion-panel" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
59+
<!-- wp:accordion-panel {"style":{"spacing":{"blockGap":"0"}}} -->
60+
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
5361
<p><?php esc_html_e( 'Wool is a natural fiber harvested from sheep. It’s known for its durability, breathability, and excellent insulation properties. Wool fibers are thicker and more robust than cashmere, making them ideal for outerwear, suits, and knitwear designed for long-term wear and colder climates. Cashmere is a natural fiber obtained from the undercoat of cashmere goats, primarily found in regions like Mongolia, Nepal, and northern China. Renowned for its exceptional softness, warmth, and lightweight feel, cashmere is significantly finer than sheep’s wool, which gives it a smooth, almost silky texture against the skin.', 'purple' ); ?></p>
54-
<!-- /wp:paragraph --></div>
62+
<!-- /wp:paragraph -->
63+
64+
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
65+
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
66+
<!-- /wp:spacer --></div>
5567
<!-- /wp:accordion-panel --></div>
5668
<!-- /wp:accordion-item -->
5769

@@ -60,10 +72,14 @@
6072
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle" style="padding-top:0.88rem;padding-bottom:0.88rem"><span class="wp-block-accordion-heading__toggle-title"><?php esc_html_e( 'What materials are best for sensitive skin?', 'purple' ); ?></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
6173
<!-- /wp:accordion-heading -->
6274

63-
<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}}} -->
64-
<div role="region" class="wp-block-accordion-panel" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
75+
<!-- wp:accordion-panel {"style":{"spacing":{"blockGap":"0"}}} -->
76+
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
6577
<p><?php esc_html_e( 'Wool is a natural fiber harvested from sheep. It’s known for its durability, breathability, and excellent insulation properties. Wool fibers are thicker and more robust than cashmere, making them ideal for outerwear, suits, and knitwear designed for long-term wear and colder climates. Cashmere is a natural fiber obtained from the undercoat of cashmere goats, primarily found in regions like Mongolia, Nepal, and northern China. Renowned for its exceptional softness, warmth, and lightweight feel, cashmere is significantly finer than sheep’s wool, which gives it a smooth, almost silky texture against the skin.', 'purple' ); ?></p>
66-
<!-- /wp:paragraph --></div>
78+
<!-- /wp:paragraph -->
79+
80+
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
81+
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
82+
<!-- /wp:spacer --></div>
6783
<!-- /wp:accordion-panel --></div>
6884
<!-- /wp:accordion-item -->
6985

@@ -72,10 +88,14 @@
7288
<h3 class="wp-block-accordion-heading has-medium-font-size" style="font-style:normal;font-weight:400"><button type="button" class="wp-block-accordion-heading__toggle" style="padding-top:0.88rem;padding-bottom:0.88rem"><span class="wp-block-accordion-heading__toggle-title"><?php esc_html_e( 'How do I store knitwear during warmer months?', 'purple' ); ?></span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
7389
<!-- /wp:accordion-heading -->
7490

75-
<!-- wp:accordion-panel {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}}} -->
76-
<div role="region" class="wp-block-accordion-panel" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
91+
<!-- wp:accordion-panel {"style":{"spacing":{"blockGap":"0"}}} -->
92+
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
7793
<p><?php esc_html_e( 'Wool is a natural fiber harvested from sheep. It’s known for its durability, breathability, and excellent insulation properties. Wool fibers are thicker and more robust than cashmere, making them ideal for outerwear, suits, and knitwear designed for long-term wear and colder climates. Cashmere is a natural fiber obtained from the undercoat of cashmere goats, primarily found in regions like Mongolia, Nepal, and northern China. Renowned for its exceptional softness, warmth, and lightweight feel, cashmere is significantly finer than sheep’s wool, which gives it a smooth, almost silky texture against the skin.', 'purple' ); ?></p>
78-
<!-- /wp:paragraph --></div>
94+
<!-- /wp:paragraph -->
95+
96+
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
97+
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
98+
<!-- /wp:spacer --></div>
7999
<!-- /wp:accordion-panel --></div>
80100
<!-- /wp:accordion-item --></div>
81101
<!-- /wp:accordion --></div>

0 commit comments

Comments
 (0)