How can I copy the "Columns" block from the core Gutenberg blocks? I need to use bootstrap column grid on the front end, but I don't know how to replicate the "Columns" block. Where can I find it's source code?

How can I copy the "Columns" block from the core Gutenberg blocks? I need to use bootstrap column grid on the front end, but I don't know how to replicate the "Columns" block. Where can I find it's source code?

• block-editor

1 Answer 1

All of the WP 5.x Core blocks are in a file called block-library.js. However, because the blocks all require a build step, you won't be able to just copy the JS and start making edits. You'll need to have Node.js and NPM installed.

So, to get this all set up:

1. Go to the Node JS website and install Node, which will also install NPM.

2. From a command prompt (Terminal on MacOS, or Git Bash on Windows, or any other prompt of your choice), go to a directory where you want to download a copy of WP, and run git clone https://github/WordPress/wordpress-develop

3. cd wordpress-develop and run git checkout 5.0 to get to the 5.0 branch (or adjust to whichever branch you want to work from, perhaps 5.2).

4. From the same directory run npm install which will download all the dependencies.

5. You can now go into /wordpress-develop/node_modules/@wordpress/block-library/src/columns/column.js to view the source for the Columns block. I have personally found that the way Core blocks are registered is so abstracted and so different from the examples of registering your own block, though, that it's been easier to work from tutorials and build a completely new block rather than copy from Core.