Add blueprint.json file to enable plugin previews

[mikachan]

We should consider adding a blueprint.json file to enable plugin previews on the WordPress.org directory.

More info here: https://make.wordpress.org/meta/2023/11/22/plugin-directory-preview-button-revisited/

[t-hamano]

I tried testing how Create Block Theme plugin works in Playground.

https://playground.wordpress.net/?plugin=create-block-theme

Unfortunately, most of the features seem to fail due to errors... 😅 Many of Create Block Theme's functions update files and directories, so they might not be compatible with Playground at the moment.

[mikachan]

Thanks for testing this out! Could you explain more about which features failed? I think many of the theme creation tools work fine in Playground (creating a new theme, cloning the current theme, creating a blank theme), but I don't think adding custom fonts from both Google and local files works yet. Maybe we could disable these if the plugin is active in a Playground environment (I'm not sure how easy this would be!)

[t-hamano]

Sorry, there may have been a problem with the environment or network when I tested it. Many features seem to work correctly.

• ✅ Export {theme_name}
• ✅ Create child of {theme_name}
• ✅ Clone {theme_name}
• ✅ Overrite {theme_name}
• ✅ Create blank theme
• ✅ Create a style variation
• ❌ Add Google Font: An error occoured.

  Fatal error: Uncaught TypeError: rename(): Argument #1 ($from) must be of type string, WP_Error given in /wordpress/wp-content/plugins/create-block-theme/admin/class-manage-fonts.php:250
  

• ⚠️ Although a warning error is displayed, the font appears to be installed correctly.

ff61197017314bf824a816cb25c3e740.mp4

[mikachan]

No worries!

❌ Add Google Font: An error occoured.

Yes, this is the same error I was seeing. I thought this was solved with WordPress/wordpress-playground#724, but perhaps this is a different error. It seems to be a problem with accessing the download_url() function, but then it's also strange that the font is installed correctly afterward 😅

[t-hamano]

❌ Add Google Font: An error occoured.

From what I've researched, this problem seems to have a similar cause to WordPress/wordpress-playground#396 reported in the Playground repository.

The Create Block Theme plugin attempts to download the font via the download_url() function:

create-block-theme/admin/class-manage-fonts.php

Line 245 in cef22d8

$temp_file = download_url( $variant['src'] );

My understanding is that the download_url() function internally calls the wp_http_validate_url() function to check if the URL (fonts.gstatic.com) is safe. However, as discussed in this comment, Playground returns an internal IP (172.29.3.0), so http_request_host_is_external() becomes false, and as a result, the download_url() function returns a WP_Error object.

To resolve this, we would add the following hook to this plugin to force fonts.gstatic.com to be considered an external (safe) host.

function custom_http_request_host_is_external( $external, $host ) {
	if ( 'fonts.gstatic.com' === $host ) {
		return true;
	}
	return $external;
}
add_filter( 'http_request_host_is_external', 'custom_http_request_host_is_external', 10, 2 );

Pinging @adamziel: I see that you have submitted WordPress/wordpress-playground#400 to fundamentally resolve this issue. Is it okay to add a filter like this for now to make the Create Block Theme plugin work properly in the plugin preview environment? 🙇

[adamziel]

For network features you'll need to enable the networking access by adding networking=yes to the URL, for example:

https://playground.wordpress.net/?plugin=create-block-theme&url=/wp-admin/admin.php?page=create-block-theme&networking=yes

With that option in place, I was able to interact with Google Fonts in the Playground preview. You can also use it in the Blueprints as follows:

{
    "features": {
        "networking": true
    }
}

Let me know if that solves the issue here.

[t-hamano]

@adamziel Thank you for telling me that! I had missed that parameter. After some more testing, I'd like to submit a PR to add a blueprint to this plugin.