Create-block package: External Project Template Custom prompts?

[eduwass]

What problem does this address?

When creating a new block or plugin using the @create-block package we are limited to a certain number of parameters that we are prompted, it would be awesome if we could add more to the list, based on our custom configuration.

See: https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/lib/prompts.js

If this is already possible and I'm missing something, please let me know!

What is your proposed solution?

In this file: https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/lib/templates.js#L220

There is a getDefaultValues and getPrompts, maybe when someone defines params DefaultValues that are not predefined, we still prompt for them so they are later available in mustache when scaffolding the block?

[gziolo]

@eduwass, great thinking. That has crossed my mind a few times to allow defining custom prompts in external templates. I'd be more than happy to see a proof of concept for how that would work best from the perspective of someone willing to offer additional customizations for the tool.

[eduwass]

Thanks @gziolo appreciate it, if I have some free time from work to put aside into this I'll look into it.

[ryanwelcher]

+1 to this idea. These additional prompts could be defined in the variants for the template being used. @eduwass do you have an example of a field that you'd want to add?

[eduwass]

Hi @ryanwelcher

So I opened this a long time ago, but since you pinged me here and I had some time I've played around with the idea today in a POC.

You can see the fork here.

Quick Demo

I think this contains a couple of examples of how I'd envision this working:

000445.mp4

Heres the code for: my-template/index.js

/**
 * Dependencies
 */
const { join } = require("path");

module.exports = {
    defaultValues: {
        title: "My Template",
        description: "My Template Description",
        icon: "admin-post",
        // Default values for custom prompts
        analyticsId: 'UA-11111-2',
        colorScheme: 'default',
        enableAdvancedFeatures: false,
        customCssPrefix: 'default-prefix-',
    },
    customPrompts: {
        analyticsId: {
            type: 'input',
            name: 'analyticsId',
            message: 'Enter your Google Analytics ID (optional, format: UA-XXXXX-Y):',
            validate(input) {
                if (!input) return true; // Optional
                if (!/^UA-\d+-\d+$/.test(input)) {
                    return 'Invalid Google Analytics ID format. Should be like UA-XXXXX-Y';
                }
                return true;
            }
        },
        colorScheme: {
            type: 'list',
            name: 'colorScheme',
            message: 'Choose a color scheme for your block:',
            choices: [
                { name: 'Default Theme Colors', value: 'default' },
                { name: 'Custom Palette', value: 'custom' },
                { name: 'Monochrome', value: 'mono' }
            ],
            default: 'default'
        },
        enableAdvancedFeatures: {
            type: 'confirm',
            name: 'enableAdvancedFeatures',
            message: 'Would you like to enable advanced block features?',
            default: false
        },
        customCssPrefix: {
            type: 'input',
            name: 'customCssPrefix',
            message: 'Enter a custom CSS prefix for your block (optional):',
            validate(input) {
                if (!input) return true; // Optional
                if (!/^[a-z][a-z0-9-]*$/.test(input)) {
                    return 'CSS prefix must start with a letter and contain only lowercase letters, numbers, and hyphens';
                }
                return true;
            },
            filter(input) {
                return input.toLowerCase();
            }
        }
    },
    // Make sure template files are found
    pluginTemplatesPath: join(__dirname, 'files', 'plugin'),
    blockTemplatesPath: join(__dirname, 'files', 'block'),
};

So far...

• Successfully got the prompts working and displaying in the CLI interface
• Values populating into the .mustache template files

This is still barebones but just tried to get a working proof-of-concept as a starting point.

Open Questions/Challenges

Several areas still need investigation and testing:

1. blockAnswers vs pluginAnswers handling
2. How variants should be properly handled
3. Interactive mode behavior when no slug is provided

What do you think? Any thoughts on the above points?

Thanks!

[ryanwelcher]

This is great start! I'd open a PR based on your fork and we can go from there.

[eduwass]

@ryanwelcher OK great, I just created the initial PR here: #67806