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 1 year, 9 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.
- In my theme’s
js folder, I made a file called myguten.js
- This is where I placed the javascript code provided above by @tschortsch.
- 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' );
- 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!
