Support » Plugin: Bootstrap Blocks » Full Width Column Option

  • Resolved Behnam Nikkhah

    (@bnikkhah)


    I know that when you create a Row block it automatically creates a two-column layout out of the box, but it would be also be a good option to have a full-width layout, as well. It’s possible to create a container and put content inside of it, but it’s generally best practice to wrap containers with rows and columns (even if they are full width).

    I’m aware that we can create a full-width column using the Custom option in the Row block, but I find it’s pretty slow to create a full-width column this way.

    Is there a faster, more efficient way of creating a full-width column inside a Row block? If so, it can really help me build faster websites using Bootstrap 4 and this plugin.

    Thank you for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor tschortsch

    (@tschortsch)

    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!

    Plugin Contributor tschortsch

    (@tschortsch)

    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 2 months, 2 weeks 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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.