• Resolved Peter Westerlund

    (@peter-westerlund)


    I’m trying to use wp-scripts for my theme which includes blocks too. Yes, I know blocks are recommended to create as plugins. I however watched the Developer Hours: Modern WordPress development with the wp-scripts package where they go through how you can use it for themes as well.

    I’m trying to copy some of the things I need from Justin Tadlock’s https://github.com/x3p0-dev/x3p0-ideas.

    I have got it to work that both blocks and css are optimized by the building process. But one thing that is very odd is that only build.json and render.php are created for the blocks. Why could that be?

    My package.json looks like this:

    {
      "name": "ptw",
      "version": "1.0.0",
      "description": "A theme",
      "main": "index.js",
      "dependencies": {
        "font-awesome": "^4.7.0",
        "jquery": "^3.7.1"
      },
      "devDependencies": {
        "@wordpress/scripts": "^27.4.0",
        "path": "^0.12.7",
        "webpack-remove-empty-scripts": "^1.0.4"
      },
      "scripts": {
        "start": "wp-scripts start",
        "build": "wp-scripts build"
      },
      "author": "Peter W",
      "license": "ISC"
    }
    

    And my webpack.config.js looks like this:

    // WordPress webpack config.
    const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
    const { getWebpackEntryPoints } = require( '@wordpress/scripts/utils/config' );
    
    // Plugins.
    const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
    
    // Utilities.
    const path = require( 'path' );
    
    // Add any a new entry point by extending the webpack config.
    module.exports = {
        ...defaultConfig,
        ...{
            entry: {
                ...getWebpackEntryPoints(),
                'css/site': path.resolve( process.cwd(), 'src/css', 'site.scss' ),
                'css/learning-mode': path.resolve( process.cwd(), 'src/css', 'learning-mode.scss' ),
            },
            plugins: [
                // Include WP's plugin config.
                ...defaultConfig.plugins,
    
                // Removes the empty .js files generated by webpack but
                // sets it after WP has generated its *.asset.php file.
                new RemoveEmptyScriptsPlugin( {
                    stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
                } )
            ]
        }
    };

    Folder structure:

    theme-root/
    ├── build/
    │   ├── blocks/
    │   │   └── ptw-sensei-button/
    │   │       ├── block.json
    │   │       └── render.php
    │   ├── css/
    │   ├── fonts/
    ├── includes/
    ├── languages/
    ├── src/
    │   ├── blocks/
    │   │   └── ptw-sensei-button/
    │   │       ├── block.json
    │   │       ├── edit.js
    │   │       ├── editor.scss
    │   │       ├── index.js
    │   │       ├── render.php
    │   │       ├── style.scss
    │   │       └── view.js
    │   ├── css/
    ├── vendor/
    ├── composer.json
    ├── composer.lock
    ├── functions.php
    ├── package.json
    ├── package-lock.json
    ├── theme.json
    ├── webpack.config.js
Viewing 4 replies - 1 through 4 (of 4 total)
  • Hey Peter, I was doing some exploration on how I could utilize the wp-scripts package to build my custom theme and to bundle the Gutenberg blocks within the theme as well. I had similar issue, only block.json was getting copied, and not the rest of the block files, what solved it for me was to use entry like this:

    entry: {
     	...defaultConfig.entry(),
    
    },

    Instead of using the getWebpackEntryPoints() function.
    Let me know if that worked for you 🙂

    Thread Starter Peter Westerlund

    (@peter-westerlund)

    Thank you, that worked! 🙂

    I too had the sample problem. It’s weird that …defaultConfig.entry(), worked when everywhere you are told use …getWebpackEntryPoints(), such as in this Github issue. If you don’t the cool automatic webpack globbing / searching for block.json files isn’t supposed to work any more. However, obviously some of us are finding the opposite to be the case. Very odd!

    • This reply was modified 2 years, 1 month ago by onetrev. Reason: Clarity

    @ioankoul Thank you, this solved it for us as well.

    • This reply was modified 1 year, 9 months ago by WPPlugz.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘wp-scripts only creates json and php files for blocks, missing index.js’ is closed to new replies.