#6676 closed defect (bug) (fixed)
Some pattern previews are not working.
Reported by: | dufresnesteven | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Component: | Theme Directory | Keywords: | has-patch |
Cc: |
Description
There are issues with the following pattern generation:
https://wordpress.org/themes/poe/
https://wordpress.org/themes/tove/
It appears related to the use of the query
block.
Additionally, patterns are not being rendered properly in:
https://wordpress.org/themes/bjork/
This doesn't seem related to the query block however.
Change History (6)
This ticket was mentioned in PR #124 on WordPress/wordpress.org by @dufresnesteven.
20 months ago
#1
- Keywords has-patch added
@dufresnesteven commented on PR #124:
20 months ago
#2
An alternative approach may have been to simply replace the global query prior to the preview generation, but this seems more appropriate.
I considered that but the query block can pass in properties that affect how the pattern renders. We would need to apply those properties as well which could get tricky.
This ticket was mentioned in PR #125 on WordPress/wordpress.org by @dufresnesteven.
20 months ago
#3
Closes: https://meta.trac.wordpress.org/ticket/6676
This fixes pattern previews for themes that use flex
layouts in their templates.
## Background
To create a pattern preview, we inject patterns into the theme's default page template. This gives us what the pattern would look like if it were added to a regular theme page. However for theme previews, we want to display a thumbnail of what the pattern looks like without non-pattern elements like the header, footer or a sidebar. In order to do so but still inherit all the theme's style, we do the following:
- Make all elements
visibility:hidden
so we can't see them- We don't want to set them
display:none
because we could break some logic
- We don't want to set them
- Inject the pattern into a container
- Make all the elements in our container
visibility:visible
- Move our pattern container to the middle of the screen
- Set all the parents of the pattern container to
display:block
so they stretch full screen- Otherwise we get patterns that extend only halfway through the screen.
## Problem/Solution
This PR changes the order of #4
and #5
because themes that use display:flex
containers side by side in their page template, say a sidebar on the left and the main container on the right, when we change that to display:block
the offset top calculation is incorrect because it was calculated when the containers were side by side and not stacked, which they are in the final resting place.
@dufresnesteven commented on PR #125:
16 months ago
#6
Merged.
Source: https://meta.trac.wordpress.org/ticket/6676
### Summary
This PR updates the context for query block previews to make sure it's not relying on the global WP Query.
### Background
We want to render patterns in the context of the theme. As a result, we need the Theme to load its default page template (so it has all the right assets) and then inject the pattern. This works pretty well for all patterns except those that use the query block and have that block set to
inherit:true
which loads the global query, which in our case is used to render a page and inject the template and therefore no posts are returned.## Screenshots
| Before | After |
| --- | --- |
| | |
Note the layout is not perfectly center aligned on this preview page, because of the theme's code. The preview thumbnail looks better because it lacks the title. You can see it by adding
&preview
to the URL in#2
of the How To Test section.### How To Test
Uses Sandbox