annezazu 1:54 pm on September 8, 2021
Tags: block-themes ( 2 ), fse-exploration, fse-outreach-experiment ( 11 ), fse-outreach-program ( 45 ), full-site-editing ( 33 )

FSE Program Exploration: Help with the future of Block Theme Switching

With the advent of blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes in the WordPress ecosystem, new possibilities are on the horizon, from easier theme development for developers and designers to easier site creation for users. Rather than just examining the value of block themes in isolation though, it’s important to expand to think about what can be done across different block themes. For example, imagine a world where one could seamlessly take product review patterns from one theme, styling from another, and product display templates from an eCommerce focused theme to create a store. Or imagine being able to switch themes while retaining your favorite palette of colors and typography. Regardless, it’s imperative that the experience is reliable, intuitive, and expansive pushing beyond what’s been possible in the past.

As a result, the focus of this exploration is on thinking from this longer term, “wishful thinking” perspective first by guiding you through a very basic theme switching process and then by asking each of you to creatively think about what you’d like to see happen. Since this is not quite a call for testing due to the lack of flows, focus less on finding bugs (although they are still welcomed) and more on thinking through things you wish would happen or would like to occur. The aim is to gather useful insights that will help inform how we design this experience.

Note: this is intentionally just focusing on block theme switching only for now rather than, for example, switching from classic to block.

Explore what’s currently possible

The steps below are meant to be high level with the aim to have you set up initial block theme related items that you might want to keep upon switching themes. It’s not required to run through these steps for the sake of this test since many of the flows are not yet built.

If you don’t have time to create quick content, feel free to import this demo content (open the link and select “Download) created especially for this test via the WordPress importer under Tools > Import. You can also follow this lesson for how to use demo content.

Set up a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site.
Install and activate the latest version of Gutenberg.
Install and activate a block theme from the options listed in the theme directory.
Create a custom template under Appearance > Templates > Add New.
Create a custom template part under Appearance > Template Parts > Add New.
Open the Site Editor and, using the Global Styles UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., select a few custom block styles and overall default styles. Save all changes.
Head to Appearance > Themes and switch themes.
Review the Site Editor, Templates, and Template parts.

Bonus: Try importing and exporting content from a current site you have to a test site to make the test feel more real and applicable, even if the site is not using a block theme. From there, switch to any theme, block or not. This is purely to get you in the headspace of thinking more about what you’d like to retain even if this is focused specifically on block themes.

Describe what you’d like to see

Comment below after reflecting on the following questions. Remember to share what you’d like to see ideally rather than focusing on what’s currently in place. Answer one, answer all, answer none! These are merely to get you thinking in the right framework rather than boxes to check:

What would you want to be able to do when switching themes?
What parts of a block theme would you expect to be able to keep when switching themes?
What sort of confirmation prompts would you want to see?
Share a time when you switched themes and something unexpected happened.
When you switch themes on your site, can you share your routine?
If you wanted to switch to a new theme today, where do you go or which places would you expect to be able to do this?
What are some reasons you have had for wanting to switch to a new theme?
Anything else? Think big!

Please share feedback by September 29th, 2021

As always, thank you for participating in this exercise. If anything is blocking you from doing so, just say so either in #fse-outreach-experiment, in the comments of this post, or over DM in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to @annezazu (that’s me!). Keep in mind that not everything shared here will be implemented by the nature of this exploration but know that your ideas will ultimately help shape what is possible going forward.

Thank you to @poena @kellychoffman @priethor @daisyo for reviewing!

#block-themes, #fse-exploration, #fse-outreach-program, #full-site-editing

annezazu 1:54 pm on September 8, 2021

+make.wordpress.org/themes/
Pingback: The developer experience of WordPress presets – André
Paal Joachim Romdahl 5:26 pm on September 17, 2021

3- “Install and activate a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme from the options listed in the theme directory.”
–> I used the Search theme Feature FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. and used the keyword “Full Site Editing”
Installed 3 themes and activated one of them.

4- “Create a custom template under Appearance > Templates > Add New.”
–> I right away noticed that the “Add Title” and “The Type / to choose a block” placeholder text is nudged up to the left side (black WP menu column). I added some content to it. Everything is nudged up to the left WP menu black column.

5- “Create a custom template part under Appearance > Template Parts > Add New.”
–> I assume that it is the theme I had selected to use. As I am seeing a “headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.” and an Untitled “Template Part” in the Template Parts screen. Again content is nudged up against the left edge. I noticed that when the right sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings is open that the content is pushed to the left edge. Closing the sidebar settings gives left padding to the content.

