Full Width Column Option

Hi @bnikkhah. I assume with full-width layout you mean a row which contains a single column which is set to use the full row size, right?

You’re able to create own row templates by using the wpBootstrapBlocks.row.templates JavaScript filter (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin#wpbootstrapblocksrowtemplates).

In your case it would be something like this:

function myRowTemplates( templates ) {
	templates.push( {
		name: 'full-width',
		title: 'Full-width (1 Column)',
		icon: 'layout',
		templateLock: 'all',
		template: [
			[
				'wp-bootstrap-blocks/column',
				{
					sizeMd: 12,
				},
			],
		],
	} );
	return templates;
}
wp.hooks.addFilter(
	'wpBootstrapBlocks.row.templates',
	'myplugin/wp-bootstrap-blocks/row/templates',
	myRowTemplates
);

You can even set this to be the default layout when a new row block is inserted by using the wp_bootstrap_blocks_row_default_attributes PHP-filter (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin#wp_bootstrap_blocks_row_default_attributes).

For your case:

add_filter( 'wp_bootstrap_blocks_row_default_attributes', 'my_row_default_attributes', 10, 1 );

function my_row_default_attributes( $default_attributes ) {
    $default_attributes['template'] = 'full-width'; // <- name of your defined template
    return $default_attributes;
}

Hope this helps!

@tschortsch thanks for your reply!

I copied and pasted the code above to my fuctions.php file, but I’m getting syntactical errors. Would you know how I can get this working? I’m really excited to try this out!

You need to define the JavaScript-Filter wpBootstrapBlocks.row.templates in a JavaScript file (path/to/block-filter.js in the example below) which you enqueue in your function.php file like this:

function my_block_editor_assets() {
	wp_enqueue_script(
		'my-block-editor-js',
		'path/to/block-filter.js',
		array( 'wp-hooks' ),
		'1.0.0',
		true // Enqueue the script in the footer.
	);
}

add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' );

• This reply was modified 4 years, 3 months ago by tschortsch.

@tschortsch thanks so much! It works now. Here is what I did to make it work for others who are curious to do this for themselves.

1. In my theme’s js folder, I made a file called myguten.js
2. This is where I placed the javascript code provided above by @tschortsch.
3. I enqueued the script inside the functions.php file and used enqueue_block_editor_assets hook by using this:

   function my_block_editor_assets() {
   	wp_enqueue_script(
   		'full-width',
   		get_stylesheet_directory_uri() . '/js/myguten.js',
   		array( 'wp-hooks' ),
   		'1.0.0',
   		true // Enqueue the script in the footer.
   	);
   }
   
   add_action( 'enqueue_block_editor_assets', 'my_block_editor_assets' );

4. I then made this my default by using this code in my functions.php file.

   add_filter( 'wp_bootstrap_blocks_row_default_attributes', 'my_row_default_attributes', 10, 1 );
   
   function my_row_default_attributes( $default_attributes ) {
       $default_attributes['template'] = 'full-width'; // <- name of your defined template
       return $default_attributes;
   }

I’m very excited to use this for future projects! Thank you, @tschortsch!