Moving Away from Page Builders to the Block Editor

October 2023 Meetup
WordPress Hartford CT Meetup
October 17, 2023
[ Make Current ]

Watch Recording


Click below to watch our October 2023 meetup on YouTube, or visit https://www.youtube.com/watch?v=WTOWudYYOL0.

[ Make Current ]

Agenda


  • Speaker Introductions
  • Life Before Gutenberg – Why Page Builders Were Popular
  • Why Use The Block Editor?
  • What Advantages Do Page Builders Still Have?
  • The “Hybrid” Approach (Peter)
  • Rebuilding From A Page Builder (Ray)
  • Wrap-Up
[ Make Current ]

Ray Michno


Cute Yellow Wapuu WordPress Mascot
ray@ctwebgeek.com
  • Hartford WordPress Co-Organizer
  • 25+ years in IT
  • Developer/Software Architect
  • Pratt & Whitney, Aetna, UnitedHealthGroup
  • 7+ years using WordPress
  • Self-employed – CTWebGeek
  • Married, No Kids, Lives in Newington, CT
  • Geek
[ Make Current ]

Peter Ingersoll


peter@ingersollinteractive.com
  • Hartford WordPress Co-Organizer
  • 25+ working on the Web
  • Marketing, communications, design, tech guy
  • Hartford Courant, logistics, agency
  • 10 years using WordPress
  • Self-employed – Ingersoll Interactive
  • Married, two adult kids, lives in South Windsor, CT
  • WordPress Admin & DIY Advocate – IngersollWP.com
[ Make Current ]

Life Before Gutenberg


  • Classic Editor and Custom Fields were used to build content for pages and posts
  • Coding was required to create custom PHP templates to lay out content
  • Difficult for non-developers to modify
  • Early Page Builders like WPBakery/Visual Composer were often bundled with paid WP Themes – they allowed users the ability to customize some layout but could be frustrating to work with
Tinymce

Why Use the Block Editor?


  • Compatibility
  • Block Editor is part of WP core, ensuring compatibility across different themes and plugins
  • Cost
  • Block Editor is FREE with WP – no annual licenses
  • Simplicity
  • Many pages can be built entirely with the core WP blocks (ex. rows, text, images)
  • Flexibility
  • Mix and match core and pre-made blocks together to create a specific design
  • Performance
  • Generally, core blocks more lightweight than page builder modules
  • Ongoing Enhancements
  • WordPress is continuously adding and improving blocks and the Block Editor

What Advantages Do Page Builders Still Have?


  • Advanced Features
  • More styling properties (ex. CSS animations), built-in A/B testing, etc.
  • Improved Site Editing *
  • More mature site-editing capabilities than current WP Full-Site-Editing (* more of a theme feature vs. stand-alone page builder)
  • Better E-commerce Support
  • Some include specialized components/modules for WooCommerce (ex. shopping carts, product modules)
  • Pre-Built Designs
  • Some offer a wide variety of pre-built templates to build individual pages or an entire website
  • Troubleshooting Support
  • Paid subscriptions often come with help desk support to answer questions
  • Community Support
  • Some popular Page Builders have large community support groups (ex. podcasts, forums, FB pages, YouTube tutorials, etc.)

Build Concepts are Similar


  • Blocks = Modules = Elements = Widgets
  • Many are very similar, with options being a big difference
  • Layouts are defined by containers, rows, sections, columns, etc.
  • Things go into things
  • More advanced module / blocks are similarly made up of smaller elements
  • Block patterns are just bigger groups of “connected” blocks
  • Third-party developers make page builder and block addons
  • Some offer advanced functionality, many just different design capabilities

The Content Area


  • Page and post content is in the “content area”
  • Separate from header, footer, sidebars, and hooked elements
  • More mature site-editing capabilities than current WP Full-Site-Editing (* more of a theme feature vs. stand-alone page builder)
  • Themes generally control headers, footers, etc.
  • Depends on the theme and theme type
  • Advanced & premium classic themes add more control in the customizer, or add custom elements to the layout
  • Block themes offer full site editing, which includes
  • Premium page builder plugins can be used to design site layouts
  • e.g. Beaver Themer and Elementor Layout Elements
Header / Navigation
Content Area
Sidebar
Footer

Turning Off Page Builder Plugins


  • Your content will look different
  • Content will lose layout design and styles
  • Some page builders will leave relatively clean content
  • Some page builders will leave code that will require cleanup (which is why recreating is often the better way to go)
  • Functionality will be lost if from a module or widget
  • A replacement block will be needed
  • If the page builder is tied to the site layout (headers & footers), site design work will be required

Page Builders & the Core Editor Work Together


  • Page builders are generally used for pages
  • Home, about, contact, landing pages, etc.
  • The core editor is generally used for posts
  • This is recommended as to not “over engineer” (blog) posts
So creating new pages – or converting existing – using the block editor is possible even if a page builder is active and used on other pages.

Live Demo – Hybrid Approach


Wapuu Dev
It’s Demo Time!

Live Demo – Rebuild Approach


Wapuu Dev
It’s Demo Time!

Wrap Up & Q&A


Wapuu with laptop and cat
[ Make Current ]

Resources & Links


Cute Yellow Wapuu WordPress Mascot