DOCSEARCHbyAlgolia
Submit Docs

Etch

website·Indexed 30 days ago

https://etchdocs.pages.dev

A visual development environment for professional web developers and agencies that writes everything to core Gutenberg blocks. Etch features element-based JS and CSS, an Auto-BEM selector system, a dynamic data engine for conditional logic, and a component engine for looping posts, taxonomies, and REST API data, all while producing clean, semantic HTML code.

Tokens
2.4K
Snippets
3
Records
25
Agent score
75%

What's inside Etch

  1. Overview of the Gutenberg Engine

    The Gutenberg Engine provides a system for global structure and styling control, allowing developers to create and edit components directly on a canvas. Key capabilities include:

    • Single-click component creation.
    • Inline component editing without 'magic areas'.
    • Rapid creation and mapping of props.
    • Variant creation using conditional logic.
    • Components are saved as synced patterns and render on the front-end without adding extra DOM elements.

  2. Overview of Etch core features

    Etch provides a set of advanced capabilities for site building and content management, including:

    • Gutenberg Integration: Full two-way sync with Gutenberg; content is authored as native Gutenberg blocks for portability.
    • Global Control: Centralized management of site structure and styling for consistency.
    • Dynamic Data: Loop engines for posts, taxonomies, users, and other data sources to pull dynamic content.
    • Conditional Logic: Support for compound and nested logic to conditionally show or hide elements.
    • Modular Assets: Element-based CSS and JS where styles and scripts are attached directly to the elements they affect.
    • Code Quality: Generates clean, semantic HTML and CSS without unnecessary wrappers.
    • Customizable UI: A modular interface allowing users to move panels and resize sidebars.

  3. Overview of Etch visual development features

    Etch is a visual development environment for WordPress designed for developers. It provides a native WordPress experience with a focus on clean, semantic code output and full control over the development process. Key capabilities include:

    • Two-way synchronization and data liberation with Gutenberg.
    • Global control over structure and styling.
    • Dynamic data engines and powerful loop functionality.
    • Implementation of true conditional logic.
    • Element-based CSS and JavaScript management.

  4. Overview of Etch visual development for WordPress

    Etch is a visual development environment that allows developers to build WordPress sites with full control and clean code. Unlike traditional page builders, Etch authors all designs directly to core/native Gutenberg blocks in the WordPress block editor. It features two-way synchronization, meaning edits made within the native WordPress block editor automatically sync back to the Etch environment, ensuring data is not locked into a proprietary format and providing a native editing experience for end clients.

  5. Customize the EtchDocs modular interface layout

    EtchDocs features a modular interface where nearly every panel can be moved into different drop zones. Sidebars are flexible, supporting multiple panels and various sizes. Layout preferences are persisted to ensure a consistent user experience across sessions.

  6. Understand Etch element-based CSS architecture

    Etch utilizes an element-based CSS approach where styling is stored directly with the element itself. This architecture ensures that the system only outputs the CSS required for elements that actually exist on the current page, effectively automating the delivery of critical CSS and keeping styles organized.

  7. Control element visibility and attributes with the Dynamic Data Engine

    The Dynamic Data Engine allows you to conditionally show or hide elements, their children, or modify attribute values and inline styles. This is achieved by using Condition Elements and logic strings to define the rendering rules.

  8. Synchronize visual styling inputs and CSS in Etch

    Etch provides a bidirectional synchronization between visual styling inputs and CSS. Changes made using the visual styling interface are automatically written to the editable CSS, and any manual changes made directly in the CSS are synchronized back to the visual inputs.

  9. Export Etch builds to native WordPress Gutenberg blocks

    Etch utilizes a 'Build to Core' approach, meaning everything created within the tool is written as core Gutenberg blocks. This ensures data liberation and allows clients to perform edits using the native WordPress editing interface.

  10. Retrieve dynamic data using the Etch Loop Engine

    The Etch Loop Engine allows developers to dynamically pull data from the WordPress database, the block editor, and custom fields to build dynamic website elements through looping or templating.

  11. Manage content with Custom Post Types and Custom Fields in Etch

    Etch allows developers to create Custom Post Types (CPTs) and Custom Fields on-the-fly without leaving the page builder. These entities can be instantly looped or templated to manage complex content structures efficiently.

  12. Manage element attributes and styles in Etch

    Etch provides a visual development environment that allows developers to simultaneously add classes, attributes, and attribute values in a single action. Once these are defined, element-level CSS can be applied to the element, including styles targeting specific attributes.