Make WordPress Core

Opened 8 weeks ago

Closed 7 weeks ago

Last modified 7 weeks ago

#60577 closed defect (bug) (fixed)

Pattern overrides: Add id to the supported image's binding attributes

Reported by: kevin940726's profile kevin940726 Owned by: gziolo's profile gziolo
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.5
Component: Editor Keywords: has-patch has-testing-info commit
Focuses: Cc:

Description

In the Gutenberg PR #58596 and #59194, We add the id attribute of the image block to the supported binding allowlist. This is needed to fix a bug where empty image blocks in a pattern will cause unexpected bugs as mentioned in #58708.
Some of these changes need to be backported to WordPress core.

Change History (12)

This ticket was mentioned in PR #6140 on WordPress/wordpress-develop by @kevin940726.


8 weeks ago
#1

  • Keywords has-patch added

Backports the changes from https://github.com/WordPress/gutenberg/pull/59169 and https://github.com/WordPress/gutenberg/pull/59194.

The gutenberg PRs add id to the supported image's binding attributes for Pattern Overrides.

Trac ticket: https://core.trac.wordpress.org/ticket/60577

This ticket was mentioned in Slack in #core-test by ankit-k-gupta. View the logs.


8 weeks ago

#3 @Ankit K Gupta
8 weeks ago

  • Keywords needs-testing-info added

Hello @kevin940726 Thanks for the fixes and PR. Would you mind providing manual test steps to test the changes? Would be very helpful for Test Contributors to test easily. Thanks in advance!

#4 @gziolo
8 weeks ago

  • Milestone changed from Awaiting Review to 6.5

#5 @gziolo
8 weeks ago

Step-by-step reproduction instructions from https://github.com/WordPress/gutenberg/pull/59194:

There's one bug I've spotted so far, it happens when an image block is added to a pattern source but left empty. When a user overrides that image, the image has no id, so the 'upload' option is visible on the toolbar.

  1. Create a new post and insert an image block and leave it empty (in the placeholder state)
  2. From the block settings menu for the image block, create a new pattern, making it synced.
  3. Choose the 'Edit original' button from the toolbar to edit the pattern
  4. Select the image block, and from the advanced inspector options, check the 'Allow instance overrides' option
  5. Save changes
  6. Click the back button to go back to the post you were initially editing
  7. Add an image to image block in the pattern (use a media library image, so upload a new one or choose an existing one).
  8. Save the post.
  9. Reload, select the image in the pattern

Expected: because the image added in step 7 is from the media library, there's no upload button on the block toolbar.
Before patch: there is an 'upload' button on the block toolbar

#6 @gziolo
8 weeks ago

  • Keywords has-testing-info added; needs-testing-info removed

#7 @sonali844
8 weeks ago

QA Report:

---
https://github.com/WordPress/gutenberg/pull/59194: I have checked with this pull request and followed the test steps and it is working as expected.

Screenshot : https://prnt.sc/MCol-kxgLGoq

Testing Environment :

WordPress: 6.4
Theme: Twenty Twenty-Four 1.0
PHP: 8.3
Browser: Chrome
OS: Window Version 121.0.6167.185

#8 @harshalkadu
7 weeks ago

Hi @gziolo @ankit-k-gupta @sonali844

I have completed testing this task update and found that it's working as expected. Kindly check below QA status for the executed test steps followed by the test environment details.

Test steps executed:

  1. Create a new post and insert an image block and leave it empty (in the placeholder state)
  2. From the block settings menu for the image block, create a new pattern, making it synced.

QA Status: PASS
SS: https://prnt.sc/0Z1NQzm8HVtQ

  1. Choose the 'Edit original' button from the toolbar to edit the pattern

QA Status: PASS
SS: https://prnt.sc/Y51QD7q64iA4

  1. Select the image block, and from the advanced inspector options, check the 'Allow instance overrides' option
  2. Save changes

QA Status: PASS
SS: https://prnt.sc/DXnaQLlYbOiM

  1. Click the back button to go back to the post you were initially editing
  2. Add an image to image block in the pattern (use a media library image, so upload a new one or choose an existing one).
  3. Save the post.

QA Status: PASS
SS: https://prnt.sc/kDTovrpBFYif

Testing Environment :
WordPress version: 6.5 beta 2
Theme: Twenty Twenty-Four
PHP: 8.3
Browser: Chrome Version 122.0.6261.57 (Official Build) (x86_64)
SS: https://prnt.sc/T_r3FnkHJHNR

Thank you!

Last edited 7 weeks ago by harshalkadu (previous) (diff)

#9 @gziolo
7 weeks ago

  • Keywords commit added

#10 @gziolo
7 weeks ago

Thank you for your help with testing this bug fix.

#11 @gziolo
7 weeks ago

  • Owner set to gziolo
  • Resolution set to fixed
  • Status changed from new to closed

In 57700:

Editor: Add id to the supported Image's binding attributes

Syncs changes from the Gutenberg plugin: https://github.com/WordPress/gutenberg/pull/59194.

Fixes #60577.
Props kevin940726, ankit-k-gupta, sonali844, harshalkadu, gziolo.

Note: See TracTickets for help on using tickets.