6- “Open the Site Editor and, using the Global Styles UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., select a few custom block styles and overall default styles. Save all changes.”
—> I clicked By Block Type and selected some blocks that I modified. Such as Buttons, Column and Site Title. Then Saved.

7- “Head to Appearance > Themes and switch themes.”
—> Switched from Pria go Hansen themes.

8- “Review the Site Editor, Templates, and Template parts.”
—> Templates and Template part looked the same. Global Styles was reset. No Global styles I had set for Pria was passed on to Hansen theme.

“What would you want to be able to do when switching themes?”
—> Have the option to keep Global styles modifications. Perhaps a kind of dialog box that shows up when entering the Site Editor listing adjustments I made to the previous theme, asking if I wanted to keep these adjustments or to start anew.

“What parts of a block theme would you expect to be able to keep when switching themes?”
—> General styling of blocks, Templates and Template Parts.

“What are some reasons you have had for wanting to switch to a new theme?”
—> To see prebuilt template layouts (could be done in a template mosaic view to where I can choose various prebuilt layouts instead of switching themes). To have a base that I want to start from. A design that I would like to use and modify.

That’s it for now! Thanks!
- annezazu 5:39 pm on September 20, 2021
  
  Thanks as always @paaljoachim!
  
  Perhaps a kind of dialog box that shows up when entering the Site Editor listing adjustments I made to the previous theme, asking if I wanted to keep these adjustments or to start anew.
  
  Is there any particular reason why this feels helpful to include upon entering the Site Editor vs earlier in the theme switching process?
  
  To see prebuilt template layouts (could be done in a template mosaic view to where I can choose various prebuilt layouts instead of switching themes).
  
  I dig this idea 🙂
Paal Joachim Romdahl 6:38 pm on September 20, 2021

Is there any particular reason why this feels helpful to include upon entering the Site Editor vs earlier in the theme switching process?

Thinking out loud…
I have experimented with one theme but figure out along the way that it does not have the patterns or finished templates or something else I had hoped for. Instead of creating the patterns and templates myself I switch themes. When I click to switch a theme I get a warning message saying that switching themes will remove the adjustments I made to the current active theme, but I have an option to save these adjustments in a kind of twilight zone between one theme and another. I select to save changes I made, and notice that these carry over to the new theme that I activate. I check and notice that the changes do carry over. I am relieved that I am able to create adjustments in one theme and have these with me to the next time.

A variation of the above (which is related to the area one enters but the above is a better approach.)
One activates a new theme enters the Site Editor a dialog box shows up, saying do you want to add the following changes made to the last activated theme?
Global styles – Buttons blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., Column block, Site Title
Templates – 404 template, CPT template.
Template part – HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 1, Footer 1.
In the Site Editor I can check out what the new theme offers and when I feel ready for it I can either say yes to bringing over the changes or no because I notice that the new theme has what I need.

The reasoning.
Go into the screen such as the Site Editor related to a change, or that uses something from the last theme. Could be Global Styles, Template or Template Parts. Have an area/panel show up listing changes from the last theme(s). One can see the changes and anytime one feels like it when can select to bring the changes over to the new theme or just let it go. As I am thinking one could compare what the new theme brings along compared to what the old theme had. In a sense one could bring along unique templates, template parts or something else a theme offers into a new theme. Switch themes again and there would be even more templates, template parts etc to bring over to another theme. It can become a huge collection of templates, template parts etc. Now perhaps one needs a panel with a checkbox next to each change so one can check what one wants to bring along and what to discard. (Similar to check boxes in a save panel.)

Continuing….
Importing/exporting Templates, Template Parts, Global Styles etc etc from one site to another. Not closely related to a theme, but as a way to save and export/import designs one creates. One can have a library of parts one uses as a default layout one uses to create sites.
- annezazu 4:24 pm on September 22, 2021
  
  These are wonderful explorations! Thank you for writing this all up. I particularly like how you describe this experience:
  
  In the Site Editor I can check out what the new theme offers and when I feel ready for it I can either say yes to bringing over the changes or no because I notice that the new theme has what I need.
  
  As for this note, I very much think this is part of the future, even with designing patterns and submitting them to the pattern directory:
  
  Not closely related to a theme, but as a way to save and export/import designs one creates. One can have a library of parts one uses as a default layout one uses to create sites.
Timothy Jacobs 4:18 pm on September 22, 2021

An issue I’ve ran into now a few times when trying out different Full Site Editing themes is that losing menu data is frustrating. I think as a non-technical user it would be confusing, because you are prompted to “Add an existing menu”, which I would think would be my menu from the last theme I was using. But it is actually a “legacy” menu which doesn’t get updated by the FSE menu editing experience.
- annezazu 4:24 pm on September 22, 2021
  
  Great call out! Consider it noted.
  - Timothy Jacobs 3:01 am on September 23, 2021
    
    Thanks Anne!
