Patterns use absolute src urls. Deploying a new FSE theme with patterns made on a localhost server requires a search-replace in the code to change the paths to the live domain. This is really inconvenient.
As most know, there is a challenge in reading relative URL's from a HTML template (see explorations here: #31815, and this #20966). But the patterns engine now runs on PHP. To my understanding, this is possible because we can now properly parse blocks from a php file.
This proposal looks for a solution to make pattern creation (1) easier, and (2) solve the 'absolute url' problem.
Creating a pattern is currently done by: "copy all code, paste it in a php file in /patterns, add a file header". How about we automate this step?
What is your proposed solution?
When a selection of blocks is selected, a "download pattern" option should appear in the context menu.
Pressing this button should:
Create a file header (this might need a modal to ask for a name, category, etc.).
Convert the current pattern urls to a relative variant ( esc_url( get_theme_file_uri( 'assets/images/flora.png' ) )
Initiate a file download event where the pattern code gets served as a php file.
This should probably only be accessible for administrator user-role.
Why?
A big usability improvement. This would shave off a couple minutes for creating a new pattern.
It would allow the editor engine to modify the code 'under the hood' (such as the change from absolute -> relative paths).
It would save developers frustration when moving sites from local to production.
In my view of WordPress' future, patterns are the holy grail and will consume template-parts eventually.
Subsequent pro's:
A unique css class for each pattern (i.e. wp-pattern-{pattern-slug}) could be added.
A filter could be made to give dev's more control over pattern (-creation).
Patterns become more standalone, and the way they are generated is standardized.
What problem does this address?
Patterns use absolute src urls. Deploying a new FSE theme with patterns made on a localhost server requires a search-replace in the code to change the paths to the live domain. This is really inconvenient.
As most know, there is a challenge in reading relative URL's from a HTML template (see explorations here: #31815, and this #20966). But the patterns engine now runs on PHP. To my understanding, this is possible because we can now properly parse blocks from a php file.
This proposal looks for a solution to make pattern creation (1) easier, and (2) solve the 'absolute url' problem.
Creating a pattern is currently done by: "copy all code, paste it in a php file in
/patterns
, add a file header". How about we automate this step?What is your proposed solution?
When a selection of blocks is selected, a "download pattern" option should appear in the context menu.
Pressing this button should:
esc_url( get_theme_file_uri( 'assets/images/flora.png' )
)Why?
Subsequent pro's:
wp-pattern-{pattern-slug}
) could be added.