Live Preview for block themes doesn't work with beta 3

[nithins53]

Once we install a block theme and select the Live Preview option, the site editor still displays our currently active theme and not the selected one. But on the left-hand sidebar, it still shows the name of the respective theme that we trying to preview. Also activating the theme from the live preview won’t apply the new theme.

Steps to reproduce:
Install a block theme
Select the live preview
The preview shows the name correctly on the left-hand side but on the right-hand side, the theme is not previewed properly.
Selecting Activate won’t change the theme.

video url- ​https://www.loom.com/share/7af2217049494ca8b01436d533b28e2b?sid=dbea484d-0298-45ad-95d1-ed56ab310f69

[nithi22]

I was able to reproduce this issue in localhost also.

video url: ​https://www.loom.com/share/48f1f73432304de1bf88f57e4fb9fb9f?sid=d0bd8ba3-416a-4ead-8c94-5437fb555143

[jomonthomaslobo1]

I could reproduce this issue

[poena]

Hi!
Thank you for the report. This is also reported in the Gutenberg GitHub repository:
​https://github.com/WordPress/gutenberg/issues/52309

[nithins53]

@poena Thank you for sharing the link, but is it on Github where we should be reporting the issue of the beta releases or here on trac?

This makes a few changes to block theme previews:

1. Adds a nonce so that activation works. This is needed until we have a REST API endpoint for activating themes
2. Loads the theme-previews code in both wp-admin and in the REST API. This means moving the include to wp-settings.php - there may be a better place for this, the point is that we need to apply the filters in both wp-admin and in the API, so we need to move it out of admin-filters. I also moved the file itself out of wp-admin into wp-includes, since we use it in more situations.

Also ensure that we always load the filters even outside of wp-admin.

Trac ticket: https://core.trac.wordpress.org/ticket/58712

[scruffian]

I have a fix for this here: ​https://github.com/WordPress/wordpress-develop/pull/4795

Thanks for the fix

[nithi22]

I have tested the patch but faced an error in relation with the file path (src/wp-settings.php) and the back-end failed to load.

[johnbillion]

Moving to 6.3 for visibility.

[poena]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4795

Environment

• OS: macOS 13.4.1
• Web Server: nginx/1.23.1
• PHP: 7.4.30
• WordPress: 6.3-beta3-56130-src
• Browser: Chrome Version 114.0.5735.198, Firefox 115.0
• Theme: Twenty Twenty-Two, Twenty Twenty-Three, FSE Eleven.
• Active Plugins: none

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

• Both preview and activation works well.

[syamraj24]

Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4795

Environment

• WordPress: 6.3-beta3-56143
• PHP: 8.1.6
• Server: Apache/2.4.53 (Win64) OpenSSL/1.1.1n PHP/8.1.6
• Database: mysqli (Server: 10.4.24-MariaDB / Client: mysqlnd 8.1.6)
• Browser: Chrome 109.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes:

Both the preview and activation works.

[syamraj24]

after Patch

[vivekawsm]

Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4795

Environment

• WordPress: 6.3-beta3-56143
• PHP: 8.1.6
• Server: Apache/2.4.53 (Win64) OpenSSL/1.1.1n PHP/8.1.6
• Database:mysqli (Server: 10.4.24-MariaDB / Client: mysqlnd 8.1.6)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.0

Actual Results
1.✅ Issue resolved with patch.
Additional Notes:
Both the preview and activation works.

[vivekawsm]

After patch

[nithins53]

Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4795

Environment

• WordPress: 6.3-beta3-56143
• PHP: 8.1.6
• Server: Apache/2.4.53 (Win64) OpenSSL/1.1.1n PHP/8.1.6
• Database: mysqli (Server: 10.4.24-MariaDB)
• Browser: Chrome 109.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.0

Actual Results

1. ✅ Issue resolved with patch.

[nithins53]

after patch

[nithi22]

Replying to nithi22:

I have tested the patch but faced an error in relation with the file path (src/wp-settings.php) and the back-end failed to load.

The issue was on my end, retested the patch and it works fine.

[mrinal013]

Test Report

PR Tested: ​https://github.com/WordPress/wordpress-develop/pull/4795

wp --info

OS: Linux 5.19.0-46-generic #47~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Jun 21 15:35:31 UTC 2 x86_64
Shell: /bin/bash
PHP version: 8.2.7
MySQL binary: /usr/bin/mysql
MySQL version: mysql Ver 8.0.33-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))
WP-CLI version: 2.8.1

Result

This PR solves the issue related to block theme's live preview.

@scruffian / @peterwilsoncc would this make it into 6.3 still?
here is the trac ticket:
https://core.trac.wordpress.org/ticket/58712
cc @tellthemachine @azaozz ?

This needs to go into 6.3, or we need to take block theme previews out of 6.3.

@scruffian @bph I submitted the PR ​https://github.com/WordPress/gutenberg/pull/52398 to rename the variable to use an WP_ prefix. This is good to go in to 6.3 but the upstream PR will need to be included at the same time.

[isabel_brison]

In 56199:

General: add nonce for block theme preview activation.

Adds a nonce so that activation works for block theme previews. Temporary fix until there is a REST API endpoint for activating themes.

Props scruffian, peterwilsoncc, nithins53, nithi22, jomonthomaslobo1, poena, syamraj24, vivekawsm, mrinal013.
Fixes #58712.

Committed in r56199 / ​7813524

[isabel_brison]

In 56201:

General: fix botched file move in r56199.

Moves src/wp-admin/includes/theme-previews.php to src/wp-includes/theme-previews.php.

Props peterwilsoncc.
See #58712.

[peterwilsoncc]

Reopening this as @antonvlasenko picked up an ​escaping bug that will need to be fixed. It's pretty minor as it will only affect custom nonce implementations using special characters.

Adds escaping to the output of the nonce for activating themes while previewing. While escaping isn't required for the core implementation of nonces, it is for custom implimentations that may include special characters such as ' or ;.

https://core.trac.wordpress.org/ticket/58712

Follow up to r56199 / 78135240236a366df708db7a21290db08ab21644

Tested as part of ​https://github.com/WordPress/wordpress-develop/pull/4832 LGTM

[peterwilsoncc]

In 56218:

General: Escape nonce used for block theme activation.

Add wp_json_encode() as an escaping function when setting the WP_BLOCK_THEME_ACTIVATE_NONCE global on the block theme preview screen.

This account for custom nonce implementations making use of special characters that require escaping in JavaScript strings.

Props antonvlasenko, ramonopoly.
Fixes #58712.

Committed r56218 / ​https://github.com/WordPress/wordpress-develop/commit/44173677fae3f125402c4161d78d05ee6ef1a81f