Post Featured Image block on a Single template doesn't have explicit width and height

[asafm7]

Description

Post Featured Image block on a Single template doesn't have explicit width and height.

(BTW, in an Archive context, the Post Featured Image block does have width and height)

See screenshots:

Step-by-step reproduction instructions

1. Edit the Single template (Full Site Editing)
2. Add Post Featured Image block
3. Try to set width and height

Screenshots, screen recording, code snippet

https://drive.google.com/file/d/1K1HWVCXvvj0zEXxU9QPPPdB6rgwwhvKQ/view?usp=drivesdk

https://drive.google.com/file/d/1bEC9CjdIvgDMRMzQgUJHTu1LP08EJ3jN/view?usp=drivesdk

Environment info

`

wp-core

version: 6.1.1
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true

wp-paths-sizes

wordpress_path: /home/asafdevc/public_html
wordpress_size: 58.50 MB (61346171 bytes)
uploads_path: /home/asafdevc/public_html/wp-content/uploads
uploads_size: 70.66 KB (72353 bytes)
themes_path: /home/asafdevc/public_html/wp-content/themes
themes_size: 12.66 MB (13276786 bytes)
plugins_path: /home/asafdevc/public_html/wp-content/plugins
plugins_size: 122.53 MB (128483055 bytes)
database_size: 23.44 MB (24576000 bytes)
total_size: 217.20 MB (227754365 bytes)

wp-active-theme

name: Koritsu (koritsu)
version: 0.0.1
author: Asaf Moshe
author_website: (undefined)
parent_theme: Twenty Twenty-Three (twentytwentythree)
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor
theme_path: /home/asafdevc/public_html/wp-content/themes/koritsu
auto_update: Disabled

wp-parent-theme

name: Twenty Twenty-Three (twentytwentythree)
version: 1.0
author: the WordPress team
author_website: https://wordpress.org
theme_path: /home/asafdevc/public_html/wp-content/themes/twentytwentythree
auto_update: Disabled

wp-themes-inactive (3)

Hello Elementor: version: 2.6.1, author: Elementor Team, Auto-updates disabled
Twenty Twenty-One: version: 1.7, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.3, author: the WordPress team, Auto-updates disabled

wp-plugins-active (13)

Accessibility by UserWay: version: 2.5.0, author: UserWay.org, Auto-updates disabled
Akismet Anti-Spam: version: 5.1, author: Automattic, Auto-updates disabled
CookieYes | GDPR Cookie Consent: version: 3.0.8, author: CookieYes, Auto-updates disabled
Hotjar: version: 1.0.14, author: Hotjar, Auto-updates disabled
Jetpack: version: 11.9.1, author: Automattic, Auto-updates disabled
LiteSpeed Cache: version: 5.3.3, author: LiteSpeed Technologies, Auto-updates disabled
Mailgun: version: 1.9, author: Mailgun, Auto-updates disabled
Site Kit by Google: version: 1.96.0, author: Google, Auto-updates disabled
Tidio Chat: version: 6.0.3, author: Tidio Ltd. (latest version: 6.0.4), Auto-updates disabled
UpdraftPlus - Backup/Restore: version: 1.23.3, author: UpdraftPlus.Com, DavidAnderson, Auto-updates disabled
VRTs – Visual Regression Tests: version: 1.2.3, author: Bleech, Auto-updates disabled
Wordfence Security: version: 7.9.1, author: Wordfence, Auto-updates disabled
Yoast SEO: version: 20.3, author: Team Yoast, Auto-updates disabled

wp-plugins-inactive (5)

Cloudflare: version: 4.11.0, author: Cloudflare, Inc., Auto-updates disabled
Create Block Theme: version: 1.7.1, author: WordPress.org, Auto-updates disabled
Creative Mail by Newfold Digital: version: 1.6.7, author: Newfold Digital, Auto-updates disabled
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled
Theme Customisations: version: 1.0.0, author: WooThemes, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_GD
imagick_module_version: Not available
imagemagick_version: Not available
imagick_version: Not available
file_uploads: File uploads is turned off
post_max_size: 64M
upload_max_filesize: 64M
max_effective_size: 64 MB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: 9.25

wp-server

server_architecture: Linux 3.10.0-962.3.2.lve1.5.73.el7.x86_64 x86_64
httpd_software: LiteSpeed
php_version: 8.0.28 64bit
php_sapi: litespeed
max_input_variables: 1800
time_limit: 300
memory_limit: 256M
max_input_time: 300
upload_max_filesize: 64M
php_post_max_size: 64M
curl_version: 7.88.0 OpenSSL/1.1.1t
suhosin: false
imagick_availability: false
pretty_permalinks: true
htaccess_extra_rules: true

wp-database

extension: mysqli
server_version: 10.3.38-MariaDB-cll-lve
client_version: mysqlnd 8.0.28
max_allowed_packet: 1073741824
max_connections: 300

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/asafdevc/public_html/wp-content
WP_PLUGIN_DIR: /home/asafdevc/public_html/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: false
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

jetpack

site_id: 216273148
ssl_cert: No
time_diff: undefined
version_option: 11.9.1:1679398041
old_version: 11.9:1678388916
public: Public
master_user: #1 asaf.moshe
current_user: #1 asaf.moshe
tokens_set: Blog User
blog_token: 0XUKjLo$mcruTi8YvZODtnAj0KB6HKRb
user_token: Xe&536j&p2@H7EW!lLt@pQYrMgZprq$2
version: 11.9.1
jp_plugin_dir: /home/asafdevc/public_html/wp-content/plugins/jetpack/
plan: free
protect_header: {"trusted_header":"HTTP_X_FORWARDED_FOR","segments":0,"reverse":false}
full_sync: {"started":"Sat, 04 Mar 2023 12:38:30 +0000","finished":"Sat, 04 Mar 2023 13:12:15 +0000","progress":{"comments":{"total":"1","sent":1,"finished":true,"last_sent":"1"},"constants":{"finished":true},"functions":{"finished":true},"options":{"finished":true},"posts":{"total":"88","sent":88,"finished":true,"last_sent":"1"},"term_relationships":{"total":"5","sent":5,"finished":true,"last_sent":{"object_id":"1","term_taxonomy_id":"1"}},"terms":{"total":"3","sent":3,"finished":true,"last_sent":"1"},"themes":{"finished":true},"updates":{"finished":true},"users":{"total":"1","sent":1,"finished":true,"last_sent":"1"}},"config":{"comments":1,"constants":1,"functions":1,"options":1,"posts":1,"term_relationships":1,"terms":1,"themes":1,"updates":1,"users":1}}
sync_size: undefined
sync_lag: 0 seconds
full_sync_size: undefined
full_sync_lag: 0 seconds
idc_urls: {"home":"https://koritsu.biz","siteurl":"https://koritsu.biz","WP_HOME":"","WP_SITEURL":""}
idc_error_option: false
idc_optin: true
cxn_tests: All Pass.

google-site-kit

version: 1.96.0
php_version: 8.0.28
wp_version: 6.1.1
reference_url: https://koritsu.biz
amp_mode: no
site_status: connected-site
user_status: authenticated
verification_status: verified-file
connected_user_count: 1
active_modules: site-verification, search-console, analytics, analytics-4, pagespeed-insights
recoverable_modules: none
required_scopes:
openid: ✅
https://www.googleapis.com/auth/userinfo.profile: ✅
https://www.googleapis.com/auth/userinfo.email: ✅
https://www.googleapis.com/auth/siteverification: ✅
https://www.googleapis.com/auth/webmasters: ✅
https://www.googleapis.com/auth/analytics.readonly: ✅
capabilities:
googlesitekit_authenticate: ✅
googlesitekit_setup: ✅
googlesitekit_view_posts_insights: ✅
googlesitekit_view_dashboard: ✅
googlesitekit_manage_options: ✅
googlesitekit_update_plugins: ✅
googlesitekit_view_splash: ✅
googlesitekit_view_authenticated_dashboard: ✅
googlesitekit_view_wp_dashboard_widget: ✅
googlesitekit_view_admin_bar_menu: ✅
googlesitekit_view_shared_dashboard: ⭕
googlesitekit_read_shared_module_data::["search-console"]: ⭕
googlesitekit_read_shared_module_data::["analytics"]: ⭕
googlesitekit_read_shared_module_data::["pagespeed-insights"]: ⭕
googlesitekit_manage_module_sharing_options::["search-console"]: ✅
googlesitekit_manage_module_sharing_options::["analytics"]: ✅
googlesitekit_manage_module_sharing_options::["pagespeed-insights"]: ✅
googlesitekit_delegate_module_sharing_management::["search-console"]: ✅
googlesitekit_delegate_module_sharing_management::["analytics"]: ✅
googlesitekit_delegate_module_sharing_management::["pagespeed-insights"]: ⭕
enabled_features:
adsenseSetupV2: ✅
dashboardSharing: ✅
ga4ActivationBanner: ⭕
ga4Reporting: ⭕
gm3Components: ⭕
gteSupport: ⭕
userInput: ⭕
search-console_shared_roles: none
search-console_management: owner
analytics_shared_roles: none
analytics_management: owner
pagespeed-insights_shared_roles: none
pagespeed-insights_management: all_admins
search_console_property: https://koritsu.biz/
analytics_account_id: 2591•••••
analytics_property_id: UA-2591•••••••
analytics_profile_id: 2858•••••
analytics_use_snippet: yes
analytics_4_property_id: 3565542••
analytics_4_web_data_stream_id: 4678••••••
analytics_4_measurement_id: G-H2••••••••
analytics_4_use_snippet: yes

`

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

