I am keeping up to increase my experience with Gutenberg blocks and I am creating a simple CTA block, I know that there are plenty of them around but I would like to learn step by step how to create better and more complex blocks.
If you want to check out this is my GitHub repository but I would like to expose two problem that I am getting creating this CTA block. This is my first attempt to build a multi components block where I have a title, a text and a button.
Those are the problems I get:
the .cta-message does not use the default color even if I set it here and is the same attribute used for the title, the color is used properly if I write something.
I am unable to center align the button with the placeholder text, if I write something the system will center it as I want.
Alright I’ve found a way to fixing both of my problems but I am not really happy with the solution.
The issue around the centering of my button required only a little CSS love to solve it but I am not particularly happy with the solution I found for the message.
Before I created a RichText with a div container and p childs as Zac shows us in the videos, but this didn’t let me use che titleBoxColor attribute I had. So the solution I found was to transform the div into a p and now I am able to see correctly the color.
But I would like to understand why before wasn’t possible even if the dev tools of my browser said different: