Skip to content

Add duotone to Post Featured Image block#34113

Merged
ajlende merged 1 commit intoWordPress:trunkfrom
ajlende:add/duotone-featured-image
Aug 18, 2021
Merged

Add duotone to Post Featured Image block#34113
ajlende merged 1 commit intoWordPress:trunkfrom
ajlende:add/duotone-featured-image

Conversation

@ajlende
Copy link
Copy Markdown
Contributor

@ajlende ajlende commented Aug 17, 2021 •
edited
Loading

Description

Fixes #34088

Adds duotone to the featured image.

How has this been tested?

  1. Apply duotone filter to featured image block in the editor.
  2. Add duotone featured image to page template.

Screenshots

Using Skatepark. Also tested with TT1.

Edit

duotone featured image editor

<!-- wp:post-featured-image {"style":{"color":{"duotone":["#000","#F3B2A9"]}}} /-->

Page Template & Save

duotone featured image save

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:post-title /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-featured-image {"align":"full","style":{"color":{"duotone":["#000","#C9E4ED"]}}} /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->
</main>
<!-- /wp:group -->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:post-comments /--></div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

Types of changes

New feature

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@mtias mtias added the [Block] Post Featured Image Affects the Post Featured Image Block label Aug 17, 2021
mtias
mtias reviewed Aug 17, 2021
View reviewed changes
packages/block-library/src/post-featured-image/block.json
"align": [ "left", "right", "center", "wide", "full" ],
"color": {
"__experimentalDuotone": "img",
"text": false,
Copy link
Copy Markdown
Member

@mtias mtias Aug 17, 2021

Choose a reason for hiding this comment

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

Side note, but it's a bit odd we need to toggle these off just to opt-in into duotone. It might make sense to move duotone into a filters support in the future.

Copy link
Copy Markdown
Contributor Author

@ajlende ajlende Aug 17, 2021

Choose a reason for hiding this comment

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

Once we have one more type of filter to justify the new group 🙂

Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras Aug 18, 2021

Choose a reason for hiding this comment

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

I agree with @mtias here. It does look odd and it could justify its own group because you need to add more things and is not just about it's current place under color. Have you considered something similar @nosolosw or @jorgefilipecosta ?

@ajlende ajlende marked this pull request as ready for review August 17, 2021 15:33
@ajlende ajlende requested a review from ajitbohra as a code owner August 17, 2021 15:33
@ajlende ajlende requested a review from kjellr August 17, 2021 15:34
@ajlende
Copy link
Copy Markdown
Contributor Author

ajlende commented Aug 17, 2021

Because I'm not 100% sure of all the places that featured images are used, if you know of any others where we'd want duotone supported, then please share on here so myself and other reviewers can test them too.

I know one such place is in RSS feeds. I've already talked to @mtias about that case, and it sounded like it was okay that duotone won't show up there for now.

ntsekouras
ntsekouras approved these changes Aug 18, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Looks good! Thanks Alex 👍

Because I'm not 100% sure of all the places that featured images are used, if you know of any others where we'd want duotone supported, then please share on here

I think this is the main block that duotone should be supported..

@MaggieCabrera MaggieCabrera mentioned this pull request Aug 18, 2021
Merged
kjellr
kjellr approved these changes Aug 18, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

This works well in my testing. Thanks for taking care of it, @ajlende!

@ajlende ajlende merged commit b8852ee into WordPress:trunk Aug 18, 2021
@ajlende ajlende deleted the add/duotone-featured-image branch August 18, 2021 17:39
@github-actions github-actions bot added this to the Gutenberg 11.4 milestone Aug 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mtias mtias mtias left review comments

@ntsekouras ntsekouras ntsekouras approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

+1 more reviewer

@kjellr kjellr kjellr approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

[Block] Post Featured Image Affects the Post Featured Image Block

Projects

None yet

Milestone

Gutenberg 11.4

Development

Successfully merging this pull request may close these issues.

Featured Image Block: Support the duotone feature

4 participants

@ajlende @mtias @kjellr @ntsekouras