Using the WordPress Blocks Page Builder – It’s Better Than It Looks!

WordPress’ built in page builder hasn’t always had the best reputation. Earlier versions were often clunky, unintuitive, or required some knowledge of HTML to get the most out of them. That was the past, though, and things have moved on! The current WordPress Block Editor is by far the most capable native editor to date. While it may appear a little plain and sometimes feel less polished than plugin based page builders, it brings some clear advantages that make it worth considering.

WordPress launched with a very simple editor, designed mainly for writing blog posts. Layout control was minimal, and most customization required HTML or CSS knowledge. The need to know CSS and HTML meant that this editor wasn’t accessible to a non-technical audience.

Over the years, WordPress expanded the Classic Editor with the TinyMCE editor and shortcodes. This rich text editor gave users more flexibility with more text formatting options and no need to know HTML, but the editing experience was still limited and not very visual.

WordPress 5.0 introduced the Gutenberg Block Editor, a major shift from traditional editing. Instead of plain text areas, content could now be built with blocks for text, images, media, and layout elements. This allowed users to generate whole pages containing multiple components, rather than just editing blocks of text.

Gutenberg marked the beginning of a more visual, modular approach to content creation, giving non-technical users far greater control over layout and design without relying on custom code or third-party page builders.

WordPress continued developing the block system into Full Site Editing (FSE), which allows users to design not just posts and pages, but also site templates and other layout elements directly within the editor. With FSE-compatible themes, users can customise headers, footers, and other template parts using blocks, giving far more control over the overall site design without touching code.

While the WordPress Block Editor has come a long way, some users still prefer the additional flexibility and features offered by third-party page builders.

Popular alternatives like Elementor, WP Bakery, and Beaver Builder provide more advanced design options, drag-and-drop interfaces, and pre-built templates that can speed up site creation.

These tools often include built-in responsive controls, animation effects, and integrations that go beyond what the native editor currently offers, making them a popular choice for designers and users who want complete visual control over their sites.

Elementor is one of the most popular third-party page builders for WordPress, known for its intuitive drag-and-drop interface and extensive library of pre-designed templates and widgets. It allows users to create complex, visually appealing pages without any coding knowledge, and includes features like responsive editing, custom animations, and integrations with marketing tools.

While Elementor offers many benefits, it does have some downsides. It adds an extra layer of logic to the WordPress application and loads a significant number of scripts on each page, which in some cases can be render-blocking and delay browser rendering.

Elementor occasionally prompts a “Elementor database update…” message. While this update is running, your site may perform slower, so it’s important to monitor for the message and click the “Click here to run it now” button to keep your site running smoothly. Babysitting, Elementor style.

WP Bakery is another widely used WordPress page builder, offering a drag-and-drop interface and a range of design elements for building pages without coding. It provides both front-end and back-end editing, making it versatile for different workflows.

However, WP Bakery can add extra scripts and CSS to your site, which may slow down page loading times, especially on larger sites. Like Elementor, it also relies on shortcodes, meaning that switching away from the plugin can leave behind a lot of messy code in your content.

While WP Bakery is powerful and flexible, users should weigh the convenience against potential performance and long-term maintenance considerations. This site used to use WP Bakery, and there was a whopping 1.8 MB of JS on the page. Considering that a web page should be between 1 and 2 MB, thats’s a lot.

Beaver Builder is a popular WordPress page builder known for its clean, user-friendly drag-and-drop interface and reliable performance. It offers a range of pre-built templates and modules, making it easy to create professional-looking pages without coding.

Unlike some other builders, Beaver Builder is generally lightweight and well optimised, which helps maintain faster page load times. On the downside, its feature set is somewhat more limited compared to Elementor or WPBakery, and some advanced styling options require the premium version. Overall, it’s a solid choice for users who prioritise stability and clean code over flashy design effects.

