Status of Bootstrap 5.3 support and $enable-cssgrid?

Hi @cantbelieveitsnotbutter,

We are planning on adding 5.3 very soon (hopefully before the end of the month). Looking at the $enable-cssgrid function it will require a few additional blocks to be created but should definitely possible. When we do the development for 5.3, we will be sure to include the additional blocks for you.

As mentioned, we’ll aim to get this sorted by the end of the month.

Thanks
Miles

Thanks, @areoimiles. Glad to hear it’s coming soon.

Does your plan for $enable-cssgrid allow it to be applied to existing row and column blocks? It would be ideal to be able to simply toggle between CSS Grid and Flexbox, and use the same UI (and perhaps include additional UI for CSS Grid if necessary), especially for sites which have extensive use of those blocks and wish to switch to CSS Grid, to obviate having to replace existing content with CSS-Grid-specific blocks.

Hi @cantbelieveitsnotbutter

Thank you for your patience on this one. We have just released an update which includes functionality for the CSS grid along with including the latest version of Bootstrap.

To use the new functionality, first you’ll need to select the correct Bootstrap version (5.3+). You can do this by logging into your WP site and clicking Bootstrap down the left hand side. The first option is Bootstrap Version, select the relevant one.

Then you need to turn on CSS Grid which you can do under Customize > Options > $enable-cssgrid. Check the box and recompile your Bootstrap.

The relevant classes will be added to the row and column blocks throughout your site. When you go to edit the blocks, if CSS grid is switched on you’ll have a few different options on each block to cover the different options available with CSS grid.

Hopefully, it works as you expected, but if you have any issues please don’t hesitate to get back in touch.

Thanks
Miles

Hi, @areoimiles. Thanks very much for this release!

A couple of things I’ve found so far when CSS Grid is enabled:

• For existing row blocks which haven’t been assigned a number of grid columns (which includes all row blocks created before this release), any column blocks not assigned a specific column width have their layout broken. For sites that extensively use this plugin this could be a serious issue, particularly for instances that use auto layout based on the default number of columns, and just add however many columns are desired to a given row and let Flexbox handle the rest.

Is it possible to add a Grid/Flexbox toggle to row blocks to allow for both Grid and Flexbox to exist side-by-side? One can imagine how in some cases, perhaps for site layout in a block theme or for certain custom content layouts, CSS Grid would be appropriate, while for an average content grid Flexbox might be more appropriate, and having both options available to the row block would be very powerful.

• An error results when setting a row’s grid columns setting back to “default” after having assigned it a number

Steps to reproduce:

1. Add a container block
2. Select its row block
3. For any breakpoint, change the grid columns number to anything besides “default”
4. Change the grid columns number back to “default”
5. Result: “This block has encountered an error and cannot be previewed.”

Thanks again for this release. It’s very exciting to have CSS Grid capability in this plugin!

Hi @cantbelieveitsnotbutter

I’ve just released an update (1.3.15) which fixes the issue you were having when setting grid columns back to default.

I’ve also added an additional option to the row block under Settings named ‘Is Flex’, if you check this option then you can force the row and child columns to use flexbox instead of grid on a case by case basis. This option is only available if you have CSS grid turned on. Hopefully, this gives you the flexibility you need.

Unfortunately, to your point about the layouts breaking when columns have not been set, this is a tricky one. The auto sizing feature of the CSS grid is different to flexbox. Where flexbox would stretch the column to fill the row, the CSS grid will set each child div to 1 column. This is the default Bootstrap functionality (see here https://getbootstrap.com/docs/5.1/layout/css-grid/#auto-columns) and I wouldn’t want to change how the default Bootstrap features work. However, I’m open to ideas if you have any suggestions on how to achieve what you need without changing the default Bootstrap grid.

Thanks
Miles

Hi, @areoimiles. Thanks for the update! The toggle is very useful.

For the layout breaking when CSS Grid is enabled, what do you think of adding to the plugin admin some sort of UI that activates a function which adds/removes the "is_flex":true property to/from existing row blocks?

Assuming this is a reasonable solution, I’m not sure of the best way to go about it, but here’s a proof of concept which uses preg_replace:

function set_areoi_rows_to_flex() {
	$args  = array(
		...
	);
	$posts = new WP_Query( $args );

	$posts_to_update = array();

	foreach ( $posts->posts as $p ) {
		$updates                 = array();
		$updates['ID']           = $p->ID;
		$updates['post_content'] = preg_replace( '/^(<!-- wp:areoi\/row(?!.*"is_flex":true).*)(} -->)$/m', '$1,"is_flex":true$2', $p->post_content );
		$posts_to_update[]       = $updates;
	}

	foreach ( $posts_to_update as $p ) {
		wp_update_post( $p );
	}
}

• This reply was modified 8 months ago by Butterfingers. Reason: Code in original comment was escaped

Hi @cantbelieveitsnotbutter,

Thanks for the suggestion. I’ll take a look into this as part of the next update and drop you a note when I have put a solution in place.

Thanks
Miles

Hi?@cantbelieveitsnotbutter,

I’ve just released a new version of the plugin. In the new version I have added a new option under ‘$enable-cssgrid’ named ‘Use flex as default on grids’. If you check this option the ‘Is Flex’ attribute will default to true, then in the cases you wish to use the CSS grid you can just toggle the ‘Is Flex’ attribute.

Hope this solves your problem.

Thanks
Miles

Hi, @areoimiles. Thanks very much for the ‘Use flex as default on grids’ option. That solves it perfectly.