Tutorial - Migrating from Classic theme to Block theme

[courtneyr-dev]

Topic Description

Review how to change from Twenty Twenty One (last default Classic theme) to Twenty Twenty Three, including managing nav menus, importing widgets, and reviewing any additionally related areas.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• [ ]

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[courtneyr-dev]

WordPress/gutenberg#39270

[wparasae]

Rough Draft: Outline

1. Make a backup of your website (Duplicator, Wp Vivid Backups, Jetpack, etc.)
2. Strongly suggested: Migrate your website to a development environment and experiment with templates / template parts there. Do not do this on your live website to begin.
3. What transfers from a classic to a block theme? (Posts, pages, title, tagline, logo)
4. Plugins: Some plugin functionality may work, but others do not. Important to experiment with plugin functionality before switching your live website (resource: https://wordpress.org/plugins/browse/blocks/)
5. Get designing! You'll want to start with your stylebook to work on your theme's overall look and feel.
6. From there, you'll want to explore templates.
7. Resource: Widget Importer Tutorial
8. Resources: Stylebook + Tutorial / Explore and manipulate templates + template editor

[wparasae]

(Typed up from hand-written/chat GPT and modified)

Welcome to switching from a Classic to a Block Theme. While there's a lot to learn to master block themes, this tutorial serves to walk you through the very basics while helping you locate and utilize resources that will get you using new WordPress block themes efficiently. Are you up for the challenge? Let's learn!

Whether you are using a classic or a block theme, when you switch from one WordPress theme to another, certain aspects of your website will be affected, while others will remain unchanged. What should you expect when you switch from a classic theme to a block theme?

Some Things Change:

1. Layout and Design: The most noticeable change will be the visual appearance of your website. Each theme comes with a unique layout, color scheme, typography, and design elements that will replace the previous theme's look.

2. CSS Modifications & Theme-Exclusive Features: Any custom CSS you have applied to the previous theme will disappear. Additionally, some WordPress themes come with exclusive features like custom page templates, shortcodes, or widgets. Switching to a new theme may lose those features, affecting the way content is displayed on your site.

3. From customizer to site editor: Your new block theme will have a completely different set of editing options. Expect to configure the new theme according to your preferences. when you switch to a block theme, far more control is given to you, the user, to make changes to these same elements.

Some Things Stay:

1. Content: Your posts, pages, images, and other media files will be unaffected. However, due to design differences, the way they are displayed might change. For example, in this classic theme, the featured image serves as a header with the title inside it, and a sidebar is included by default. When I switch themes, this featured image from the post will remain, but where it, the title, and the recipe appear on a new page

2. Menus will generally be retained, but you might need to reassign their locations in the new theme if the available menu and widget areas differ.

3. Plugins: Your installed plugins will stay and remain installed, but you may need to adjust their settings to ensure they work well with the new theme. Some themes may have built-in styles for popular plugins, so that may change as well. Plugins that wouldn’t work well in block themes would be any plugin that relies on a widget (and doesn’t have a shortcode equivalent), but some that work more 'behind the scenes' such as SEO plugins may be unaffected.

4. User Data: Your users, their roles, and their profiles will remain unchanged.

5. Former widgets native to WordPress core that you had on your website still exist in your WordPress dashboard, but you may need to import them and style them in a block theme to an area you'd like.

Overall, switching WordPress themes primarily affects the visual appearance and layout of your website. The core content stays intact, but you may need to take some time to reconfigure elements, and you'll want to double-check your plugins to ensure that they continue to function within your WordPress website.

Now that you know what to expect, how is it recommended that you get started?

Before switching from a classic to a block WordPress themes, it's crucial to follow these steps to ensure a smooth transition:

1. Backup: Create a complete backup of your WordPress site, including your database, media files, and theme files. You can use plugins like WPVivid Backups, Duplicator, All-in-One WordPress migration, or another backup plugin to accomplish this.

2. STRONGLY RECOMMENDED: When switching from a block theme, it is strongly recommended that you test your new theme in a local or a staging environment: Not all plugins work well with block themes, and it can take some time to set up your website exactly the way you'd like using powerful block themes. This will allow you to identify any issues, make necessary adaptations, and configure the new theme without affecting your live site. Please note that it can take some time to migrate a theme from a live server to a test environment, so allow ample time to do this.

3. Once you've migrated to a test environment, it's time to switch themes! Head to the WordPress theme repository, select 'block themes', and choose from the list of block themes. For most, you'll notice that your "Customizer" has been replaced by the button "Editor" once you've installed and activated a block theme of your choice. Do note that some plugins still utilize the customizer, so both buttons may still exist.

4. Did your old website us plugins? If so, it's a good idea to check plugin compatibility: Ensure the new theme is compatible with your site's existing plugins, as well as the latest version of WordPress. Research and resolve any potential conflicts before making the switch on your live website.

5. Stylize it! Stylize the look and feel of your website using the Stylebook. See the tutorial on using the Stylebook for a deeper dive into this content.

6. Get working on templates! I like to start by working on my home page -- in this case, I will use a query loop and style my front page to display my latest blog posts. Important! It may be tempting to write home page content right here in the Site Editor. Do your best to write content exclusively in the posts and pages section; your site editor is meant to help you stylize the overall look and feel of your website. If I write a lot of interesting content in my site editor, rather than in my post and page editor and decide to switch to another theme, I will lose my content. Please see the tutorial about Understanding the Site Editor vs. Page Editor for a more in-depth look at the difference. I then move on to how posts and pages will appear; I now have the ability to separate my featured image and title and make my posts and pages display their content exactly the way I would like.

Resources: Simple Site Design Courses, Importing Widget Areas, other tutorials on learn.wordpress.org.

7. Once you've completed these steps and are confident that your new theme is ready, you can proceed with the process of switching themes on your live site -- I prefer to do this with a migration plugin, but you can also do this manually, template by template, by copying and pasting your code. For example, here, I switch my theme on my live website to the one I'm using on my test website; then, template by template, I use the list view to copy all blocks, then paste them in, template by template.

8. After switching, be sure to re-test your entire site thoroughly to ensure everything is functioning as expected.

Now, you should have total control over how your website looks and feels with your new block theme! Congratulations!

[wparasae]

Resources: https://docs.google.com/presentation/d/1D_WjOW4OfKCXKOb91DBjZKfOEswpw-DUuynF2Cx1J7E/edit?usp=sharing

[wparasae]

This is ready for a first review. I attempted to tackle this in a way that should benefit beginners and intermediate users; therefore, I made the choice to start by explaining what will change with any theme switch, then moving specifically to block themes.

View here:
https://drive.google.com/file/d/1BAU6V21NMGLrdu5vjXCwM6Z83NxVIbwW/view?usp=drive_link

Known Issue:

• Sound quality needs to be re-recorded in many places due to a lack of quiet workspace.

Specific Feedback

• Are these steps complete? Am I missing any information?
• Is there anything I should OMIT from this video that I've included?
• Is the content ACCURATE? I feel like especially around menus, I may have missed or misspoken, so I want to address that before additional issues.

If you have feedback on places I should slow down or speed up, please include these also, or any specific feedback on where I should re-record for sound quality. I will comb this over again next week, but I'm most concerned about the content of this to start before I spend a long time polishing it.

[quitevisible]

Hi @wparasae - I'd be happy to review the video. Would you be able to embed it here, or make it available publicly to preview without having to log into a Google account? The link above requires logging into Google/Drive.

[ashrafulsarkar]

@wparasae please make video link "anyone can view"

[wparasae]

Fixed! Sorry for the delay, and thank you for your time!

[ashrafulsarkar]

This tutorial is nice.

[quitevisible]

@wparasae great tutorial! I didn't notice any issues with audio, at least none that I found distracting. There should definitely be a strong sense of taking precautions when doing this! Some feedback...

• From my experience, previewing blockthemes in the customizer is not possible, so perhaps make a comment of what might happen if a user activates a blocktheme to try, and then changes their mind. Will the site revert back to it's original state, or is the change destructive/irreversible?
• Some themes in the repo are labeled 'FSE'. It would be helpful to touch on that briefly and explain the meaning. Maybe work it into your section on why the customizer disappears and the editor takes its place. Themes that use blocks, are not necessarily 'blockthemes' ...or something.
• For someone who's not using a dev site like Local to test or reconfigure, and is working on a live site - it might be good to place the site in 'maintenance mode' or suggest a plugin like Seedprod to do this (assuming the plugin works with blockthemes!) In the (rare?) case that things go horribly awry, no will notice - hopefully.

That's it! I think this will be a great resource as more users will likely start migrating over to FSE themes. It's not business as usual and they'll need to know what they're in for! 😁

[ghost]

Video was great. I didn't hear any background noise. I agree with quitevisible about mentioning about block themes and FSE themes. I think your speed was fine. You slowed down when it was time to do step by step.

In your write up here are some edits. Didn't know if this is part of the tutorial materials.
Are there links to resources 7 and 8?
When I switch themes, this featured image from the post will remain, but where it, the title, and the recipe appear on a new page This sentence doesn't make sense after but and no period.
Did your old website us plugins? replace us with use
Please see the tutorial about Understanding the Site Editor vs. Page Editor for a more in-depth look at the difference. Is there a link for this tutorial?

[wparasae]

In your write up here are some edits. Didn't know if this is part of the tutorial materials.

Thank you! I like to include the general script and additional resources in case people want to translate them into other languages. The idea is to make it easier to do so.

I appreciate all ya'lls feedback very much! Thank you!

[annezazu]

Reviewed the video. Nice work! It's exciting to see this take shape as we think about introducing more folks to the world of block themes. Some feedback for ya:

• I'd explain more of what block themes are at the beginning and why someone might switch (or not).
• You start off by noting how the design has changed upon switching. This is true of any theme so I don't think we should call it out for a block theme and, if we do, we should note how you can now make adjustments to your liking without code most of the time compared to classic. You later note it in a way at around 1:50-2:00 but I'd leave with it ("as with changing any theme...").
• I'd give a few more examples of what block themes allow you to do in terms of customization to help show folks both the power of what's possible and visually show why one might switch. It could be as simple as saying some examples rather than showing.
• I'm a bit confused why we are emphasizing the Stylebook over Styles. I think we should talk about both Styles and how the Stylebook fits into that.

Love all the ways you are connecting to other resources! In the future, worth keeping in mind the potential of previewing block themes too and how it's done in the Site Editor for folks to get a feel: WordPress/gutenberg#50030

[drussell17]

You commented about audio problems. If that was related to the "dropouts" then you're aware of that.
You activated two block themes during the tutorial but didn't include editing one to make the content more similar to the classic theme.

It looked like the second theme was "closer" and that you could have added editing a page template there.

[wparasae]

I've aggregated these suggestions and used many of these suggestions. This tutorial is now live: https://learn.wordpress.org/tutorial/how-to-switch-from-a-classic-to-a-block-theme/