Patterns: proposal for "download pattern" in context-menu for selection of blocks.

[Humanify-nl]

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:

• 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.

[annezazu]

Noting this as related to the overall effort to improve pattern management: WordPress/create-block-theme#287