Live Preview Button showing issue

[kafleg]

I have WordPress 5.9 Beta installed. There was Twenty Twenty-Two theme activated in default.
I switched to the Twenty Twenty-One theme. After that, from Appearance > Themes, I hovered the mouse to the Twenty Twenty-Two theme and click on the live preview. I see this notice:
The theme you are currently using is not compatible with Full Site Editing.

Steps:

1. Install WordPress 5.9 beta
2. Activate Twenty Twenty-One theme ​https://prnt.sc/21psv3y
3. Hover on Twenty Twenty-Two theme and click on live preview ​https://prnt.sc/21psxe2
4. You will see this notice. ​https://prnt.sc/21pt0gn

It works perfectly if I click on activate but not on Live Preview. I think this is because we don't have a customizer in the theme now. And we don't have a site editor in the version of the previous theme. ​https://prnt.sc/21pt7ph

[costdev]

One possible solution is not to output the "Live Preview" button for FSE themes when a non-FSE theme is activated.

[hellofromTonya]

Duplicate of #54575.

Hello @kafleg,

Welcome back to WordPress Core's Trac! Thank you for opening this ticket.

A similar one was opened yesterday. Let's move the discussion to that ticket to centralize the resolution.

[kafleg]

Hi @hellofromTonya

Yes, I am aware of that ticket as well. But the way of getting the error was different. So, I think to create a new ticket. :)

Anyway, thanks for looking into it.

[hellofromTonya]

@kafleg You're right. It's related (i.e. Live Preview and not recognizing FSE/block compatibility) but a different in interaction (hover) and a different message. Thanks for pointing that out to me. Reopening.

[antonvlasenko]

I will look into this issue tomorrow morning.

[paaljoachim]

I just tested.

Chrome
OSX11.6.1
Local test site.

WordPress beta plugin downloaded the newest version. (5.9-beta1-52329)
Tested activation of various themes.
Having an older default theme activated and then clicking to preview Twenty Twenty Two gave me an error screen with a grey background with a white notification box saying
"The theme you are currently using is not compatible with Full Site Editing."

[antonvlasenko]

@paaljoachim Thank you for testing. I will submit a patch in a couple of hours.

[paaljoachim]

Thank you @antonvlasenko Anton!

This PR aims to hide the "Live Preview" button for block themes as Customiser doesn't support block themes.

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

[antonvlasenko]

One possible solution is not to output the "Live Preview" button for FSE themes when a non-FSE theme is activated.

I'm assuming it doesn't matter if the current theme is an FSE theme or not because we need to hide that button for all FSE themes. Please correct me if I'm wrong. @costdev

[costdev]

@antonvlasenko Clicking the "Live Preview" for an FSE theme should navigate to Appearance > Editor.

This works when the current theme is an FSE theme and the user wants to preview another FSE theme. This is perfectly fine.

However, if the current theme is not an FSE theme (therefore, has no access to Appearance > Editor) and the user wants to preview an FSE theme, they will receive an error.

[antonvlasenko]

@costdev Yes, you are right. Sorry for the confusion. I need to update the patch.

[antonvlasenko]

@costdev It looks like the Full Site Editor can only work with the currently activated block theme. It cannot edit just any available block theme. When I click on another block theme it shows me the current theme.

[hellofromTonya]

Replying to antonvlasenko:

@costdev It looks like the Full Site Editor can only work with the currently activated block theme. It cannot edit just any available block theme. When I click on another block theme it shows me the current theme.

Site Editor's ability preview non-active block themes is something to move upstream to the Gutenberg project. It'll need more UX flow consideration as well as an enhancement.

Hiding the "Live Preview" button for block themes might be a stop-gap solution until the Site Editor has that ability. Why?

• To avoid users encountering the error message.
• There's currently no live preview option available for non-active block themes

@costdev @antonvlasenko What do you think?

[costdev]

@hellofromTonya +1 I agree that this safeguards against the error and any future changes can be opened as enhancements on the Gutenberg project.

[hellofromTonya]

Test Report

Env:

• OS: macOS Big Sur
• Browser: Edge, Safari, Chrome, and Firefox
• Localhost: wp-env
• WordPress: trunk
• Plugins: none

Steps

1. Go to Appearance > Themes and activate Twenty Twenty-One
2. Hover over the Twenty Twenty-Two theme. Notice the "Live Preview" button is available.
3. Apply the patch.
4. Refresh.
5. However over the Twenty Twenty-Two theme. Notice the "Live Preview" button is no longer available.

Results

Patch: ​PR 2024

1. Before applying the patch: The "Live Preview" button is available
2. After applying the patch: The "Live Preview" button is gone

Marking for commit.

[antonvlasenko]

@hellofromTonya I agree with you.
Thank you for explaining.

