Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify & standardize how to add custom blocks to the theme scaffold #62

Closed
fabiankaegy opened this issue Nov 16, 2021 · 4 comments · Fixed by #78
Closed

Simplify & standardize how to add custom blocks to the theme scaffold #62

fabiankaegy opened this issue Nov 16, 2021 · 4 comments · Fixed by #78
Assignees
Labels
enhancement New feature or request

Comments

@fabiankaegy
Copy link
Member

Is your enhancement related to a problem? Please describe.

Currently, the way to add a new block is rather cumbersome. You have to first create a new JS entry point in the package.json file like so:

{
  "10up-toolkit": {
    "entry": {
      "example-block": "./includes/blocks/example-block/index.js"
    }
  }
}

Next you have to require the PHP file like so:

require_once TENUP_THEME_BLOCK_DIR . '/example-block/register.php';

// Call block register functions for each block.
Example\register();

Describe the solution you'd like

I think both of these steps could be skipped if we are able to automatically create an entry point for every folder inside the blocks directory and also use autoloader to load all the PHP register.php files inside the individual block folders.

@fabiankaegy fabiankaegy added the enhancement New feature or request label Nov 16, 2021
@xavortm
Copy link
Member

xavortm commented Dec 20, 2021

I think this is relevant: 10up/10up-toolkit#28 - not sure where would be the best place to have it, by I think here in the wp-scaffold would make sense.

There is also a PR already open for this: 10up/10up-toolkit#29 which highlights an important issue: "The templates are managed in this repo and we'll need to keep them up to date as GB moves forward."

@fabiankaegy
Copy link
Member Author

I want to add some more thoughts to this as I think the flow for blocks can be greatly improved and streamlined. I have also opened up an accompanying issue on the 10up-tookit repository (10up/10up-toolkit#130) that would allow us to skip adding the scripts to the entrypoint of webpack and needing to register the files.

The next step then would be to streamline the PHP side of things to make that more straightforward.

Essentially I'd like to abstract the PHP registration of blocks completely from the developer so that all they have to do is create a folder containing a block.json file and if they want to use dynamic rendering they need to include a template.php file. The rest should be handled by the theme automatically. That means there needs to be some step happening that is looking for all folders containing block.json files and automatically registers these blocks using the register_block_type function. If the folder containing the block.json file also contains a template.php file the render_callback should be automatically added and load the template.php file.

Additionally, the render_callback should ensure that if a script or viewScript with the name of the block is registered that should be enqueued on the page when this block is loaded. This step already happens automatically for static blocks but PHP rendered blocks need to manually enqueue the already automatically registered script.

The end goal for the developer experience really is that in order to add a new block all you need to do is add a folder containing a block.json file that intern manages all the script dependencies of that block and a template.php file is the block should be rendered dynamically.

Once we are at that point it will also become much easier to follow through on the suggestion from @xavortm here of including a scaffolding command because that scaffolding command wouldn't even need to manipulate existing files but just add a new folder.

@fabiankaegy fabiankaegy self-assigned this Jan 21, 2022
@fabiankaegy fabiankaegy changed the title Improve ease of adding new blocks to a site Simplify & standardize how to add custom blocks to the theme scaffold Jan 21, 2022
@fabiankaegy
Copy link
Member Author

I've added an initial implementation of how this could work in #78. I am not certain that it is the most performant & efficient way of achieving the goal but it serves as a proof of concept for how this could be done.

@fabiankaegy
Copy link
Member Author

Once this task and its parter on the 10up-toolkit repo (10up/10up-toolkit#132) are done this here: WordPress/gutenberg#39049 is a really cool exploration into making it possible to use @wordpress/create-block to add a new block to an existing project. And since blocks will be completely self-contained by that point this can be a great efficiency helper.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
2 participants