WordPress Block Editor

Transition to the WordPress Block Editor

Spiderweb has transitioned to the WordPress Block Editor, commonly known as Gutenberg, to enhance the web development experience. This editor allows for creating and customising content through a modular system of blocks, offering greater flexibility and control over the layout and design. With this change, we have discontinued support for the Kadence theme and Elementor page builder, streamlining our tools to focus on the powerful, native WordPress editing experience.

The Elementor page builder has provided an excellent and pixel-perfect editing experience in the past, but we’ve encountered update issues, particularly when using the commercial Elementor Pro plugin for additional features. These problems can lead to compatibility and security issues over time.

In contrast, the built-in WordPress Block Editor (Gutenberg) is updated alongside core WordPress, ensuring long-term stability and security for your website. This means your site will remain up-to-date and less vulnerable to attacks, even after several years. Additionally, the default Block Editor is highly efficient, offering fast page loading times and a seamless user experience.

While the Elementor page builder offers a precise editing experience, we’ve encountered update issues, especially with the commercial Elementor Pro plugin. To ensure long-term stability, we’ve switched to the built-in WordPress Block Editor, which is updated along with core WordPress updates, providing ongoing security and compatibility.

The default Block Editor can be more challenging to use compared to other page builders and themes, requiring patience and persistence. However, it delivers fast, efficient websites with excellent Google PageSpeed and SEO scores, making it ideal for simpler landing-page and brochure sites. For more complex projects, such as ecommerce sites, dedicated themes or legacy page builders may still be necessary.

Notably, the Block Editor has been improving with each WordPress update, becoming easier to use with time, enhancing the overall user experience.

The Power of the WordPress Block Editor

The WordPress Block Editor introduces a modular approach to managing your entire website. You can easily edit individual content blocks on posts or pages, adjust widgets, and even design your headers, footers, and navigation with full site editing support.

In the Block Editor, every piece of content—whether it’s a paragraph, image gallery, or headline—is treated as its own block. Much like physical blocks, these can be added, arranged, and rearranged, allowing you to create media-rich content and dynamic site layouts with ease. This approach eliminates the need for workarounds like shortcodes or custom HTML and PHP, offering a more streamlined and visually intuitive editing experience.

Using the WordPress Block Editor

Here’s a step-by-step guide to get you started with the WordPress Block Editor:

1. Accessing the Block Editor

• Create or Edit a Post/Page: In your WordPress dashboard, go to Posts or Pages and select either “Add New” or click on an existing post/page to edit.

2. Understanding the Interface

• Title Area: Enter your post or page title here.
• Content Area: This is where you start adding blocks.
• Sidebar Settings: Adjust block-specific settings or document settings like visibility, categories, and tags.

3. Adding Blocks

• Click the Plus (+) Button: To add a new block.
• Search for Blocks: Find specific blocks like Paragraph, Image, or Gallery.
• Add the Block: Click on the block to add it to your content area.

4. Customising Blocks

• Block Toolbar: Customize the block using the toolbar that appears when you click on it.
• Block Settings: Further customize with options in the right sidebar.

5. Arranging Blocks

• Move Blocks: Rearrange using the up/down arrows or drag-and-drop.
• Group Blocks: Manage multiple blocks together by grouping them.

6. Using Patterns and Reusable Blocks

• Block Patterns: Pre-designed layouts available via the + button under the “Patterns” tab.
• Reusable Blocks: Save and reuse block configurations across posts/pages.

7. Full Site Editing

• Edit Site-wide Elements: Modify headers, footers, and more using the Block Editor under Appearance > Editor.

8. Publishing

• Preview Your Content: Check your content before going live.
• Publish or Update: Once satisfied, click Publish or Update.

9. Additional Tips

• Undo/Redo: Use these buttons at the top to revert changes.
• Keyboard Shortcuts: Speed up your workflow with shortcuts like / to add blocks or Ctrl + Z to undo.

10. Learning More

• Explore Tutorials: Visit the official Learn WordPress website for free courses on the Block Editor, suitable for various expertise levels.