#54578 closed defect (bug) (fixed)
Live Preview Button showing issue
Reported by: | kafleg | Owned by: | 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:
- Install WordPress 5.9 beta
- Activate Twenty Twenty-One theme https://prnt.sc/21psv3y
- Hover on Twenty Twenty-Two theme and click on live preview https://prnt.sc/21psxe2
- 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)
Change History (63)
#2
@
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
@
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
@
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
This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.
3 years ago
#8
@
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."
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
@
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
@
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.
#17
follow-up:
↓ 18
@
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
@
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
@
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
@
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
- Go to Appearance > Themes and activate Twenty Twenty-One
- Hover over the Twenty Twenty-Two theme. Notice the "Live Preview" button is available.
- Apply the patch.
- Refresh.
- However over the Twenty Twenty-Two theme. Notice the "Live Preview" button is no longer available.
Results
Patch: PR 2024
- Before applying the patch: The "Live Preview" button is available
- After applying the patch: The "Live Preview" button is gone
Marking for commit
.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
3 years ago
#24
@
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?
hellofromtonya commented on PR #2024:
3 years ago
#25
Committed via changeset https://core.trac.wordpress.org/changeset/52341.
#27
@
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
#29
@
3 years ago
@SergeyBiryukov Sorry about that. It's my fault.
I should have noticed it.
Thank you for taking care of it.
#31
@
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
This ticket was mentioned in Slack in #core-themes by poena. View the logs.
3 years ago
#33
@
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.
This ticket was mentioned in PR #2033 on WordPress/wordpress-develop by anton-vlasenko.
3 years ago
#35
Trac ticket: https://core.trac.wordpress.org/ticket/54578
#36
@
3 years ago
- Keywords needs-testing added; commit removed
Resetting keywords for re-opened work.
#37
@
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
#40
@
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:
- Go to Appearance > Themes.
- Activate the Twenty Twenty-Two theme.
- 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.
- Close the modal.
- 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".
- Activate the Twenty Twenty-One theme.
- Hover over it and click on the "Theme Details".
Expected: 4 buttons appear at the bottom of the modal: "Customize", "Widgets", "Menus", "Background"
- 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.
- 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 commented on PR #2033:
3 years ago
#42
Committed via https://core.trac.wordpress.org/changeset/52353.
#43
@
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.
#45
@
3 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.
This ticket was mentioned in PR #2204 on WordPress/wordpress-develop by anton-vlasenko.
3 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
@
3 years ago
- Keywords needs-testing added
Steps to test https://github.com/WordPress/wordpress-develop/pull/2204:
- Go to this page and download the TT1 block theme.
- Go to Appearance -> Themes page. Click on the "Upload Theme" button.
- Install the theme you've just downloaded.
- Make sure you see no "Live Preview" link.
#51
@
3 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.
3 years ago
#53
@
3 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
@
3 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
#55
@
3 years ago
- Keywords needs-testing removed
Hi, @antonvlasenko -- LGTM 👍🏻
Test Report
Env
- WordPress 6.0-alpha-52448-src
- Safari 15.3
- macOS 12.2.1 (Monterey)
- Theme: Twenty Twenty-Two
- Gutenberg DISABLED 🔴
Steps to Test
- Download "TT1 Blocks" theme from theme directory.
- On Appearance > Themes, click Add New and then Upload Theme.
- Click Choose File and select the downloaded theme bundle (
.zip
), then click Install Now. - 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
- Download "Twenty Twenty" (non-FSE) theme from theme directory.
- Repeat Steps 2-3 above.
- [Optional] Confirm installation with Replace active with uploaded button if "Twenty Twenty" is already installed.
- Observe that the "Live Preview" link IS visible for a "classic" theme. ✅
#56
@
3 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.
#58
@
3 years ago
- Keywords fixed-major added; commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for 5.9.2 backport.
3 years ago
#59
Committed in https://core.trac.wordpress.org/changeset/52802
One possible solution is not to output the "Live Preview" button for FSE themes when a non-FSE theme is activated.