Butterfingers

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

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, @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!

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 @areoimiles,

Thanks very much for this update, and for all your work on this plugin!

Hi, @areoimiles. Looks like I spoke too soon. The original problem reported here has returned after the plugin update, which is due to$elements['pages']in functionget_the_contentbeing null.

However, it appears there’s a solution. The “More Information” section of the docs forget_the_contentspecifies that if the function is used outside of the loop (which it is in this case), that “you must inform the post you want to get the content from using the optional$postparameter”.

This small change to line 189 in class.areoi.styles addresses this:

$standard_blocks = ( $page === null ? array() : parse_blocks( get_the_content(null, false, $page) ) );

Please give this a try. Hopefully this solves it.

Hi, @areoimiles. Sorry for the delayed response to your last post re: testing the code. The change appears to work fine, so all is well on my end. Thanks very much for checking and for working so well with various users of this plugin!

@areoimiles , another thought is that it might be worth submitting a request to the WordPress repo to add null handling to line 321 in wp-includes/post-template.php. This probably wouldn’t be a quick solution or be guaranteed to be accepted, and so an interim solution is still needed, but it could possibly lead to being able to remove the null handling from class.areoi.styles.php.

Hi @areoimiles,

I just tested the change. Unfortunately, it reintroduces the original problem, which is that if $page is null, get_the_content() encounters a fatal error because line 321 in wp-includes/post-template.php doesn’t handle null.

Our of curiosity, what breaks in the current code? If it’s the global $page, would first checking whether $page is null solve it?

For example:

if ( null === $page ) {
	global $page;
	$standard_blocks = ( $page === null ? array() : parse_blocks( get_the_content() ) );
} else {
	try {
		$standard_blocks = parse_blocks( get_the_content() );
	} catch ( \Exception $ex ) {
		$standard_blocks = array();
	}
}

That example might benefit from some refactoring, but maybe it’s a step towards a solution.

Works great, @areoimiles! Thanks for the quick fix!

Thanks, @areoimiles, for the quick fix!

Fixed. Thanks very much for the quick turnaround!

Hi @areoimiles,

This is so excellent. It’s exactly what I was hoping you’d do.

I’ll “kick the tires” and let you know how it goes. Thanks so much.

@areoimiles , by the way, thanks so much for the quick response on this (however long it ends up taking to fix), and for your continued support for this plugin. This plugin is amazing.

It turns out the UI settings are properly compiled for 5.0.2, and it’s just 5.3.0 that’s got the problem, so maybe compile_scss() isn’t the problem.