Unable to center a button in a CTA block

[Andrea Barghigiani]

Hi folks,
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.

(Can’t see image above, this is the link to it.)

I think that I am missing something when Gutenberg uses the placeholder text, does anyone of you ever met this kind of problem?

Thank you in advance,
Andrea

[Andrea Barghigiani]

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:

Thank you for the future help.

[Author]

Posts