block and blockCSS filenames are overwritten if useBlockAssets is set to true

[marcoluzi]

Describe your question

Not sure if this is a bug or a feature. I'm trying to implement the [contenthash] into the generated file names. To do that I am using the following settings in the package.json:

"filenames": {
	"js": "js/[name].[contenthash].js",
	"jsChunk": "js/[name].[contenthash].chunk.js",
	"css": "css/[name].[contenthash].css",
	"block": "js/blocks/[name]/editor.[contenthash].js",
	"blockCSS": "css/blocks/[name]/editor.[contenthash].css"
}

This works great for normal scripts and styles, but I do have block specific styles and scripts in the folders assets/js/blocks and assets/scss/blocks. The files in these folders are bundled into dist/blocks, but the [contenthash] is not applied to the file name. If I do understand the code correctly, this happens because of this section in the code, which changes the filenames, if useBlockAssets is set to true. The filename change happens here.

I could change the folder names from blocks to something else, but I would like to keep the folder structure and naming convention.

My goal is to have the /assets/js/blocks/[name].js files to be bundled into /dist/blocks/[name].[contenthash].js or /dist/js/[name].[contenthash].js or something like that. The same applies to the scss files. How could i achieve this?

package.json:

"10up-toolkit": {
		"useBlockAssets": true,
		"entry": {
			"frontend": "./assets/js/frontend/frontend.js",
			"admin": "./assets/js/admin/admin.js",
			"shared": "./assets/js/shared/shared.js",
			"editor-style-overrides": "./assets/js/admin/editor-style-overrides.js",
			"fonts": "./assets/scss/shared/static/fonts.css",
			"block-accordion": "./assets/js/blocks/accordion.js",
			"block-styles-media-text": "./assets/scss/blocks/media-text.scss",
			"block-styles-hero-header": "./assets/scss/blocks/hero-header.scss",
			"block-styles-buttons": "./assets/scss/blocks/buttons.scss",
			"block-styles-cover": "./assets/scss/blocks/cover.scss",
			"block-styles-image-video": "./assets/scss/blocks/image-video.scss",
			"block-styles-image": "./assets/scss/blocks/image.scss",
			"block-styles-group": "./assets/scss/blocks/group.scss",
			"block-styles-gallery": "./assets/scss/blocks/gallery.scss",
			"block-styles-forms": "./assets/scss/blocks/forms.scss",
			"block-styles-table": "./assets/scss/blocks/table.scss"
		},
		"paths": {
			"blocksDir": "./blocks"
		},
		"filenames": {
			"js": "js/[name].[contenthash].js",
			"jsChunk": "js/[name].[contenthash].chunk.js",
			"css": "css/[name].[contenthash].css",
			"block": "js/blocks/[name]/editor.[contenthash].js",
			"blockCSS": "css/blocks/[name]/editor.[contenthash].css"
		}
	}

Currently generated dist:

dist/
├── blocks/
│   ├── gutenberg-block-1/
│   │   ├── block.json
│   │   ├── index.asset.php
│   │   ├── indes.js
│   │   └── markup.twig
│   ├── gutenberg-block-2/
│   │   └── ...
│   ├── block-accordion.asset.php
│   ├── block-accordion.css
│   ├── block-accordion.js
│   ├── block-styles-buttons.asset.php
│   ├── block-styles-buttons.css
│   ├── block-styles-cover.asset.php
│   ├── block-styles-cover.css
│   └── ...
├── css/
│   ├── frontend.9b0047613098cb7fcaa3.css
│   └── ...
└── js/
    ├── fonts.31d6cfe0d16ae931b73c.asset.php
    ├── fonts.31d6cfe0d16ae931b73c.js
    └── ...

And thanks for your awesome tool. :)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[nicholasio]

Yes you're right. I don't know if there was a particular reason we're overwriting those filenames. Also that code is also not great bc it mutates the parameter (which is then only used in another function - so it's very confusing).

cc @fabiankaegy Any thoughts on this? Do you think we could take into account the paths defined in the config for when useBlockAssets is true?

[marcoluzi]

Hey @nicholasio @fabiankaegy

Hope you are both doing well. Could I have an update on this issue?