[hellofromTonya]

In 52341:

Themes: Hide "Live Preview" button for FSE block themes.

Currently, the Site Editor does not have a live preview feature for non-activated block themes.

This commit is a stop-gate to remove the "Live Preview" button for those themes. It avoids confusing users and avoiding a notification message that doesn't make sense.

Props antonvlasenko, costdev, hellofromTonya, kafleg, paaljoachim.
Fixes #54578.

[hellofromTonya]

@antonvlasenko Can you open an enhancement issue request in Gutenberg for adding a live preview feature in Site Editor for non-active block themes? And then share a link to it here in this ticket?

Committed via changeset https://core.trac.wordpress.org/changeset/52341.

[antonvlasenko]

@hellofromTonya Yes, of course. It's almost ready.

[antonvlasenko]

This is the feature request to make Site Editor work with non-active block themes: ​https://github.com/WordPress/gutenberg/issues/37201

[SergeyBiryukov]

In 52346:

Coding Standards: Use camel case with a lowercase first letter for the blockTheme array key.

This matches the WordPress JS naming conventions and the naming of other keys in the $prepared_themes array.

Follow-up to [52341].

See #54578, #53359.

[antonvlasenko]

@SergeyBiryukov Sorry about that. It's my fault.
I should have noticed it.
Thank you for taking care of it.

[SergeyBiryukov]

No worries :)

[poena]

I propose reopening this ticket to remove the live preview link that is in the theme details modal.

You can test this link by:
1) Opening the themes screen
2) Clicking or focusing on the block theme to open the theme details modal.

When the theme is active, there are now two links that lead to the site editor,
one with the text Customize and one with the text Editor beta.

When the theme is not active, there is a link with the text Live preview which leads to the site editor.

See:
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/themes.php?rev=52341#L1124
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/themes.php?rev=52341#L1133

[ryelle]

Agreed, this second Live Preview link leads to the same error, it should also be removed.

The two buttons leading to the same place is also unexpected, I guess the "Editor beta" should also be removed since we're using Customize everywhere else.

[antonvlasenko]

We need to remove both the "Editor beta" and "Navigation Menus" buttons.
They don't belong here. That's a strange bug.

A patch will follow soon (after I test it).

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

[hellofromTonya]

Resetting keywords for re-opened work.

[kafleg]

Agree with @antonvlasenko

There is no use of that two buttons and also Customize and Editor Beta button has the same URL as well.

[hellofromTonya]

Test Report: Works as expected after applying PR 2033.

[hellofromTonya]

Test Report

Env:

• Localhost: wp-env
• OS: macOS
• WordPress: trunk
• Patch: PR 2033
• Browser: Chrome, Edge, Safari, and Firefox

Steps:

After applying the patch:

1. Go to Appearance > Themes.
2. Activate the Twenty Twenty-Two theme.
3. Hover over the Twenty Twenty-Two theme and then click on "Theme Details".

Expected: Only the "Customize" button should appear at the bottom of the modal.

4. Close the modal.
5. Hover over Twenty Twenty-One theme and then click on "Theme Details".

Expected: 2 buttons should appear at the bottom of the modal: "Activate" and "Live Preview".

6. Activate the Twenty Twenty-One theme.
7. Hover over it and click on the "Theme Details".

Expected: 4 buttons appear at the bottom of the modal: "Customize", "Widgets", "Menus", "Background"

8. Hover over the Twenty Twenty-Two theme and then click on "Theme Details".

Expected: Only the "Activate" button should appear at the bottom of the modal.

9. Hover over the Twenty Nineteen theme and then click on "Theme Details".

Expected: 2 buttons should appear at the bottom of the modal: "Activate" and "Live Preview".

Results

• With the TT2 theme activated:
  • For TT2 theme: only the "Customize" button ✅
  • For TT1 theme: 2 buttons ✅
  • For T19 theme: 2 buttons ✅
• With the TT1 theme activated:
  • For TT1 theme: 4 buttons ✅
  • For TT2 theme: only the "Activate" button ✅
  • For T19 theme: 2 buttons ✅

​PR 2033 works as expected. Marking for commit.

[hellofromTonya]

In 52353:

Themes: Show only "Customize" or "Activate" button in block theme's Theme Details modal.

At the bottom of a block theme's "Theme Details" modal, only one button will be displayed:

• "Customize" button when the block theme is activated;
• Else, the "Activate" button.

The "Live Preview", "Editor beta", and "Navigation Menus" buttons are removed.

Follow-up to [15646], [52341], [52346].

Props poena, ryelle, kafleg, antonvlasenko, costdev, SergeyBiryukov, hellofromTonya.
Fixes #54578.

Committed via https://core.trac.wordpress.org/changeset/52353.

[kafleg]

One thing I would like to add here,

