1

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?

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.

  • 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 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 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 at 11:24
  • No. The Core block just creates divs with CSS classes that depend on the attributes. – WebElaine Jun 3 at 19:20
0

I believe WebElaine has correctly answered the question 'How can I copy the "Columns" block from the core Gutenberg blocks?'

Based on the follow-up discussion, Razvan, it sounds like you would like the ability to add n number of Bootstrap .col elements (inside of a .row inside a .container) as Wordpress blocks, probably using the "range" control from the native Wordpress Column block?

Assuming the Bootstrap framework is included in the front-end of your website (either through a theme or plugin) the next step is to make sure the Wordpress editor is saving Bootstrap-specific markup.

To do this you need to implement Bootstrap container, row, and column elements (y'know, the HTML) as individual blocks, each containing a single <InnerBlocks /> component. <InnerBlocks /> creates an area in a block where you can drop one or more child blocks.

Tip: To make it easier for editors to create valid/functional layouts, you can restrict which types of blocks can be nested inside of your dynamic blocks.

The Block Editor API also allows you to define a template for the block (including default child-blocks). Manipulating these templates based on the input from a range control (setting a columnCount attribute) might allow you to implement the range-controlled Column block functionality currently baked into the editor.

Here's the sample code from the InnerBlocks documentation to get you started:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/my-block', {
  // ...

  edit( { className } ) {
    return (
      <div className={ className }>
        <InnerBlocks />
      </div>
    );
  },

  save() {
    return (
      <div className={["container", className].join(" ")}>
        <InnerBlocks.Content />
      </div>
    );
  }
} );

After you have each Bootstrap-wrapped block saving in the correct format, the next step towards a viable Bootstrap-in-Wordpress editor solution is to make the layout (individual containers, rows, and columns) visible in the Wordpress editor.

Enqueuing styles and mirroring the markup from the save function should be straightforward if you are already making blocks, but overriding the default Wordpress editor styles requires patience.

If you need a working example or something to get you building right away, I wrote a plugin to solve this problem for myself -- with the intention of theming website's using Understrap as a starter-theme.

Feel free to review and do what you would like with the source code: https://gitlab.com/helpful.dev/advanced-bootstrap-blocks

This has also been published in the Wordpress plugin directory here, which is useful for testing but not (yet) recommended for using in your upcoming six-figure Wordpress project: https://wordpress.org/plugins/advanced-bootstrap-blocks

The current version of this plugin adds visual .container, .row, and .col blocks to the editor, with basic support for flex-box helper classes.

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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