Twenty Seventeen: Custom Header Preview Doesn't Match in Customizer When Changed

[davidakennedy]

If I change to just a header image, not a video header, the preview does not match in the Customizer.

Steps to reproduce.

1. Have a header image in place. Visit the Customizer > Header Visuals.
2. Hide default header image. You see this: ​https://cloudup.com/cDwlp56I9Ar
3. Save. Front end of site is right. Refresh Customizer. Now, it matches front end.

This steps also work in reverse, if adding the existing default header to the site again.

Probably related to #38172. May be known already, but I didn't see a ticket.

cc: @celloexpressions @joemcgill

[celloexpressions]

This is an issue with the way selective refresh is working with respect to how the theme changes its header/no header logic. Those'll need to be tied back together, either by simplifying the no-header logic to work within the core custom header function (and possibly toggle a body class with postMessage), or by adding a custom wrapper function for the custom header and changing the custom_header partial to use that for its render_callback.

[bradyvercher]

This particular issue is due to the has-header-image body class not being toggled whenever images or videos are added or removed. 38627.diff​ toggles the body class using the same logic as twentyseventeen_body_classes().

[flixos90]

+1, noticed this issue as well.

Another thing I came across is that external videos do not show up for me at all in the Customizer, regardless of refresh:

• I enter a YouTube URL in the Customizer. Preview doesn't update accordingly (might have a similar reason like the one in this ticket).
• After saving, the frontend shows the video properly.
• Reloading Customizer, I still don't see the video, instead the header image shows (although it is the front page).

Another possibly helpful observation regarding this: I built video header functionality into one of my personal themes and the video shows up in the Customizer there, so I believe this is also a problem in Twenty Seventeen, not in the Core feature itself.

Eventually the video issue might better live in its own ticket, but wanted to post this here first.

[celloexpressions]

38627.diff​ looks like a good start. Instead of exporting the front page variable from PHP, could we simplify this to check for the presence of the body class within the preview JS?

[bradyvercher]

Replying to celloexpressions:

Instead of exporting the front page variable from PHP, could we simplify this to check for the presence of the body class within the preview JS?

Yeah, that is a little cleaner. 38627.1.diff​ takes care of that.

Replying to flixos90:

Another thing I came across is that external videos do not show up for me at all in the Customizer, regardless of refresh...

My guess is that your browser viewport might be somewhere between 900px and 1199px wide. The video will load for anything over 900px wide on the front end, but the Customizer takes up 300px, which bumps the preview iframe below the 900px threshold and prevents it from loading. Could that be the case for you? If so, that should probably be handled in a separate ticket.

[davidakennedy]

Account for inner container class name change with and without header image or video.

[davidakennedy]

This looks good, @bradyvercher! Thanks!

One thing I noticed is that if you have a header image or video and remove it, you get this.

That's because of the CSS on :before element. So my latest patch accounts for that. It's not perfect though because if you add an image or video, there's a flash of the blank space before the image or video pop in.

[bradyvercher]

@davidakennedy I added a display: none on that :before element over in #38639 since it didn't seem like that should be displaying when a header video or image wasn't set.

The changes in that ticket remove the logic in header-image.php and should clean up any other issues you're seeing here, so I'd recommend testing them together.

[bradyvercher]

38627.3.diff​ hides the .custom-header-image div when an image or video haven't been set. Any other wonkiness with the preview not matching the Customizer settings should be cleared up in #38737.

[davidakennedy]

In 39220:

Twenty Seventeen: Make custom header preview match front end in Customizer when changed

• Toggles has-header-image body class in Customizer preview whenever images or videos are added or removed.
• Hides the .custom-header-imagediv in CSS when an image or video haven't been set so preview changes are smoother.
• Also fixes the main issues in #38391 – making the preview match.

Props bradyvercher.

Fixes #38627.
See #38391.