• WordPress version: 5.8.2
• Theme: Twenty Twenty Two (GitHub version)

Scenario A: Installed theme and click on activate: I see a notice that Gutenberg plugin is necessary.
Error: This theme (Twenty Twenty-Two) uses Full Site Editing, which requires the Gutenberg plugin to be activated.
Screenshot: ​https://i.rankmath.com/3eMIe7

Scenario B: Installed theme and click on live preview: Customizer will open and the page will remain blank. There is no information displayed.
Screenshot: ​https://i.rankmath.com/7LitnL

I think a similar message is necessary while seeing on the live preview.

Next,
I activated a theme named Rick and click on preview, I see a notice there. So, this type of notice will help to understand the issue of the blank page.
Screenshot: ​https://i.rankmath.com/facbc6

Let me know if this issue is already fixed or if there are any tickets.

[alanjacobmathew]

Live preview button exists, when the FSE themes are uploaded directly from the themes page.

[hellofromTonya]

Thank you @alanjacobmathew for reporting an additional link that needs consideration.

Resetting this ticket's keywords. As 5.9 is in RC, moving the link fix to 5.9.1.

[antonvlasenko]

I will look into this issue. Thank you for reporting, @alanjacobmathew.

This PR aims to remove the "Live Preview" link when installing block-based themes from a zip archive.

Trac ticket: https://core.trac.wordpress.org/ticket/54578#comment:46

[antonvlasenko]

Steps to test ​https://github.com/WordPress/wordpress-develop/pull/2204:

1. Go to ​this page and download the TT1 block theme.
2. Go to Appearance -> Themes page. Click on the "Upload Theme" button.
3. Install the theme you've just downloaded.
4. Make sure you see no "Live Preview" link.

[alanjacobmathew]

The above patch does remove Live preview button when uploading an FSE theme.

[alanjacobmathew]

Similar issue when installing block theme from wp-admin/theme-install.php

Steps to

• Go to add new themes page wp-admin/theme-install.php
• Select a block theme.
• Click install

Notice the live preview button next to the activate button.

[hellofromTonya]

5.9.1. is happening within the hour. As more testing is needed, moving this to 5.9.2.

[antonvlasenko]

Similar issue when installing block theme from wp-admin/theme-install.php

@alanjacobmathew Yes, there is a ticket for that. I created it several weeks ago.
I propose to merge this issue since the problem described in https://core.trac.wordpress.org/ticket/54578#comment:44 is solved.
The fix for https://core.trac.wordpress.org/ticket/54578?cnum_edit=54#comment:51 can be tracked in https://core.trac.wordpress.org/ticket/54878

[ironprogrammer]

Hi, @antonvlasenko -- LGTM 👍🏻

Test Report

​PR 2204

Env

• WordPress 6.0-alpha-52448-src
• Safari 15.3
• macOS 12.2.1 (Monterey)
• Theme: Twenty Twenty-Two
• Gutenberg DISABLED 🔴

Steps to Test

1. Download "TT1 Blocks" theme from theme directory.
2. On Appearance > Themes, click Add New and then Upload Theme.
3. Click Choose File and select the downloaded theme bundle (.zip), then click Install Now.
4. Observe that the "Live Preview" link is NOT visible (Fig 1). ✅

Expected Results (✅/❌)

• The "Live Preview" link is no longer visible after uploading a block-based theme. ✅

Screenshots

Fig 1: Theme upload status screen displaying absence of "Live Preview" link.

Regression

1. Download "Twenty Twenty" (non-FSE) theme from theme directory.
2. Repeat Steps 2-3 above.
3. [Optional] Confirm installation with Replace active with uploaded button if "Twenty Twenty" is already installed.
4. Observe that the "Live Preview" link IS visible for a "classic" theme. ✅

[audrasjb]

The proposed patch works fine on my side. Self-assigning for commit consideration.

[audrasjb]

In 52802:

Themes: Remove the Live Preview link when installing a block theme from a zip archive.

This changeset removes the Live Preview link for block-based themes when installing for a zip archive, since the customizer is disabled by default for block themes.

Follow-up to [52353].

Props alanjacobmathew, hellofromTonya, antonvlasenko, ironprogrammer.
Fixes #54578.

[audrasjb]

Reopening for 5.9.2 backport.

Committed in https://core.trac.wordpress.org/changeset/52802

[audrasjb]

In 52803:

Themes: Remove the Live Preview link when installing a block theme from a zip archive.

This changeset removes the Live Preview link for block-based themes when installing for a zip archive, since the customizer is disabled by default for block themes.

Follow-up to [52353].

Props alanjacobmathew, hellofromTonya, antonvlasenko, ironprogrammer.
Fixes #54578.

[audrasjb]

Merged to branch 5.9.