Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#55580 closed defect (bug) (fixed)

6.0 Regression: Featured image in Cover block missing from published page

Reported by: ironprogrammer's profile ironprogrammer Owned by: gziolo's profile gziolo
Milestone: 6.0 Priority: high
Severity: normal Version: 6.0
Component: Editor Keywords: has-screenshots has-patch needs-refresh dev-feedback needs-unit-tests
Focuses: Cc:

Description

When setting a Cover block's image to the post featured image, the selected image is missing from the frontend page (preview or published). Upon DOM inspection, the Cover's <img> tag is not present.

This feature was introduced via backports for WordPress 6.0.

See https://core.trac.wordpress.org/ticket/55567 for the umbrella ticket covering 6.0 backports bug fixes.

Screenshots

https://cldup.com/6RpwvUYGYK.png
Backend editor displaying featured image in Cover block.

https://cldup.com/BsWJCxroah.png
Frontend page showing missing image from Cover block. ❌

Props @annezazu.

Change History (20)

#1 @ironprogrammer
3 years ago

Test Report

To reproduce this issue, please refer to the following test instructions. Note that the Gutenberg plugin should NOT be active, or the issue will not be reproducible.

Environment

  • WordPress 6.0-beta1-53184 (direct download via wp-cli)
  • Safari 15.4
  • macOS 12.3.1 (Monterey)
  • Theme: Twenty Twenty-Two
  • Gutenberg DISABLED 🔴

Steps to Test

  1. Create a new post.
  2. In the Settings sidebar (opened via the "cog" icon), select the "Post" tab.
  3. Expand the "Featured image" section, and click "Set featured image".
  4. Select or upload an image, and click the Set featured image button when done.
  5. At the block inserter, add a new Cover block (e.g. by typing the /cover shortcut).
  6. In the block toolbar, select the "Use featured image" icon (adjacent to "Add Media").
  7. Observe that the featured image selected in Step 4 is displayed in the block. ✅
  8. Publish the post.
  9. Open the post on the frontend of the site, and scroll past the template's default featured image, if present (see note below).
  10. Observe that the Cover block background is gray, and does not display the featured image. ❌

IMPORTANT: If using the default Twenty Twenty-Two theme, note that the Single Post template will display the post's featured image directly below the post title. You will need to scroll past the template's featured image to see the Cover block for the post.

Expected Results (❌)

  • The featured image should be displayed in the Cover block on the frontend of the site, consistent with how it appears in the backend post editor.

Additional Notes

The above testing was performed in a new directory (fresh install), including only the WordPress 6.0 Beta 1 ZIP build and a sample JPEG image.

Screenshots

Please see originally reported screenshots.

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


3 years ago

#3 @costdev
3 years ago

  • Milestone changed from Awaiting Review to 6.0
  • Priority changed from normal to high

Test Report

Environment

  • Server: Apache (Linux)
  • WordPress: 6.0-beta1-53167-src
  • Browser: Chrome 100.0.4896.88
  • OS: Windows 10
  • Theme: Twenty Twenty-One
  • Plugins: None activated

Steps

  1. Create a new post.
  2. In the Settings sidebar (opened via the "cog" icon), select the "Post" tab.
  3. Expand the "Featured image" section, and click "Set featured image".
  4. Select or upload an image, and click the Set featured image button when done.
  5. At the block inserter, add a new Cover block (e.g. by typing the /cover shortcut).
  6. In the block toolbar, select the "Use featured image" icon (adjacent to "Add Media").
  7. Observe that the featured image selected in Step 4 is displayed in the block. ✅
  8. Publish the post.
  9. Open the post on the frontend of the site, and scroll past the template's default featured image, if present (see note below).
  10. Observe that the Cover block background is gray, and does not display the featured image. ❌

Results

  1. Issue reproduced.

Notes

  • Milestoning for 6.0.

This ticket was mentioned in PR #2601 on WordPress/wordpress-develop by Mamaduka.


