# Using Editable, Editable-Fields, and Editable-Styles When building a block, you can define what elements should and should not be editable from the email builder using the `editable`, `editable-fields`, and `editable-styles` attributes. This lets you make blocks more reusable while being able to establish guardrails for elements that should not be altered. ## Editable The `editable` attribute allows an element to be changed in the email builder, and is required for `editable-fields`. It is also required for `editable-styles` if [Enable Editable Styles](/blocks_and_themes/styling_with_themes/#enable-editable-styles-for-blocks) is not enabled in the theme. Marking a field as `editable` also allows the content to be [localized at the email level](/localization/localizing_an_email/). Without this, the element will not be editable in the email builder, and any changes will have to be made in the block itself. Used alone, it allows all text-based content for an element to be edited (content, image source, link url, etc). Refer to the DML docs to see which fields of an element can be edited.
Each editable attribute requires a name that is unique to the block.
```twig This text can be modified in the email builder! This text cannot be changed without editing the block code. ``` ![Viewing an editable vs. non-editable element in the email builder](https://docs.dyspatch.io/img/emails/blocks-editable.png) ## Editable-fields For some blocks, you may want more specific control over what content can be changed. If you want to allow edits to some but not all fields of an element, you can do that by using `editable-fields`. This lets you define which fields you want to make editable, rather than allowing everything to be changed — for example, if you want someone to be able to edit the text of a link or button, but not the URL. To see which fields of an element can be edited, check the DML docs. ```twig The destination of this link is not editable, but the link text is! ``` ![Viewing editable vs. non-editable fields in the email builder](https://docs.dyspatch.io/img/emails/blocks-editable-fields.png) ## Editable-styles In addition to an element’s text-based content, you can also allow some style elements, like colors, to be changed in the editor by using `editable-styles`. Currently, this is available for dys-text, dys-title, dys-button, dys-img and dys-row. This lets you make your blocks more reusable - if you need a red button for one email and a green button for another, you can set `editable-styles` and use the same block for both. In the email builder, users will be able to change the attributes that have been defined in `editable-styles`. ```twig This color can be changed! The color of this text can be changed in the email builder as well. This button can be styled too! ``` ![Viewing editable styles in the email builder](https://docs.dyspatch.io/img/emails/blocks-editable-styles.png)
Admins and developers can Enable Editable Styles for Blocks in a theme to give email builders control, then use Style Controls to fine-tune editability
### Theme-Level Style Controls In addition to defining editable-styles at the block level, theme administrators can use **Style Controls** to set global rules for which styles are editable across all blocks in a theme. Learn more about [configuring Style Controls](/blocks_and_themes/styling_with_themes/#style-controls-tab). **Precedence Rules:** When both theme-level Style Controls and block-level editable-styles are used, the block-level attribute always takes precedence: 1. **Theme Style Controls** - Global rules for all blocks (e.g., padding disabled for all columns) 2. **Block-level editable-styles** - Specific rules for individual elements (e.g., editable-styles='padding' on a specific column) If a block explicitly declares editable-styles='padding' on an element, that style will be editable in the email builder even if padding is disabled in the theme's Style Controls. ```twig ```
Block-level editable-styles always override theme Style Controls, giving you flexibility to make exceptions when needed
## Editable-group Editable group should be used when your email designs need custom styling or content between desktop and mobile, and some editable content needs to be synced, such as text. Using `dys-desktop` and `dys-mobile` as covered in Part 2 of the DML 101 Guide, create tailored device size styling and link editable content by including the `editable-group` attribute to elements with the same value. In the email builder, users will be able to change the content on the desktop or mobile versions of the element and the content will automatically sync. ```twig The titles are grouped The titles are grouped The mobile version includes text instead of an image ``` Alternating preview between desktop and mobile stylings with sync'd title content See all DML components and their attributes in our DML documentation. ## Video Walkthrough Want to see our editable styles in action? Check out our video walkthrough!