Add the code editor mode to the site editor

[carolinan]

Is your feature request related to a problem? Please describe.

As I test full site editing, -I keep clicking the tools to open the code editor, but it is not there.

There is a definite need for this. It's not just about habit :).

Users and developers need to be able to see the code without opening single templates or template parts in the standard editor (via their respective menu) or by exporting.

[mtias]

It's logged as a pending task here: #21245 :)

[noahtallen]

I gave this a short look a while ago. The complexity with this task is mostly to do with how the blocks in the site editor come from different entities. In the normal post editor, your changes only affect one entity, so it's easy to just write out the HTML of the current post, and then convert that back to blocks. This all currently happens in the editor package, so it's not related to the block-editor store.

Basically, the "code editor" is coded specifically to work with only one entity.

You can "do" code editing for FSE currently by navigating to the template or template part CPT lists, and editing via the code editor there, because those views will use edit-post for editing. This works great, because code editing in this context is related to only one entity at a time: one template, one template part, etc. Just like the HTML files in a block theme would look :)

I can imagine an experience similar in the site editor, where you can open a "code editor" for a specific entity, one at a time.

But I imagine people probably just want to see the code of everything that exists in the editor. The most obvious way to do that is to serialize every block in block-editor, and then render that in a code editor. That aspect is easy enough. I think parsing everything back into blocks and then applying them to the correct entity will be difficult.

• If we just set the content of the root entity (a template), then edits to the inner blocks of template part blocks or post content blocks would not remain.
• I think resetBlocks in block-editor would have the same effect as above.

So if those don't work, I think that would leave us with parsing the blocks, and then trying to figure out which block areas apply to which entities. So..

• looking through the list, we find a template part block. We can then set the template part entity to that block's inner blocks.
• same for post content block

I'm partially guessing at some of this. 😁 So it would be worth trying something like resetBlocks and observing what happens.

[mtias]

Might be worth exploring just having different editors for the different template parts, or a code editor that only shows the root and no introspection.

[skorasaurus]

You can "do" code editing for FSE currently by navigating to the template or template part CPT lists, and editing via the code editor there, because those views will use edit-post for editing. This works great, because code editing in this context is related to only one entity at a time: one template, one template part, etc. Just like the HTML files in a block theme would look :)

Thanks for the tip. If anyone is wondering how to access this:
Visit https://the-url-your-wordpress-install.com/wp-admin/edit.php?post_type=wp_template_part

[iandunn]

If anyone is wondering how to access this: Visit https://the-url-your-wordpress-install.com/wp-admin/edit.php?post_type=wp_template_part

That doesn't work for me. I'm guessing because of #37359

Er, nevermind, it does work w/ Gutenberg 12.2.0 and Core 5.8.2 👍🏻