3 years ago
#4

  • Keywords has-patch added; needs-patch removed

Updates build and registration for the Cover block.

The new "Featured Image" enhancement is handled dynamically, so we need to update how the block is built/registered.

cc @gziolo, I would appreciate a code sanity check on this one; since the is update is based on my best guess 😄

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

#5 @Mamaduka
3 years ago

Hey, folks

I've created the PR that should fix the issue.

#6 @costdev
3 years ago

Test Report

Environment

  • Server: Apache (Linux)
  • WordPress: 6.0-beta1-53167-src
  • Browser: Chrome 100.0.4896.88
  • OS: Windows 10
  • Theme: Twenty Twenty-Two
  • Plugins: None activated

Steps

  1. Create a new post.
  2. In the Settings sidebar (opened via the "cog" icon), select the "Post" tab.
  3. Expand the "Featured image" section, and click "Set featured image".
  4. Select or upload an image, and click the Set featured image button when done.
  5. At the block inserter, add a new Cover block (e.g. by typing the /cover shortcut).
  6. In the block toolbar, select the "Use featured image" icon (adjacent to "Add Media").
  7. Observe that the featured image selected in Step 4 is displayed in the block. ✅
  8. Publish the post.
  9. Open the post on the frontend of the site, and scroll past the template's default featured image, if present (see note below).
  10. Observe that the Cover block background is gray, and does not display the featured image. ❌
  11. Apply PR 2601.
  12. Refresh the post on the frontend. Observe that the Cover background is not displaying the featured image. ✅

Results

  1. Without PR 2601, the featured image does not appear.
  2. With PR 2601, the featured image appears. ✅

Notes

  • Tests are failing on PR 2601 due to a _doing_it_wrong() being thrown when the core/cover block is already registered. I have left a comment on the PR with a suggested solution that causes the tests to pass while still showing the featured image as expected.
  • The render_block_core_cover() function doesn't have any tests written for it. These should be added and reviewed prior to commit.

This ticket was mentioned in Slack in #core by chaion07. View the logs.


3 years ago

#8 @chaion07
3 years ago

  • Keywords needs-refresh dev-feedback added

Thanks @ironprogrammer for reporting this. We reviewed this ticket during a recent bug-scrub session. Based on the feedback received from the team we're updating the ticket with the following changes:

  1. Adding keyword needs-refresh
  2. Adding keyword dev-feedback since George's PR needs an update and he asked for Greg's feedback

Props to @costdev

Cheers!

#9 @costdev
3 years ago

  • Keywords needs-unit-tests added

#10 @Mamaduka
3 years ago

Refreshed the PR to fix the unit test issue.

@andraganescu, do we have unit test coverage for the render_block_core_cover method in the Gutenberg plugin?

#11 @gziolo
3 years ago

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

In 53212:

Editor: Correctly register the dynamic Cover block

The new "Featured Image" enhancement is handled dynamically, so we need to update how the Cover block is handled in the build processa and registered in the code.

Props ironprogrammer, costdev, Mamaduka, chaion07.
Fixes #55580.

#13 @gziolo
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

@Mamaduka mentioned this one requires also unit tests before it can be considered complete. Reopening also because there are some failures on CI after this commit.

#14 @gziolo
3 years ago

In 53213:

Editor: Include the PHP file for the Cover block

This file is copied by the build process but it also needs to be versioned so unit tests can run without issues.

Follow-up [53212].
See #55580.

This ticket was mentioned in Slack in #core by costdev. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by chaion07. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by costdev. View the logs.


3 years ago

#18 @costdev
3 years ago

  • Summary changed from Featured image in Cover block missing from published page to 6.0 Regression: Featured image in Cover block missing from published page

This ticket was mentioned in Slack in #core by costdev. View the logs.


3 years ago

#20 @costdev
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

With 6.0 RC1 starting now, I'm going to close this ticket as fixed. A follow-up ticket should be created to add the tests for this.

Note: See TracTickets for help on using tickets.