[t-hamano]

@asafm7

Tahnks for the report. As far as I have tested with WordPress 6.2, I have not been able to reproduce this. If my testing procedure is incorrect, please let me know.

In the Single template, the width and height of the Post Featured block can be changed:

---

On the front end, The figure tag, which is the root of the block, has the configured width and height styles applied. The img element also has the width and height attributes correctly rendered:

[asafm7]

Thanks @t-hamano

Things seem to have changed with 6.2. Although it is still different on my side, it might be due to Jetpack or a caching plugin. I will do some testing soon.

In the meantime, I wanted to mention that in the screenshot you sent the figure width and height (400 and 200) don't match the img width and height (1023 and 765), which also don't match the values set in the editor - shouldn't them be the same?

Thanks,
Asaf

[t-hamano]

Things seem to have changed with 6.2. Although it is still different on my side, it might be due to Jetpack or a caching plugin. I will do some testing soon.

I think It's a good idea to stop all plugins first.

In the meantime, I wanted to mention that in the screenshot you sent the figure width and height (400 and 200) don't match the img width and height (1023 and 765), which also don't match the values set in the editor - shouldn't them be the same?

The width and height attributes of the img element indicate the original size of the image, not the value set by the control. It will actually be rendered at the size of the figure element (which you set in the block sidebar).

