Image blocks with set dimensions become invalid on upgrade from WordPress 6.0.3 to 6.4.2 #56916
Comments
jordesign
added
Needs Testing
|
Our team tested this issue. The environment is below. WordPress before update: 6.2.3 WordPress after update: 6.4.2 Image block code added in 6.2.3 and changed width and height Code after updating to 6.4.2, adding paragraph block and saving It seems that the width and height specifications of the
However, if you save without adding a paragraph block, the |
|
Thanks for hopping in here @mt8. When you did your testing, did you see the same block error that I did? Also, did you happen to test this starting with WordPress 6.0.3, which is the Core version where I saw the issue? |
|
Hello, @jg314
Yes, I confirmed the same error.
Yes, after confirming that it can be reproduced in 6.0.3, I also reproduced it in 6.2.3 I'm thinking this is probably a 6.4 issue since it reproduces on 6.3.x as well. |
|
Thanks for the quick reply @mt8.
We were actually able to replicate the issue upgrading from 6.0.3 to 6.3.2 as well, so it looks like this started before 6.4. Again, really appreciate you doing some additional testing. |
t-hamano
added
[Feature] Block Validation/Deprecation
|
From what I've researched, I think this problem is caused by a deprecation in WP6.3. Test procedure
Block markup in 6.2.3<!-- wp:image {"id":13,"width":500,"height":300,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="http://localhost:8888/wp-content/uploads/2023/12/test.jpg" alt="" class="wp-image-13" width="500" height="300"/>
</figure>
<!-- /wp:image -->Block markup in 6.3.2<!-- wp:image {"id":13,"width":"500px","height":"300px","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="http://localhost:8888/wp-content/uploads/2023/12/test.jpg" alt="" class="wp-image-13" style="object-fit:cover;width:500px;height:300px"/>
</figure>
<!-- /wp:image -->Update from 6.2.3 to 6.3.2❌ The below error appears in the browser console and the block breaks. Update from 6.2.3 to 6.4.2❌ The below error appears in the browser console and the block breaks. Update from 6.3.2 to 6.4.2✅ The block is unbreakable |
github-actions
bot
added
the
[Status] In Progress
|
I believe #57063 should fix this issue. |
|
It's fantastic to see you all merge a fix this quickly. Thanks for getting to this so fast @t-hamano! Is there somewhere to easily see whether this fix will be included in a maintenance release for WordPress 6.3 or 6.4? |
|
I'll cc @aaronjorbin for this once more as I can see he's been wrangling for 6.4.3 at least on the broader Core side. |
|
👋 I'm happy to help with pulling the related PR into the Core package updates, if there are no objections to it being included in a point release. |
|
Thank you @mikachan! If there is anything I can do, please contact me at any time. |
|
This seems like a great candidate for 6.4. Thanks @annezazu for the flag and @mikachan for ensuring it makes it over there.
For clarity sake, I want to note that now that 6.4 is released, no bug fixes will be backported to 6.3. While security fixes are often backported as a courtesy to people who have not been able to update for whatever reason, only one version of WordPress is actively maintained at a time. |
|
Thanks for clarifying @aaronjorbin. Can you recommend an approach to get this code fix into a WordPress 6.3 installation that doesn't involve upgrading to 6.4? Our team manages a large multisite network which usually takes weeks and a lot of work to upgrade to the newest version of WordPress. Doing that only for this bug fix doesn't seem like the highest leverage use of time. |
|
I'm seeing this bug in a site running 6.4.3. Was this not able to go into the 6.4.3 release? I don't see any confirmation that it was included. |
|
It is announced here: https://wordpress.org/documentation/wordpress-version/version-6-4-3/ Here is the pull requests for the block editor backported to 6.4.3: WordPress/wordpress-develop#5698 Could you tell me the specific details of the error that is occurring? |
|
@t-hamano sure. Some, not all, images have an error. It appears to specifically affect images that had the height/width set and it sure looks the same as what was reported in this.
Here is the object included with the error. |
|
@NicktheGeek Thanks for the reply. Is it possible to switch to a code editor and send me the code of the broken block? This is markup that includes HTML comments before and after it, and should be data like the following, for example. <!-- wp:image {"id":13,"width":500,"height":300,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="http://localhost:8888/wp-content/uploads/2023/12/test.jpg" alt="" class="wp-image-13" width="500" height="300"/>
</figure>
<!-- /wp:image --> |
|
@t-hamano Sure! Here it is <!-- wp:image {"align":"center","id":3587,"width":200,"height":200,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000000","#ffffff"]},"border":{"width":"0px","style":"none"}},"className":"is-style-rounded ghostkit-custom-1ClGpW","ghostkit":{"id":"1ClGpW","styles":{"padding-bottom":"5%20!important","margin-bottom":"5%20!important"}}} -->
<figure class="wp-block-image aligncenter size-large is-resized has-custom-border is-style-rounded ghostkit-custom-1ClGpW"><img src="{redacted}?w=800" alt="" class="wp-image-3587" style="border-style:none;border-width:0px;width:200px;height:200px"/></figure>
<!-- /wp:image --> |
|
Thank you! Is that markup for an Image block created in WP6.2.3? If so, the <!-- wp:image {"id":8,"width":500,"height":300,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://localhost:8888/wp-content/uploads/2024/02/test_1.jpg" alt="" class="wp-image-8" width="500" height="300"/></figure>
<!-- /wp:image -->However, looking at your code, it looks like inline styles are being applied. Are you extending the Image block with some kind of plugin? In that case, I'm concerned that the plugin has added its own deprecation 🤔 |
|
This has escalated to an issue where all of sudden we can't save posts anymore because of this image block issue. We just updated to 6.4.3 and all of a sudden we can't save a ton of our posts, just because the image block had size adjustments that were added before the change over to the new format. Here is an example of one that is broken now... Please issue a fix for this ASAP |
|
Issue still present for us as well: <!-- wp:image {"align":"center","id":56354,"width":209,"height":163,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://mysite.com/wp-content/uploads/2023/07/HappyDance.webp" alt="Happy dance!" class="wp-image-56354" style="width:209px;height:163px"/></figure>
<!-- /wp:image --> |
|
fix-block-editor-image-error.zip |
|
Looking at your comments, I can see that the image block markup has the following characteristics:
I looked into the markup in WP6.2.3 and WP6.3.2 in this comment, but the markup above does not apply to either version. Could you tell which WordPress version the broken image block was created in? Or do you remember the version before updating? |
|
Let's keep this issue open until we know what's causing the problem. |
Description
Image blocks with set dimensions break when WordPress is upgraded from 6.0.3 to 6.4.2.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Environment info
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: