Change in Customizer.php
-
I’m noticing a change between 4.6.12 and 4.6.13 that appears to be the culprit for an error we saw after upgrading to 4.6.13. The extremely unhelpful error in the Chrome console read as follows:
Uncaught SyntaxError: Unexpected token .This appears to be occurring when Javascript attempts to execute the following code:
<script id="tmpl-tribe_customizer_css">.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"], #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, #tribe-events .tribe-events-button, .tribe-events-button.tribe-inactive, #tribe-events .tribe-events-button:hover, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover { background-color: <%= general_theme.accent_color %>; } #tribe-events-content .tribe-events-tooltip h4, #tribe_events_filters_wrapper .tribe_events_slider_val, .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-gcal { color: <%= general_theme.accent_color %>; } .tribe-grid-allday .tribe-events-week-allday-single, .tribe-grid-body .tribe-events-week-hourly-single, .tribe-grid-allday .tribe-events-week-allday-single:hover, .tribe-grid-body .tribe-events-week-hourly-single:hover { background-color: <%= general_theme.accent_color %>; border-color: rgba(0, 0, 0, 0.3); } .tribe-events-list .tribe-events-loop .tribe-event-featured, .tribe-events-list #tribe-events-day.tribe-events-loop .tribe-event-featured, .type-tribe_events.tribe-events-photo-event.tribe-event-featured .tribe-events-photo-event-wrap, .type-tribe_events.tribe-events-photo-event.tribe-event-featured .tribe-events-photo-event-wrap:hover { background-color: <%= general_theme.button_bg %>; } #tribe-events-content table.tribe-events-calendar .type-tribe_events.tribe-event-featured { background-color: <%= general_theme.button_bg %>; } .tribe-events-list-widget .tribe-event-featured, .tribe-events-venue-widget .tribe-event-featured, .tribe-mini-calendar-list-wrapper .tribe-event-featured, .tribe-events-adv-list-widget .tribe-event-featured .tribe-mini-calendar-event { background-color: <%= general_theme.button_bg %>; } .tribe-grid-body .tribe-event-featured.tribe-events-week-hourly-single { background-color: rgba(<%= general_theme.button_bg_hex_red %>,<%= general_theme.button_bg_hex_green %>,<%= general_theme.button_bg_hex_blue %>, .7 ); border-color: <%= general_theme.button_bg %>; } .tribe-grid-body .tribe-event-featured.tribe-events-week-hourly-single:hover { background-color: <%= general_theme.button_bg %>; } .tribe-button { background-color: <%= general_theme.button_bg %>; color: <%= general_theme.button_color %>; } .tribe-button:hover, .tribe-button:active, .tribe-button:focus { background-color: <%= general_theme.button_bg_hover %>; } #tribe-events .tribe-event-featured .tribe-button:hover { color: <%= general_theme.button_color_hover %>; } #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, #tribe-events .tribe-events-button, .tribe-events-button.tribe-inactive, #tribe-events .tribe-events-button:hover, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover { background-color: <%= global_elements.button_color %>; } #tribe-events .tribe-events-calendar td.tribe-events-othermonth, #tribe-events .tribe-grid-allday, #tribe-events .tribe-week-today, #tribe-events .tribe-events-calendar td:hover { background-color: <%= month_week_view.cell_inactive_bg_color %>; } #tribe-events .tribe-events-calendar td, #tribe-events .tribe-week-grid-block div, #tribe-events .tribe-events-grid, #tribe-events .tribe-grid-allday, #tribe-events .tribe-events-grid .tribe-scroller, #tribe-events .tribe-events-grid .tribe-grid-body .column, #tribe-events .tribe-events-grid .tribe-grid-allday .column { border-color: <%= month_week_view.border_dark_color %>; } .events-archive.events-gridview #tribe-events-content table .type-tribe_events, .tribe-events-shortcode .tribe-events-month table .type-tribe_events { border-color: <%= month_week_view.border_light_color %>; } .tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"], .tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"] > a { background-color: <%= month_week_view.cell_inactive_header_bg_color %>; } .tribe-events-calendar div[id*="tribe-events-daynum-"], .tribe-events-calendar div[id*="tribe-events-daynum-"] a { background-color: <%= month_week_view.cell_header_bg_color %>; } .tribe-events-calendar thead th, .tribe-events-grid .tribe-grid-header .tribe-grid-content-wrap .column, .tribe-grid-header { background-color: <%= month_week_view.table_header_bg_color %>; border-left-color: <%= month_week_view.table_header_bg_color %>; border-right-color: <%= month_week_view.table_header_bg_color %>; } #tribe-events td.tribe-events-present div[id*="tribe-events-daynum-"], #tribe-events td.tribe-events-present div[id*="tribe-events-daynum-"] > a { background-color: <%= month_week_view.highlight_color %>; color: #fff; } #tribe-events .tribe-events-grid .tribe-grid-header div.tribe-week-today { background-color: <%= month_week_view.highlight_color %>; } .tribe-grid-allday .tribe-events-week-allday-single, .tribe-grid-body .tribe-events-week-hourly-single, .tribe-grid-allday .tribe-events-week-allday-single:hover, .tribe-grid-body .tribe-events-week-hourly-single:hover { background-color: <%= month_week_view.highlight_color %>; background-color: <%= month_week_view.highlight_color_rgba %>; border-color: <%= month_week_view.highlight_border_color %> } .single-tribe_events .tribe-events-event-meta { background-color: <%= single_event.details_bg_color %>; color: <%= single_event.details_text_color %>; } .tribe-events-single-event-title { color: <%= single_event.post_title_color %>; }</script>I am observing the following differences between 4.6.12 and 4.6.13 that would seem to explain this:
--- 4.6.12/the-events-calendar/common/src/Tribe/Customizer.php 2018-03-27 23:13:59.470954422 +0000 +++ 4.6.13/the-events-calendar/common/src/Tribe/Customizer.php 2018-04-05 13:40:47.553633046 +0000 @@ -404,12 +404,12 @@ } // All sections should use this action to print their template - echo '<script type="text/css" id="' . esc_attr( 'tmpl-' . $this->ID . '_css' ) . '">'; + echo '<script id="' . esc_attr( 'tmpl-' . $this->ID . '_css' ) . '">'; echo $css_template; echo '</script>'; // Place where the template will be rendered to - echo '<style type="text/css" id="' . esc_attr( $this->ID . '_css' ) . '">'; + echo '<style id="' . esc_attr( $this->ID . '_css' ) . '">'; echo $this->parse_css_template( $css_template ); echo '</style>'; }The thing I am wondering is why is the CSS template being spit out inside of script tags? Once Javascript reaches that script block and attempts to execute it, it will throw an error and bomb, as it is not valid Javascript (which appeared to be happening on one of our sites; the plugin has been disabled for the time being).
Is the block that gets spit out as
id="tmpl-tribe_customizer_css"in the script tags even necessary, and if so, what uses it? That might be helpful in figuring out why this stopped working. Thanks.
The topic ‘Change in Customizer.php’ is closed to new replies.