Making WordPress.org

Opened 21 months ago

Closed 20 months ago

Last modified 16 months ago

#6676 closed defect (bug) (fixed)

Some pattern previews are not working.

Reported by: dufresnesteven's profile 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

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 |
| --- | --- |
| https://i0.wp.com/user-images.githubusercontent.com/1657336/220507216-71a2cd99-aa83-4f5c-bc25-d3f6822f62ec.png | https://i0.wp.com/user-images.githubusercontent.com/1657336/220507221-f4e2f86d-9557-4c70-a210-491272c018dc.png |

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

  1. Download https://downloads.wordpress.org/theme/poe.0.3.zip into sandbox
  2. Visit: https://wp-themes.com/poe/?page_id=9999&pattern_name=poe/blog-list-compact
  3. Expect to see no content
  4. Apply Patch
  5. Expect to see post list

@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:

  1. 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
  2. Inject the pattern into a container
  3. Make all the elements in our container visibility:visible
  4. Move our pattern container to the middle of the screen
  5. 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.

#4 @dufresnesteven
20 months ago

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

#5 @dd32
20 months ago

In 12460:

wp-themes.com: Handle $parent_block being null, to avoid PHP Notices when there's no parent context.

See [12413].
See #6676.

@dufresnesteven commented on PR #125:


16 months ago
#6

Merged.

Note: See TracTickets for help on using tickets.