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

asafm7 commented 1 year ago

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

Edit the Single template (Full Site Editing)
Add Post Featured Image block
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 commented 1 year ago

@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:

editor

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:

frontend

asafm7 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@t-hamano any thoughts regarding my last message?

t-hamano commented 1 year ago

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

sidebar

Therefore, the width and height of the figure and imgelements 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 commented 1 year ago

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.

WordPress / gutenberg