2

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?

Improve this question

1 Answer 1

Reset to default
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.com/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.

Improve this answer
4
  • Thank you for explanation. It's a good starting point. I would follow the tutorials but I couldn't find any about how the columns are created. Do you have knowledge about some?
    – Razvan Cuceu
    May 29, 2019 at 7:49
  • All of the blocks, including the Columns block, are built with JS. Basically, the JS contains attributes that hold all the block contents, an "edit" function that is used in the Editor, and a "save" function that converts everything to HTML that gets stored in the database. It's a lot different than previous WP coding such as shortcodes that used PHP, so you might want to start with create-guten-block or some other very simple block tutorials to get the hang of the basic JS structure, and then start reading the Core Columns block code so you'll have some context before diving in.
    – WebElaine
    May 29, 2019 at 13:25
  • I created lots of blocks with gutenberg, but I can't find how the columns are created. Is there a component like IconButton, TextControl, MediaUpload but for columns?
    – Razvan Cuceu
    Jun 3, 2019 at 11:24
  • No. The Core block just creates divs with CSS classes that depend on the attributes.
    – WebElaine
    Jun 3, 2019 at 19:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.