core/image - Block Attribute missing width and height in <InnerBlocks />

[khoipro]

What problem does this address?

I create a new custom block that use <InnerBlocks /> to create a repeater item.

When I try to read metadata from attributes in function Save() {}, the core/image block seem missing width and height attribute if I don't edit any width/height parameter. It only visible in metadata if I change those params.

No edit any width/height param

Editing height

The width and height from image source could help to reduce web vitals score.

My example code:

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save(attributes) {
	const itemBlocks = attributes.innerBlocks ?? [];

       console.log(itemBlocks);

	return (
		<div { ...useBlockProps.save() }>
			{itemBlocks.length ? itemBlocks.map(itemBlock => {
				const imageBlockUrl = itemBlock.innerBlocks[0].attributes.url
				const imageBlockAlt = itemBlock.innerBlocks[0].attributes.alt ?? ''

				if (imageBlockUrl) {
					return <img src={imageBlockUrl} alt={imageBlockAlt} width="640" height="480" />
				}
			}) : ''}
		</div>
	);
}

What is your proposed solution?

Add missing width and height from given image when using with <InnerBlocks /> even if we don't edit width and/or height in block setting.

[khoipro]

Hi,

To ensure it works without CORS, I attached the screenshot when using the local image file.

[guarani]

I also ran into this problem when trying to get the width/height of an inner image block. Like you say, only when the user edits the image's dimensions do they appear in the image block's attributes.

I think the cause is unrelated to inner blocks, plain image blocks don't set their width/height attributes until their width/height values are edited by the user (either through the input boxes or by the user resizing the image using drag handles):

	Editor	Block HTML
Default size
Custom size

Also, I noticed

• Even if their original values are restored by the user, the width and height still remain available.
• Clicking the "100%" button also similarly causes width/height to be added to the inner image block's attributes.

Regarding the last point, I wonder why the "100%" button is not set by default. Also, I don't know if this is a bug or if the image block behaves this way intentionally.

[guarani]

I also want to link to #23244 which this issue may be a duplicate of.

[t-hamano]

Hi @khoipro,
As @guarani mentions, I think this problem is not limited to InnerBlocks, but is the same as #23244.
I would like to close this issue to focus the discussion on #23244.