Theme Previewer: Fully hide all other page content when showing pattern previews

[ryelle]

Currently, the pattern preview code hides the content with the visibility property, which means it still takes up space on the page. The patterns are then transposed up the page to cover the top offset. In the current previews this is okay because the patterns are taken at a fixed height. The mshots screenshot block from the Pattern Directory takes full page screenshots, which clearly shows extra space under the pattern.

This update changes the method of hiding the other page content

• Use display: none on all other content to hide it and prevent it from taking up space.
• Remove the JS for resetting the visibility, this is not needed since the CSS is scoped to everything but the pattern container.
• Remove the JS for adjusting the offset, not needed with display: none.
• Add code to reset the padding & margin on all parent containers so that the pattern fills the entire screen.

Before	After

To test

• Sandbox wp-themes.com with a few test themes
• View the previews, ex:
  • https://wp-themes.com/twentytwentyone/?page_id=9999&pattern_name=twentytwentyone/large-text&preview
  • https://wp-themes.com/fontaine/?page_id=9999&pattern_name=fontaine/gallery-project&preview

@StevenDufresne Since you worked on this first, I'm sure you know more edge cases, so let me know if I've oversimplified things.

[StevenDufresne]

Hmm, there was a lot of experimentation going on then.

I do remember using display: none first and making the decision to change.

I also remember having issues with themes whose default template had columns and the content was being rendered inside of one of the columns. Not sure if its relevant here. Sorry :(.

I'm not opposed to changing if it seems to work in our test scenarios.

[dd32]

I recall the display: none failures, but I don't recall the specifics. I looked at it at the time and agreed with @StevenDufresne that the visibility hacks were the best option for the given use-cases.

I'm all for changing it, and resolving any edge-cases that come up when they do though.

[ryelle]

Merged in 1cce41a.