search

WordPress / community-themes

A collection of Block Themes built by the WordPress community.
80 stars 33 forks source link

Blue Note Stripes Pattern - Full Width Featured Image #176

Open dweuste opened 4 months ago

dweuste commented 4 months ago

I am working on a site with the Blue Note theme as a base (with a child theme) because of the thin stripe pattern. But when I add a featured image block in the block editor, or often when adding an image block that is full width I can't get the Image Styling/mask to go the full width of the screen, it cuts off arbitrarily early (around 1350 px).

liviopv commented 4 months ago

Hi! @dweuste I wasn't able to reproduce what you described, but I'm likely missing something.

Here's what I did:

  1. Modified the default Page Template to include the Featured Image Block
  2. Applied a duotone filter to the Featured Image Block
  3. Set the Featured Image Block alignment to Full Width
  4. Opened a new page and added a large Featured Image

Here's the result:

CleanShot 2024-05-17 at 10 44 50@2x

As you can see, the image fits the whole screen and the duotone is applied to the whole image.

Can you share more information about the behavior you're seeing on your site and instructions on how to reproduce it? Thanks!

dweuste commented 4 months ago

Duotone isn't the issue. The issue is the Blue Note theme's Stripe clip-path. The clip path cuts off at 1350 pixels, which leaves a white space on the right of a full width image. And there isn't a way I can see to extend the path.

Screenshot:

Screen Shot 2024-05-17 at 6 28 28 AM
MaggieCabrera commented 4 months ago

Duotone isn't the issue. The issue is the Blue Note theme's Stripe clip-path. The clip path cuts off at 1350 pixels, which leaves a white space on the right of a full width image. And there isn't a way I can see to extend the path.

It's been a while and I think the problem is that the design of the clip path has a specific size that wouldn't work on full width. You may want to adapt the CSS or even the SVG to your use case in your child theme and register the block pattern again with your changes. Or even better, implement a full width specific version because I think fixing the existing pattern for full width will break it for content/wide width

dweuste commented 4 months ago

There's no guide to how to adapt that clip path CSS anywhere is there? (No SVG is used for this mask that I can see)