Request: Support for single column option

[Brian Purkiss]

It'd be very nice to have an option of having a single column row.

This'll be useful for doing things like having an 8 col justified center setup. Or a full with section with a background color - things like that.

[Jürg Hunziker]

Hi @brianpurkiss
You can already do this by using the wpBootstrapBlocks.row.templates JS filter and the wp_bootstrap_blocks_row_default_attributes PHP filter like this:

function customRowTemplates( templates ) {
	templates[ '1-66percent' ] = {
		label: '1 Column (2/3 width)',
		templateLock: 'all',
		blocks: [
			[
				'wp-bootstrap-blocks/column',
				{
					sizeMd: 8,
				},
			],
		],
	};
	return templates;
}
addFilter( 'wpBootstrapBlocks.row.templates', 'mytheme/wp-bootstrap-blocks/row/templates', customRowTemplates );

/**
 * Modify default attributes of row.
 *
 * @param array $row_default_attributes Default attributes of row block.
 *
 * @return array
 */
function custom_wp_bootstrap_blocks_row_default_attributes( $row_default_attributes ) {
	$row_default_attributes['template'] = '1-66percent';
	$row_default_attributes['alignment'] = 'center';
	return $row_default_attributes;
}
add_filter( 'wp_bootstrap_blocks_row_default_attributes', 'custom_wp_bootstrap_blocks_row_default_attributes' );

[Brian Purkiss]

Thanks @tschortsch!

Minor thing, it's wp.hooks.addFilter( 'wpBootstrapBlocks.row.templates', 'mytheme/wp-bootstrap-blocks/row/templates', customRowTemplates ); for the JS file. addFilter wasn't working for me, but wp.hooks.addFilter did the trick.

And for anyone else reading this digging into custom Gutenberg Blocks for the first time, here's a nice article on how you can enqueue the above mentioned JS file: https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/

Example:

function my_block_plugin_editor_scripts() {
    // Enqueue block editor JS
    wp_enqueue_script(
        'my-block-editor-js',
        file-path-goes-here',
        [ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ]
    );
}
// Hook the enqueue functions into the editor
add_action( 'enqueue_block_editor_assets', 'my_block_plugin_editor_scripts', 999 );