Block widgets editor issues

Hello,
Can you point me to a good tutorial for using the Block Editor for Widgets? I am relatively new to the Gutenberg editor but find it easy to use creating Pages and Posts. Using it to edit Widgets however has been difficult for me.

I have been developing with Divi the last couple years and hand-coding HTML widgets with the Classic Editor. This process results in exactly the look and functionality I want.

I am trying to recreate one of my HTML Widgets using the Block Editor.

In the block editor it is difficult for me to tell which Widget I am editing because the widgets are displayed with no clear boundaries setting them apart. I don’t understand the reasoning behind that “feature”.

I am trying to integrate several Block types into the same Widget to get the look I need. The widget needs a Paragraph up top with white letters and an image below that which already has a black background and a Image-Link button on the bottom with a black background. All 3 blocks are contiguous with no margin between them. The effect is that of a single black-background graphic with a clickable button.

I create the widget beginning with a Paragraph Block at the top. But when I press enter add an Image below below the Para it appears that the editor creates and entirely new Block Widget. So continuing the process for all 3 blocks, trying to recreate my Widget “graphic”, results in 3 widgets separated by spaces. Not what I was hoping for.

So what am I missing? I have done some searching and have not found the documentation to answer my questions.

Any help would be appreciated. Thanks

• This topic was modified 3 years ago by Jan Dembowski.