Once you have activated All Bootstrap Blocks you will see a new menu item in your WP dashboard menu labelled Bootstrap. Within this section there 6 sub sections grouped in the same way as the Bootstrap documentation and variables.
Each time you update a setting in the Bootstrap section of WordPress, the Bootstrap CSS needs to be recompiled with the new data you have added in order for the changes to take affect on the front end. Recompiling the CSS can take a few seconds as there is quite a bit of processing to do. There may be occasions where you need to update settings across multiple pages and recompiling on each page is time consuming. To work around this there are two save options: Save Settings and Save & Recompile CSS.
If you ever make changes to settings and don’t see them applied on the front end, chances are you need to recompile the Bootstrap CSS.
When All Bootstrap Blocks is activated, by default we will automatically include a compiled version of both the Bootstrap CSS and JS on your front end. If you are adding All Bootstrap Blocks to an existing site you may already have your own configuration for Bootstrap, meaning you wouldn’t want to include another version of it. Within the Dashboard section you have the option to include or exclude both the CSS and JS by doing the following as well as specify where in the <head> section the CSS gets added (you may want to change this to stop Bootstrap styles overwriting your theme styles and global styles).
All Bootstrap Blocks updates the WordPress editor to match your front end styles. However, if you do not use the included CSS and JS functionality then the editor may not match what you see on the front end with your custom Bootstrap setup.
As standard WP comes with a number of blocks that we have also included (Buttons and Columns). When using the editor it may become confusing as to which block is which. We have made it easy to resolve this by excluding the default WP button and column blocks. You can do this by:
When you update options and save the changes this will recompile Bootstrap with the updated variables and automatically add it to your front end. With each compile a version number is saved which gets appended to the front end CSS to avoid caching issues. We have included all of the available Bootstrap variables for you to override. To update options follow these steps:
Different options allow different types of input, for example colours allow you to use a colour picker and fonts allow you to select from a list of fonts. Every option allows you to input a SASS variable (or any other value you wish to input). Under each option you will see a link that says Use SASS variable. If you click this link you will be presented with a text box where you can input your value. As mentioned some options provide the ability to use a user interface to input your values such as colours and fonts.
It’s important to note, we do not validate option values. You must check the values you enter and make sure they are valid. Non-valid entries will cause the compiling to fail.
When managing your options it’s beneficial to make use of the Bootstrap variables when setting options. For example if you want to make sure the $link-color variable always matches the $primary variable you can input $primary within the $link-color input. This will mean that if you decide to change the colour of $primary at any point it will also update all other options that reference it. This saves you having to go through every option if you decide to change colours or sizing etc.
Bootstrap includes a large number of variables and remembering all of them is a challenge. For each option we have included a search box labelled Populate with variable that includes all of the Bootstrap variables. To use this you can simply:
If you are using a theme.json file you will want to make sure that your Bootstrap settings and theme settings don’t conflict and when you change a setting in your theme.json you don’t need to go and make the same update on your Bootstrap settings. By adding a theme.json variable, your Bootstrap CSS will be automatically recompiled each time you change the values within your theme.json file.
We have implemented a quick search function that will fetch all of your theme settings and make them available for selection.
Sometimes you may have set a Bootstrap option to use a setting from your theme.json file, but the value set in your theme.json isn’t compatible with the expected value for the Bootstrap configuration. If this happens you will see an error notice at the top of your admin area similar to the below. If this happens your Bootstrap settings will not be recompiled until you update either the theme.json setting to be compatible or chnage the Bootstrap option to no longer use the theme.json setting.
When updating options you may find the need to go back to the original Bootstrap value. This could be because you have got an error or some other reason. Each option includes a link labelled Rest to Bootstrap default. When you click this link, the input will automatically be reverted to the original value that Bootstrap sets as default.
As previously mentioned, we do not validate the values you input into each option. This means you need to make sure that the values you add are suitable to be compiled via SASS. If you do input an invalid option an error message will be displayed in the bottom right of the screen. This message should give you a clue as to which value is causing an issue. When you get an error message, simply update the invalid value to a valid one and click Save Changes to resolve the issue.
$primary is not a valid value…