WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 19 months ago

Last modified 5 weeks ago

#33567 closed defect (bug) (fixed)

Panel margin-top glitches when widget areas added

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

Description

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
20 months 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
20 months ago

You can use my free theme: https://wordpress.org/themes/generatepress/

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
19 months ago

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

http://demo.generatepress.com/hosted/test.zip

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.

It seems to be adding onto the negative margin set to this container: .accordion-sub-container

Thanks!

Last edited 19 months ago by edge22 (previous) (diff)

#4 @westonruter
19 months ago

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

#5 @westonruter
19 months 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
19 months ago

  • Focuses javascript added

#7 @edge22
19 months 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.


19 months ago

#9 @westonruter
19 months 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.


19 months ago

#11 @edge22
19 months ago

Looks fixed to me - great work!

#12 @westonruter
19 months ago

  • Keywords needs-testing removed

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

#13 @edge22
19 months 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
19 months ago

  • Keywords needs-testing added

Here's are the issues.

New plugin: http://demo.generatepress.com/hosted/test.zip

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
19 months ago

  • Keywords needs-patch added; has-patch removed

#16 @westonruter
19 months 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
19 months 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
19 months 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
19 months ago

@edge22 I just checked again, and here is what I see with the latest patch applied to trunk: https://cloudup.com/cUirXRczsL6

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

To confirm, the patch is the same as appears on the GitHub PR: https://github.com/xwp/wordpress-develop/pull/123/files

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

#20 @edge22
19 months 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: https://github.com/xwp/wordpress-develop/tree/master/src

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
19 months 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: https://github.com/xwp/wordpress-develop/tree/trac-33052

#22 @edge22
19 months ago

Ha, I obviously need more coffee.

Working perfectly now - great job :)

#23 @westonruter
19 months ago

  • Keywords commit added; needs-testing removed

#24 @westonruter
19 months 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
19 months 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
19 months ago

Related issue for sections: #34344.

#27 @westonruter
5 weeks 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 wp.customize.Widgets.data.l10n property which hindered plugins.

See #33567, #33052.
Fixes #39087.

#28 @westonruter
5 weeks 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.