This file is optional. If used, this is where we would write admin SCSS code specific to the block.

Theme-Redone’s Field Types are standardized and have a uniform look and feel in the back-end.
Inside the editor, they would look something like this (depending on the schema defined in the model.json file).

WordPress Theme Starter Theme Redone Block Example

Where to import the “_editor.scss” file?

If used, this file should be imported in blocks-backend.scss that lives inside the [theme-root]/gutenberg/scss/ directory.

Theme Redone blocks backend include css file example

If you are using our trb-cli (“Theme Redone Blocks CLI”), this file will be created and handled automatically upon each block creation/rename/removal.

To learn more, go ahead and read the trb-cli page.

Why we would use this file?

One of the scenarios for using this file is, for example, if we want to modify what the fields of a particular block look like inside the editor.

Another use-case would be if we want to build something completely custom. Here’s what we did in one of the projects built with theme-redone, that we can use as an example here: We are developing a block that has a graphic whose position depends on what the admin sets using the block’s fields (for example using a Range Field-Type).

Inside the EditMain.js or EditSidebar.js file, we could import an SVG, and in its inline style attribute, we could pass CSS variables for positions X and Y that we get from the corresponding two fields. Then, inside _editor.scss we would use these variables to create a simple “preview” of this feature that the admin would see in the editor.

Custom Admin Styles for a block feature | wordpress starter theme redone

Join Our Newsletter

To get updates about Theme Redone