[asafm7]

Thank you.

The thing is Jetpack has the ability to resize the image before it is served, saving bandwidth and time (and the environment?).

It is doing it by looking at the img element’s width and height attributes. So, if these aren't set to the needed values - there is no gain here. It feels like a waste.

https://jetpack.com/support/site-accelerator/#:~:text=It%20looks%20at%20the%20img%20element%E2%80%99s%20width%20and%20height%20attributes

[asafm7]

@t-hamano any thoughts regarding my last message?

[t-hamano]

The Post Featured Image block has a SCALE control to adjust how the area allocated by width and height, or aspect ratio, is filled:

Therefore, the width and height of the figure and img elements don't necessarily match. I believe this is the reason why we do not apply width and height directly to the image element.

I don't know about Jetpack's Site Accelerator, but there is a possibility to filter the contents of the rendered block with the render_block hook and get the style (height and width) specified in the figure tag with the WP_HTML_Tag_Processor class.

I don't know about Jetpack's Site Accelerator, but how to determine the image size according to the aspect ratio and scale control settings is an issue that should be considered on the Jetpack side.

How about submitting an issue in the Jetpack GitHub repository?

[asafm7]

Thanks @t-hamano .

The SCALE and the object-fit don't matter here I believe, the actual size of the <img> tag on the page stays the same.

Anyway, it isn't just Jetpack. Cloudinary are doing the same for example. The <img> width and height are the most obvious source when trying to get information on how an image should be rendered.

It isn't practical for these companies to take into account all possible HTML markups of all possible features of all existing plugins of course.

The <img> width and height are the only standard source of truth here. They should represent in the best possible way the actual size of the image on the page. This is what they were designed for.

The new WP_HTML_Tag_Processor is a good enough solution for me.

But on the other hand, the not technically inclined, or the ones who didn't notice this nuance, won't be able to fully benefit from tools such as Jetpack and Cloudinary.