The WordPress builder landscape is ever-evolving, and a new contender, EtchWP, is stepping onto the scene, promising a fresh approach for developers and creators. In this first look, we’re diving into this nascent builder, currently in its very early stages of development, to explore its interface and build a modern Hero Section from scratch. If you’re curious about how EtchWP aims to carve its niche against established tools like Oxygen, Bricks, and Elementor, read on for our initial impressions.
🚀 What is EtchWP? The Vision Behind the New Builder
EtchWP positions itself as a brand new WordPress page builder focused squarely on performance, clean code, and modern development workflows. Unlike plugin-based builders such as Oxygen, EtchWP is a Theme, similar in approach to Bricks. This suggests a potentially deeper integration with WordPress’s core structure from the get-go.
EtchWP It’s a plugin finally, on video I’ve mentioned that is a theme but because was a sandbox and was hidden and finally I discovered that it’s a Plugin, not a theme. But etchwp has his own theme like blank theme.
It’s crucial to set expectations: EtchWP is very much a “work in progress.” As the review highlights, the project is merely “six months of development… so it’s really, I don’t know how to call it, alpha, before alpha.” This means many advanced functionalities are yet to be implemented, but the foundation and philosophy are already taking shape, targeting users who crave full control without the bloat.
✨ First Impressions: Navigating the EtchWP Interface
One of the immediate standouts is the editor’s speed. Initial tests reveal it’s “really, really faster… It’s like Bricks velocity. Very good.” This responsiveness is a welcome sign for any builder.
The interface, while still evolving, presents a clean and structured layout:
- Central Canvas: The main design and visualization area.
- Structure Panel (Right): Displays the hierarchy of elements. A “really nice” feature noted is its clear display of child elements.
- Elements Panel (Bottom): Provides access to available building blocks. Currently, these include essentials like Section, Container (added by default within a Section, similar to Bricks), Flex Div, Div, Heading, Text, Link, and Image. More advanced placeholders like Query Loop, If Condition, and Component (which was tested and functional) are also present.
- CSS, HTML, and Loop Panels: Dedicated areas for more technical management.
- Viewport Sizer (Bottom Left): Allows a preview at different screen sizes, though full responsive controls are “coming soon.”
- Key Controls: Buttons for saving, returning to the WordPress block editor (“Back to editor”), and viewing the front end are available. A “Settings” button exists but was not yet functional in the reviewed version.
🛠️ Building a Hero Section: A Step-by-Step Glimpse
The test drive involved creating a Hero Section, a common starting point for many web pages. This involved:
- Adding Basic Elements: Utilizing
Section,Container,Flex Div(which defaults todisplay: flexandwidth: 100%),Heading,Text, andLink(for a button). - Content Editing: Text content can be edited directly on the canvas or via element property panels.
- Element Management: Elements can be renamed with a double-click, and drag-and-drop functionality “works well.”
- Keyboard Shortcuts: Notably, common shortcuts like
Ctrl+Zwere functional, which can sometimes be a pain point in other builders.
🔥 Standout Features Even in Early Alpha
Despite its youth, EtchWP showcases some innovative ideas:
Autob: Streamlined BEM-Style Class Generation
A particularly highlighted feature is “autob.” This intelligent function automatically creates Block Element Modifier (BEM) style classes based on the structure and names of child elements within a parent. For example, for a ‘hero’ section, it might generate hero__container or hero__heading. As the review explains, “automatically this create BEM class on all your structure child of this hero.” This is compared to premium add-ons available for builders like Bricks, suggesting significant workflow efficiency for CSS organization.
Seamless Automatic CSS (ACCS) Integration
EtchWP is built with Automatic CSS in mind. If ACCS is active, its classes and variables are recognized and applied seamlessly.
Bidirectional CSS Panel
There’s an integrated CSS panel where style changes made visually on the canvas are reflected, and vice-versa. This tight coupling between visual controls and direct CSS manipulation is a strong point.
Manual Class Application
When adding classes manually (e.g., .button-primary), EtchWP requires correct CSS notation: a preceding dot . for classes or a hash # for IDs. This is noted as being “not like Oxygen or Oxygen 6 that we put the name only… like Bricks we need to put the point if it’s a ID the hash.”
Innovative WordPress Block Editor Integration
Perhaps one of the most “really nice” features is EtchWP’s ability to generate corresponding elements in the WordPress block editor when a user navigates back from the EtchWP interface. This means end-users or clients could potentially modify content like headlines and descriptions using the familiar block editor, without needing to dive into EtchWP itself, while the visual design remains intact. (A minor spacing bug was noted with this feature during the review).
⏳ Current Limitations and “Coming Soon”
Given its alpha status, several features are understandably absent or awaiting implementation:
- Styling Options: Currently, there’s no color picker, requiring manual input of color values. Options like
object-fit: coverfor images are also not yet available. - Responsive Controls: Full responsive design capabilities (media queries) are “coming soon.” While viewport previews exist, granular control isn’t there yet.
- Advanced Elements: More complex elements like Tabs, Sliders, and Accordions (“advanced stuff”) are not yet part of the builder.
- SVG Uploads: Support for uploading SVGs is anticipated.
- CPT/Custom Fields: While the reviewed version seemed to have ACF Pro installed by default, dedicated UI for creating Custom Post Types and fields within EtchWP itself is a likely future addition.
🤔 EtchWP vs. The Titans? Early Thoughts
Direct comparisons to mature builders like Oxygen, Bricks, or Elementor are premature. However, EtchWP’s philosophy seems to align with a desire for performance (like Bricks) and a structured, class-first approach (potentially more appealing to Oxygen users or those who prefer more direct CSS control than typically offered by Elementor’s widget-centric styling). Its “autob” BEM feature and deep ACCS integration could be significant differentiators.
🌱 The Potential of EtchWP: One to Watch
EtchWP, even in its infancy, demonstrates promising potential. The swift editor, focus on organized CSS (BEM “autob,” ACCS), and the clever WordPress block editor integration for client content updates are all compelling.
However, it’s undeniably early days. The lack of comprehensive responsive controls and basic styling aides like a color picker are significant limitations for now. This is a project for early adopters and those keen on shaping the future of WordPress development to keep a close eye on, especially if you’re a fan of Automatic CSS or looking for a builder with a strong opinion on clean code and performance.
📌 What are your first impressions of EtchWP? Would you give it a try? Share your thoughts in the comments below!
📌 For more first looks, tutorials, and comparisons of the latest tools in the WordPress ecosystem, consider subscribing to our Newsletter at OutWP.com and other channels dedicated to WordPress builder content.