search

10up / 10up-toolkit

Official 10up asset building toolkit.
114 stars 19 forks source link

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

Open marcoluzi opened 9 months ago

marcoluzi commented 9 months ago

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

nicholasio commented 7 months ago

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 commented 5 months ago

Hey @nicholasio @fabiankaegy

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