It's possible to switch to a block theme from within Customizer

[antonvlasenko]

As reported by @hellofromTonya here:
Right now, it's possible to switch to a block theme from within Customizer.

Steps to reproduce the issue:

1. Activate a non-block theme like Twenty Nineteen.
2. Click on Customize button to open Customizer.
3. Click on "Change" in the "Active theme" area.
4. Notice Twenty Twenty-Two is displayed there. Click on "Live Preview" button.
5. Click "Activate & Publish" button.

[antonvlasenko]

I'm working on a fix for this issue.

[joyously]

It seems like this should not be a bug or problem.
It also seems that a Customize link should be available when a block theme is active, so that other themes can be previewed for switching, and so that other things plugins add to Customizer can still be reached.

[antonvlasenko]

It seems like this should not be a bug or problem.

As far as I know, block-based themes are not supposed to be edited with Customizer.

It also seems that a Customize link should be available when a block theme is active, so that other themes can be previewed for switching, and so that other things plugins add to Customizer can still be reached.

In this case other themes can be previewed using the Themes page.

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

[antonvlasenko]

Steps to test this issue:

1. Activate a non-block theme like Twenty Nineteen.
2. Click on Customize button to open Customizer.
3. Click on "Change" in the "Active theme" area.
4. Block themes like Twenty Twenty-Two should not be displayed on that page.

Before:

After:

This PR has a lot of changes because it has been rebased on top of ​https://github.com/WordPress/wordpress-develop/pull/2014 branch (because we've renamed some methods).

Hey @anton-vlasenko, I think you need to revert some of the commits in this PR such as 450c03d39b504f4687b2458bcb9eff3b962a60c1, ed79860f0582e0b971afb15b5522c7b7cbaf2c11, and 09d406230dde56eade1c2f27879e73f8cd7ac006. All of these were committed today. Then rebase on top of trunk to pull the latest into this PR. Thanks!

@hellofromtonya Thank you for the review!
Yes, that's good point. I've made the requested changes.

[hellofromTonya]

Need consensus on this one before moving forward. Here come some pings:

@noisysocks @jffng What do you think about removing block themes from within Customizer's previewer?

[jffng]

Thanks for the ping and work here!

I'm not sure about this. In general I don't think we should be preventing or removing pathways for folks to switch to block themes, regardless of where they're coming from — in this case, the Customizer. But this particular flow could use more design consideration.

[shaunandrews]

The first idea that comes to mind is to continue to show block themes in the Customizer, but separate them, either in the grid list or with some groupings in the sidebar.

We could simply disable the themes, with some explanatory label about not supporting the Customizer. This might be complicated.

Alternatively, we could allow activate and show a dialog about using the Site Editor.

(I attached some _very_ quick mockups below. They're more like wireframes to help with the discussion.)

[hellofromTonya]

Updating the keywords as it needs design consideration (which is in progress) and then the patch and tests will need adjustment once there's consensus on design.

Tentatively moving into 5.9 as this is introduced in the 5.9 cycle. But could be considered an enhancement and moved to a later release for refinement.

[noisysocks]

Yeah I also don't think we should hide or remove block themes from this view. Showing a message with a prompt to "activate and switch to the site editor", as in Screen Shot 2021-12-07 at 11.31.51 AM.png​ seems reasonable to me.

[poena]

I think it would be better to utilize the existing space for displaying messages related to installation, instead of adding a new modal.

[poena]

Utilize the existing space for displaying notifications:

[antonvlasenko]

Utilize the existing space for displaying notifications:

I like the idea of using the existing markup to display notifications, as it will require fewer changes (given the time left before the WordPress 5.9 release).
And it makes sense to me to reuse already existing functionality.
So, can we display a notification above the theme's screenshot (as suggested by @poena)?

The text of the message can be refined later.

[antonvlasenko]

The patch is ready to be reviewed.
I haven't got any new feedback, so I implemented the fix as described in my message above.

[costdev]

Test Report

Env

• WordPress 5.9-beta2-52344-src
• Chrome 96.0.4664.93
• Windows 10
• Theme: Twenty Nineteen
• Gutenberg Editor
• Plugin: None activated

Steps to test

1. Activate a non-block theme like Twenty Nineteen.
2. Click on Customize button to open Customizer.
3. Click on "Change" in the "Active theme" area.
4. Notice Twenty Twenty-Two is displayed there. Click on "Live Preview" button.
5. Click "Activate & Publish" button.
6. Apply ​PR 1991.
7. Repeat steps 1-3.
8. Twenty Twenty-Two should now have an error notice above it.

Results

• Before the PR: There was no indication that a block theme uses the Site Editor instead of the Customizer.
• After the PR: A notice now informs the user that a block theme uses the Site Editor instead of the Customizer.

Notes

• The "activate this theme" in the grid view does not activate the theme. Like clicking anywhere in a theme's grid item, it opens a modal.
• The "activate this theme" in the modal correctly activates the theme.

[hellofromTonya]

Test Report: with PR 1991 applied, the block theme has a notification over it. Works as expected ✅

[hellofromTonya]

Test Report: shows interaction between block and non-block themes in Customizer.

[hellofromTonya]

As this is introduced in 5.9, moving it into the milestone. ​PR 1991 is ready for commit.

[antonvlasenko]

P̶l̶e̶a̶s̶e̶ ̶d̶o̶n̶'̶t̶ ̶m̶e̶r̶g̶e̶ ̶i̶t̶.̶ ̶I̶'̶v̶e̶ ̶n̶o̶t̶i̶c̶e̶d̶ ̶a̶n̶ ̶i̶s̶s̶u̶e̶ ̶o̶n̶ ̶t̶h̶e̶ ̶T̶h̶e̶m̶e̶s̶ ̶p̶a̶g̶e̶ ̶t̶h̶a̶t̶ ̶m̶a̶y̶ ̶b̶e̶ ̶r̶e̶l̶a̶t̶e̶d̶ ̶t̶o̶ ̶t̶h̶i̶s̶ ̶p̶a̶t̶c̶h̶.̶
UPD: false alarm.

[hellofromTonya]

Preparing the commit now.

[hellofromTonya]

In 52371:

Customize: Overlay incompatible banner for block themes.

Starting in 5.9, block themes are not compatible with (do not support) Customizer; rather, they use the Site Editor. Viewing installed themes in Customizer, this commit adds an overlay message to alert users and give them a way to activate the block theme. Clicking on the "Activate" button activates the block theme and redirects back to the Appearance > Themes interface, where the user can then enter the Site Editor for customization.

Non-block themes are not affected by this change and continue to work in Customizer.

Follow-up to [41648], [41893], [52279].

Props antonvlasenko, costdev, hellofromTonya, jffng, joyously, noisysocks, poena, shaunandrews.
Fixes #54549.

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