How change color of selected words in a text box? Create box around text block?

Actually I’m not sure if this is the right place to ask question regarding WordPress built-in block editor? If it’s not I apologize.

Another question. I’m using the handpicked products block. Is there a way to put a border/frame around it and also a title?

Cheers

Hey @boppar,

As you suspected, some of your questions are not really related to the Storefront theme but to the WordPress Block Editor.

Gutenberg Blocks
You can certainly modify the blocks, which will require you to add custom CSS code to your site based on what you’re saying.

I recommend asking for further help on the Gutenberg support forum.

You can learn more about the different blocks here: https://www.ads-software.com/support/article/blocks/.

Products Blocks

I’m using the handpicked products block. Is there a way to put a border/frame around it and also a title?

The Products Blocks is part of WooCommerce rather than Storefront. However, Storefront does modify the look.

To add a title to the Products block, I recommend adding a Heading block above the Products block.

If you’d like add a border/frame around the block, please could you let us know if you’d like add the border/frame around the entire block or for each product within the block?

OK, I’ll ask in the right forum.

@boppar to clarify, we’re happy to help you with the Products Block styling, as that can be styled in Storefront:

If you’d like add a border/frame around the block, please could you let us know if you’d like add the border/frame around the entire block or for each product within the block?

@wpniall
How nice of you!
I would like a border/frame around the whole block.

@boppar You’re welcome!

Here’s the code to add a border/frame around the whole Product Block:

/* Add border around Products Blocks  */
.wc-block-grid__products {
  border: 1px solid #000000;
}

I set the border width to 1px and the color to #000000 (black), so feel free to adjust those to your preferences.

I recommend adding the code to the Appearance > Customize > CSS section in your WP-Admin dashboard.

Thanks @wpniall
It works well to add a frame around the product block.

However that’s not what I want to achive. I want a border around the product block and a title block.

I make a group block. Inside this group I add a title block AND a product block (the title block is to tell what kind of produts that are shown in the product block). Then I want a border around the group block.

Can this be done?

You’re welcome @boppar

Could you please share a link to the page on your site you would like to customize, so we can take a closer look?

Thanks!

Hi @wpniall

Site:
https://imgbb.com/gSRLmKK

Hi @boppar,

I noticed you’ve added the my-shadow-box class to the block groups, so I used that to add the borders. That way, we can prevent the border showing from a block group that you may not want to have a border. Here’s the code for adding a border:

/* Add border around Blocks group using the my-shadow-box class  */
.wp-block-group.my-shadow-box {
  border: 1px solid #000000;
}

If you need to add a border to a different block group, please share screenshots of where you’d like to add those using something like https://snipboard.io.

Thanks @wpniall
It works well.

I don’t really like the shadowbox, I might skip it.

If I just want to add a border (without shadow), how will the CSS look like?

Forget my last question. Thanks for your help, @wpniall.

Hi @boppar,

You’re welcome!

If you have any further questions or need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there. Thanks!