liip / bootstrap-blocks-wordpress-plugin

Bootstrap Gutenberg Blocks for WordPress
https://wordpress.org/plugins/wp-bootstrap-blocks/
279 stars 60 forks source link

No Column block exists #101

Closed rospencers closed 2 years ago

rospencers commented 2 years ago

I just did a fresh install of version 4.0.1, downloaded directly from https://wordpress.org/plugins/wp-bootstrap-blocks/

There is no Column block. Unfortunately, lack of a Column block makes this pretty much impossible to use.

Container, Row, and Button all exist. But no Column. If I search blocks for "bootstrap" and/or "bootstrap blocks," or if I browse all -- same result: no Column block.

This reproduces for us with multiple themes, including the WordPress core themes Twenty Twenty-Two and Twenty Twenty-One, as well as two different custom themes of our own -- all of which support Gutenberg with no difficulty.

We're running WordPress 5.9.2 with Nginx on Linux, with PHP 7.4.1.

We also tried this on a completely different server running Apache on Linux with PHP 7.4.27. In that case, we installed directly via the Plugins admin panel. Same result: no Column block, but the other three work fine.

Below is a screenshot showing 100% of all results when searching the available blocks in the Gutenberg page editor for the phrase "bootstrap," confirming the absence of a Column block. Searching "column" also has the same result -- only the default WordPress Columns block appears.

no-column-bootstrap-block

tschortsch commented 2 years ago

Hi @rospencers. Thanks for your feedback. Actually this behavior is intended. As the column block requires to be wrapped in a row block we defined it to be only insertable in a row block. So what you need to do is inserting a row block and inside this you will be able to add as many column blocks as you would like to. Hope this helps!

rospencers commented 2 years ago

@tschortsch Thanks for responding, But yes, I already understand that. That's precisely the flow I am using. And that is what I am reporting: inside a Row, there no Column block provided as an option for insertion.

Specifically:

  1. I add a Container
  2. Inside that I add a Row
  3. In the Row is a square with a plus sign and the tooltip prompt "Add a block."
  4. I click that in order to add a Column...but there is no Column block. (Every other block in the system is available...but there is definitely no Column.)
  5. If there is some other way of going about it, there is no other option, tool, prompt, or help info I can find indicating how one is to insert or create a Column.

Again, this behavior reproduces in more than one environment. Here is a screenshot showing what I've indicated with full context:

no-Column-within-Add-Block-within-Row

The only things in the Row's toolbar are:

tschortsch commented 2 years ago

I just tried to reproduce your issue and I think I found the underlying problem. The "row" block you're adding inside the container is the one from the WordPress core and not the one from the plugin itself. You can differentiate them by the icons.

row-blocks

Could you maybe try again by inserting the one from the plugin? I actually also didn't know that there was a core block added which is called row. Maybe we need to change the name of our block in the future to avoid this confusion.

rospencers commented 2 years ago

Aha! Yeah, I didn't know there was a core Row block, either. :-/

Okay, this is making way more sense now! There's some rather painful (to me) UX, but that's another topic.

So: I add a Container, and when I insert within that I search on "bootstrap" and there's your block, just as described.

I insert that Row, and it automatically inserts 2 Columns. Each Column now has Bootstrap-y options. In the Row's Change layout options in the sidebar, I can select Custom -- and that lets me delete the second column, or add X number of additional Columns. All of this makes sense to me -- thanks very much for the assist!

I know this is off-topic, but just fwiw: IMO, the painful part is that by default, Columns (including when added in Custom mode) are assigned explicitly defined size settings instead of just using default col (non-)definitions. This makes perfect sense when selecting one of the 1:2 or 2:1 options, of course -- but for generic authoring it forces me and my crew to zero everything out just to get to a normal default state. That's a lot of extra fiddling, especially if you're maintaining an enterprise scale website.

Anyway: here's screenshots of the right UI any who might come along later. :-)

Correct Row block UI, default state immediately after insertion:

row-redux

Individual Column size options panel in sidebar, when expanded:

row-redux-column-side-menu-size-options

tschortsch commented 2 years ago

To solve your problem you can define a custom columns template for the row block which fits your needs with the wpBootstrapBlocks.row.templates JavaScript filter. Afterwards you can override the default template of the row block with the wp_bootstrap_blocks_row_default_attributes PHP filter. Tell me if you need help with this.

rospencers commented 2 years ago

@tschortsch Marvelous. Thanks very much for the tip, and the kind offer to assist! If I get bogged down, I'll reach out separately.

Meanwhile, since this particular "bug" is resolved (as operator error), I'll close this. Thanks again!