How to custom page template for the Gutenberg editor

Question

I have read several questions/answers/articles about "custom templates," including the Block Editor Handbook, but nothing gets at what I'm looking for. Granted, this does smack of questions about placing content from two different editors on the same page, which I understand is not possible (see ACF comment below).

Example of what I'm looking for: after loading the template, the user would see two areas (sections/divs) in the editor, with a background color to differentiate them. If the user added a paragraph in the first section (A) that content would appear in section A on the public-facing Web page. Same with the second section.

1. is there a way to have some underlying HTML in the editor to create the structure?
2. is there a way to do this without using ACF (I'm always amazed that such a venerable CMS can't write content in different places on a page).

Thank you.

Answer 1

Its looks like you are little familiar with WordPress. No problem.
Yes, its true it does not have any places to edit front-end segments or blocks. That's because you have to create them in backend.
We can use ACF to create the backend meta boxes quickly. If you wanna do this manually you can check the guide for that.
For simplicity let's answer your question:

1. go to page / post edit.
2. click on gear icon to open the side panel then choose "code editor" from the menu.
   It will provide you with html editor. you can simply write all your html code here.
   To create a page template:
3. create a file in server > your theme directory
4. Add the page template comment inside that.
5. Check in the back end side panel in page editor. You can now find a drop-down listed with your page template.

Also it has an in built html editor widget to add in to your block editor.

Answer 2

Answer to both questions is: Yes.

https://developer.wordpress.org/reference/functions/register_block_type/

The most easy way is to have a server-side render script for the block. The render.php of the block will contain your HTML in any way you like. For how to register the block in the admin area JS I will forward you here: https://wordpress.stackexchange.com/a/423991/45050

This aproach however is not editing in editor itself but in the sidebar with form containing the text fields.

If your intent is to edit in the editor itself, you will have to do something similar as the columns block does - you will have:

• inner block that will support other inner blocks (paragraphs or more)
• wrapping block that will support that inner block to be added (multiple times)

You will play around with <InnerBlocks /> / window.wp.blockEditor.InnerBlocks if you're not a React builder...

Another way could be adding a class to the columns block (which has columns by default) and style it differently on the frontend.