Carolina Nymark 10:32 am on September 28, 2021

What would you want to be able to do when switching themes?
I would like to be able to use templates and templates that I have created and saved, no matter which theme that is active.
I know that I can view them under appearance templates/template parts,
open them, copy the code and paste it into a new template,
but I don’t think that is a good flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

. It should be easier.

What parts of a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme would you expect to be able to keep when switching themes?
I think it is important that navigation blocks that I have set up remains.
The “Add existing menu” feature in the navigation block assumes that I have already created a menu in the navigation screen.
If I only setup the navigation block as part of a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. template part in the previous theme, then I can’t re-apply or reuse that navigation block.

Perhaps navigation blocks should also work the other way around?
I mean why can’t I select a name for my navigation block as I create it in the editor, save that in isolation like I can save the site blocks in isolation, and have that navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. present on the navigation screen?

What sort of confirmation prompts would you want to see?
I actually don’t want to be prompted with having to make several decisions
as soon as I activate a new theme. I would find that stressful. I want to take my time.
I want to understand what the differences are between the themes, and what changes I need to make.
Perhaps there would be a side-by-side comparison of common page templates
like page, single post, home? Like a revision?

When I choose a theme to switch to, before I activate it, I can preview it in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. But it is difficult to view other pages than the frontpage that way.
I feel like the “live preview” for block themes should be in the site editor, not the customizer, and that the flow should be the same; I should be able to “publish” to activate the new theme.
- annezazu 5:58 pm on September 29, 2021
  
  Thank you as always for your awesome insights! Love your thoughts around the navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. in particular.
  
  Perhaps there would be a side-by-side comparison of common page templates
  like page, single post, home? Like a revision?
  
  This is very much in line with how I’m thinking about things too. It’s tricky because theme switching right now is pretty seamless after previewing but block themes unlock the ability to “merge”/combine items. This makes it so that you likely do need some friction ahead of switching but ideally not too much to discourage it!
Anariel Design 9:44 am on September 29, 2021
Hi,

hope this can help a bit :).
1. I used the Clove theme and switched to the Quadrat. I imported content from the Clove demo, changed the font and colours in Global Style and change the button style in BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Type. I have experimented with the About Page that uses the About Template. When I switched to the Quadrat I mostly lost everything that I set up in the Clove theme. That means, About page doesn’t look anything similar, colors, fonts are now from the Quadrat theme and button style too. From the user’s side, this is very confusing. If u ever used Elementor for example, and many are using it they are used to the similar overflow. If I create a template and change the look and styles and switch to any other theme this template will look the same and it will remain available. I know, I have this about template listed in the Templates but when u switch the theme you can’t find it or you need to copy/paste it and create a one on your own. This is very confusing.
  It would be great to have a similar experience as on WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ where you navigate to the page, open a new one, choose immediately from the templates (that are visible like screenshots) and then just start changing and adding your own content.
2. Menu part – when you switch a theme u lose the menu and that’s not a great experience 🙁
3. When you export the demo and import it to the other installation, theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file styles are not imported. As a theme developer, I would love to develop one theme with different demos for example. When I export the demo file I would love that global and block type styles are exported too and imported to other installations. Like you have now for the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., you can export the Customizer styles and import them to another site. This is a must when you create different theme demos with different styles. I would love to create a next WordPress theme that will not use Customizer anymore and will be able to have everything in Global Styles. For not I’m using Customizer mostly to offer different headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. layouts and colours. If I would be able to export Global Styles that would be soo helpful and I can switch to it.
Thank you for everything you do and hope this can be helpful to you.

Best,
Ana
- Anariel Design 9:52 am on September 29, 2021
  
  One more thing, agree with Caroline about this “I actually don’t want to be prompted with having to make several decisions
  as soon as I activate a new theme.” 100%. It needs to be easier for the users. They already needed to deal with the domain, hosting, choosing a theme etc.
  
  It would be great to have a better preview of Templates, for example when you create a new Page you see a window where you can choose a blank template or between different templates that comes with the theme. After they choose a design, they start editing and adding their own content without the need to switch windows or to click anything more and to be able to preview it. For me, this is crucial, how the new Site Editor will look like at the end from the users perspective.
