Fix some issues with block pattern previews #152

johnstonphilip · 2023-05-01T20:13:22Z

Tasks

I have signed a Contributor License Agreement (CLA) with WP Engine.

Summary of changes

This PR fixes some issues with block pattern previews, especially ones relating to Genesis Framework.

How to test

Install a Genesis theme, like Navigation Pro, and save the home page blocks to a pattern using Pattern Manager
Notice the pattern preview is not accurate to how the pattern should look.
On this branch, it should look correct again

Notes & Screenshots

Before this branch (broken)

On this branched (fixed)

johnstonphilip · 2023-05-01T20:28:37Z

I will be attempting to replicate/fix this one next:
https://wordpress.org/support/topic/pattern-preview-is-distorted/

…into try/fix-preview-issues

johnstonphilip · 2023-05-02T17:53:29Z

By hooking to wp instead of init, it fixes the issue with GenerateBlocks as well, because it allows the generateblocks styles to be hooked on init, making them render on wp, which fires after.

Before (using init hook):

After (fixed, using the wp hook)

kienstra · 2023-05-02T18:44:08Z

Reviewing this now 🚀

kienstra

Hi @johnstonphilip,
This fixes it! Nice work!

Before

After

kienstra · 2023-05-02T18:33:20Z

wp-modules/compatibility/compatibility.php

+		);
+	}
+}
+add_action( 'patternmanager_after_pattern_preview', __NAMESPACE__ . '\after_pattern_preview' );


Good idea to create a module for this.

kienstra · 2023-05-02T18:34:23Z

wp-modules/helper-functions/tests/HelperFunctionsTest.php

