Skip to content

Conversation

@carolinan
Copy link
Contributor

@carolinan carolinan commented Apr 6, 2022

What?

Make sure the duotone is visible on placeholders for featured image and site logo.
Closes #40061

Why?

To show that a duotone is applied to the block.

How?

By adding additional CSS selectors to "__experimentalDuotone" in block-json.

Testing Instructions

  1. Open a Post or Page. -->
  2. Insert site logo and featured image block. If there are images already added to the blocks, remove them.
  3. Apply a duotone to the placeholder.

Screenshots or screencast

Featured image on top,
site logo,
selected site logo
featured image and site logo block with duotone visible.

@carolinan carolinan requested a review from ajitbohra as a code owner April 6, 2022 06:38
@carolinan carolinan added [Type] Enhancement A suggestion for improvement. [Block] Site Logo Affects the Site Logo Block [Block] Post Featured Image Affects the Post Featured Image Block labels Apr 6, 2022
@jasmussen
Copy link
Contributor

Thank you for the PR! I can't get it to work, what am I doing wrong?
after

@carolinan
Copy link
Contributor Author

Ah, the featured image has different markup and class names in the different editors :sigh:. I will submit a fix soon.

@jasmussen jasmussen self-requested a review April 6, 2022 10:15
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

Gif showing it colorizes the placeholder:

duotone

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Post Featured Image Affects the Post Featured Image Block [Block] Site Logo Affects the Site Logo Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Apply duotone filter to placeholders for Site Logo & Post Featured Image blocks

3 participants