Custom woocomm block not displaying correctly in editor

I was following the videos - Starter Shop WooCommerce Course
However, instead of doing the whole theme, I was just creating a plugin for creating the custom woocomm blocks that are used on the front page in that project.

As you can see from screen shots, it is working on the front end but the block in the editor displays the project placeholder data and does not update dynamically with the local site data.

I exported and installed the plugin on a live site and had the same result - works on the front end but not in the editor.

I am wondering if I got a setting/set wrong or does this not work as a plugin and needs to be down as a theme project.

I am using/testing a new full site block theme - Ollie

thanks


Keep in mind that the Wordpress block editor has its own stylesheet that can sometimes conflict with your blocks. You can go to the block advanced properties and define the stylesheet that the editor should use if that ‘s happening to you.

Here is an article that shows what’s going on and a manual way to address it. Thankfully, the editor stylesheet field for your block takes care of all this for you.