From 4b020494b7b90a02a2a2b1c5022a769bdeaa45db Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Wed, 26 Nov 2025 19:59:57 +0900 Subject: [PATCH 1/2] Accordion Heading: Add default style for classic themes --- .../src/accordion-heading/style.scss | 32 +------------ packages/block-library/src/classic.scss | 38 +++++++++++++++ test/emptytheme/theme.json | 46 +++++++++++++++---- 3 files changed, 78 insertions(+), 38 deletions(-) diff --git a/packages/block-library/src/accordion-heading/style.scss b/packages/block-library/src/accordion-heading/style.scss index 67c5d477154a59..2da9c06f16b4e4 100644 --- a/packages/block-library/src/accordion-heading/style.scss +++ b/packages/block-library/src/accordion-heading/style.scss @@ -1,9 +1,3 @@ -.wp-block-accordion-heading { - // Some classic themes apply default margins to heading elements, - // so those styles need to be reset. - margin: 0; -} - .wp-block-accordion-heading__toggle { font-family: inherit; font-size: inherit; @@ -14,7 +8,9 @@ text-decoration: inherit; word-spacing: inherit; font-style: inherit; + background: none; border: none; + color: inherit; padding: var(--wp--preset--spacing--20, 1em) 0; cursor: pointer; overflow: hidden; @@ -23,34 +19,10 @@ text-align: inherit; width: 100%; - // Some themes may apply colors to button elements with a particularly - // high CSS specificity. Since it's impossible to predict this specificity, - // we reset the colors using `!important`. - background-color: inherit !important; - color: inherit !important; - &:not(:focus-visible) { outline: none; } - &:hover, - &:focus { - // Some themes may apply styles when a button element is hovered - // over or focused. This is not intended for accordion toggle - // buttons, so we reset it here. - text-decoration: none; - background-color: inherit !important; - box-shadow: none; - color: inherit; - border: none; - padding: var(--wp--preset--spacing--20, 1em) 0; - } - - &:focus-visible { - outline: auto; - outline-offset: 0; - } - &:hover .wp-block-accordion-heading__toggle-title { text-decoration: underline; } diff --git a/packages/block-library/src/classic.scss b/packages/block-library/src/classic.scss index ace23d9dfdae38..7b9ac61e6cbba8 100644 --- a/packages/block-library/src/classic.scss +++ b/packages/block-library/src/classic.scss @@ -20,3 +20,41 @@ background: #32373c; color: $white; } + +// These rules are needed to enforce the default styling of +// the Accordion Heading block in the classic theme. +.wp-block-accordion-heading { + // Heading elements may have default margins applied, so those + // styles need to be reset. + margin: 0; +} + +.wp-block-accordion-heading__toggle { + // Button elements can have colors applied with high CSS specificity, + // and since this specificity is impossible to predict, we use + // `!important` to reset the color. + background-color: inherit !important; + color: inherit !important; + + &:not(:focus-visible) { + outline: none; + } + + &:hover, + &:focus { + // Sometimes styles are applied when the button element is + // hovered over or focused. This isn't expected for accordion + // toggle buttons, so reset those styles here. + text-decoration: none; + background-color: inherit !important; + box-shadow: none; + color: inherit; + border: none; + padding: var(--wp--preset--spacing--20, 1em) 0; + } + + &:focus-visible { + outline-offset: 0; + outline: auto; + } +} diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 09f11eeeff8cfb..1552fc52844858 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -1,5 +1,5 @@ { - "$schema": "../../schemas/json/theme.json", + "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3, "settings": { "appearanceTools": true, @@ -8,12 +8,42 @@ "wideSize": "1100px" } }, - "customTemplates": [ - { - "name": "custom-template", - "title": "Custom", - "postTypes": [ "post" ] + "styles": { + "blocks": { + "core/accordion-item": { + "border": { + "color": "#d5dae2", + "style": "solid", + "width": "1px", + "radius": "12px" + }, + "color": { + "background": "#f6f7f9", + "text": "#343b46" + }, + "shadow": "0 10px 15px -3px #80000080, 0 4px 6px -4px #80000080" + }, + "core/accordion-heading": { + "css": "&__toggle { padding: var(--wp--preset--spacing--40) var(--wp--style--block-gap); }", + "typography": { + "fontFamily": "inherit", + "fontSize": "inherit", + "fontStyle": "inherit", + "fontWeight": "500", + "lineHeight": "inherit", + "textTransform": "inherit" + } + }, + "core/accordion-panel": { + "spacing": { + "padding": { + "top": "var(--wp--style--block-gap)", + "bottom": "var(--wp--style--block-gap)", + "left": "var(--wp--style--block-gap)", + "right": "var(--wp--style--block-gap)" + } + } + } } - ], - "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] + } } From 67bd825b7fe0965f83fcaa42d494339fccd9f2c9 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 28 Nov 2025 15:39:34 +0900 Subject: [PATCH 2/2] Revert unnecessary changes --- test/emptytheme/theme.json | 46 +++++++------------------------------- 1 file changed, 8 insertions(+), 38 deletions(-) diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 1552fc52844858..09f11eeeff8cfb 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -1,5 +1,5 @@ { - "$schema": "https://schemas.wp.org/trunk/theme.json", + "$schema": "../../schemas/json/theme.json", "version": 3, "settings": { "appearanceTools": true, @@ -8,42 +8,12 @@ "wideSize": "1100px" } }, - "styles": { - "blocks": { - "core/accordion-item": { - "border": { - "color": "#d5dae2", - "style": "solid", - "width": "1px", - "radius": "12px" - }, - "color": { - "background": "#f6f7f9", - "text": "#343b46" - }, - "shadow": "0 10px 15px -3px #80000080, 0 4px 6px -4px #80000080" - }, - "core/accordion-heading": { - "css": "&__toggle { padding: var(--wp--preset--spacing--40) var(--wp--style--block-gap); }", - "typography": { - "fontFamily": "inherit", - "fontSize": "inherit", - "fontStyle": "inherit", - "fontWeight": "500", - "lineHeight": "inherit", - "textTransform": "inherit" - } - }, - "core/accordion-panel": { - "spacing": { - "padding": { - "top": "var(--wp--style--block-gap)", - "bottom": "var(--wp--style--block-gap)", - "left": "var(--wp--style--block-gap)", - "right": "var(--wp--style--block-gap)" - } - } - } + "customTemplates": [ + { + "name": "custom-template", + "title": "Custom", + "postTypes": [ "post" ] } - } + ], + "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] }