How to improve the user experience with better looking blocks at the editor?

• Ramate

• August 28, 2023 at 11:25 am

Hey, (:

I have been using ACF Pro for the last year and I can say I am still pretty impressed with all the flexibility and magic. But there is a dot of frustration when I see my newly created blocks on the WordPress editor; sometimes they don’t reflect what the user will see in the frontend. So I was wondering how can I improve that experience.

I have been trying all kind of sorcery to make it better or at least resemble a bit the WordPress default blocks. The WP Default Blocks look nice for one side, but lack a lot of control and sometimes are complex for my clients to deal with, with all controls hidden in tabs under tabs under tabs. Most of the times they are not an option for me.

Let’s look that simple Header Image Block I created. Nothing special, just an image that will reflect a Hero image in the frontend side, everything working fine there.

How could I make it actually look a Hero Image in the editor, so the client would at least know what it mean? Any direction and recommendation would be happily accepted.

Here is one image of a Default WordPress Block, looks better but lacks control and hard to use by the client:

I guess it would be a good start for more complex blocks.

Thanks a lot <3