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. 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..0fb2ffde1 --- /dev/null +++ b/wp-content/themes/core/assets/js/editor/filters/index.js @@ -0,0 +1,35 @@ +/** + * @module editor-filters + * + * @description Registers editor-level UI workarounds. + */ + +import { __ } from '@wordpress/i18n'; + +const panelHeadingSelector = 'h2.components-heading'; +const shadowHeading = 'Shadow'; +const borderAndShadowHeading = __( 'Border & Shadow', 'tribe' ); + +const relabelShadowPanelHeading = () => { + const headings = document.querySelectorAll( panelHeadingSelector ); + + 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. + // Ref: https://github.com/WordPress/gutenberg/issues/60192 + // Revisit and remove if core fixes it or if this causes editor interference. + relabelShadowPanelHeading(); + + const observer = new MutationObserver( relabelShadowPanelHeading ); + observer.observe( document.body, { childList: true, subtree: true } ); +}; + +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..1202f5073 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,