Skip to content

Re‐Using an Existing Block in Your Project

Jump to bottom
Tom Rhodes edited this page Aug 16, 2024 · 6 revisions

Introduction.

So you found an existing block you feel will work within the project you're currently working on? Great! You're actively reducing code duplication accross our many, many repos.

When re-using a block, you'll pull it into your project and will likely find you need styling tweaks, maybe some small functionality tweaks. This guide is designed to help you achieve that.

Setting up the Block in your Dev Environment.

Using the Block Directly.

To use a block directly, grab its latest release from the repo, and install the main asset ZIP file as a regular plugin. Activate that plugin and you have access to the block.

Cloning the Monorepo.

If you'd prefer to have access to the full monorepo to have a selection of blocks available, you'll need to follow a few steps:

  1. Clone monorepo into /plugins/
  2. Activate the WordPress.com Special Projects Blocks Monorepo Autoloader plugin.
  3. Run npm i and npm run build in whatever block plugin folder(s) you want to work with.
  4. That block plugin will be autoloaded in the background.

At this point you'll have your chosen blocks available to you in the editor.

Basic Block Re-Use.

On a basic level, if a block is a good fit for your project, you're likely only to be styling it for your project. The preferred method of this is to enqueue a block stylesheet from your theme. This ensures that the block styling within your project stays granular and is enqueued only when needed.

Advanced Block Re-Use.

It’s important to avoid modifying blocks in the monorepo unless absolutely necessary. In that case please contact an engineering lead to discuss your modification plans. If you’re importing an existing block into your project, and need to modify the blocks functionality, styling, or output, there’s a variety of hooks and filters available to do this.

Clone this wiki locally