Support » Plugin: The Events Calendar » Change in Customizer.php

  • Resolved Stephen Leavitt

    (@sleavitt)


    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Barry

    (@barryhughes-1)

    Hi @sleavitt,

    The script element you’re referring to is used as a template for our theme customizer code. The type attribute (of text/css) was mistakenly removed during other work, which led to this problem as, without a type attribute, the browser assumes it is Javascript (which of course it is not).

    We’re aware and a fix has already been put together, so it ought to be included in our very next maintenance release.

    Curious: besides the ominous error message in the browser console, are you observing functional breakages?

    Yes, it caused an entire site to not load because of the SyntaxError. Such are the joys of using ReactJS for a site. So if this could be expedited as a fix, that would be awesome. πŸ™‚

    For us, this is causing a custom registration form to break as it validates through custom JS and cannot validate and always fails πŸ™

    We commented out lines 407-409 as it looks like it’s outputting CSS in a <script> tag which makes no sense whatsoever. It looks like it was printing it out as JS and CSS and commenting out those lines makes it only output as CSS which I believe it should be doing all along.

    RE: \wp-content\plugins\the-events-calendar\common\src\Tribe\Customizer.php

    If there’s a better temporary fix can you point us in the right direction?

    I’m getting this error on a page as well. Glad to see a fix is on its way.

    I’m not entirely familiar with how your templating system works, but I am hoping you can explain something about this to me.

    This is generated in common/src/Tribe/Customizer.php lines 407-414. I’m wondering why lines 407-409 are needed at all. Lines 412-414 are outputting the CSS in <style> tags, as I would expect. So as it is, the (apparently) same CSS code appears twice in succession, once in <script> tags, triggering an error, and then in <style> tags.

    I tried commenting out lines 407-409 and (aside from resolving the browser’s JavaScript error), it didn’t appear to have any effect — my Customizer changes were still present on the page.

    So… what exactly do lines 407-409 do, and are they really needed?

    They may not always be needed, but are used when a page is being customized.

    Plugin Author Victor Zarranz

    (@vicskf)

    Hi There!

    Just wanted to share with you that a new release of our plugins is out, including a fix for this issue πŸ™‚

    Find out more about this release β†’ https://theeventscalendar.com/maintenance-release-week-15-april-2018/

    Please update the plugin and let us know if the fix works for your site.

    Best,
    Victor

    Plugin Contributor Courtney Engle Robertson

    (@courane01)

    Hey there! This thread has been inactive for a while so we’re going to go ahead and mark it Resolved. Please feel free to open a new thread if any other questions come up and we’d be happy to help. πŸ™‚

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change in Customizer.php’ is closed to new replies.