0

I added a subscription box widget and I need to change the style to put the submit button inside the input box. It currently looks like this:

enter image description here

[enter image description here][2]

And I want it to look like this: [2]: https://i.stack.imgur.com/Z4Aqe.png

Which I know how to do with plain html, but I'm not sure how to change the Wordpress widget html while keeping the functionality. Here is the widget code:

 <!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:genesis-blocks/gb-newsletter {"instanceId":0} /--></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

Thank you in advance.

Jessica Donovan
  • 35
  • 5

1 Answers1

0

That is markup outputted from the WordPress' new block-based syntax (Background)

It's not quite HTML in that if you edit it, it would not render as you would expect; it will break, because the additional block code (not shown on the screen) expects only certain .

You have a couple options here depending how much time you want to devote to this:

  1. Determine whether your has block styling options (borders, font, font-size, etc) already built-in to the block settings. Check the genesis blocks documentation to verify this. This will be the easiest option to do what you want but if you're asking this question, I'm guessing that the block doesn't have these options.

  2. This is probably the best route to take:
    In your group block container, on the right hand side, create a css class shown in this picture. Then, go to your theme's CSS; add a selector of that CSS class and begin adding the rules that you want. This may require some trial and error because you're likely need to write some additional selectors and increase the level of specificity so you can style exactly how you want it and override some other rules already written.

(You may also need to include !important as for your rules but that is a last resort and not a best practice for writing CSS)

You may also need to do this for the gb-newsletter block as well.

  1. Writing your own blocks (which has frustratingly has a high learning curve, imho); this will offer the most customization but will be a LOT of time.
Will
  • 842
  • 2
  • 9
  • 16