From 9d9199b91d618a974e8710c121829eea253d3bbc Mon Sep 17 00:00:00 2001 From: Vinny Listrani Date: Wed, 11 Mar 2026 15:17:55 -0500 Subject: [PATCH 1/4] [MOOSE-351]: Add border and shadow options to theme.json; implement editor filters for label adjustments --- .../core/assets/js/editor/filters/index.js | 32 +++++++++++++++++++ .../themes/core/assets/js/editor/ready.js | 2 ++ wp-content/themes/core/theme.json | 24 +++++++++++++- 3 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/core/assets/js/editor/filters/index.js diff --git a/wp-content/themes/core/assets/js/editor/filters/index.js b/wp-content/themes/core/assets/js/editor/filters/index.js new file mode 100644 index 000000000..1a966fe6c --- /dev/null +++ b/wp-content/themes/core/assets/js/editor/filters/index.js @@ -0,0 +1,32 @@ +/** + * @module editor-filters + * + * @description Registers editor-level filters. + */ + +import { addFilter } from '@wordpress/hooks'; +import { __ } from '@wordpress/i18n'; + +const shadowLabel = 'Shadow'; +const borderAndShadowLabel = __('Border & Shadow', 'tribe'); + +const relabelShadowLabel = ( translation, text ) => { + if ( text !== shadowLabel ) { + return translation; + } + + return borderAndShadowLabel; +}; + +const init = () => { + // TODO: As of WP 6.9.4, this workaround is needed for a Gutenberg [label bug](https://github.com/WordPress/gutenberg/issues/60192). + // The bug is not directly related to the issue in that report, but rather the fact that enabling border or shadow via theme.json breaks that label logic. + // Revisit and remove if core fixes it or if this causes editor interference. + addFilter( + 'i18n.gettext', + 'tribe/relabel-shadow-label', + relabelShadowLabel + ); +}; + +export default init; diff --git a/wp-content/themes/core/assets/js/editor/ready.js b/wp-content/themes/core/assets/js/editor/ready.js index bcc804ea7..e0155a552 100644 --- a/wp-content/themes/core/assets/js/editor/ready.js +++ b/wp-content/themes/core/assets/js/editor/ready.js @@ -6,6 +6,7 @@ import blockAnimations from './block-animations'; import colorPicker from './color-picker'; +import filters from './filters'; /** * @function init @@ -14,6 +15,7 @@ import colorPicker from './color-picker'; const init = () => { // initialize block animation controls in editor + filters(); blockAnimations(); colorPicker(); diff --git a/wp-content/themes/core/theme.json b/wp-content/themes/core/theme.json index 36d6a3e78..5298a3f4a 100644 --- a/wp-content/themes/core/theme.json +++ b/wp-content/themes/core/theme.json @@ -44,13 +44,22 @@ } }, "core/columns": { + "border": { + "color": true, + "radius": true, + "style": true, + "width": true + }, "spacing": { "blockGap": true } }, "core/cover": { "border": { - "radius": true + "color": true, + "radius": true, + "style": true, + "width": true } }, "core/details": { @@ -66,6 +75,13 @@ } }, "core/group": { + "border": { + "color": true, + "radius": true, + "style": true, + "width": true + }, + "shadow": true, "color": { "background": true }, @@ -176,6 +192,12 @@ } } }, + "border":{ + "color":false, + "radius":false, + "style":false, + "width":false + }, "color": { "background": false, "custom": false, From cb80a6e6cdbd7c9e16396269616278431cb33611 Mon Sep 17 00:00:00 2001 From: Vinny Listrani Date: Wed, 11 Mar 2026 15:26:30 -0500 Subject: [PATCH 2/4] [MOOSE-351]: linting --- .../themes/core/assets/js/editor/filters/index.js | 2 +- wp-content/themes/core/theme.json | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/wp-content/themes/core/assets/js/editor/filters/index.js b/wp-content/themes/core/assets/js/editor/filters/index.js index 1a966fe6c..88d87ac84 100644 --- a/wp-content/themes/core/assets/js/editor/filters/index.js +++ b/wp-content/themes/core/assets/js/editor/filters/index.js @@ -8,7 +8,7 @@ import { addFilter } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; const shadowLabel = 'Shadow'; -const borderAndShadowLabel = __('Border & Shadow', 'tribe'); +const borderAndShadowLabel = __( 'Border & Shadow', 'tribe' ); const relabelShadowLabel = ( translation, text ) => { if ( text !== shadowLabel ) { diff --git a/wp-content/themes/core/theme.json b/wp-content/themes/core/theme.json index 5298a3f4a..1202f5073 100644 --- a/wp-content/themes/core/theme.json +++ b/wp-content/themes/core/theme.json @@ -192,11 +192,11 @@ } } }, - "border":{ - "color":false, - "radius":false, - "style":false, - "width":false + "border": { + "color": false, + "radius": false, + "style": false, + "width": false }, "color": { "background": false, From 6bc4814ca286621ea5666e28869a6b63e293645d Mon Sep 17 00:00:00 2001 From: Vinny Listrani Date: Wed, 11 Mar 2026 15:29:55 -0500 Subject: [PATCH 3/4] [MOOSE-351]: update CHANGELOG --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e0f65ce1..30ec02719 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,8 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security). - Updated: `npm run create-block` script template files updated. - Added: New Accordion block styling - Added: support for custom ACF Color Picker field integration. +- Updated: `theme.json` border controls are now enabled only for `core/group`, `core/columns`, and `core/cover`. +- Fixed: Block editor panel label now shows "Border & Shadow" via a centralized editor filter workaround for [Gutenberg issue #60192](https://github.com/WordPress/gutenberg/issues/60192). - Removed: Details block styling - Fixed: pre-push git hooks running properly again. From 0cccf851ccfe9557899bb17f692c5264a94aff87 Mon Sep 17 00:00:00 2001 From: Vinny Listrani Date: Wed, 11 Mar 2026 15:42:57 -0500 Subject: [PATCH 4/4] [MOOSE-351]: Refactor editor filters to update panel heading for border and shadow options; implement MutationObserver for dynamic updates. --- .../core/assets/js/editor/filters/index.js | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/wp-content/themes/core/assets/js/editor/filters/index.js b/wp-content/themes/core/assets/js/editor/filters/index.js index 88d87ac84..0fb2ffde1 100644 --- a/wp-content/themes/core/assets/js/editor/filters/index.js +++ b/wp-content/themes/core/assets/js/editor/filters/index.js @@ -1,32 +1,35 @@ /** * @module editor-filters * - * @description Registers editor-level filters. + * @description Registers editor-level UI workarounds. */ -import { addFilter } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; -const shadowLabel = 'Shadow'; -const borderAndShadowLabel = __( 'Border & Shadow', 'tribe' ); +const panelHeadingSelector = 'h2.components-heading'; +const shadowHeading = 'Shadow'; +const borderAndShadowHeading = __( 'Border & Shadow', 'tribe' ); -const relabelShadowLabel = ( translation, text ) => { - if ( text !== shadowLabel ) { - return translation; - } +const relabelShadowPanelHeading = () => { + const headings = document.querySelectorAll( panelHeadingSelector ); - return borderAndShadowLabel; + headings.forEach( ( heading ) => { + if ( heading.textContent?.trim() !== shadowHeading ) { + return; + } + + heading.textContent = borderAndShadowHeading; + } ); }; const init = () => { - // TODO: As of WP 6.9.4, this workaround is needed for a Gutenberg [label bug](https://github.com/WordPress/gutenberg/issues/60192). - // The bug is not directly related to the issue in that report, but rather the fact that enabling border or shadow via theme.json breaks that label logic. + // TODO: As of WP 6.9.4, this workaround is needed for a Gutenberg label bug. + // Ref: https://github.com/WordPress/gutenberg/issues/60192 // Revisit and remove if core fixes it or if this causes editor interference. - addFilter( - 'i18n.gettext', - 'tribe/relabel-shadow-label', - relabelShadowLabel - ); + relabelShadowPanelHeading(); + + const observer = new MutationObserver( relabelShadowPanelHeading ); + observer.observe( document.body, { childList: true, subtree: true } ); }; export default init;