Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks.
Bootstrap Gutenberg Blocks for WordPress. This plugin adds Bootstrap components and layout options as Gutenberg blocks.
The full documentation of this plugin can be found on GitHub: https://github.com/liip/bootstrap-blocks-wordpress-plugin#readme
Container
Options:
Row
Options:
column
blocks.column
blocks.column
blocks.Column
Options:
row
block.Button
Options:
This plugin supports Bootstrap v4 and v5.
The version can be selected in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION
constant in the wp-config.php
file:
define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );
define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );
Possible values right now are '4'
or '5'
. By default Bootstrap version 5 is selected.
The CSS grid (supported with Bootstrap >= 5.1.0) can be enabled in the plugin settings (Settings > Bootstrap Blocks) or by defining the WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID
constant in the wp-config.php
file:
eg. define( 'WP_BOOTSTRAP_BLOCKS_ENABLE_CSS_GRID', true );
When the CSS grid is enabled the row
and the column
blocks will use custom templates for the rendering process:
row-css.grid.php
column-css-grid.php
The support is still experimental since it’s also marked as experimental in the Bootstarp library. Please read the official Bootstrap documentation to get more information on how to use it.
Please be aware that this plugin does not include the Bootstrap library in your website. You need to do this by yourself. We decided not to include the library so that you can modify Bootstrap to your own needs before loading it.
You’ll find an example how to include it in your theme’s functions.php
in the documentation.
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.
wp-bootstrap-blocks
directory into the /wp-content/plugins/
directoryPlugins
menu in WordPressBootstrap Blocks
categoryThis plugin supports Bootstrap v4 and v5.
No. This plugin doesn’t load the Bootstrap library for you. You have to do this by yourself in your theme. Please read more about this in the documentation.
Please create a new GitHub issue and let us know: https://github.com/liip/bootstrap-blocks-wordpress-plugin/issues
color
attribute of the styleOptions
for the button block to bgColor
. Additionally added textColor
attribute to be able to change the text color of the button in the editor as well. If you are modifying the styleOptions
via the wpBootstrapBlocks.button.styleOptions
JavaScript filter please add the according colors to your style objects.IconButton
component (will be removed in WordPress 6.2).Starting with this version the plugin only supports WordPress versions >= 5.3.
This step was needed to be able to catch up with the current development practices and remove a lot of deprecations.
5.x
. Please check in the settings if your using the appropriate version of Bootstrap after updating to this release.NOTICE: Version 4.x of the plugin will be the last version to support WordPress versions lower than 5.3.
If you’re on a lower version of WordPress think about updating it if you still would like receive updates for this plugin.
color
attribute is missing in styleOptions
.style
attribute of the Button block to primary
. This shouldn’t be a breaking change since the template already added the btn-primary
class if no style
was selected.color
attribute to the styleOptions
to be able to display the buttons in the correct color in the editor. If you have changed the styleOptions
via the wpBootstrapBlocks.button.styleOptions
JavaScript filter please add the according colors to your style objects.<Blockname> (Bootstrap)
for better discoverability when searching for a block.wpBootstrapBlocks.row.verticalGuttersOptions
JavaScript filter to modify the options please check if the new option (gy-4
) doesn’t conflict with your custom options.wp-polyfill
dependency.This version adds (experimental) support for Bootstraps CSS grid. Please read the documentation for further information.
$enable-cssgrid: true
setting has to be enabled in your Bootstrap variables file.wpBootstrapBlocks.row.cssGridGuttersOptions
for CSS grid. Please read the documentation for further information.wp_bootstrap_blocks_row_css_grid_classes
, wp_bootstrap_blocks_row_css_grid_styles
, wp_bootstrap_blocks_column_css_grid_classes
, wp_bootstrap_blocks_column_css_grid_content_classes
. Please read the documentation for further information.column-css-grid.php
, row-css-grid.php
wp-editor
dependency in newer versions of WordPress to avoid deprecation notice in widget screen (WordPress >= 5.8).block_categories_all
filter instead of deprecated block_categories
to register custom block category.column
block from the block controls.centerContent
attribute of the column
block is deprecated. If enabled it will automatically be migrated to the new contentVerticalAlignment
attribute.column.php
wpBootstrapBlocks.row.enableCustomTemplate
filter) must be enabled (which is the default).jsonpFunction
name in webpack config to avoid conflict with other plugins built with @wordpress/scripts
. (Thanks CP-Antoine for the hint)button
block in new tab.rel
attribute of the button
blocks link.button.php
This version adds (experimental) support for Bootstrap 5! Please read the documentation for further information.
row
block (Bootstrap 5 only).wpBootstrapBlocks.row.horizontalGuttersOptions
, wpBootstrapBlocks.row.verticalGuttersOptions
. Please read the documentation for further information.column.php
, row.php
@wordpress
npm-packages instead of relying on the global wp
namespace during development.wp_bootstrap_blocks_column_default_attributes
filter (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin#wp_bootstrap_blocks_column_default_attributes). sizeXY
attributes have been defined as string
values instead of int
values in example. If you’re using this filter please check if you pass the values correctly. Passing string
values to int
attributes will stop working in WordPress 5.5.editorStackColumns
value to true
in the wp_bootstrap_blocks_row_default_attributes
PHP filter.@wordpress/scripts
package. Using multiple plugins which were built with the @wordpress/scripts
build
-script resulted in a JavaScript error.<div>
in column
template. This is a rather small change but it could break your current design (if it relies on this <div>
). Please verify that this isn’t the case before updating.column.php
This is a major update of the plugin. Please check if the mentioned breaking changes affect your code before updating to this version.
wpBootstrapBlocks.row.useOldObjectTemplateStructure
filter.wpBootstrapBlocks.container.useFluidContainerPerDefault
filter. Please use wp_bootstrap_blocks_container_default_attributes
filter instead.row
template. The alignfull
class now gets added directly to the row.wpBootstrapBlocks.container.customMarginOptions
filter to wpBootstrapBlocks.container.marginAfterOptions
.Fluid Breakpoint
option in the container block.centerContent
attribute of column block if background-color gets removed.container.php
, row.php
, column.php
, button.php
column.php
, row.php
wpBootstrapBlocks.row.useOldObjectTemplateStructure
filter. In v1.3.0 boolean value was inverted.In this release we changed the template structure for the row
block form object to array (see template update guide). With this change we try to move towards the new template structure which will be introduced by the InnerBlocks
template selector feature.
If you used the wpBootstrapBlocks.row.templates
filter to modify the existing row templates please update your template structure accordingly (see filter documentation). The old structure will still work but is deprecated.
As soon as you have updated your template structure you need to disable the old object template structure with the wpBootstrapBlocks.row.useOldObjectTemplateStructure
filter.
wp_bootstrap_blocks_enqueue_block_assets
to disable enqueuing block assets.button.php
, column.php
, row.php