JavaScript for WordPress Forums Gutenberg Development Unable to center a button in a CTA block

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #60723
    Andrea Barghigiani
    Participant

    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.

    Tha default state of the CTA block

    (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

    #60915
    Andrea Barghigiani
    Participant

    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:
    Dev Tools says the had the right color.

    Thank you for the future help.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.