- annezazu 6:57 pm on September 29, 2021
  
  @anariel-design thank you so much for taking the time to share your thoughts and for testing out how the current experience is in comparison to other tools in the WordPress space. This is wildly helpful!
  
  When I switched to the Quadrat I mostly lost everything that I set up in the Clove theme. That means, About page doesn’t look anything similar, colors, fonts are now from the Quadrat theme and button style too. From the user’s side, this is very confusing. If u ever used Elementor for example, and many are using it they are used to the similar overflow. If I create a template and change the look and styles and switch to any other theme this template will look the same and it will remain available.
  
  Totally agree that this current experience is quite confusing and leaves a lot to be desired. It seems to be a broad consensus that any changes to a template means that a user should be able to keep that template going forward! Ditto is true with menus!
  
  100%. It needs to be easier for the users. They already needed to deal with the domain, hosting, choosing a theme etc.
  
  Very much noted. It’s going to be a tricky problem to solve to get the right kind of friction here to explain what’s happening while not discouraging switching.
  
  It would be great to have a better preview of Templates, for example when you create a new Page you see a window where you can choose a blank template or between different templates that comes with the theme.
  
  Yes! Agreed. Some work is underway in issues like this: https://github.com/WordPress/gutenberg/issues/27847 I’m excited to see more work done here to make it more intuitive to use and customize.
Rich Tabor 10:07 pm on September 29, 2021

What would you want to be able to do when switching themes?

I’m very surprised that any templates I’ve created are tied to the theme that was active when I created them. I’d expect that my custom templates should remain applied to pages when the new theme is active, instead of being disregarded. I’m not sure why templates are omitted when a theme is changed.

What parts of a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme would you expect to be able to keep when switching themes?

Understandably global styles settings would adapt when a theme is changed (just like the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.) – and I like how my custom GS settings persist when I change back to a theme (just like the customizer as well).

What I’m missing is the templates. If I assign a page a custom template that I’ve designed myself (regardless of what theme is active) that template should be applied. Not sure why user-generated content (the template) is tied to a theme in the current paradigm.

What sort of confirmation prompts would you want to see?

We don’t have standardized colors, but perhaps asking if any custom GS settings/color palettes should be carried over. But I don’t think that’s too much of a big deal tbh.

Share a time when you switched themes and something unexpected happened.

My custom template was no longer applied to a page, and I couldnt use it anywhere. The only solution was to recreate the template for the new theme.

When you switch themes on your site, can you share your routine?

Test it locally, make sure not too much stuff is broken, update page-by-page or post-by-post to make sure stuff looks right.

Overall we need much more clarity on what happens when a user creates a template and applies it. Otherwise we end up with pages that are all of a sudden opted back into the standard page template of the theme, instead of whatever the user has decided to do.
- annezazu 6:41 pm on September 30, 2021
  
  Thanks, Rich, for chiming in here with your thoughts! Super appreciated. Looking across all the responses, it seems we have a very clear consensus around the importance of keeping templates when theme switching.
  
  Test it locally, make sure not too much stuff is broken, update page-by-page or post-by-post to make sure stuff looks right.
  
  Neat to get a peak of what you do. It would be pretty lovely to have an easy way to preview what changes might happen prior to switching, assuming switching between blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes will hopefully break less things in the long run (with likely the advent of more standardization).
Elma Studio 5:53 am on September 30, 2021

I just wanted to add some short notes, sorry for being so last minute.

Keeping any menus created in the Site Editor available would be important, I think this is one of the biggest issues right now.

Also, I actually thought I can use the custom created templates for any page after switching a theme, but they did not show up in the list (under Template) once I was on the Page. I thought this is already possible.

When I switched from Aino to Blockbase I was able to keep some custom colors from the Color palette, e.g. Primary. Other settings like setting the Heading blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to bold by defold got lost.

What parts of a block theme would you expect to be able to keep when switching themes?

I think especially Templates and Template Parts should be available to use. I see Global Styles tied to the theme, but it could be helpful if some common settings are taken from one theme to the next.

What are some reasons you have had for wanting to switch to a new theme?

I think the most common scenario is a missing functionality in one theme like WooCommerce support. Next would be outdated design and lack of updates and support from the theme author.
- annezazu 6:55 pm on September 30, 2021
  
  Thanks so much for the insights @elmastudio! No need to apologize at all — just happy to have you share.
  
  Keeping any menus created in the Site Editor available would be important, I think this is one of the biggest issues right now.
  
  Definitely seem to have some consensus on this issue as well along with templates and template parts. I agree that it’s jarring right now to have these not be retained.
  
  I see Global Styles tied to the theme, but it could be helpful if some common settings are taken from one theme to the next.
  
  Fascinating as someone up above suggested being able to move Global Styles between themes!

WordPress.org

Share this: