Customizer broken with WP 6.7 (#136)

* resolves #135 * updated CSS * add dynamically enqueued stylesheet * phpcs fixes * update version and readme
BoldGrid · Nov 7, 2024 · 45e5d03 · 45e5d03
1 parent 760e126
commit 45e5d03
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 * **Contributors:** rramo012, timph, jamesros161
 * **Tags:** inspiration,customization,build,create,design
 * **Requires at least:** 4.9
-* **Tested up to:** 6.6
+* **Tested up to:** 6.7
 * **License:** GPL-3.0-or-later
 * **License URI:** https://www.gnu.org/licenses/gpl-3.0-standalone.html
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-theme-framework",
-	"version": "2.22.6",
+	"version": "2.22.7",
 	"description": "BoldGrid Theme Framework",
 	"main": "index.js",
 	"engines": {

diff --git a/readme.txt b/readme.txt
@@ -3,8 +3,8 @@ Contributors: boldgrid, timph, rramo012, bgnicolepaschen, joemoto, imh_brad, jam
 Tags: news, blog, e-commerce, sticky-post, theme-options, threaded-comments, full-width-template, footer-widgets, featured-images, flexible-header, custom-header, custom-logo, custom-background, custom-colors, custom-menu, editor-style, translation-ready, left-sidebar, right-sidebar, grid-layout, one-column, two-columns, three-columns, four-columns
 Requires PHP: 5.6
 Requires at least: 4.8
-Tested up to: 6.6
-Stable tag: 2.22.6
+Tested up to: 6.7
+Stable tag: 2.22.7
 License: GPL-3.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html
 
@@ -22,6 +22,9 @@ This version changes the way the color palette CSS is generated. If you are usin
 
 ## Changelog ##
 
+== 2.22.7 ==
+* Bug Fix: Customizer broken with WP 6.7 [#135](https://github.com/BoldGrid/crio/issues/135)
+
 == 2.22.6 ==
 * update: Updated WooCommerce templates [#134](https://github.com/BoldGrid/crio/pull/134)
 

diff --git a/src/assets/scss/customizer/controls-wp67.scss b/src/assets/scss/customizer/controls-wp67.scss
@@ -0,0 +1,37 @@
+/*
+ * Compatibility with WordPress 6.7 and
+ * newer customizer changes
+ */
+ #customize-controls {
+	.control-section-bgtfw-upsell {
+		.accordion-section-title {
+			&::after {
+				content: none;
+			}
+		}
+	}
+	.accordion-section-title {
+		min-height: 40px;
+		&.dashicons-cover-image {
+			&::before {
+				margin-top: 10px;
+			}
+		}
+		&::before {
+			position: absolute;
+			padding: 10px;
+			margin-right: 20px;
+			margin-left: 10px;
+			line-height: 30px;
+			text-align: center;
+		}
+		button.accordion-trigger {
+			width: calc( 100% - 3.75em );
+			padding: 0.5em 0 0 3.75em;
+			min-height: 40px;
+			&:hover, &:focus, &:active {
+				background: transparent;
+			}
+		}
+	}
+}
diff --git a/src/assets/scss/customizer/controls/_sections.scss b/src/assets/scss/customizer/controls/_sections.scss
@@ -6,6 +6,7 @@
 	}
 }
 
+
 // Base Styles.
 #customize-controls {
 	.control-section-bgtfw_section.open > li.control-section-bgtfw_section {
@@ -42,7 +43,7 @@ span.section-title-extended {
 	font-weight: 400;
 	h3.accordion-section-title & {
 		margin-left: 3.25em;
-		margin-bottom: -6px;
+		margin-bottom: 0px;
 		margin-top: -3px;
 	}
 }
@@ -93,7 +94,6 @@ span.section-title-extended {
 	// See: https://github.com/BoldGrid/boldgrid-theme-framework/issues/120
 	&.icon-sidebar-settings:before {
 		transform: rotate(-90deg)!important;
-		padding: 0 .5em .5em 0!important;
 		display: inline-block !important;
 		margin-top: -.5em;
 	}

diff --git a/src/assets/scss/icomoon/style.scss b/src/assets/scss/icomoon/style.scss
@@ -105,7 +105,6 @@
   content: "\e927";
   display: inline-block !important;
   transform: rotate(-90deg) !important;
-  padding: 0 .5em !important;
 }
 .icon-crio:before,
 .icon-crio-enzo:before {

diff --git a/src/boldgrid-theme-framework.php b/src/boldgrid-theme-framework.php
@@ -3,7 +3,7 @@
  * Plugin Name: BoldGrid Theme Framework
  * Plugin URI: https://www.boldgrid.com/docs/configuration-file
  * Description: BoldGrid Theme Framework is a library that allows you to easily make BoldGrid themes. Please see our reference guide for more information: https://www.boldgrid.com/docs/configuration-file
- * Version: 2.22.6
+ * Version: 2.22.7
  * Author: BoldGrid.com <[email protected]>
  * Author URI: https://www.boldgrid.com/
  * Text Domain: bgtfw

diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-panel.php b/src/includes/customizer/class-boldgrid-framework-customizer-panel.php
@@ -222,9 +222,41 @@ protected function content_template() {
 		 * @since 4.3.0
 		 */
 		protected function render_template() {
+
+			// Strip the beta or RC suffix from the version number.
+			$wp_version = preg_replace( '/-.*/', '', get_bloginfo( 'version' ) );
+			// If wordpress version is less than 6.7 then use the old template
+			if ( version_compare( $wp_version, '6.7', '<' ) ) {
+				$this->old_render_template();
+				return;
+			}
+			?>
+			<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
+			<h3 class="wp67 accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
+					<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
+						{{ data.title }}
+					</button>
+				</h3>
+				<ul class="accordion-sub-container control-panel-content" id="{{ data.id }}-content"></ul>
+			</li>
+		<?php
+		}
+
+		/**
+		 * An Underscore (JS) template for rendering this panel's container in
+		 * versions of WP older than 6.7.
+		 *
+		 * Class variables for this panel class are available in the `data` JS object;
+		 * export custom variables by overriding WP_Customize_Panel::json().
+		 *
+		 * @see WP_Customize_Panel::print_template()
+		 *
+		 * @since 4.3.0
+		 */
+		protected function old_render_template() {
 			?>
 			<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
-				<h3 class="accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
+				<h3 class="legacy accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
 					{{ data.title }}
 					<span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this panel', 'crio' ); ?></span>
 				</h3>

diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-section.php b/src/includes/customizer/class-boldgrid-framework-customizer-section.php
@@ -151,9 +151,79 @@ public function get_icon() {
 		 * @see WP_Customize_Section::print_template()
 		 */
 		protected function render_template() {
+
+			// Strip the beta or RC suffix from the version number.
+			$wp_version = preg_replace( '/-.*/', '', get_bloginfo( 'version' ) );
+			// If wordpress version is less than 6.7 then use the old template
+			if ( version_compare( $wp_version, '6.7', '<' ) ) {
+				$this->old_render_template();
+				return;
+			}
 			?>
 			<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
 				<h3 class="accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
+					<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
+						{{ data.title }}
+					</button>
+				</h3>
+				<ul class="accordion-section-content" id="{{ data.id }}-content">
+					<li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
+						<div class="customize-section-title">
+							<button class="customize-section-back" tabindex="-1">
+								<span class="screen-reader-text">
+									<?php
+									/* translators: Hidden accessibility text. */
+									esc_html_e( 'Back', 'crio' );
+									?>
+								</span>
+							</button>
+							<h3>
+								<span class="customize-action">
+									{{{ data.customizeAction }}}
+								</span>
+								<div class="bgtfw-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>">{{ data.title }}</div>
+							</h3>
+							<# if ( data.description && data.description_hidden ) { #>
+								<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text">
+									<?php
+									/* translators: Hidden accessibility text. */
+									esc_html_e( 'Help', 'crio' );
+									?>
+								</span></button>
+								<div class="description customize-section-description">
+									{{{ data.description }}}
+								</div>
+							<# } #>
+
+							<div class="customize-control-notifications-container"></div>
+						</div>
+
+						<# if ( data.description && ! data.description_hidden ) { #>
+							<div class="description customize-section-description">
+								{{{ data.description }}}
+							</div>
+						<# } #>
+					</li>
+				</ul>
+			</li>
+			<?php
+		}
+
+		/**
+		 * An Underscore (JS) template for rendering this section's content (but not its container) in
+		 * versions of WP older than 6.7.
+		 *
+		 * Class variables for this section class are available in the `data` JS object;
+		 * export custom variables by overriding WP_Customize_Section::json().
+		 *
+		 * @since 4.3.0
+		 *
+		 * @see WP_Customize_Section::print_template()
+		 */
+		protected function old_render_template() {
+			?>
+			<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
+				<h3 class="legacy accordion-section-title<# if ( ! _.isEmpty( data.icon ) ) { #> {{ data.icon }}<# } #>" tabindex="0">
 					{{ data.title }}
 					<span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this section', 'crio' ); ?></span>
 				</h3>

diff --git a/src/includes/customizer/class-boldgrid-framework-customizer.php b/src/includes/customizer/class-boldgrid-framework-customizer.php
@@ -477,6 +477,18 @@ public function enqueue_styles() {
 			array(),
 			$this->configs['version']
 		);
+
+		// Strip the beta or RC suffix from the version number.
+		$wp_version = preg_replace( '/-.*/', '', get_bloginfo( 'version' ) );
+		// If wordpress version greater than or equal to 6.7 then enqueue the new styles
+		if ( version_compare( $wp_version, '6.7', '>=' ) ) {
+			wp_enqueue_style(
+				'bgtfw-control-styles-wp67',
+				$this->scripts->get_webpack_url( $this->configs['framework']['css_dir'], 'customizer/controls-wp67.min.css' ),
+				array(),
+				$this->configs['version']
+			);
+		}
 	}
 
 	/**

diff --git a/style.css b/style.css
@@ -4,9 +4,9 @@ Author: BoldGrid
 Theme URI: https://www.boldgrid.com/themes/crio/
 Author URI: https://www.boldgrid.com/
 Description: Crio is a WordPress SuperTheme that allows front-end designers, developers and other web professionals to create without bounds or restrictions.  Crio's advanced customization options are completely integrated with the WordPress Customizer API, providing you with a powerful, but familiar interface to customize your website. Our integration gives you granular control over many elements straight from the Customizer, and even device previews so you can see how your site looks on different devices. Crio’s unique color palette system keeps colors consistent across your site. Drag and drop colors in your palette to increase or decrease the usage of that color throughout your website. Use the advanced controls to create a custom Header, Footer, or Blog Page layout. Be Bold and stand above the rest with Prime by BoldGrid!
-Version: 2.22.6
+Version: 2.22.7
 Requires at least: 5.5
-Tested up to: 6.6
+Tested up to: 6.7
 Requires PHP: 5.6
 License: GPL-3.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html