Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 6 years ago

#33567 closed defect (bug) (fixed)

Panel margin-top glitches when widget areas added

Reported by: edge22's profile edge22 Owned by: westonruter's profile westonruter
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: javascript Cc:


Noticed this on a couple different WordPress themes - can create a video using TwentyFifteen if needed.

In the Customizer, I have an option that allows you to choose the sidebar layout.

When you change the layout, different widget areas are added to the "Widgets" section.

When this happens, it causes the margin-top: CSS attribute on all panels to increase in size, usually by 45px.

This eventually moves all of the panel content up so far that you can't see it.

Give it a try:

  1. Add a Customizer setting that adds/removes widget areas.
  2. After tweaking the above option, take a look inside a panel (which holds more sections).

You should see the sections moving further and further up as you change the option you created in step 1.

I have tested on version prior to 4.3 and haven't noticed this issue. Seems to be 4.3 specific.

Change History (30)

#1 @westonruter
8 years ago

  • Keywords reporter-feedback added

Thanks for the report. Please do add a video, or better a plugin that can demonstrate the issue.

I suspect the issue is related to #33220.

#2 @edge22
8 years ago

You can use my free theme:

Install and go to "Customize > Layout" and set the "Sidebar Layout" to something different than default.

Now go to "Widgets" or another panel, and you'll see the top panel is exactly like in the ticket you mentioned.

You may have to open the panel before tweaking the sidebar layout in order for it to trigger it.

Let me know if you can reproduce or not - if not I'll send over a video.

#3 @edge22
8 years ago

Looked into this more, and have attached a super simple test plugin.

I've figured out this issue has to do with the active_callback parameter.

To see for yourself:

  1. Install and activate the attached test plugin
  2. Go to "Customize" and open the "General Settings" panel.
  3. Now navigate to another page - the panel will disappear because the active_callback is set to "is_front_page".
  4. Now navigate back to the front page, and open the panel - all of the contents have shifted up.

Another view, with more shift:

  1. Open the "General Settings" panel.
  2. Go back to all of the settings.
  3. Navigate to another page.
  4. Navigate back to the front page.
  5. Open the "General Settings" panel - all contents have shifted up twice as much as the previous method.

This is happening in all modern browsers, using the TwentyFifteen theme.


Version 0, edited 8 years ago by edge22 (next)

#4 @westonruter
8 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.4

#5 @westonruter
8 years ago

Note that the current patch on #33052 may hold the answer for what needs to be done. Currently the margin-top gets recalculated when expand/collapse happens. It may be that we just need to also recalculate the margin-top when activate/deactivate happens.

#6 @westonruter
8 years ago

  • Focuses javascript added

#7 @edge22
8 years ago

Glad it should be an easy fix - it's a pretty frustrating UI experience.

This ticket was mentioned in Slack in #core by westonruter. View the logs.

8 years ago

#9 @westonruter
8 years ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Owner set to westonruter
  • Status changed from new to accepted

@edge22 Thank you very much for that plugin and the steps to reproduce. Very helpful. Please try 33567.diff. this builds upon the patch in #33052 as I mentioned. I was specifically noticing an issue whereby if you open the Widgets panel and then navigate to the front page and to another page, the contents of the Widgets panel would shift up unexpectedly. So this patch fixes that issue, and with this patch I cannot reproduce the other issues you outlined as well. Please test and we can get this committed.

This ticket was mentioned in Slack in #core by westonruter. View the logs.

8 years ago

#11 @edge22
8 years ago

Looks fixed to me - great work!

#12 @westonruter
8 years ago

  • Keywords needs-testing removed

Thanks! The fix for this will be committed with the patch fro #33052.

#13 @edge22
8 years ago

Just ran into an issue but I'm heading out the door.

When you have another panel set for not the front page and you go back and forth between the two, the bug appears again.

I'll re-create the plugin and give steps once I'm back at home this evening.

#14 @edge22
8 years ago

  • Keywords needs-testing added

Here's are the issues.

New plugin:

First issue - all options disappear:

  1. Go to "Customize > Front Page Settings > Layout".
  2. Click on a link away from the front page.

Same thing happens if:

  1. Navigate to an internal page.
  2. Click on "Internal Settings > More Layout".
  3. Navigate to home.

I was having another issue earlier but can't replicate it now - will keep my eye out.

Let me know if you have any questions :)

#15 @westonruter
8 years ago

  • Keywords needs-patch added; has-patch removed

#16 @westonruter
8 years ago

OK, so the problem is that when a panel becomes deactivated, we need to first collapse any sections inside of those panels first.

#17 @westonruter
8 years ago

  • Keywords has-patch added; needs-patch removed

@edge22 OK, please try again with 33052.5.diff.

Thanks again for your great plugin and test case steps.

#18 follow-up: @edge22
8 years ago

Not sure if it's just me but I seem to be having the same issue.

I grabbed all the files from your github repo and replaced my installation with them.

Same issue as above seems to happen when I enter that third level and then navigate away from the page - all settings disappear.

Let me know if the plugin is working for you - I cleared all caches and tried in incognito mode as well to avoid any caching issues.

Let me know if there's anything else I can do.

Thanks for all your hard work! :)

#19 in reply to: ↑ 18 @westonruter
8 years ago

@edge22 I just checked again, and here is what I see with the latest patch applied to trunk:

I can't reproduce the problem with the patch applied.

To confirm, the patch is the same as appears on the GitHub PR:

Can you re-try applying the patch to your install?

#20 @edge22
8 years ago

Perhaps I'm just applying the patch wrong.

I've replaced all of my files (minus wp-content) in my local install with these files:

I'm assuming this isn't correct as it's the same result for me.

That being said, from the look of your video, it's fixed.

#21 @westonruter
8 years ago

@edge22 looks like that is the problem. You are grabbing the code from the master branch when the changes are in the trac-33052 branch. Please try grabbing the code from:

#22 @edge22
8 years ago

Ha, I obviously need more coffee.

Working perfectly now - great job :)

#23 @westonruter
8 years ago

  • Keywords commit added; needs-testing removed

#24 @westonruter
8 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 35231:

Customizer: Always show Widgets panel initially if sidebars are registered; show notice to users in panel if no widget areas are in current preview.

Widgets panel will not wait to display until the preview loads.

Also fixes problems with margin-top in panels where other panels' active states change, as well as ensuring sections of deactivated panel collapse before panel is hidden to prevent the pane from becoming empty of controls.

Fixes #33052.
Fixes #33567.

#25 @westonruter
8 years ago

In 35251:

Customizer: Fix margin-top calculation for Themes section.

Ensure that the Themes section calculates its margin-top as a panel, since the section behaves as one. Fixes regression caused by [35231].

See #33567.

#26 @westonruter
8 years ago

Related issue for sections: #34344.

#27 @westonruter
6 years ago

In 40312:

Customize: Show notice in Widgets panel when there are additional widget areas not rendered in preview.

This extends the existing behavior which only showed a message only when there were no widget areas rendered in the preview. The number of non-rendered widget areas is indicated. Also removes needles deletion of property which hindered plugins.

See #33567, #33052.
Fixes #39087.

#28 @westonruter
6 years ago

In 40330:

Customize: Improve i18n for strings in hidden widget area notices.

Amends [40312].
Props westonruter, ocean90, swissspidy, SergeyBiryukov, michelleweber for copywriting.
See #33567, #33052.
Fixes #39087.

Note: See TracTickets for help on using tickets.