Some Theme Options Missing in Customizer

[KMH]

As title says, some options are “missing” in Theme Customizer. Actually they ARE there but they are getting “display:none” applied to them. For example, activate the “ClassicPress Twenty Seventeen” theme and the “Theme Options” section won’t show:

Apparently because of this JS error?

In Developer Tools you can see that the “Theme Options” list item is there, but set to “display: none;”

And then on the panel it would normally open, all of the list items with the controls are also set to “display:none;”

In ClassicPress 1.7.3 it shows “Theme Options” as expected:

I have another child theme of “Twenty Seventeen” that has a custom “Footer” section that also does not show in ClassicPress 2.2.0 but works fine in 1.7.3

[timkaye]

It looks like all the custom sections and subsections added by a specific theme are being hidden.

Actually, what I think is happening is that they are hidden by default because they load after the sections that are automatically loaded by core. When they load, they should then have the display: none style attribute removed. But that’s not happening.

Since the classes look pretty much identical to the panels around them, my current supposition is that either core has deleted the function that removes that attribute (in which case it needs reinstating) or the function has already run by the time the custom panels load (in which case we need to have it triggered to run again).

At the moment, though, I haven’t been able to track down the relevant function.

[KMH]

That’s pretty much what I concluded too. Looking through core scripts, though, I can’t track it down either. That JS error, though, seems to be related to the Admin Menu (the one that normally shows on the left on the backend) which doesn’t exist when the theme Customizer is shown.

In the meantime, to work around the Customizer problem I added the following to the top of my theme’s “customize.php” file:

if(function_exists( 'classicpress_version' )){
	echo '<script type="text/javascript">CLASSICPRESS_VERSION = "'.classicpress_version().'";</script>';
}

And then added this to the bottom of my “customize-controls.js” file (but inside the “ready” state check):

if (CLASSICPRESS_VERSION && CLASSICPRESS_VERSION[0] == '2'){
	setTimeout( function(){
		if (document.getElementById('customize-theme-controls')){
			var lists = document.getElementById('customize-theme-controls').getElementsByTagName('ul');
			if ( lists.length > 0 ){
				for( var u=0; u < lists.length; u++){
					lists[u].style.display = "block";
					var items = lists[u].getElementsByTagName('li');
					if (items.length > 0){
						for( var i =0; i <items.length; i++){
							items[i].style.display = "block";
						}
					}
				}
			}
		}
	},1000);
};

At least the options and controls are now usable in CP 2.x

[timkaye]

Good workaround!

[timkaye]

That code was actually helpful in enabling me to track down the problem. It’s caused by two things. The first is in ~wp-admin/js/customize-controls.js from around line 1191 to 1194. The following code can be deleted, because it’s what currently necessitates the timeout:

                else {
					headContainer.slideUp( duration, args.completeCallback );
				}

Then, just before the end of the ready: function section around line 3790, add:

            var listItems = document.getElementById( 'customize-theme-controls' ).querySelectorAll( '.control-section-default' );

			// Ensure that custom panels and sub-panels are displayed.
			if ( listItems.length > 0 ) {
				listItems.forEach( function( listItem ) {
					listItem.style.display = '';
					listItem.querySelectorAll( '.customize-control' ).forEach( function( customControl ) {
						customControl.style.display = '';
					} );
				} );
			}

If you can test this and it works, I can submit a PR. (The variable will actually go in a slightly different place to conform with CP’s required style.)

[KMH]

EDIT: That sort-of fixed it.
It does make the options and controls show up, and if you click “Theme Options” it takes you to the sub-panel with the controls. But as soon as you change one of those settings it closes the sub-panel, takes you back to the previous level, and hides “Theme Options” in the menu. So it would seem something else also needs to be tweaked.

EDIT 2: Looks like my workaround has the same issue.

[timkaye]

Thanks for the update. Is the top-level panel hidden too, or just the sub-panel? Knowing that would help narrow down where the problem lies.

[KMH]

With the “customize-controls.js” modified as you suggested both the top-level item is now visible and the controls on the sub-panel are also visible. But as soon as you click anything the panel closes, it takes you back to the top-level menu, and you can see it hide the “Theme Options” item as “display:none;” gets applied to it. On my own theme I have “Footer Options” section with a text box as one of the controls and as soon as I type one character in that text box it closes the panel and removes “Footer Options” from the menu.

None of the other options shown behave this way. They show and work normally.

EDIT: playing around with it more I discovered that if you go to any one of those other options that work normally FIRST and then to “Theme Options” it works normally.

[timkaye]

Thanks for the latest reports! But I’m not experiencing that behavior at all on either the WP or CP versions of TwentySeventeen. I can go straight to Theme Options and the sub-panel behaves as expected while I select options there.

Could you try deactivating all plugins and then seeing if the issue persists? If it doesn’t, try reactivating them one by one until the problem re-appears.

[KMH]

Same behavior with all plugins deactivated and cache cleared. ¯_ (ツ)_/¯

And in case you’re wondering, tested in Firefox, Chrome, and Safari. Same behavior in all three browsers.

[timkaye]

Yes, that was going to be my next question! I was guessing Safari.

I’ll investigate some more

[timkaye]

OK, got it!

I originally asked you to delete a few lines, but actually we need to delete some more above that as well to get completely trouble-free behavior. I’m attaching the version of the ~wp-admin/js/customize-controls.js file that is working for me.

customize-controls.js (288.4 KB)

Please try this out and let me know if works for you now.

[KMH]

Yes! That fixed it with both the CP and WP versions of “Twenty Seventeen.”

[timkaye]

Great! Thanks for reporting the problem and helping me find the fix. I will submit a PR for this so it gets fixed in the next version. (If you’re using the nightly versions, you might want to avoid updating until we merge the PR; otherwise you’ll have to keep re-applying the fix.)