Make WordPress Core

Opened 8 weeks ago

Last modified 5 days ago

#54578 reopened defect (bug)

Live Preview Button showing issue

Reported by: kafleg Owned by: hellofromTonya
Milestone: 5.9.1 Priority: normal
Severity: normal Version: 5.9
Component: Themes Keywords: has-patch needs-testing
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 (1)

54578-after-pr2033.gif (5.8 MB) - added by hellofromTonya 7 weeks ago.
Test Report: Works as expected after applying PR 2033.

Change History (49)

#1 @costdev
8 weeks ago

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

Last edited 8 weeks ago by costdev (previous) (diff)

#2 @hellofromTonya
8 weeks 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
7 weeks 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
7 weeks 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.


7 weeks ago

#6 @antonvlasenko
7 weeks ago

I will look into this issue tomorrow morning.

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


7 weeks ago

#8 @paaljoachim
7 weeks 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 7 weeks ago by paaljoachim (previous) (diff)

#9 @antonvlasenko
7 weeks ago

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

#10 @paaljoachim
7 weeks ago

Thank you @antonvlasenko Anton!

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


7 weeks ago

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


7 weeks ago

  • 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
7 weeks 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.


7 weeks ago

#15 @costdev
7 weeks 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
7 weeks ago

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

#17 follow-up: @antonvlasenko
7 weeks 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
7 weeks 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
7 weeks 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
7 weeks 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
7 weeks ago

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

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


7 weeks ago

#23 @hellofromTonya
7 weeks 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
7 weeks 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
7 weeks ago

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

Last edited 7 weeks ago by antonvlasenko (previous) (diff)

#27 @antonvlasenko
7 weeks 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
7 weeks 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
7 weeks ago

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

#30 @SergeyBiryukov
7 weeks ago

No worries :)

#31 @poena
7 weeks 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 7 weeks ago by poena (previous) (diff)

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


7 weeks ago

#33 @ryelle
7 weeks 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
7 weeks 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
7 weeks ago

  • Keywords needs-testing added; commit removed

Resetting keywords for re-opened work.

#37 @kafleg
7 weeks 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.


7 weeks ago

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


7 weeks ago

@hellofromTonya
7 weeks ago

Test Report: Works as expected after applying PR 2033.

#40 @hellofromTonya
7 weeks 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
7 weeks 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
6 weeks 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
10 days 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
10 days 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
9 days 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.


5 days ago

  • 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
5 days 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

Note: See TracTickets for help on using tickets.