This plugin adds Bootstrap components and layout options as Gutenberg blocks.
The following blocks are currently available:
- Container
- Grid (Row / Column)
- Button
- Documentation: https://github.com/liip/bootstrap-blocks-wordpress-plugin
- WordPress Plugin: https://wordpress.org/plugins/wp-bootstrap-blocks
- Changelog: https://github.com/liip/bootstrap-blocks-wordpress-plugin/releases
- Issue tracker: https://github.com/liip/bootstrap-blocks-wordpress-plugin/issues
Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this for yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it.
The easiest way to do this is to add the following to your theme's function.php
:
function mytheme_load_bootstrap() {
if ( is_admin() ) {
return;
}
wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1' );
wp_deregister_script( 'jquery' ); // Remove WP jQuery version
wp_enqueue_script( 'jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array(), '3.3.1', true );
wp_enqueue_script( 'popper.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array(), '1.14.7', true );
wp_enqueue_script( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array(), '4.3.1', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_load_bootstrap' );
All blocks are implemented as dynamic blocks. This makes it possible to overwrite the template of a block in your theme.
To overwrite a block template create a folder called wp-bootstrap-blocks/
in your theme directory.
You can copy the original template from wp-bootstrap-blocks/src/templates/<blockname>.php
as a starting point and adjust it to your needs.
Changes the default theme directory name (wp-bootstrap-blocks/
).
add_filter( 'wp_bootstrap_blocks_template_path', 'block-templates/' );
Possibility to overwrite the located template path before it gets loaded.
$located
(string) located file path.$template_name
(string) template name which was requested.$template_path
(string) path to template directory.$default_path
(string) default template directory path.
add_filter( 'wp_bootstrap_blocks_get_template', 'my_located_template', 10, 4 );
function my_located_template( $located, $template_name, $template_path, $default_path ) {
return 'mytheme/special-templates/block.php';
}
Possibility to overwrite the located template path.
$template
(string) located file path.$template_name
(string) template name which was requested.$template_path
(string) path to template directory.
add_filter( 'wp_bootstrap_blocks_locate_template', 'my_template_locater', 10, 3 );
function my_template_locater( $template, $template_name, $template_path ) {
return 'mytheme/special-templates/block.php';
}
Change classes of <blockname>.
$classes
(array) Classes which are added to the block template.$attributes
(array) Attributes of the block.
add_filter( 'wp_bootstrap_blocks_container_classes', 'my_custom_container_classes', 10, 2 );
function my_custom_container_classes( $classes, $attributes ) {
return [ 'my', 'custom', 'classes' ];
}
Modify default attributes of <blockname>.
$default_attributes
(array) Default attributes of block.
add_filter( 'wp_bootstrap_blocks_row_default_attributes', 'my_row_default_attributes', 10, 1 );
function my_row_default_attributes( $default_attributes ) {
$default_attributes['alignment'] = 'center';
return $default_attributes;
}
Possibility to disable enqueuing block assets.
$enqueue_block_assets
(boolean) Defines if block assets should be enqueued.
add_filter( 'wp_bootstrap_blocks_enqueue_block_assets', 'disable_enqueue_block_assets', 10, 1 );
function disable_enqueue_block_assets( $enqueue_block_assets ) {
// Disable enqueuing block assets
return false;
}
Modify available button styles.
function myButtonStyleOptions( styleOptions ) {
styleOptions.push( { label: 'My Option', value: 'my-option' } );
return styleOptions;
}
wp.hooks.addFilter( 'wpBootstrapBlocks.button.styleOptions', 'myplugin/wp-bootstrap-blocks/button/styleOptions', myButtonStyleOptions );
styleOptions
(array) Array with button style options
Enable/Disable fluid layout of container per default.
// Enable fluid layout of container by default
wp.hooks.addFilter( 'wpBootstrapBlocks.container.useFluidContainerPerDefault', 'myplugin/wp-bootstrap-blocks/container/useFluidContainerPerDefault', true );
useFluidContainerPerDefault
(boolean) Return true if fluid layout of containers should be enabled by default.
Modify margin options.
function myCustomMarginOptions( customMarginOptions ) {
customMarginOptions.push( { label: 'Margin huge', value: 'mb-8' } );
return customMarginOptions;
}
wp.hooks.addFilter( 'wpBootstrapBlocks.container.customMarginOptions', 'myplugin/wp-bootstrap-blocks/container/styleOptions', myCustomMarginOptions );
customMarginOptions
(array) Array margin options.
Define block templates.
function myRowTemplates( templates ) {
templates['1-3'] = {
label: '2 Columns (1:3)',
templateLock: 'all',
blocks: [
[
'wp-bootstrap-blocks/column',
{
sizeMd: 3,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 9,
},
],
],
};
return templates;
}
wp.hooks.addFilter( 'wpBootstrapBlocks.row.templates', 'myplugin/wp-bootstrap-blocks/row/templates', myRowTemplates );
templates
(object) List of template objects.
Each template has the following attributes:
label
(string) Name of templatetemplateLock
(string|false)false
: Columns can be added and removedall
: Columns can't be changed
blocks
(array) see: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-templates/#api- Name of block. (Only
wp-bootstrap-blocks/column
supported!) - Attributes of column
- Name of block. (Only
Enable/Disable custom option in row templates.
// Disable custom row template
wp.hooks.addFilter( 'wpBootstrapBlocks.row.enableCustomTemplate', 'myplugin/wp-bootstrap-blocks/row/enableCustomTemplate', false );
enableCustomTemplate
(boolean) Return true if custom row template should be enabled.
Modify available background colors for column block.
function myColumnBgColorOptions( bgColorOptions ) {
bgColorOptions.push({
name: 'brand',
color: '#6EA644',
});
return bgColorOptions;
}
wp.hooks.addFilter( 'wpBootstrapBlocks.column.bgColorOptions', 'myplugin/wp-bootstrap-blocks/column/bgColorOptions', myColumnBgColorOptions );
bgColorOptions
(array) Array of available background colors. Each element should be an object containing thename
of the color and thecolor
itself (see: https://github.com/WordPress/gutenberg/tree/master/packages/components/src/color-palette).
Modify available padding options for column block.
function myColumnPaddingOptions( paddingOptions ) {
paddingOptions.push( { label: 'Huge', value: 'p-8' } );
return paddingOptions;
}
wp.hooks.addFilter( 'wpBootstrapBlocks.column.paddingOptions', 'myplugin/wp-bootstrap-blocks/column/paddingOptions', myColumnPaddingOptions );
paddingOptions
(array) Array of padding options.
-
Clone this repository
-
Install composer dependencies
$ curl -s https://getcomposer.org/installer | php $ php composer.phar install $ vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs
-
Install Node dependencies
$ npm install
This project was bootstrapped with Create Guten Block.
- Use to compile and run the block in development mode.
- Watches for any changes and reports back any errors in your code.
- Use to build production code for your block inside
dist
folder. - Runs once and reports back the gzip file sizes of the produced code.
- Use to eject your plugin out of
create-guten-block
. - Provides all the configurations so you can customize the project as you want.
- It's a one-way street,
eject
and you have to maintain everything yourself. - You don't normally have to
eject
a project because by ejecting you lose the connection withcreate-guten-block
and from there onwards you have to update and maintain all the dependencies on your own.
To extract the labels and generate the languages/wp-bootstrap-blocks.pot
file run the following command:
$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
$ php wp-cli.phar i18n make-pot . languages/wp-bootstrap-blocks.pot