[wp-trac] [WordPress Trac] #59138: Duotone filter selector does not apply when using Image block alignment (was: Twenty Seventeen - Image is having issue with Highlight & Shadow when Alignment is applied.)

[WordPress Trac]

#59138: Duotone filter selector does not apply when using Image block alignment
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Editor            |     Version:  6.3
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+------------------------------
Changes (by sabernhardt):

 * version:   => 6.3
 * component:  Bundled Theme => Editor


Comment:

 This probably needs to be fixed in the Gutenberg plugin first. Could you
 open an issue in the repository?
 https://github.com/WordPress/gutenberg/issues/new/choose

 Duotone filters seem to fail in any 'classic' theme when the image has an
 alignment class because the duotone classes are added to the `figure`
 element, and that is **not** the same as the `.wp-block-image` element in
 classic themes. The
 [https://github.com/WordPress/gutenberg/blob/17bc4c206870c4957bee83ea9e167c7815fdb2ac/packages
 /block-library/src/image/block.json#L118 selector in block.json] expects
 both classes to be on the same element.

 {{{
 .wp-duotone-cf2e2e-abb8c3-1.wp-block-image img,
 .wp-duotone-cf2e2e-abb8c3-1.wp-block-image .components-placeholder {
   filter: url(#wp-duotone-cf2e2e-abb8c3-1);
 }
 }}}

 Changing `.wp-block-image` to `[class]` in that line of the block JSON
 worked for me in the bundled themes (Twenty Ten to Twenty Twenty-Three),
 though I do not know if the `.wp-block-image` class was necessary somehow.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59138#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform