Make WordPress Core

Opened 10 months ago

Last modified 4 months 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: Future Release Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords: gutenberg-merge has-patch close 2nd-opinion
Focuses: Cc:

Description

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

Attachments (5)

duotone-aligned-images-6.3.png (178.5 KB) - added by sabernhardt 10 months ago.
Image blocks that have duotone filter, with each alignment option, using WP6.3 and Twenty Seventeen
Left & None Align.png (455.1 KB) - added by kushang78 5 months ago.
Added Screenshot for None/Left.
Center Align.png (468.9 KB) - added by kushang78 5 months ago.
Added Screenshot for Center.
Right Align.png (400.8 KB) - added by kushang78 5 months ago.
Added Screenshot for Right Alignment.
59138.diff (904 bytes) - added by kushang78 5 months ago.
Added patch for this ticket.

Download all attachments as: .zip

Change History (22)

@sabernhardt
10 months ago

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

#1 @sabernhardt
10 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?
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.

#2 @sabernhardt
10 months ago

  • Milestone changed from Awaiting Review to 6.3.1

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


10 months ago
#3

  • Keywords has-patch added

#4 @bijit027
10 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'] ) );

https://prnt.sc/opqImP0yiIRp

#5 @audrasjb
10 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
10 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 );

With

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

Seems to be working well.

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

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

#8 @sabernhardt
10 months ago

#59262 was marked as a duplicate.

#9 @sabernhardt
10 months ago

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

#10 @joemcgill
9 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
9 months ago

  • Keywords gutenberg-merge added

#12 @hellofromTonya
8 months 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:


8 months ago
#13

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

@kushang78
5 months ago

Added Screenshot for None/Left.

@kushang78
5 months ago

Added Screenshot for Center.

@kushang78
5 months ago

Added Screenshot for Right Alignment.

#14 follow-up: @kushang78
5 months ago

  • Keywords has-patch added

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.

Version 0, edited 5 months ago by kushang78 (next)

#15 in reply to: ↑ 14 @kushang78
5 months ago

  • Keywords has-patch removed

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
5 months ago

Added patch for this ticket.

#16 @kushang78
5 months ago

  • Keywords has-patch added

I've added latest patch with fixed this issue.

#17 @sabernhardt
4 months ago

  • Keywords close 2nd-opinion added
  • Milestone changed from 6.5 to Future Release

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

Note: See TracTickets for help on using tickets.