Migrating From a Pagebuilder to The Block Editor - Lesson Plan

[wparasae]

A Note for Team Reps

This is an experiment I am conducting on working with a brilliant subject matter expert to see how far we can get writing a lesson plan. I'd thought the topic already existed, but it did not -- posted here for working in public's sake.

Topic Description

Many people have built WordPress websites using page builders; it's possible to migrate to the WordPress block editor, but it takes a little consideration, time, and patience to move content and rebuild it in the WordPress editor; there isn't a quick and easy click of a button to migrate an existing page that utilizes a page builder to move. Every page builder is different, so this lesson plan walks learners through some of the common scenarios that they can expect when switch from a page builder to the WordPress block editor.

Related Resources

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

• [ ]

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Development Checklist:

• [ ] Gather links to Support and Developer Docs
• [ ] Consider any MarComms (marketing communications) resources and link to those
• [x] Review any related material on Learn
• [ ] Define several SEO keywords to use in the article and where they should be prominently used
• [x] Description and Objectives finalized
• [x] Create an outline of the example lesson walk-through
• [x] Draft lesson plan (In process)
• [ ] Copy edit
• [ ] Style guide review
• [ ] Instructional Review
• [ ] Final review
• [ ] Publish
• [ ] Announce to the Training team
• [ ] Announce to lesson plan creator
• [ ] Announce to marketing
• [ ] Gather feedback from lesson plan users about the quality

Repo Structure and Lesson Plan Template

Description

A short paragraph explaining what is covered in the lesson plan. This should be text that can be copied and used in a meetup or workshop description.

Objectives

After completing this lesson, participants will be able to:

• Disable a page builder in order to access the block editor
• Explain what the pros and cons are of migrating from a page builder to the block editor
• Migrate from a page building plugin of their choice to the WordPress block editor

Target Audience

Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.

• [ x ] Users / Content Writers
• [ x ] Designers
• [ ] Developers
• [ ] Speakers
• [ ] Organizers
• [ ] Kids

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• [ ] Beginner
• [ x ] Intermediate
• [ ] Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• [ x ] Demonstration
• [ x ] Discussion
• [ x ] Exercises
• [ ] Feedback
• [ ] Lecture (Presentation)
• [ ] Slides
• [ ] Show & Tell
• [ x ] Tutorial

Time Estimate (15 Minutes)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• [ x ] 1 hour or less (If users are just practicing on a sample test site)
• [ x ] 2-4 hours (half-day) (If users are working on a sandbox website of their very own)
• [ ] 5-8 hours (full-day)
• [ ] 2 days
• [ ] 3 days or more

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Navigate the WordPress dashboard
• Be familiar with the WordPress block editor
• Block themes vs. classic themes
• Familiarity with page builder plugins
• Making full backups of their existing WordPress website

Readiness Questions

• Are you already using a page builder such as Divi, Elementor, or another?
• Are you comfortable navigating the WordPress dashboard?
• Do you know how to activate and deactivate plugins?
• Do you know how to switch themes?
• Do you know how to make a backup of your site?

Slides

Change the /repo-name/ in the link to match the URL name of this repo.

• Slides (files included in this repo)

Materials Needed

• A sandbox WordPress website (to experiment before doing this on a live site)
• A full backup installed in that WordPress sandbox
• A pagebuilder plugin installed and the correlating theme (for example, the Divi Theme and Divi Builder Plugin or Astra Pro + Elementor)

Notes for the Presenter

• Every page builder is different; there will be different requirements depending on what the learner is using. This lesson will focus on Elementor for the demonstration and discuss some shortcodes with Divi and (potentially) other page builders.

• The presenter should have some familiarity with these in order to help students rebuild their websites.

• Best Practice: It might be a good idea to have separate website sandboxes. It is uncommon for people to use more than one page builder on a website, and is definitely not recommended to use multiple page editors on one website. Having multiple test sandboxes for you to use to demonstrate or for learners to experiment with will make this lesson go much more smoothly.

Lesson Outline

• Opening: Ask learners which page builders they are using, and ask for their opinions on why they would like to switch to the WordPress block editor. Create a list of pros and cons for staying with certain page builders or leaving. What do they like? What do they want to change?

• Double and triple check that everyone has made a copy of the website they are working on. Make sure they are not working on a live website for themselves or a client, and explain why.

• Once everyone has their backup ready and a test site to experiment with, demonstrate moving from Elementor to WordPress Block editor.

• Demonstration Elementor:

• 1. Talk about the pros and cons of removing extra plugins, themes, etc. that relate to the plugin and talk about why someone might want to do this to start vs. at the end.
• 2. Open a page into "edit" mode.
• 3. Switch to the block editor from a page builder
• 4. Most often, WordPress will display the content in a WordPress classic block.
• 5. Elementor: Take out the object square displayed in the classic block. Demonstrate converting to blocks, then using 'columns' to rebuild the website.
• 6. Demonstrate several other page builders, such as Divi, Beaver Builder, etc. Make sure to discuss some common obstacles, such as Divi's shortcodes that appear when you switch from the Divi Editor to the WordPress Block Editor; remind students they need to remove ALL the shortcodes related to Divi, or WordPress will convert everything into HTML blocks.
• 7. Double-check that all related plugins / themes have been removed.

• Before each demonstration, ask the class what considerations they have about each page builder. For example, talk about considerations about using a page builder coupled with a related theme, and how that might impact a user.

*Follow with the small-group exercise below.

Exercises

1. Convert a Page from a Page Builder to WordPress Block Editor

Short description of what the exercise does and what skills or knowledge it reinforces.

• The purpose of this exercise is to allow learners to experiment on a sandbox site of their own converting from one page builder to another.
• Put learners into groups based on which page builder they are using and have them work together to reconstruct a page of their choice in a small group.
• At the end of the activity, have each group shared what they did, what obstacles they faced, and what worked well -- what were their successes.

Assessment

There should be one assessment item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don't.

Write out the question.

1. Option
2. Option
3. Option
4. Option

Answer: 3. Correct answer

A few questions to ask participants to evaluate their retention of the material presented. They should be a measure of whether the objectives were reached. Consider having a question for each objective.

Additional Resources

• Resource 1
• Resource 2

An optional section which can contain a list of resources that the presenter can use to get more information on the topic.

For example:

• Link to information on the Codex
• Theme Review Team's Handbook

Example Lesson

An example of how the lesson plan can be implemented. Written in script form as one possible way an presenter might use this lesson plan at an event, with screenshots and instructions if necessary.

Section Heading for Example Lesson

You will likely need to break the Example Lesson down into multiple sections.

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.

[azhiya]

I like the topic idea. I'm seeing more and more of this coming up so I think it's a great topic to have on Learn.

[bsanevans]

@wparasae Do you have an update on this issue? How is it going?

[wparasae]

Due to a transition, I have removed myself from this issue to allow someone else to work on this. :) If I find time to work on this in the next two weeks, I will comment below and happily reassign myself to this issue.