I’m getting ready to release oik v4.8.0 to the general public.
This version contains a new block called PayPal button. It implements the logic of the paypal shortcode as a block.
I wrote this post to test whether or not the block requires any styling. On oik-plugins I’d found that I needed to remove the border being applied to input controls. In this site it was also necessary to prevent images stretching to fill 100% width.
I realised I needed some CSS applied to the block.
- I implemented this in the block’s
style.scssfile. - For CSS specificity this required the HTML for the button to be wrapped using
get_block_wrapper_attributes(). - This entailed a co-requisite change to
block.jsonto setsupports.classNameto true. - And to ensure the
style-paypal.cssfile is enqueued when the PayPal button block is used.
/* Remove the border from around a PayPal button. */
.wp-block-oik-paypal form input[type="image"] {
border: none;
width: auto;
}