Tutorial - Importing Widget Areas from a Classic to a Block Theme

[wparasae]

Topic Description

Importing widget areas from a classic theme to a block theme can now be done with 6.2; this tutorial is a supplement to the longer lesson plan, Lesson Plan - Migrating from Classic theme to Block theme#1308

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

[wparasae]

Rough Draft

Are you in the process of migrating an existing WordPress website from a classic theme to a block theme? Are you scratching your head, wondering how to migrate your widgets from your classic theme's customizer to a new area in a block theme of your choice? If so, you've come to the right place! By the end of this tutorial, you will be able to migrate your classic theme's widgets to your new block theme. Let's find out how!

If you're just getting started changing themes, here a quick reminder: Before you begin making any changes to your website, please make sure to make a backup of your website first using a backup plugin such as Jetpack, WpVivid Backups, or All-In-One-WP. This will ensure that you will be able to quickly revert any unexpected changes.

Let's take a look at this sample website; currently, this sample website has widgets in its sidebar:
A customized search widget, recent posts, recent comments, archives, a categories list, social media icons, and a calendar widget.

And widgets in its footer.

I don't want to have to re-add each of these widgets when I switch my theme, so I will use the new 6.2 widget importer tool to help me. That way, I can focus exclusively on the layout of my new block theme, which saves me time.

First, I will change my theme from a classic theme to a block theme of my choice. I'll take a few moments in this video to stylize it to look the way I'd like. Once my theme starts looking the way I'd like, it's time to import my widgets -- I'm going to start with my footer.

To start, from your WordPress dashboard, go to "Editor" and scroll down to the footer. Since I will be replacing it with a new widget area, I start by removing it entirely.

1. Using List View, select your Footer Template Part and delete it by selecting the three dots, then 'remove template part'. I use my inserter to add this new section after my last block.
2. Use your inserter and search for 'template part'. Choose to add a new Template Part block and ignore both options that appear on your screen. Select the block itself.
3. Open the block settings and expand the Advanced section. Under “IMPORT WIDGET AREA”, select the widgets section you’d like to import--in this case, it's widgets from my widget area Home: Add Recent Workshops #1--and click “Import”.
4. If you look at your list view, you will see that a new template part has been created.
5. After importing, customize this new template part further as you’d like.
6. Save changes.

Now, all the work I did before--from my location to all my different social media icon links--has been moved over.

You can also choose to add former this as a sidebar--see the tutorial on creating a sidebar to create one on a theme that does not have one already, and use this same process. I use my inserter, select 'template parts', select the block, use my settings to select 'advanced', and import another widget area. Now, I can focus on styling this to look the way I would like rather than re-adding content, one block at a time.

To edit these template parts, head to your editor, select the 'template parts' section, find the template part you added, and you now, you can edit how this template will look.

Happy editing! For more tutorials, live workshops, and courses, visit Learn.wordpress.org.

[wparasae]

Video resources for potential translation/future updates: https://docs.google.com/presentation/d/1Ogrt6-Yx8tV-Gxifs8rME_6q_Wj_p0d0_jpd4w7kL9w/edit?usp=sharing

[wparasae]

The rough draft of this is ready! Please see the link below to view and review this content for publishing:

https://drive.google.com/file/d/1MYbMJmR1_rquoQHXSzzJ1ZgMDPDsXiCK/view?usp=sharing

Specific Feedback:

1. How is the pace of this? Have I slowed down enough to better reach an audience who may not speak English as a second language?
2. Is the content accurate?
3. As always, how is the sound? Let me know if you hear any bird whistles and/or airplane sounds in the background!

Feel free to add other comments. Please review by April 27th so this is ready for publishing. Many thanks to @westnz for helping find the BEST way to actually showcase this--I removed three unnecessary steps, and this is a huge improvement from my former draft!

[westnz]

Review:

• The pace was spot on! I was able to follow step by step.
• You have effectively used annotations to help the viewer focus on what was being shown.
• Reminding folks to make a backup before switching themes was clever.
• Well done on highlighting the advantages of importing widgets.
• You used solid examples.
• The sound was great.

Suggested changes:

• I suggest adding a red box around the Sidebar Tutorial you point out at around 4:09. Remember to add a link to this under a new heading called Resources when you create a new tutorial post.
• I think it would be better if you show the final result after you have edited/modified your new sidebar template part here 5:35 - 5:40. It would be good to see how you have styled and tweaked the template part.

[askdesign]

Sarah,
This is excellent! Nice pace, clear sound, very good examples. I particularly like you showing the footer and sidebar, as those are probably common areas people want to migrate.
3:47 - Before saving, you might want to delete the extra (and empty) social media icons block.

[westnz]

Recording: https://learn.wordpress.org/tutorial/importing-widget-areas-from-a-classic-theme-to-a-block-theme/