Introduce development mode for block editor styles

[helgatheviking]

When a block script is defined in the block.json and registered automatically via register_block_script_handle() the version is pulled from ​the script asset PHP file if it exists. This ensures that the cache is always busted when the file is updated.

Something similar should exist for register_block_style_handle as otherwise it's a total pain to develop editor styles. I just lost a few hours this morning wondering why my styles didn't update even though I am using the @wordpress/scripts package to recompile them on every change.

The answer was ultimately that the version is pulled from the block.json's "version" property which doesn't change while building.

Replacing this:

$version = ! $is_core_block && isset( $metadata['version'] ) ? $metadata['version'] : false;
$result  = wp_register_style(
	$style_handle_name,
	$style_uri,
	array(),
	$version
);

with this:

$block_version = ! $is_core_block && isset( $metadata['version'] ) ? $metadata['version'] : false;
$version = SCRIPT_DEBUG ? filemtime( $style_path_norm ) : $block_version;

$result  = wp_register_style(
	$style_handle_name,
	$style_uri,
	array(),
	$version
);

Should do the trick. The assets file is another option.

[abcd95]

Hi @helgatheviking, Thanks for bringing this up.

I agree that the lack of automatic cache busting during development is problematic on many levels, especially when actively making styling changes and not seeing them reflected.

I will follow up with a proper patch; let me know if it tests well for you.

[abcd95]

The change was first introduced in 56044 and mainly focused on performance improvements.

[helgatheviking]

@abcd95 that patch works great for me!

[gziolo]

That would be great to fix it. I think the logic should be unified between JS and CSS assets. Something like that should work best:

<?php
$default_version = SCRIPT_DEBUG ? time() : false; 
$block_version   = isset( $metadata['version'] ) ? $metadata['version'] : $default_version;
$script_version  = isset( $script_asset['version'] ) ? $script_asset['version'] : $block_version;       

This would cover all possible cases including where the block.json and script.asset.php don't contain tje version property. For styles, everything should look exactly the same but for the style asset when defined. However, it could be break down into two steps as today, reading style asset is not covered. The related issue is tracked in Gutenberg: ​https://github.com/WordPress/gutenberg/issues/56838.

[helgatheviking]

I wasn't sure if the script version updated if changes only happened to the scss. But if so, that sounds great to me.

[gziolo]

A version to adds the same changes for scripts and styles.

[gziolo]

After taking a closer look, I think what @abcd95 provided is the best way to go forward. I extended that for scripts and script modules. The logic covers the case when the asset file doesn't contain version which changes based on the file's content. In every other case when SCRIPT_DEBUG is enabled the version should be randomized on every page load to ensure it never gets served from the cache.

[abcd95]

Replying to gziolo:

After taking a closer look, I think what @abcd95 provided is the best way to go forward.

Thanks @gziolo for reviewing and @helgatheviking for testing the patch. I'm opening a PR to run and check the automated tests and making the review easier.

[jorbin]

In order to give this time for testing and to keep 6.8.1 focused on issues introduced during the 6.8 cycle or intentionally deferred at the end of the 6.8 cycle, I've moved this to 6.8.2