+
+		$this->assertSame(
+			$the_expected_returned_content,
+			do_the_content_things( $the_raw_content_to_test )


Wow, great test!

kienstra · 2023-05-02T18:36:01Z

wp-modules/helper-functions/helper-functions.php

+ * @param string $content The html content to run through the filters.
+ * @return bool
+ */
+function do_the_content_things( $content ) {


Does this need its own module, given that it's only called in wp-modules/pattern-preview-renderer/pattern-preview-renderer.php ?

I moved it out because do_the_content_things was being used in 2 different modules, but since #148 I guess that's no longer the case.

I don't mind having some of these "module agnostic" functions in a dedicated module. It might perhaps make sense as part of @mike-day's work in #141 though. Maybe we leave it for now and look at moving it into his module once that's ready?

That kind of thing could definitely live in patternmanager-common (or equivalent)!

I would agree with leaving it for now and moving into the common module when that PR is ready.

I don't mind having some of these "module agnostic" functions in a dedicated module. It might perhaps make sense as part of @mike-day's work in #141 though. Maybe we leave it for now and look at moving it into his module once that's ready?

Good idea!

kienstra · 2023-05-02T18:37:00Z

wp-modules/pattern-preview-renderer/pattern-preview-renderer.php

+
+	$pattern = \PatternManager\PatternDataHandlers\get_pattern_by_name( $pattern_name );
+
+	// Handle Genesis themes, who enqueue their stylesheets using genesis_meta.


Very useful comment 🚀

kienstra · 2023-05-02T18:40:18Z

wp-modules/helper-functions/tests/HelperFunctionsTest.php

+
+
+
+<p>🙂 &lt;3</p>


Great idea to test emoji rendering

kienstra · 2023-05-02T18:40:55Z

wp-modules/pattern-preview-renderer/pattern-preview-renderer.php

+<?php
+/**
+ * Module Name: Pattern Preview Renderer
+ * Description: This module makes a front-end render of a block pattern, useful inside iframes or other places you wish to preview a block pattern.


Great idea to add 'useful inside iframes'

mike-day · 2023-05-03T15:25:44Z

Nice work tackling this, @johnstonphilip! It was a tricky one.

kienstra · 2023-05-03T18:23:53Z

Extra points: this also fixes GF-3778 for Genesis themes (Resolve preview errors in PM)

johnstonphilip · 2023-05-03T20:14:19Z

I had an odd hour this morning where generateblocks things weren't being styled right in the previews, but with no changes, it fixed itself.

I'm leaving myself a breadcrumb here in case it happens again, but the styles from GenerateBlocks are output as an inline style in the tag like this:
<style id='generateblocks-inline-css'>

johnstonphilip · 2023-05-03T20:35:03Z

I've found that generateblocks seems to attach post meta to posts called _generateblocks_dynamic_css_version, which determines whether any generate blocks inline css gets loaded:

https://github.com/tomusborne/generateblocks/blob/e0b4e467256bfe7543ef82c395b175c5cabc250f/includes/class-enqueue-css.php#L210

Since we are not in a post context here (pattern only), there's no post meta, and thus, the CSS doesn't load.

The reason why it worked unexpectedly is because while I was testing, I had created a new post in WP, and put generateblocks on that post. When I saved, it added that post meta to the post.

In our preview, the global $post object WordPress sets up is just the latest post. So because I had done that, the post_meta did suddenly exist, and cause the generateblocks inline styles to load.

So to fix this, we'll have to mock that post meta, possibly in a compat file for generate blocks.

johnstonphilip · 2023-05-03T20:53:26Z

I was able to mock the entire post object following this awesome tutorial (kudos @andykeith!):
https://barn2.com/blog/create-fake-wordpress-post-fly/

This fixes a few of the workarounds we had to do. By using the block pattern code as the post_content on the mocked post object, we can get rid of our entire do_the_content_things function, and just rely on core's normal rendering with the_content.

kienstra · 2023-05-03T21:11:45Z

I was able to mock the entire post object…

Oh nice, that should make #153 not needed

…d without content

dreamwhisper

@johnstonphilip I think this is good! Nice work!

johnstonphilip · 2023-05-04T19:03:37Z

Awesome, I shall merge now.

kienstra · 2023-05-04T19:17:44Z

wp-modules/pattern-preview-renderer/pattern-preview-renderer.php

+	$wp_query->is_single            = false;
+	$wp_query->is_attachment        = false;
+	$wp_query->is_archive           = false;
+	$wp_query->is_category          = false;
+	$wp_query->is_tag               = false;
+	$wp_query->is_tax               = false;
+	$wp_query->is_author            = false;
+	$wp_query->is_date              = false;
+	$wp_query->is_year              = false;
+	$wp_query->is_month             = false;
+	$wp_query->is_day               = false;
+	$wp_query->is_time              = false;
+	$wp_query->is_search            = false;
+	$wp_query->is_feed              = false;
+	$wp_query->is_comment_feed      = false;
+	$wp_query->is_trackback         = false;
+	$wp_query->is_home              = false;
+	$wp_query->is_embed             = false;
+	$wp_query->is_404               = false;
+	$wp_query->is_paged             = false;
+	$wp_query->is_admin             = false;
+	$wp_query->is_preview           = false;
+	$wp_query->is_robots            = false;
+	$wp_query->is_posts_page        = false;
+	$wp_query->is_post_type_archive = false;


Sorry to comment after merge, but are these = false; statements needed?

Many are false by default.

kienstra · 2023-05-04T19:21:42Z

wp-modules/pattern-preview-renderer/pattern-preview-renderer.php

+	$wp_query->is_post_type_archive = false;
+
+	// Update globals.
+	$GLOBALS['wp_query'] = $wp_query; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited


Is this needed? The lines above mutate the global $wp_query

Sorry to comment after the fact.

johnstonphilip added 2 commits May 1, 2023 16:01

Move the preview code to its own module and add hooks

0806649

Add a compatibility module to support genesis framework

f1e2e1b

johnstonphilip and others added 7 commits May 1, 2023 16:43

Linting fixes

d1c9adb

Update compatibility.php

4c5dbcf

Merge branch 'main' of https://github.com/studiopress/pattern-manager …

d2b2dcf

…into try/fix-preview-issues

Fix unit tests

0fc75be

Add body class wrapper around pattern preview

29978b3

Linting fixes

fe27e24

Hook to wp instead of init (fixes generatepress blocks)

cb8ee0f

johnstonphilip requested review from dreamwhisper, kienstra and mike-day May 2, 2023 17:55

kienstra approved these changes May 2, 2023

View reviewed changes

dreamwhisper added 2 commits May 3, 2023 15:28

Add additional Genesis markup

b867ee1

Allow finer tuning for viewportWidth

d3c8d8b

johnstonphilip added 2 commits May 3, 2023 16:57

Used a mocked post object

9c72509

Comment improvement

145f43d

johnstonphilip mentioned this pull request May 4, 2023

Enable rendering blocks that depend on the post #153

Closed

1 task

johnstonphilip and others added 2 commits May 4, 2023 11:13

Add a defensive check in case a pattern file was incorrectly formatte…

cd6d5ac

…d without content

Stop Chrome adding scrollbars

3bf04dd

dreamwhisper approved these changes May 4, 2023

View reviewed changes

johnstonphilip merged commit e308589 into main May 4, 2023

johnstonphilip deleted the try/fix-preview-issues branch May 4, 2023 19:03

kienstra reviewed May 4, 2023

View reviewed changes

kienstra mentioned this pull request May 8, 2023

Remove obsolete workaround for Core 'Comments' block #158

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix some issues with block pattern previews #152

Fix some issues with block pattern previews #152

johnstonphilip commented May 1, 2023 •

edited

Loading

johnstonphilip commented May 1, 2023

johnstonphilip commented May 2, 2023 •

edited

Loading

kienstra commented May 2, 2023

kienstra left a comment

kienstra May 2, 2023

kienstra May 2, 2023

kienstra May 2, 2023

johnstonphilip May 3, 2023 •

edited

Loading

mike-day May 3, 2023

kienstra May 3, 2023 •

edited

Loading

kienstra May 2, 2023

kienstra May 2, 2023 •

edited

Loading

kienstra May 2, 2023

mike-day commented May 3, 2023

kienstra commented May 3, 2023 •

edited

Loading

johnstonphilip commented May 3, 2023 •

edited

Loading

johnstonphilip commented May 3, 2023

johnstonphilip commented May 3, 2023

kienstra commented May 3, 2023

dreamwhisper left a comment

johnstonphilip commented May 4, 2023

kienstra May 4, 2023

kienstra May 4, 2023

kienstra May 4, 2023


		$pattern = \PatternManager\PatternDataHandlers\get_pattern_by_name( $pattern_name );

		// Handle Genesis themes, who enqueue their stylesheets using genesis_meta.




		<p>🙂 <3</p>

Fix some issues with block pattern previews #152

Fix some issues with block pattern previews #152

Conversation

johnstonphilip commented May 1, 2023 • edited Loading

Tasks

Summary of changes

How to test

Notes & Screenshots

Before this branch (broken)

On this branched (fixed)

johnstonphilip commented May 1, 2023

johnstonphilip commented May 2, 2023 • edited Loading

Before (using init hook):

After (fixed, using the wp hook)

kienstra commented May 2, 2023

kienstra left a comment

Choose a reason for hiding this comment

Before

After

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnstonphilip May 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra May 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra May 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mike-day commented May 3, 2023

kienstra commented May 3, 2023 • edited Loading

johnstonphilip commented May 3, 2023 • edited Loading

johnstonphilip commented May 3, 2023

johnstonphilip commented May 3, 2023

kienstra commented May 3, 2023

dreamwhisper left a comment

Choose a reason for hiding this comment

johnstonphilip commented May 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnstonphilip commented May 1, 2023 •

edited

Loading

johnstonphilip commented May 2, 2023 •

edited

Loading

johnstonphilip May 3, 2023 •

edited

Loading

kienstra May 3, 2023 •

edited

Loading

kienstra May 2, 2023 •

edited

Loading

kienstra commented May 3, 2023 •

edited

Loading

johnstonphilip commented May 3, 2023 •

edited

Loading