0

I would like to make some changes to the core columns block. I want to add more options like the ability to give each column a class which will let that column span multiple columns, among other things.

I know you can extend core blocks but from what I gather it probably makes more sense to just copy the core block and use it as a starting point to create a new one. So that is what I'm trying to do.

Looking at the Columns Block, it has 2 JS files. I copied those over into my custom-blocks plugin, changed dependencies around and it seemed to work, at least the main block didn't throw errors. But when I try to "link" up the allowed block code things go bad.

I don't know if it's how I have webpack setup or the path to the JS files is off, probably a combination of both.

For example, trying to change code that references the new allowed block, like const ALLOWED_BLOCKS = ['core/column'] to const ALLOWED_BLOCKS = ['./custom-column'] gives me a Cannot read property 'attributes' of undefined error when adding the new block.

Here is the directory setup for the plugin.

enter image description here

Here is part of my webpack config.

module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    mode: debug ? 'development' : 'production',
    entry: './blocks/src/blocks.js',
    output: {
        path: __dirname + '/blocks/dist/',
        filename: 'blocks.build.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /editor\.scss$/,
                exclude: /node_modules/,
                use: extractEditorSCSS.extract(scssConfig)
            },
            {
                test: /style\.scss$/,
                exclude: /node_modules/,
                use: extractBlockSCSS.extract(scssConfig)
            }
        ]
    },
    plugins: plugins
};

My block.js is essentially the same as the core column.js.

I am not sure what I am doing wrong so any help would be greatly appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.