Etch has a built-in way to rename a class, you can double click a selector pill or use the rename option inside Style Manager. The problem is it only renames one class at a time. For a full BEM structure, that means clicking into every block__element and block--modifier one by one, typing in the new name, and doing that again across every element and the structure panel labels. On top of that, none of it touches your saved patterns, since Etch’s renaming doesn’t currently extend to those (this is a known issue that I’ve reported as a defect, so hopefully it gets fixed down the line).

Stop renaming BEM classes one at a time and let Etch BEM Rename do it instead, it’s one click to rename a whole BEM component, classes, styles, and patterns included!

How to Use It

This is the fastest way to rename a BEM block in Etch, no manual replacing classes or structure panel cleanup required.

1. Select a BEM Element

Click on any element that’s using BEM naming, it doesn’t have to be the root. Even if you select a nested child like a split-hero__media-wrapper, the plugin still detects the BEM root and gives you access to the whole tree. The “Edit BEM” button appears in the properties header for that element.

2. Click Edit BEM

This opens the Rename BEM Classes modal.

3. Update the Name and Class

You’ll see two fields:

• Name, this is your structure panel label (like Split Hero)
• Class, the CSS class selector (like .split-hero)

Just type in the Name field and then the Class slug will auto-generate in kebab-case as you go. If you’d rather set the slug yourself, just edit the Class field directly, and it locks from further auto-updates once you do.

4. Review the Detected Elements

Below the fields, the modal lists every block__element and block--modifier class it found tied to that BEM root, things like split-hero__heading, split-hero__iframe, or split-hero__media-wrapper. The part of the class that’s about to change is highlighted, and the __element/--modifier suffixes stay muted so you can see exactly what’s being touched before you commit.

5. Click Apply Rename

The plugin renames everything in one pass and saves automatically. If you change your mind, Esc, the Close button, or clicking outside the modal cancels without making any changes.

How BEM Detection Works

When you select an element, the plugin runs through a priority chain to figure out the BEM root:

1. If any class on the element contains __, the part before __ is the root.
2. If not, it scans the document for non-utility classes whose base (before --) has __element descendants anywhere in the tree, and uses the first match.
3. If that comes up empty, it falls back to extracting the base from a --modifier class.

Utility classes prefixed with is- or has- are ignored during detection, so they won’t get picked up as a false root.

What Gets Updated

When you apply a rename, the plugin renames a block name across classes, styles, and patterns in one pass:

• Every block’s class attribute in the Etch canvas
• Style Manager selectors tied to those classes
• Structure panel labels for the root block and any named children
• Every saved pattern that references the old classes

Requirements

• WordPress 6.5+
• PHP 8.1+
• Etch v1.5.2+ (requires Etch Public API)