Gutenberg: og:image tag does not pick the image from blocks

[htdat]

Steps to reproduce the issue

Jetpack_PostImages:: from_html does not

1. Create a post in Gutenberg
2. Add an existing image from Media Library to an image block.
3. Save the post and view the HTML source of the post.
4. ERROR: og:image is using https://s0.wp.com/i/blank.jpg

If I add images through Classic Editor, there is no issue.

What I expected

og:image should use the correct image.

Debug more

I notice the differences are width and height attributes of tags when viewing the code editor:

• Classic Editor - they do exist.
• Gutenberg - they do not exist.

By default, the image block looks like this - the og:image tag is picked wrongly with the steps above:

<!-- wp:image {"id":139} -->
<figure class="wp-block-image"><img src="https://vu.hoangdat.blog/wp-content/uploads/2018/09/logo-1-768x767.jpg" alt="" class="wp-image-139"/></figure>
<!-- /wp:image -->

If I "hack" a bit and add width and height attributes - the og:image tag is picked correctly.

<!-- wp:image {"id":139} -->
<figure class="wp-block-image"><img src="https://vu.hoangdat.blog/wp-content/uploads/2018/09/logo-1-768x767.jpg" alt="" class="wp-image-139"/></figure>
<!-- /wp:image -->

My testing enviroment

• WP 4.9.8
• JP 6.6.1, Release Candidate, Bleeding Edge
• Gutenberg 4.1.1

Possible Code

From

jetpack/functions.opengraph.php

Line 169 in 5a51ff2

$image_info = jetpack_og_get_image( $image_width, $image_height );

  $image_info       = jetpack_og_get_image( $image_width, $image_height );

Then

jetpack/functions.opengraph.php

Line 289 in 5a51ff2

$post_images = Jetpack_PostImages::get_images( get_the_ID(), array( 'width' => $width, 'height' => $height ) );

  	$post_images = Jetpack_PostImages::get_images( get_the_ID(), array( 'width' => $width, 'height' => $height ) );

Then

jetpack/class.jetpack-post-images.php

Lines 381 to 384 in 51afab4

	$meta = array(
	'width' => (int) $image_tag->getAttribute( 'width' ),
	'height' => (int) $image_tag->getAttribute( 'height' ),
	);

			$meta = array(
				'width'  => (int) $image_tag->getAttribute( 'width' ),
				'height' => (int) $image_tag->getAttribute( 'height' ),
			);

[htdat]

ticket: 1528871-zen

I am using [Pri] High as we're using Jetpack_PostImages in many places in Jetpack.

[simison]

Like you point out, this is indeed because of Gutenberg outputting image HTML without width/height attributes:

<!-- wp:image {"id":77} -->
<figure class="wp-block-image">
  <img
     src="http://localhost/wp-content/uploads/2018/10/example.png"
     alt=""
     class="wp-image-77"
   />
</figure>
<!-- /wp:image -->

Image tags without width/height are ignored here:

jetpack/class.jetpack-post-images.php

Lines 398 to 409 in 7ce8c1a

	// Must be larger than 200x200 (or user-specified).
	if (
	! $ignore_dimensions
	&& (
	empty( $meta['width'] )
	|| empty( $meta['height'] )
	|| $meta['width'] < $width
	|| $meta['height'] < $height
	)
	) {
	continue;
	}

The solution could be to pick media ID from {"id":77} or wp-image-77, load media object and use that as an OG image.

cc @tyxla @ockham who are working on Gutenberg-Publicize.

[jeherve]

This is a duplicate of this issue:
#10007

See my comment there for a detailed answer and a link to a Gutenberg PR that should solve the issue:
#10007 (comment)

Since there was no movement on that PR, maybe we should consider disabling our size checks for posts created with Gutenberg.

[simison]

Since there was no movement on that PR, maybe we should consider disabling our size checks for posts created with Gutenberg.

This sounds good. Suppose FB won't penalize if we send smaller than 200px, it just won't pick it up.

[kraftbj]

This sounds good. Suppose FB won't penalize if we send smaller than 200px, it just won't pick it up.

It may because of Publicize. Since we have accounted for it, I haven't tried recently, but generally, if there are issues with the OG tags, Publicize will fail.

[kraftbj]

Gutenberg is looking to resolve lack of width/height on the front-end with work being done in the https://github.com/WordPress/gutenberg/tree/update/image-block branch.

[kristarella]

The solution could be to pick media ID from {"id":77} or wp-image-77, load media object and use that as an OG image.

This seems potentially more robust, since you can check the width of the image in the database rather than just the width that is set in the post itself. If the image in the post is < 200px, but the original is larger, the original could be used for og:image

[KokkieH]

Noting we've had another user report of this here.

[jeherve]

The solution could be to pick media ID from {"id":77} or wp-image-77, load media object and use that as an OG image.

Noting that not all images will include such a media ID; Jetpack_PostImages's from_html method (which is problematic here, it's the one that pulls images from the post content) was built to grab images that may not be in the site's media library, most often because they're hotlinked from another site. If an image is inserted into a post from the Media Library, chances are that the image was uploaded into that post, in which case Jetpack_PostImages's from_attachment would grab it even before to look at the post content.

[annezazu]

1638869-zen

[bikedorkjon]

1638869-zen would like a response when we have a fix

[coder-karen]

1682946-zen