Feature/moose 351/border settings

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.
 

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;

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();
 

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,