Make WordPress Core

Opened 4 months ago

Last modified 7 weeks ago

#59138 new defect (bug)

Duotone filter selector does not apply when using Image block alignment

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords: gutenberg-merge
Focuses: Cc:


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 :-

Attachments (1)

duotone-aligned-images-6.3.png (178.5 KB) - added by sabernhardt 4 months ago.
Image blocks that have duotone filter, with each alignment option, using WP6.3 and Twenty Seventeen

Download all attachments as: .zip

Change History (14)

4 months ago

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

#1 @sabernhardt
4 months ago

  • Component changed from Bundled Theme to Editor
  • Summary changed from Twenty Seventeen - Image is having issue with Highlight & Shadow when Alignment is applied. to Duotone filter selector does not apply when using Image block alignment
  • Version set to 6.3

This probably needs to be fixed in the Gutenberg plugin first. Could you open an issue in the repository?

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.

#2 @sabernhardt
4 months ago

  • Milestone changed from Awaiting Review to 6.3.1

This ticket was mentioned in PR #5036 on WordPress/wordpress-develop by bijit027.

4 months ago

  • Keywords has-patch added

#4 @bijit027
4 months ago

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'] ) );

#5 @audrasjb
3 months ago

  • Milestone changed from 6.3.1 to 6.3.2

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.

#6 follow-up: @efrap
3 months ago

@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 );


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

Seems to be working well.

#7 in reply to: ↑ 6 @efrap
3 months ago

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

#8 @sabernhardt
3 months ago

#59262 was marked as a duplicate.

#9 @sabernhardt
3 months ago

I opened an issue in the Gutenberg repository:

#10 @joemcgill
2 months ago

  • Milestone changed from 6.3.2 to 6.4

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.

#11 @oglekler
2 months ago

  • Keywords gutenberg-merge added

#12 @hellofromTonya
7 weeks ago

  • Keywords has-patch removed
  • Milestone changed from 6.4 to 6.5

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.

@andraganescu commented on PR #5036:

7 weeks ago

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

Note: See TracTickets for help on using tickets.