Duotone filter selector does not apply when using Image block alignment

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Seventeen theme.
2. Choose Image block.
3. Use Alignment
4. Give Highlight or shadow to the block.

You can able to see it is working fine in editor side but having issue in front side when alignment is applied.

I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/tDbCt0h3fTLVMMhbK4xt

[sabernhardt]

Image blocks that have duotone filter, with each alignment option, using WP6.3 and Twenty Seventeen

[sabernhardt]

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 ​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.

[bijit027]

This issue occurred when we saved the post with alignment. The post data was saved with a class name like this: <figure class="wp-block-image align-right size-full is-resized is-style-rounded">. However, when viewing the post on the user side, it mistakenly changed the class of the figure tag to <figure class="align-right size-full is-resized is-style-rounded">, omitting the 'wp-block-image' class. As a result, this part of the CSS:

.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);
}

was not applied to this <figure> tag.

When the post content is filtered in layout.php, it removes 'wp-block-image' at line 856 due to this code:

$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );

I have made a code change to:

$filtered_content_classnames = array_diff( $content_classnames, array( $block['attrs']['className'] ) );

[audrasjb]

WP 6.3.1 is going to be released in the next few days, so let's move this ticket to 6.3.2 to give it more time to be committed and backported.

[efrap]

@bijit027 - Changing that 856 line from layout.php worked, but generate an error.

Instead of array_diff, which removes wp-block-image class, I used array_unique(array_merge(...)) to combine the class arrays.

Replace line 856

$filtered_content_classnames = array_diff( $content_classnames, $wrapper_classnames );

With

$filtered_content_classnames = array_unique(array_merge( $content_classnames, $wrapper_classnames ));

Seems to be working well.

[efrap]

The change creates problems when adding url in audio or video blocks, stalling and not adding url.

[sabernhardt]

#59262 was marked as a duplicate.

[sabernhardt]

I opened an issue in the Gutenberg repository:
​https://github.com/WordPress/gutenberg/issues/54121

[joemcgill]

I agree with @sabernhardt that this should be resolved upstream and then synced back here. Given that we're getting close to another minor release, I'm going to move this to the 6.4 milestone.

[hellofromTonya]

The ​upstream issue was punted to 6.5. Moving this ticket also to 6.5.

I agree - the discussion and resolution is best upstream in the Gutenberg repo. Then fixed, the changes can be ported back here for commit consideration.

Looking at the track ticket it seems this should be closed and a PR should be open in the gutenberg repository?

[kushang78]

Added Screenshot for None/Left.

[kushang78]

Added Screenshot for Center.

[kushang78]

Added Screenshot for Right Alignment.

[kushang78]

According to me, I’ve tried to reproduce this issue. But, It’s already working in my case.

Theme: Twenty Seventeen
System: Macbook M1
Browser: Chrome

The Twenty Seventeen Theme follow Left & Right side styled content.

• ‘’Left side’’ for Page Title
• ‘’Right side’’ for contents with default 58% width. So, The Alignment is working between this width.

Please check the attached screenshot for better understanding.

[kushang78]

Replying to kushang78:

According to me, I’ve tried to reproduce this issue. But, It’s already working in my case.

Theme: Twenty Seventeen
System: Macbook M1
Browser: Chrome

The Twenty Seventeen Theme follow Left & Right side styled content.

• ‘’Left side’’ for Page Title
• ‘’Right side’’ for contents with default 58% width. So, The Alignment is working between this width.

Please check the attached screenshots for better understanding.

Yes, I got the issue. I forgot to apply duotone filter.

[kushang78]

Added patch for this ticket.

[kushang78]

I've added latest patch with fixed this issue.

[sabernhardt]

GB54121 was removed from 6.5 consideration.

This may not need its own Trac ticket anymore (when the change is made in the plugin, it could be synced along with other editor updates).