Fix a bug that caused the display ratio of images to be corrupted starting from 6.3.( fix #53555 )

[ddryo]

What?

Since 6.3, there is a bug that the display ratio is broken when the size is specified in the image block. (#53555)

This PR fixes the above problem.

How?

If both width and height have size specifications, they are converted to aspect-ratio rather than being output as they are in the style attribute.

Testing Instructions

• Check with v6.3
  1. Specify a size for the image block.
  2. Confirm with phone size, etc.
• Check blocks placed before v.6.2
  1. Place image block in v.6.2 and specify 75%, etc.
  2. Copy and paste that block and make sure it is converted to the new specifications.
  3. Confirm with phone size, etc.

As an example, I share one image block code I installed in 6.2.

<!-- wp:image {"width":600,"height":450,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://s.w.org/images/core/5.3/MtBlanc1.jpg" alt="" width="600" height="450"/></figure>
<!-- /wp:image -->

Note

There was already a PR for 53274 that fixes another problem, which was already different from the 6.3 situation.

The 53274 changed the width, height to a string type, but blocks placed before 6.2 were not migrated correctly to a string type, so we are fixing those as well.

(In deprecated.js, migrate process　was also added to v6~v4)

[github-actions]

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Block] Image.

Read more about Type labels in Gutenberg.

[gamebits]

@scruffian Since you reviewed the similar #53274, could we get your eyes on this one, too?

[getdave]

@MaggieCabrera Is this what we observed with our testing earlier this week when that one image didn't show the controls?

[MaggieCabrera]

@MaggieCabrera Is this what we observed with our testing earlier this week when that one image didn't show the controls?

It could be happening that after we use "Replace" on an existing image (this is the code for the original image in TT4) the dimensions are added to the block and that makes aspect ratio fail

[ajlende]

height can be set to auto in the editor with a fixed width, so we can't make this assumption here. We want to support layouts where that is required.

[ajlende]

If migrate needs to be added to all these deprecations, that seems to me like a bug in applyBlockDeprecatedVersions, not the image block deprecations. The documentation for block deprecations doesn't mention this, and it seems rather awkward and error-prone to have to add them everywhere.

[ajlende]

The idea for the image block moving forward is to support units other than px, so we don't want to parseInt without confirming that they are pixel values first.

[ajlende]

The logic here should be moved to edit.js to allow for more flexibility of styling.