Plugin based page builders like Elementor, WPBakery, and Beaver Builder are great for creating visually complex pages without coding. This design flexibility often comes at a cost to performance. These builders typically load large amounts of JavaScript and CSS, some of which can be render-blocking, increasing the time it takes for a page to fully display.

Plugin based page builders also introduce an extra layer of code in the WordPress application, which adds to server side processing. This can slow down page load times. As a result, while plugin-based builders are great for rapid design, they can negatively impact Core Web Vitals, SEO, and overall user experience if performance optimisation isn’t carefully managed.

In short: more “builder features” = more work for both the server and the browser, which can hurt overall performance if it’s not optimised.

While it is possible to optimise your sites page output when using a page builder, there’s more to optimise just from the use of a page builder alone. It’s a bit like trying ot run a race wearing wellies. OK, you can train REALLY hard tobe fast in your wellies, but might it be better if you weren’t wearing wellies in the first place?

BUT I LIKE MY COLOURFUL HOLOGRAPHIC WELLIES!!!… Even though I’ve come last.. again.

Despite the potential performance drawbacks, many people continue to use plugin based page builders because of their usability and feature set. These builders offer drag and drop interfaces, pre-built templates, and some advanced design options that make creating visually complex pages much faster and easier compared to the native WordPress Block Editor.

While the Blocks editor is steadily improving, it can feel somewhat plain and limited out of the box, especially for users who want intricate layouts, animations, or specialised widgets. For many site owners and designers, the convenience and creative freedom offered by plugin based builders outweigh the impact on performance.

That said, there is a way to gain very similar functionality when using the native Blocks editor.

Gutenberg block plugins extend the functionality of the native WordPress Block Editor, adding more design options, pre-built blocks, and advanced features that aren’t included by default.

Popular examples include Stackable, Kadence Blocks, and Ultimate Blocks for Gutenberg, each offering a library of additional blocks for layouts, buttons, galleries, pricing tables, and more. These plugins enhance the visual capabilities of the Blocks editor without requiring a full third-party page builder. This allows users to create more dynamic and engaging pages while still keeping the lightweight Blocks editor, without as many performance implications due to the lack of additional login in the WordPress application, or additional weight in your site’s page output.

These types of plugins are particularly useful for users who want flexibility and creativity beyond the default blocks but want to reduce performance implications and the need to optimise to such a degree.

Using WordPress Blocks offers several clear advantages, especially for users who want a balance between flexibility and performance.

The native Block Editor provides a clean, lightweight interface that’s easy to use for both beginners and experienced users, with a modular approach that allows content to be built block by block. It loads fewer scripts and resources than most plugin-based builders, which helps pages render faster and improves overall site performance.

Gutenberg’s block system integrates seamlessly with WordPress core and most themes, ensuring better long-term compatibility and reducing reliance on third-party plugins. For many users, this makes the Blocks editor a reliable, efficient, and future-proof choice for building content-rich pages.

Using WordPress Blocks together with a page element plugin like Stackable or Kadence Blocks gives you much of the design flexibility of a page builder without the heavy performance cost. You can add advanced layouts, styled sections, and interactive elements while keeping the site lightweight and fast, since the core editor handles most rendering. This approach combines usability and creative control with better performance and long-term compatibility, making it a smart alternative to full plugin-based page builders.

The first few minutes of using the blocks editor are the trickiest. Hopefully this will help with that. Before I get started with using the block editor, I’m going to install Kadence Blocks to give me a greater range of page elements:

Then I’m going to make a new page:

Now I’m in the Blocks editor, and all I’ve got is an unappealing page of white:

Where it says “Add title” I’m just going to click on this to add a title.

Where it says “type / to choose a block” you to just that. Click on this text, press / and a whole world of magic opens up to you… look! There’s… BLOCKS!!

OK, so “world of magic” was maybe a bit of an exaggeration, but as you can see, you can add elements to the page.

The blue elements are the ones added by Kadence blocks, the black ones are the built in WordPress default page elements. If you install stackable you’ll see pink elements from stackable here to …. but this doesn’t look like that many, right?

If you know the type of element you want to add, you can start typing after the / and the drop down list will adjust accordingly:

Another way you can select blocks to insert, is by clicking the + in the top left hand corner:

And then you get a whole array of blocks to choose from.

For now, I’m going to add a “row layout”:

Then select a background image:

Once, I’ve selected a background image, I’ll then click on it, click the three dots, then click “add after”:

The I’m going to add another row layout:

This time with 2 columns:

Then I’m going to put an image in one, by clicking the +, then typing image, then selecting the image element:

And then I’m going to add to the second column in the same way, this time, adding a heading:

Then I just type my heading:

Then I press return, and type some paragraph text, press return again and type some more:

OK, sure, this is a bit quick and dirty, but as you can see, I’m slowly building up page content, just as I’d do if I was using a plugin based page builder.

The main difference is that instead of dragging and dropping an element on to a page, I’m clicking, pressing / then selecting an element then clicking on the element to do something with it.

The end result is the same, it’s just how you get to it is a bit more keyboard, rather than mouse orientated.

The net result is going to be roughly the same, because web pages ARE ROUGHLY THE SAME!

OK, sure, you can have rounded corners, negative top margins to make things overlap, borders and so on, but this isn’t dictated by the builder, it’s dictated by what you want. How you deploy what you want varies, but in the end, you still get what you want.

One last thing… see the step like icon toward the top left?:

This opens the “document overview”:

The document overview panel on the left hand side can be used to drag and drop rows and page elements around. Elementor has an equivalent called the navigator. Both of these can be used to move page content about on the page by dragging and dropping.

There, that wasn’t so bad now, was it? You can take your wellies off now if you like.

What is the WordPress Block Editor?

The WordPress Block Editor, also called Gutenberg, is the native page builder for WordPress. It allows users to create content using blocks for text, images, media, and layouts, giving a visual and modular approach to building pages without requiring coding knowledge.

How has WordPress page editing evolved over time?

WordPress started with the Classic Editor in 2003, which required HTML or CSS for advanced layouts. In the 2010s, TinyMCE and shortcodes added more formatting options, but the editor was still limited. In 2018, WordPress 5.0 introduced the Gutenberg Block Editor, enabling block-based page creation. From 2021 onwards, Full Site Editing (FSE) allows users with compatible themes to customize site templates, headers, and footers using blocks.

Why do people use plugin-based page builders like Elementor, WPBakery, and Beaver Builder?

Plugin-based page builders are popular because they offer drag-and-drop interfaces, pre-built templates, advanced design features, and greater creative freedom. They make creating visually complex pages faster and easier than using the native Blocks editor, which can feel plain out of the box.

What are the drawbacks of using plugin-based page builders?

These builders often load large amounts of JavaScript and CSS, some of which can be render-blocking, slowing down page load times. They also add extra server-side processing, which can impact Core Web Vitals, SEO, and overall user experience if not carefully optimized.

Can I extend the WordPress Block Editor with plugins?

Yes. Gutenberg block plugins such as Stackable, Kadence Blocks, and Ultimate Addons for Gutenberg add more block types, templates, and advanced features. They enhance the visual capabilities of the editor without the heavy performance cost of a full plugin-based page builder.

What are the advantages of using WordPress Blocks instead of a plugin-based page builder?

WordPress Blocks are lightweight, load fewer scripts, and integrate seamlessly with WordPress core and most themes. Using blocks with a block plugin can provide flexibility and creative control while maintaining faster page load times and better long-term compatibility.

How do you use the WordPress Block Editor effectively?

To use the Blocks editor, click “Add title” to start your page, then type / to select a block, or click the + icon to choose from available blocks. Plugins like Kadence or Stackable add additional styled blocks. You can add rows, columns, images, headings, and text to build complex layouts, and use the document overview panel to drag and rearrange content.