Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#54578 closed defect (bug) (fixed)

Live Preview Button showing issue

Reported by: kafleg's profile kafleg Owned by: audrasjb's profile audrasjb
Milestone: 5.9.2 Priority: normal
Severity: normal Version: 5.9
Component: Themes Keywords: has-patch has-testing-info fixed-major
Focuses: Cc:

Description

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

Attachments (2)

54578-after-pr2033.gif (5.8 MB) - added by hellofromTonya 3 years ago.
Test Report: Works as expected after applying PR 2033.
Live preview on add themes page.gif (1.1 MB) - added by alanjacobmathew 2 years ago.

Change History (63)

#1 @costdev
3 years ago

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

Last edited 3 years ago by costdev (previous) (diff)

#2 @hellofromTonya
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

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.

#3 @kafleg
3 years ago

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.

#4 @hellofromTonya
3 years ago

  • Milestone set to 5.9
  • Resolution duplicate deleted
  • Status changed from closed to reopened

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

This ticket was mentioned in Slack in #core-themes by kjell. View the logs.


3 years ago

#6 @antonvlasenko
3 years ago

I will look into this issue tomorrow morning.

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


3 years ago

#8 @paaljoachim
3 years ago

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."

Last edited 3 years ago by paaljoachim (previous) (diff)

#9 @antonvlasenko
3 years ago

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

#10 @paaljoachim
3 years ago

Thank you @antonvlasenko Anton!

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

This ticket was mentioned in PR #2024 on WordPress/wordpress-develop by anton-vlasenko.


3 years ago
#12

  • Keywords has-patch added; needs-patch removed

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

#13 @antonvlasenko
3 years ago

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#15 @costdev
3 years ago

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

#16 @antonvlasenko
3 years ago

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

#17 follow-up: @antonvlasenko
3 years ago

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

#18 in reply to: ↑ 17 @hellofromTonya
3 years ago

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?

#19 @costdev
3 years ago

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

#20 @hellofromTonya
3 years ago

  • Keywords commit added; needs-testing removed
  • Owner set to hellofromTonya
  • Status changed from reopened to reviewing

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.

#21 @antonvlasenko
3 years ago

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#23 @hellofromTonya
3 years ago

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

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.

#24 @hellofromTonya
3 years ago

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

#26 @antonvlasenko
3 years ago

@hellofromTonya Yes, it's almost ready. You are reading my mind.

Version 0, edited 3 years ago by antonvlasenko (next)

#27 @antonvlasenko
3 years ago

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

#28 @SergeyBiryukov
3 years ago

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.

#29 @antonvlasenko
3 years ago

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

#30 @SergeyBiryukov
3 years ago

No worries :)

#31 @poena
3 years ago

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

Last edited 3 years ago by poena (previous) (diff)

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


3 years ago

#33 @ryelle
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#34 @antonvlasenko
3 years ago

We need to remove both the "Editor beta" and "Navigation Menus" buttons.
They don't belong here. That's a strange bug.
https://cldup.com/B9AeFR-QWG.png
A patch will follow soon (after I test it).

#36 @hellofromTonya
3 years ago

  • Keywords needs-testing added; commit removed

Resetting keywords for re-opened work.

#37 @kafleg
3 years ago

Agree with @antonvlasenko

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

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


3 years ago

@hellofromTonya
3 years ago

Test Report: Works as expected after applying PR 2033.

#40 @hellofromTonya
3 years ago

  • Keywords commit added; needs-testing removed

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.

  1. Close the modal.
  2. 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".

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

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

  1. 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.

  1. 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.

#41 @hellofromTonya
3 years ago

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

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.

#43 @kafleg
3 years ago

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.

#44 @alanjacobmathew
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

https://i.imgur.com/MbLNfA4.png

#45 @hellofromTonya
2 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Milestone changed from 5.9 to 5.9.1

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.

#46 @antonvlasenko
2 years ago

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

This ticket was mentioned in PR #2204 on WordPress/wordpress-develop by anton-vlasenko.


2 years ago
#47

  • Keywords has-patch added; needs-patch removed

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

#48 @antonvlasenko
2 years ago

  • Keywords needs-testing added

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.

https://i.imgur.com/MbLNfA4.png

#49 @alanjacobmathew
2 years ago

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

#50 @Boniu91
2 years ago

  • Keywords has-testing-info added

#51 @alanjacobmathew
2 years ago

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.

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


2 years ago

#53 @hellofromTonya
2 years ago

  • Milestone changed from 5.9.1 to 5.9.2

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

#54 @antonvlasenko
2 years ago

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 PR 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

Last edited 2 years ago by antonvlasenko (previous) (diff)

#55 @ironprogrammer
2 years ago

  • Keywords needs-testing removed

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

https://cldup.com/CIRRGJdlbm.png
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. ✅

#56 @audrasjb
2 years ago

  • Keywords commit added
  • Owner changed from hellofromTonya to audrasjb
  • Status changed from reopened to assigned

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

#57 @audrasjb
2 years ago

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

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.

#58 @audrasjb
2 years ago

  • Keywords fixed-major added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 5.9.2 backport.

#60 @audrasjb
2 years ago

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

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.

#61 @audrasjb
2 years ago

Merged to branch 5.9.

Note: See TracTickets for help on using tickets.