### Implement pagination facet example Source: https://docs.etchwp.com/facets/third-party-facets/wp-grid-builder A complete example showing the loop container and the associated pagination facet shortcode. ```html
{#loop blogPosts as item}
{#if item.featuredImage} {item.featuredImage.alt} {/if}

{item.title}

{item.excerpt}

{/loop}
[wpgb_facet id="your-facet-id" grid="wpgb-content-1"]
``` -------------------------------- ### Component Management Example Source: https://docs.etchwp.com/public-api/components Demonstrates how to list, get, create, update, and delete components using the EtchComponentsApi. Note that create, update, and delete persist immediately. ```typescript // List and inspect const all = etch.components.list(); const card = all.find((c) => c.key === "Card"); const full = etch.components.getJson(card!.id); console.log(full.blocks); // Create and configure const id = await etch.components.createAsync("Callout"); await etch.components.updateAsync(id, { description: "A highlighted callout box", properties: [ { name: "Heading", key: "heading", type: { primitive: "string" }, default: "Note" }, ], }); // Delete await etch.components.deleteAsync(id); ``` -------------------------------- ### Usage Examples Source: https://docs.etchwp.com/public-api/ai Illustrative examples of how to use the EtchAiApi methods to manage AI presence during different stages of an agent's operation. ```APIDOC ## Usage Examples ### Announcing Presence and Performing Actions ```javascript // Announce presence as work begins etch.ai.setState("thinking"); etch.blocks.setText(id, "Draft"); etch.ai.setState("working"); // Hand back to the human etch.ai.setState("waiting"); // Done — remove the overlay etch.ai.hide(); // or etch.ai.setState("idle") ``` ### Ensuring Presence is Cleared with `try...finally` Presence should always be cleared to avoid leaving the overlay stuck on. Wrap agent operations in a `try...finally` block. ```javascript etch.ai.setState("working"); try { // ... drive the builder ... } finally { etch.ai.hide(); } ``` ``` -------------------------------- ### Concrete Example: Etch Loop with Pagination Facet Source: https://docs.etchwp.com/facets/third-party-facets/facetwp This example demonstrates setting up an Etch loop with a FacetWP pagination facet. Ensure the `facetwp` argument is set to `true` in query args and the `facetwp-template` class is applied correctly. ```php $query_args = [ 'post_type' => 'post', 'posts_per_page' => 10, 'order' => 'DESC', 'facetwp' => 'true', ]; ``` ```html
{#loop blogPosts as item}
{#if item.featuredImage} {item.featuredImage.alt} {/if}

{item.title}

{item.excerpt}

{/loop}
[facetwp facet="pagination"]
``` -------------------------------- ### Start Etch Connector Server Source: https://docs.etchwp.com/etch-connector/introduction Run this command in your AI agent's chat to start the Etch Connector server. This allows the AI agent to connect to your Etch builder tab. ```bash npx @digital-gravy/etch-connector serve ``` -------------------------------- ### Example flags.user.json Configuration Source: https://docs.etchwp.com/feature-flags This is an example of how to configure feature flags in the `flags.user.json` file. This file allows you to override default flag values on a per-flag basis. Ensure the file is valid JSON. ```json { "FLAG_NAME": "on", "FLAG_NAME_2": "off" } ``` -------------------------------- ### Comparison Syntax Examples Source: https://docs.etchwp.com/conditional-logic/basic-conditions Demonstrates the difference between string comparison and numerical evaluation. ```Etch {#if props.rating === "2"} ``` ```Etch {#if props.rating >= 2} ``` ```Etch {#if props.rating >= "2"} ``` -------------------------------- ### Stylesheet Management Example Source: https://docs.etchwp.com/public-api/stylesheets Demonstrates the lifecycle of a stylesheet: creation, appending CSS, updating, reading, and deletion. ```javascript // Create a stylesheet const id = await etch.stylesheets.createAsync({ name: "Utilities", css: ".u-hidden { display: none; }", }); // Append to it (no save needed) await etch.stylesheets.appendAsync(id, ".u-flex { display: flex; }"); // Rename / replace contents await etch.stylesheets.updateAsync(id, { name: "Helpers" }); // Read back const sheet = etch.stylesheets.get(id); console.log(sheet.css); // Delete await etch.stylesheets.deleteAsync(id); ``` -------------------------------- ### Custom Media Management Example Source: https://docs.etchwp.com/public-api/stylesheets Shows how to add a custom media query definition and then list all defined custom media queries. ```javascript await etch.stylesheets.addCustomMediaAsync("--md", "(min-width: 768px)"); etch.stylesheets.listCustomMedia(); // { "--md": "(min-width: 768px)", ... } ``` -------------------------------- ### Basic Nav Component Setup Source: https://docs.etchwp.com/components-native/basic-nav Instructions on how to import and set up the Navigation and Burger components within your site's Header. ```APIDOC ## Basic Nav Component Setup ### Description This section outlines the recommended approach to integrate the Basic Nav component into your website by importing prebuilt Navigation and Burger components. ### Steps 1. Ensure you have a Header component for your site. 2. Add a `{#slot}` (e.g., `{#slot right}`) within your Header component to place the Navigation and Burger components. 3. Copy the Navigation Component JSON using the provided button. 4. In Etch, paste the copied JSON into your Header slot using `cmd` + `v` (Mac) or `ctrl` + `v` (Windows). 5. Repeat steps 3 and 4 for the Burger Component. 6. Arrange the components within your Header slot (e.g., Navigation in the right slot, Burger next to it for mobile). 7. Verify desktop dropdowns/flyouts and mobile toggle behavior. ``` -------------------------------- ### Implement Recommended Content Structure Source: https://docs.etchwp.com/elements/section Example of a standard section implementation containing a heading, paragraph, and link within the container. ```html

About Our Services

Discover the wide range of solutions we offer to help your business grow and succeed. Our team is dedicated to providing top-notch support and expertise for every project.

Learn more about our services
``` -------------------------------- ### Options Page Syntax Examples Source: https://docs.etchwp.com/integrations/custom-fields/options-pages Use the `options` key with the provider namespace for ACF, Meta Box, or Jet Engine. No post context is required. ```html {options.acf.field_name} ``` ```html {options.metabox.option_page_name.field_name} ``` ```html {options.jetengine.option_page_name.field_name} ``` -------------------------------- ### Example: Displaying Authors and Their Books with ACF Source: https://docs.etchwp.com/integrations/custom-fields/relationship-fields This example demonstrates looping through authors and their associated books using ACF relationship fields. It assumes an 'authors' WP Query and an 'author_books' relationship field. ```html

Authors & Their Books

``` -------------------------------- ### Apply Basic Section Padding Source: https://docs.etchwp.com/how-to/basics/how-to-set-global-section-styles Example of setting fixed pixel and rem values for section padding. ```css :where(section:not(section section)) { padding-inline: 16px; padding-block: 4rem; } ``` -------------------------------- ### EtchUiApi Usage Examples Source: https://docs.etchwp.com/public-api/ui-and-history Demonstrates how to use `EtchUiApi` methods to set color schemes, toggle interface visibility for a distraction-free mode, and exit the builder. ```javascript // Force dark mode etch.ui.setColorScheme("dark"); // Distraction-free: hide all chrome if (!etch.ui.isInterfaceHidden()) etch.ui.toggleInterface(); // Leave the builder etch.ui.exitToWordPress(); ``` -------------------------------- ### Install Etch Public API Package Source: https://docs.etchwp.com/public-api Install the Etch public API package using npm. This package provides types and a thin accessor for the Etch builder's scripting API. ```bash npm install @digital-gravy/etch-public-api ``` -------------------------------- ### Example Usage of find() Source: https://docs.etchwp.com/public-api/blocks Demonstrates how to use the `find()` method with different predicates to locate blocks based on their type, class, or attributes. ```APIDOC ## Example Usage of find() ### Description Demonstrates how to use the `find()` method with different predicates to locate blocks based on their type, class, or attributes. ### Code Examples ```javascript // Find all text blocks const textIds = etch.blocks.find({ type: "etch/text" }); // Find all blocks with the CSS class 'btn' const buttons = etch.blocks.find({ class: "btn" }); // Find all blocks that have the 'href' attribute set (e.g., links) const linked = etch.blocks.find({ attribute: "href" }); ``` ``` -------------------------------- ### Render search result titles and links Source: https://docs.etchwp.com/templates/search-results-template A minimal example showing how to output linked titles for each search result item. ```Etch {#loop mainQuery as item}

{item.title}

{/loop} ``` -------------------------------- ### Implement a Flexible Card Component Source: https://docs.etchwp.com/components/props/prop-class Example of a card component mapping a class prop to its wrapper element. ```html

{props.title}

{props.description}

``` -------------------------------- ### Navigation Data Structure Source: https://docs.etchwp.com/components-native/basic-nav Example JSON structure for configuring navigation links and their hierarchical relationships. ```APIDOC ## Navigation Data Structure ### Description This is a sample JSON structure used to configure the navigation links. Each object represents a navigation item, which can contain nested 'children' for dropdowns and flyouts. ### JSON Example ```json [ { "label": "Home", "url": "/" }, { "label": "Item 2", "children": [ { "label": "Item 2.1", "url": "/dropdown1" }, { "label": "Item 2.2", "url": "/dropdown2", "children": [ { "label": "Item 2.2.1", "url": "/dropdown1" }, { "label": "Item 2.2.2", "url": "/dropdown2" }, { "label": "Item 2.2.3", "url": "/dropdown3" } ] }, { "label": "Item 2.3", "url": "/dropdown3" } ] }, { "label": "Item 3", "url": "/page", "children": [ { "label": "Item 3.1", "url": "/dropdown1" }, { "label": "Item 3.2", "url": "/dropdown2" }, { "label": "Item 3.3", "url": "/dropdown3" }, { "label": "Item 3.4", "url": "/dropdown4" } ] }, { "label": "Item 4", "url": "/about" }, { "label": "Item 5", "url": "/contact-us" } ] ``` ### Notes - Each `label`/`url` pair defines a navigation link. - The `children` object defines nested navigation items, which will appear as dropdowns or flyouts. - Use relative URL references for navigation links. ``` -------------------------------- ### Serve Etch Connector Source: https://docs.etchwp.com/etch-connector/usage Run this command in your AI agent's chat to establish a connection with the Etch builder. No separate terminal or global installation is required. ```bash npx @digital-gravy/etch-connector serve ``` -------------------------------- ### Create a complete search archive layout Source: https://docs.etchwp.com/templates/search-results-template A full template example incorporating the search query parameter and a structured loop for displaying result cards. ```Etch

Search results for: {url.parameter.s}

{#loop mainQuery as item} {/loop}
``` -------------------------------- ### Basic Block Manipulation Example Source: https://docs.etchwp.com/public-api/blocks Demonstrates finding a text block, setting its text, adding a CSS class, setting a data attribute, and saving changes. ```javascript const [id] = etch.blocks.find({ type: "etch/text" }); etch.blocks.setText(id, "Hello world"); etch.blocks.addClass(id, "lead"); etch.blocks.setAttribute(id, "data-track", "hero"); await etch.saveAsync(); ``` -------------------------------- ### Serve Command Source: https://docs.etchwp.com/etch-connector/cli-reference Starts the etch-connector in serve mode, making it available for Etch tabs to connect. It allows configuration of WebSocket and control ports, as well as the host address. ```bash etch-connector serve [--ws-port 7331] [--control-port 7332] [--ws-host 127.0.0.1] ``` -------------------------------- ### Conditional Logic and CSS Backgrounds Source: https://docs.etchwp.com/integrations/custom-fields/image-fields Examples for handling fallback images and applying images as CSS background properties. ```html {#if this.acf.custom_logo}{this.acf.custom_logo.url}{#else}{this.site.logo}{/if} ``` ```html
``` -------------------------------- ### Hero Section Data and Template Source: https://docs.etchwp.com/components/props/prop-group Example of a hero section data structure and its corresponding template access. ```json { "title": "Welcome to our site", "description": "We build amazing things.", "image": "/hero.jpg", "buttonText": "Get Started" } ``` ```html

{props.hero.title}

{props.hero.description}

``` -------------------------------- ### Preview Data Structure Source: https://docs.etchwp.com/components/props/prop-group Example of the JSON structure generated by a Group Prop with a single nested Text Prop. ```json { "title": "Welcome Post" } ``` -------------------------------- ### etch-connector serve Source: https://docs.etchwp.com/etch-connector/cli-reference Starts the connector and leaves it running, allowing Etch tabs to connect to it. It accepts options for WebSocket port, control port, and host address. ```APIDOC ## etch-connector serve ### Description Starts the connector and leaves it running. This is the program your tab connects to. ### Method CLI Command ### Endpoint etch-connector serve [--ws-port 7331] [--control-port 7332] [--ws-host 127.0.0.1] ### Parameters #### Command Options - **--ws-port** (number) - Optional - The port your Etch tab connects on. Defaults to `7331`. - **--control-port** (number) - Optional - The port the other commands use to talk to the running connector. Defaults to `7332`. - **--ws-host** (string) - Optional - The address to listen on. Defaults to `127.0.0.1`. ``` -------------------------------- ### Define CSS custom properties Source: https://docs.etchwp.com/loops/loop-arguments An example of CSS custom properties to illustrate the concept of placeholder tokens. ```css :root { --primary: red; } .foo { color: var(--primary); } ``` -------------------------------- ### Example Usage: Editing a Component Source: https://docs.etchwp.com/public-api/blocks Demonstrates a typical workflow for entering component edit mode, modifying a block's text, saving the changes, and exiting edit mode. ```APIDOC ## Workflow Example ### Description This example shows how to find a component, enter its edit mode, update a text element within it, save the component, save the page, and then exit edit mode. ### Code ```javascript const [compId] = etch.blocks.find({ type: "etch/component" }); etch.blocks.enterComponentEditMode(compId); // Inspect or mutate the component's children const tree = etch.blocks.getTree(); etch.blocks.setText(tree[0].children[0].id, "Updated label"); await etch.blocks.saveComponentEditModeAsync(); // persist the component definition await etch.saveAsync(); // persist the page etch.blocks.exitComponentEditMode(); ``` ``` -------------------------------- ### Example Usage of getJson() Source: https://docs.etchwp.com/public-api/blocks Shows how to retrieve a block's JSON data using `getJson()` and then narrow down the block type to access specific fields. ```APIDOC ## Example Usage of getJson() ### Description Shows how to retrieve a block's JSON data using `getJson()` and then narrow down the block type to access specific fields. ### Code Examples ```javascript const block = etch.blocks.getJson(id); if (block.type === "etch/text") { console.log(block.text); // Access text-specific field } else if (block.type === "etch/element") { console.log(block.tag, block.attributes, block.styles); // Access element-specific fields } ``` ``` -------------------------------- ### Acquire Etch API Source: https://docs.etchwp.com/public-api Acquires the Etch API instance from the global `window.etch` object. This is the primary way to get access to the Etch functionalities. ```APIDOC ## getEtch ### Description Acquire the API from `window.etch`. ### Method function ### Parameters None ### Response - **Etch**: The Etch API object if available, otherwise potentially null or undefined depending on the environment. ### Request Example ```javascript const etch = getEtch(); ``` ### Response Example ```javascript // Assuming etch is available // etch will be an object conforming to the Etch interface ``` ``` -------------------------------- ### Meta Box Repeater Field Usage Source: https://docs.etchwp.com/integrations/custom-fields/repeater-fields Examples for looping through Meta Box cloneable fields and displaying sub-field data. ```html {#loop this.metabox.repeater_field_name as item}
{item.sub_field_name} {item.sub_field_name2}
{/loop} ``` ```html ``` -------------------------------- ### Setting AI Presence States Source: https://docs.etchwp.com/public-api/ai Demonstrates how to use `etch.ai.setState()` and `etch.ai.hide()` to manage the AI agent's presence overlay during a session, from starting work to completion. ```javascript // Announce presence as work begins etch.ai.setState("thinking"); etch.blocks.setText(id, "Draft"); etch.ai.setState("working"); // Hand back to the human etch.ai.setState("waiting"); // Done — remove the overlay etch.ai.hide(); // or etch.ai.setState("idle") ``` -------------------------------- ### EtchHistoryApi Usage Example Source: https://docs.etchwp.com/public-api/ui-and-history Shows how to use `EtchHistoryApi` to check if an undo operation is possible and then perform an undo, reverting a previous block text change. ```javascript etch.blocks.setText(id, "Draft"); if (etch.history.canUndo()) etch.history.undo(); // reverts the setText above ``` -------------------------------- ### Extract Array Portion with .slice() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers Utilize `.slice()` to get a sub-array. Specify start and end indices; the end index is exclusive. Negative indices can be used for counting from the end. ```javascript "value": ["ant", "bison", "camel", "duck", "elephant"] ``` ```javascript {item.value.slice(2)} ``` ```javascript {item.value.slice(2, 4)} ``` ```javascript {item.value.slice(-2)} ``` -------------------------------- ### Get remainder with integers using .mod() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/arithmetic-modifiers Demonstrates getting the remainder of an integer division using the .mod() modifier. ```dynamic data {item.value.mod(3)} ``` -------------------------------- ### Get remainder with floating-point numbers using .mod() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/arithmetic-modifiers Demonstrates getting the remainder of a floating-point division using the .mod() modifier. ```dynamic data {item.value.mod(2)} ``` -------------------------------- ### Read, Set, and Clear Custom Field Values Source: https://docs.etchwp.com/public-api/fields Example demonstrating how to read a single value, set single and multiple values, read all values for a post, and clear a specific value. ```typescript // Read one value const { field } = await etch.fields.getValueAsync(42, "location"); console.log(field.value); // Set one, then several await etch.fields.setValueAsync(42, "location", "Berlin"); await etch.fields.setValuesAsync(42, { capacity: 500, sold_out: false }); // Read everything for the post const all = await etch.fields.getValuesAsync(42); for (const [groupId, group] of Object.entries(all.groups)) { console.log(groupId, group.label, group.fields); } // Clear a value await etch.fields.deleteValueAsync(42, "location"); ``` -------------------------------- ### Custom JSON Data Source Example Source: https://docs.etchwp.com/loops/basic-loops This is an example of a custom JSON data structure that can be used as a data source for loops in Etch UI. It defines a list of objects, each with a 'name' property. ```json [{ "name": "Jane Austen" }, { "name": "Mark Twain" }, { "name": "Virginia Woolf" }] ``` -------------------------------- ### Navigate Builder UI and Open Content Source: https://docs.etchwp.com/public-api/navigation Demonstrates how to navigate between different builder areas using `goTo` and `openPostAsync`. It also shows how to retrieve the current UI location and check the active post ID. ```javascript // Jump to the style manager and back etch.navigation.goTo("style-manager"); console.log(etch.navigation.getCurrentPlace()); // "style-manager" etch.navigation.goTo("builder"); // Open a different page on the canvas const pages = await etch.navigation.listPostsAsync("page"); await etch.navigation.openPostAsync(pages[0].id); // What's open right now? console.log(etch.navigation.getActivePostId()); console.log(etch.navigation.isEditingTemplate()); ``` -------------------------------- ### ACF Image Field Data Structure Example Source: https://docs.etchwp.com/integrations/custom-fields/image-fields An example of the JSON data structure returned by an ACF image field, showing available properties like ID, URL, sizes, and metadata. ```json "acf": { "my_image_field": { "id": 123, "url": "https://example.com/wp-content/uploads/2025/08/image.jpg", "alt": "Image alt text", "title": "Image title", "caption": "Image caption", "description": "Image description", "filename": "image.jpg", "sizes": { "thumbnail": { "url": "https://example.com/wp-content/uploads/2025/08/image-150x150.jpg", "width": 150, "height": 150 }, "medium": { "url": "https://example.com/wp-content/uploads/2025/08/image-300x200.jpg", "width": 300, "height": 200 }, "large": { "url": "https://example.com/wp-content/uploads/2025/08/image-1024x683.jpg", "width": 1024, "height": 683 }, "full": { "url": "https://example.com/wp-content/uploads/2025/08/image.jpg", "width": 1600, "height": 1067 } }, "srcset": "https://example.com/wp-content/uploads/2025/08/image-300x200.jpg 300w, https://example.com/wp-content/uploads/2025/08/image-1024x683.jpg 1024w, https://example.com/wp-content/uploads/2025/08/image.jpg 1600w", "width": 1600, "height": 1067, "filesize": 256000, "mime_type": "image/jpeg" } } ``` -------------------------------- ### Meta Box Image Field Data Structure Example Source: https://docs.etchwp.com/integrations/custom-fields/image-fields An example of the JSON data structure returned by a Meta Box image field, showing available properties like ID, URL, sizes, and metadata. ```json "metabox": { "my_image_field": { "id": 123, "url": "https://example.com/wp-content/uploads/2025/08/image.jpg", "alt": "Image alt text", "title": "Image title", "caption": "Image caption", "description": "Image description", "filename": "image.jpg", "sizes": { "thumbnail": { "url": "https://example.com/wp-content/uploads/2025/08/image-150x150.jpg", "width": 150, "height": 150 }, "medium": { "url": "https://example.com/wp-content/uploads/2025/08/image-300x200.jpg", "width": 300, "height": 200 }, "large": { "url": "https://example.com/wp-content/uploads/2025/08/image-1024x683.jpg", "width": 1024, "height": 683 }, "full": { "url": "https://example.com/wp-content/uploads/2025/08/image.jpg", "width": 1600, "height": 1067 } }, "srcset": "https://example.com/wp-content/uploads/2025/08/image-300x200.jpg 300w, https://example.com/wp-content/uploads/2025/08/image-1024x683.jpg 1024w, https://example.com/wp-content/uploads/2025/08/image.jpg 1600w", "width": 1600, "height": 1067, "filesize": 256000, "mime_type": "image/jpeg" } } ``` -------------------------------- ### Get Array Element with at() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers Returns the element at a specific index from an array. ```twig {user.names.at(1)} ``` -------------------------------- ### Get Length with length() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers Returns the number of elements in an array or characters in a string. ```twig {item.value.length()} ``` -------------------------------- ### Compare Typical and Prop-Based Loops Source: https://docs.etchwp.com/components/props/prop-loop Shows the syntax difference between a hardcoded loop and a dynamic loop prop. ```EtchWP {#loop someLoop as item}{/loop} ``` ```EtchWP {#loop props.yourLoopProp as item}{/loop} ``` -------------------------------- ### Image Element with Attributes Source: https://docs.etchwp.com/elements/image An example of an image tag with defined source and alt text. ```html A beautiful sunset over the mountains ``` -------------------------------- ### Example Usage of Etch Skills API Source: https://docs.etchwp.com/public-api/skills Demonstrates the typical workflow for using the Etch Skills API: listing available skills, retrieving a full skill's content, and fetching a specific reference document. It also shows how the API handles unknown names or references by returning undefined. ```javascript // 1. Discover what's available const skills = etch.skills.list(); // → [{ name: "acss", description: "Automatic.css conventions…", metadata: {…}, references: ["colors.md", "spacing.md"] }, …] // 2. Load a full guide body by name const acss = etch.skills.get("acss"); if (acss) { console.log(acss.content); // the SKILL.md body as Markdown } // 3. Pull an individual reference only when you need it const colors = etch.skills.getReference("acss", "colors.md"); if (colors) { console.log(colors); // Markdown content of that reference } // Unknown names / references return undefined rather than throwing etch.skills.get("does-not-exist"); // → undefined etch.skills.getReference("acss", "missing.md"); // → undefined ``` -------------------------------- ### Slice Array with slice() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers Returns a portion of an array from a start index to an end index. ```twig {user.names.slice(1, 3)} ``` -------------------------------- ### Example of a complex selector Source: https://docs.etchwp.com/interface/selector-pills A complex selector targeting an h1 element nested within a section. ```css {.my-section h1} ``` -------------------------------- ### Displaying WYSIWYG Fields Source: https://docs.etchwp.com/integrations/custom-fields/text-fields Example of rendering an ACF WYSIWYG field, which supports HTML output. ```html
{this.acf.content}
``` -------------------------------- ### Define Select Prop Options Source: https://docs.etchwp.com/components/creating-component-variations List of available options for a theme selection prop. ```text dark light primary ``` -------------------------------- ### Jet Engine Repeater Field Usage Source: https://docs.etchwp.com/integrations/custom-fields/repeater-fields Example for looping through Jet Engine repeater fields. ```html {#loop this.jetengine.repeater_field_name as item}
{item.sub_field_name} {item.sub_field_name2}
{/loop} ``` -------------------------------- ### HTML with Etch UI Loop Syntax Source: https://docs.etchwp.com/loops/basic-loops This HTML demonstrates how to set up a loop in Etch UI by wrapping a list item within a loop structure. This prepares the element to be repeated. ```html ``` -------------------------------- ### Displaying Text Area Fields Source: https://docs.etchwp.com/integrations/custom-fields/text-fields Example of rendering an ACF text area field inside a container. ```html
{this.acf.description}
``` -------------------------------- ### Using Main Query loops in markup Source: https://docs.etchwp.com/loops/main-query Basic syntax for iterating over the main query context in Etch templates. ```Etch {#loop mainQuery as item}

{item.title}

Read more {/loop} ``` ```Etch {#loop mainQuery($count: 3) as item}

{item.title}

{/loop} ``` ```Etch {#loop mainQuery($orderby: "title", $order: "ASC") as item}

{item.title}

{/loop} ``` ```Etch {#loop mainQuery($count: -1) as item}

{item.title}

{/loop} ``` -------------------------------- ### Displaying Simple Text Fields Source: https://docs.etchwp.com/integrations/custom-fields/text-fields Example of rendering ACF text fields within HTML tags. ```html

{this.acf.headline}

{this.acf.subheading}

``` -------------------------------- ### ACF Repeater Field Usage Source: https://docs.etchwp.com/integrations/custom-fields/repeater-fields Examples for looping through ACF repeater fields and displaying sub-field data. ```html {#loop this.acf.repeater_field_name as item}
{item.sub_field_name} {item.sub_field_name2}
{/loop} ``` ```html ``` -------------------------------- ### Burger JavaScript Configuration Source: https://docs.etchwp.com/components-native/basic-nav Configuration options for initializing the Burger component instance. ```APIDOC ## Burger JavaScript Options ### Description Configuration object used when initializing the Burger component. ### Parameters #### Request Body - **button** (HTMLElement) - Required - The burger toggle element where click handling is attached. - **target** (string or HTMLElement) - Optional - The element to show/hide when toggled. - **selfAriaExpanded** (boolean) - Optional - If true, the burger button manages its own aria-expanded attribute. - **targetOptions** (object) - Optional - Configuration for the target element (class, ariaExpanded). - **onToggle** (function) - Optional - Callback: (isOpen: boolean) => void. - **onClose** (function) - Optional - Callback: () => void. ### Request Example { "button": "#burger-btn", "target": "#nav-menu", "selfAriaExpanded": true, "targetOptions": { "ariaExpanded": true } } ``` -------------------------------- ### Define Select Prop with Key-Value Pairs Source: https://docs.etchwp.com/components/props/prop-select Use this format to define dropdown options where the key is the label and the value is the output. Ensure a space around the colon. ```text key : value ``` -------------------------------- ### Displaying Page Content Sections Source: https://docs.etchwp.com/integrations/custom-fields/flexible-content-fields A practical implementation showing how to handle multiple layout types including a nested loop for image galleries. ```html
{#loop this.acf.page_sections as section} {#if section.acf_fc_layout == 'hero_banner'}

{section.title}

{section.subtitle}

{section.cta_text}
{/if} {#if section.acf_fc_layout == 'text_block'}

{section.heading}

{section.content}
{/if} {#if section.acf_fc_layout == 'image_gallery'}

{section.gallery_title}

    {#loop section.images as image}
  • {image.alt}
    • {/loop}
{/if} {/loop}
``` -------------------------------- ### Accessing Plugin-Specific Text Fields Source: https://docs.etchwp.com/integrations/custom-fields/text-fields Use the appropriate namespace based on the custom fields plugin installed. ```html {this.acf.field_name} ``` ```html {this.metabox.field_name} ``` ```html {this.jetengine.field_name} ``` -------------------------------- ### Using Custom Media Tokens Source: https://docs.etchwp.com/responsive-development/container-queries References pre-defined @custom-media tokens for reusable container query conditions. ```css .component { :has(> &) { container-type: inline-size; } @container (--component-wide) { grid-template-columns: 200px 1fr; } } ``` -------------------------------- ### Example Usage: Discarding Changes Source: https://docs.etchwp.com/public-api/blocks Illustrates how to exit component edit mode while discarding any modifications made during the session. ```APIDOC ## Discard Changes Example ### Description This example shows how to exit component edit mode and discard all changes made during the session by setting the `revert` option to `true`. ### Code ```javascript etch.blocks.exitComponentEditMode({ revert: true }); ``` ``` -------------------------------- ### Using Text Fields in Conditional Statements Source: https://docs.etchwp.com/integrations/custom-fields/text-fields Example of using a field value to control template output logic. ```html {#if this.acf.headline}{this.acf.headline}{#else}Default Headline{/if} ``` -------------------------------- ### Etch Connector CLI Usage Source: https://docs.etchwp.com/etch-connector/cli-reference Displays the general usage and available commands for the etch-connector CLI. This provides an overview of the tool's capabilities. ```bash etch-connector — drive a live Etch tab from the command line Usage: etch-connector serve [--ws-port 7331] [--control-port 7332] [--ws-host 127.0.0.1] etch-connector tabs [--json] [--control-port 7332] [--cdp] etch-connector eval [code] [-t|--tab name] [-f|--file path] [--timeout ms] [--cdp] etch-connector shot [-t name] [-s|--selector css] [--full] [--jpeg] [-o|--out file] [--freeze=false] (CDP) etch-connector html [-t name] (CDP) etch-connector computed [-t name] [--props a,b,c] (CDP) ``` -------------------------------- ### Define Loop Props with Arguments Source: https://docs.etchwp.com/components/props/prop-loop Demonstrates passing a prop value as an argument to a loop source. ```EtchWP {#loop props.myLoop($count: props.myCount) as item} {/loop} ``` ```EtchWP
{#loop props.myLoop($count: props.myCount) as item}

{item.title}

{item.excerpt}

{/loop}
``` -------------------------------- ### Divide integers with .divide() Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/arithmetic-modifiers Demonstrates dividing an integer by another integer using the .divide() modifier. ```dynamic data {item.value.divide(3)} ``` -------------------------------- ### Features List Component Source: https://docs.etchwp.com/components/props/prop-group A complete example of a features section using a Repeater Prop and its resolved data structure. ```html

Features

{#loop props.features as feature}

{feature.title}

{feature.description}

{/loop}
``` ```json [ { "title": "Fast", "description": "Lightning-fast performance.", "icon": "/fast.svg" }, { "title": "Secure", "description": "Built with security in mind.", "icon": "/secure.svg" } ] ``` -------------------------------- ### Trigger Grid-3 Recipe Source: https://docs.etchwp.com/utilities/recipes/intro Use the '?' prefix to trigger the grid-3 recipe expansion. ```css .foo { ?grid-3; } ``` -------------------------------- ### EtchComponentsApi Interface Source: https://docs.etchwp.com/public-api/components Defines the methods available for managing components: listing, getting details, creating, updating, and deleting. ```typescript interface EtchComponentsApi { list(): PublicComponentSummary[]; // all components (no block trees) getJson(componentId: number): PublicComponentJson; // one component, with its block tree createAsync(name: string): Promise; // create empty; returns new numeric id updateAsync(componentId: number, patch: ComponentPatch): Promise; deleteAsync(componentId: number): Promise; } ``` -------------------------------- ### Adding Loop Definitions Source: https://docs.etchwp.com/public-api/loops Demonstrates how to add a reusable WordPress query loop for recent posts and a local static JSON loop for tabs. ```javascript // A reusable query for the 6 most recent posts const loopId = etch.loops.add({ key: "recent-posts", name: "Recent posts", global: true, config: { type: "wp-query", args: { post_type: "post", posts_per_page: 6, orderby: "date", order: "DESC" }, }, }); // Static JSON loop etch.loops.add({ key: "tabs", name: "Tabs", global: false, config: { type: "json", data: [{ label: "One" }, { label: "Two" }] }, }); await etch.saveAsync(); ``` -------------------------------- ### Iterate gallery fields with general syntax Source: https://docs.etchwp.com/integrations/custom-fields/gallery-fields Use the loop syntax to iterate through a generic gallery field source. ```html
    {#loop this.field_source.gallery_field as image}
    • {/loop}
``` -------------------------------- ### create() Source: https://docs.etchwp.com/public-api/blocks Creates a new block. The type of block created is type-checked against the block JSON union. The `styles` array is read-only and will be rejected if provided during creation. ```APIDOC ## create() ### Description Creates a new block with the provided JSON structure. Type-checking is performed against the block JSON union, and the `styles` array is read-only. ### Method `create(json: EtchBlockJson, parentId?: string | null, index?: number): string` ### Parameters * **json** (EtchBlockJson) - Required - The JSON structure of the block to create. * **parentId** (string | null) - Optional - The ID of the parent block. If omitted or null, the block is created at the document root. * **index** (number) - Optional - The index at which to insert the block among its siblings. If omitted, the block is appended. ### Returns * **string** - The ID of the newly created block. ### Example ```javascript const id = etch.blocks.create({ type: "etch/element", version: 1, context: {}, children: [], tag: "div", attributes: { id: "main" }, }); ``` ``` -------------------------------- ### Get Object Values Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers The values modifier returns an array of an object's values. Non-object values are passed through unchanged. ```liquid {item.config.values()} ``` -------------------------------- ### Entering and Editing a Component Source: https://docs.etchwp.com/public-api/blocks Demonstrates how to find a component, enter its edit mode, modify its children, save the component definition, and then save the entire page. Ensure you await asynchronous save operations. ```javascript const [compId] = etch.blocks.find({ type: "etch/component" }); etch.blocks.enterComponentEditMode(compId); // Inspect or mutate the component's children const tree = etch.blocks.getTree(); etch.blocks.setText(tree[0].children[0].id, "Updated label"); await etch.blocks.saveComponentEditModeAsync(); // persist the component definition await etch.saveAsync(); // persist the page etch.blocks.exitComponentEditMode(); ``` -------------------------------- ### Get Object Keys Source: https://docs.etchwp.com/dynamic-data/dynamic-data-modifiers/basic-modifiers The keys modifier returns an array of an object's keys. Non-object values are passed through unchanged. ```liquid {item.config.keys()} ``` -------------------------------- ### Trigger Auto Grid Recipe Source: https://docs.etchwp.com/utilities/recipes/intro Use the '?' prefix to trigger the complex auto-grid recipe expansion. ```css .foo { ?auto-grid; } ```