Image blocks relative url

[Johanwalter]

Description

Gutenberg does not handle image as relative URL but only as absolute URL

When creating a stagging websites, it has URL image from the prod website.
I have made a copy of prod website from server (copy files, copy database)
Image are https://wwwxxxx.com/wp-content/uploads/xxxx.jpg instead of /wp-content/uploads/xxxx.jpg
This happens on image block and also on Media & text block

Is there any way for Gutenberg to handle image URL as relative URL instead of absolute ?
This is crucial to have and should be normal way to handle image

@paaljoachim

Step-by-step reproduction instructions

1- create stagging website from prod website
2 - check URL in editor code

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[paaljoachim]

Initially posted here: https://wordpress.org/support/topic/image-blocks-relative-url/

Thank you for creating this issue @Johanwalter

I happen to also ask about this at the beginning of a core-media meeting on Slack.
https://wordpress.slack.com/archives/C02SX62S6/p1681312172132699

Some feedback during the meeting. The following is from @joedolson
In classic editing, I guess you could always edit the paths easily to make them all relative; but I think moving to relative also has problems.
I'm not sure that's something that we should change lightly.
It could be editor-specific; if it was a choice on each individual image.
Relative URLs can be difficult to maintain, though. Absolute paths are more predictable when doing search and replace.

@anthonyburchell
yeah I have often wanted relative urls, but also the predictability for absolute has been better in my experience

This also came up:
https://make.wordpress.org/core/handbook/contribute/design-decisions/#absolute-versus-relative-urls

Content is migratory. That is to say that the content, which is in the database, might not always be displayed within the context of "your site". Content can be displayed in a variety of places. For example, an RSS feed of your content can be pulled into Google Reader and displayed there. Or users can use feed readers of their own. Or the content can be pulled from your site using microformats and displayed somewhere else. A user will never know where the content is going to be. Therefore an absolute URL is necessary within that content to ensure that it always points to a specific point, regardless of where it's displayed.

Comment from Anthony.
This is a good call
Readers and headless implementations would struggle without absolute paths

Comment from Joe.
If it was an option, it would have to come with a big warning about everything that might break as a result...
Or it would need to be very context-sensitive, e.g. use relative here, absolute there, etc.

--

We will see what others say.

[Johanwalter]

Woocommerce handles relative images (for products and categories)
On a website with a shop online and content, there is a mix between relative and absolute images

[paaljoachim]

Here are some related trac tickets shared by Kathryn in the support issue

https://core.trac.wordpress.org/ticket/55135 (still open)

https://core.trac.wordpress.org/ticket/17048 (closed)

[m-muhsin]

I face the following issue when FSE is enabled for my theme (i.e. when there is a templates/index.html file in the current theme).
https://github.com/WordPress/gutenberg/assets/11702935/6f82ef8e-7e4b-477f-8864-1e53d4cea0eb

However, it goes away when FSE is disabled. It happens from Gutenberg v16 or so onwards only; it works fine when the plugin is disabled.

[m-muhsin]

@Johanwalter @paaljoachim @kathrynwp My issue looks specifically related to FSE/block themes because it works as expected if a /tempaltes/index.html file does not exist in the theme. Should I create a new issue, or are our issues related?

[paaljoachim]

I am not sure @m-muhsin
I will ping @ndiego and @carolinan as they might have some ideas.

[carolinan]

Thank you for the ping. This is a duplicate of #31815.

The solution right now as a theme developer is to place the image in a block pattern and use PHP to create the correct path.
The solution for a site editor who is adding images to templates and template parts is to export their theme using Create Block Theme plugin.
The theme export in the Site Editor does not handle images, but Create Block Theme does.
User-created patterns need to be exported from their own interface in the admin area, but as far as I know, image paths in these patterns need to be updated.

[m-muhsin]

Thanks so much, @carolinan!