[wp-trac] [WordPress Trac] #61205: Add support for relative paths to theme assets in theme.json

[WordPress Trac]

#61205: Add support for relative paths to theme assets in theme.json
-----------------------------+------------------------------
 Reporter:  ramonopoly       |       Owner:  (none)
     Type:  feature request  |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  REST API         |     Version:
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:  rest-api
-----------------------------+------------------------------
Description changed by ramonopoly:

Old description:

> The end goal is to allow theme devs to add relative paths to assets in
> theme.json.
>
> For example,
>

> {{{
> {
>         "$schema": "https://schemas.wp.org/trunk/theme.json",
>         "version": 2,
>         "settings": {
>                 "appearanceTools": true
>         },
>         "styles": {
>                 "background": {
>                         "backgroundImage": {
>                                 "url": "img/untitled.png"
>                         }
>                 }
>         }
> }
> }}}
>

> This is advantageous in that themes can remain portable across WordPress
> instances.
>
> These paths must be resolved, preferably by
> [https://developer.wordpress.org/reference/functions/get_theme_file_uri/,
> get_theme_file_uri] so that child themes can inherit and or overwrite
> asset paths.
>
> The resolved, absolute paths would be used in the CSS output.
>
> To preserve the theme.json object across states, so that the resolved
> path is not saved to the WordPress database (for example as a user style
> or style revisions) the resolved path should only be used when outputting
> CSS.
>
> This is true for the frontend as well as the editor.
>
> In the frontend, file resolution could occur in
> `wp_get_global_stylesheet`.
>
> However in the editor, there is no equivalent to `get_theme_file_uri` in
> the clientside JS code.
>
> Therefore, to keep things performant in the editor, I'm thinking it would
> be useful to resolve the relative paths in PHP and send them to the
> frontend as part of the Global styles REST API controllers:
> `WP_REST_Global_Styles_Controller_Gutenberg` and
> `WP_REST_Global_Styles_Revisions_Controller`, via a public static method
> in `WP_Theme_JSON_Resolver` to handle the file resolution.
>

> This Gutenberg PR:
> [https://github.com/WordPress/gutenberg/pull/61561, Background image: add
> support for relative theme path URLs in top-level theme.json styles
> #61271]
>
> demonstrates a proof of concept.
>
> It would be helpful to get advice on that approach or alternative paths
> to reach the goal.
>
> Thank you!

New description:

 The end goal is to allow theme devs to add relative paths to assets in
 theme.json.

 For example,


 {{{
 {
         "$schema": "https://schemas.wp.org/trunk/theme.json",
         "version": 2,
         "settings": {
                 "appearanceTools": true
         },
         "styles": {
                 "background": {
                         "backgroundImage": {
                                 "url": "img/untitled.png"
                         }
                 }
         }
 }
 }}}


 This is advantageous in that themes can remain portable across WordPress
 instances.

 These paths must be resolved, preferably by
 [https://developer.wordpress.org/reference/functions/get_theme_file_uri/,
 get_theme_file_uri] so that child themes can inherit and or overwrite
 asset paths.

 The resolved, absolute paths would be used in the CSS output.

 To preserve the theme.json object across states, so that the resolved path
 is not saved to the WordPress database (for example as a user style or
 style revisions) the resolved path should only be used when outputting
 CSS.

 This is true for the frontend as well as the editor.

 In the frontend, file resolution could occur in
 `wp_get_global_stylesheet`.

 However in the editor, there is no equivalent to `get_theme_file_uri` in
 the clientside JS code.

 Therefore, to keep things performant in the editor, I'm thinking it would
 be useful to resolve the relative paths in PHP and send them to the
 frontend as part of the Global styles REST API controllers:
 `WP_REST_Global_Styles_Controller_Gutenberg` and
 `WP_REST_Global_Styles_Revisions_Controller`, via a public static method
 in `WP_Theme_JSON_Resolver` to handle the file resolution.


 This Gutenberg PR:
 [https://github.com/WordPress/gutenberg/pull/61561 Background image: add
 support for relative theme path URLs in top-level theme.json styles
 #61271]

 demonstrates a proof of concept.

 It would be helpful to get advice on that approach or alternative paths to
 reach the goal.

 Thank you!

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61205#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform