Contents
How it works
Bootstrap classes are rendered through the render_block_core/block-name filters and are applied only on the frontend. The backend appearance is different. Several filters are available to modify the classes.
Widgets
All blocks displaying a list utilize the List group component, which doesn’t support nested lists. Make sure to disable “Show hierarchy” in the list settings
Search
Categories
Archives
Latest Posts
- Post with Commentstext
- Sample Post 5Just another post to demonstrate the theme’s loop.
- Sample Post 4Just another post to demonstrate the theme’s loop.
- Sample Post 3Just another post to demonstrate the theme’s loop.
- Sample Post 1Just another post to demonstrate the theme’s loop.
Latest Comments
And another reply
And this a reply
This is a comment
Calendar
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
WooCommerce Categories
WooCommerce Product Filter
The product filter block is visible only on shop archive pages.
Card in sidebar
Blocks can be wrapped in a card by using Group blocks and applying classes in the block’s advanced settings. Take a look at the card block pattern examples as well.
Group class card
└── H2 class card-header h6
└── Group class card-body
└── Block widget<!-- wp:group {"metadata":{"name":"card"},"className":"card hide-wp-block-classes"} -->
<div class="wp-block-group card hide-wp-block-classes"><!-- wp:heading {"metadata":{"name":"card-header h6"},"className":"card-header h6"} -->
<h2 class="wp-block-heading card-header h6">Archives</h2>
<!-- /wp:heading -->
<!-- wp:group {"metadata":{"name":"card-body"},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"className":"card-body","layout":{"type":"default"}} -->
<div class="wp-block-group card-body"><!-- wp:archives {"displayAsDropdown":true,"showLabel":false,"showPostCounts":true} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->Using list-group-flush without card-body:
Group class card
└── H2 class card-header h6
└── Block widget Categories/Archives/... class list-group-flush<!-- wp:group {"metadata":{"name":"card"},"className":"card hide-wp-block-classes"} -->
<div class="wp-block-group card hide-wp-block-classes"><!-- wp:heading {"metadata":{"name":"card-header h6"},"className":"card-header h6"} -->
<h2 class="wp-block-heading card-header h6">Categories</h2>
<!-- /wp:heading -->
<!-- wp:categories {"showPostCounts":true,"className":"list-group-flush"} /--></div>
<!-- /wp:group -->Contents
Buttons
The Button block is limited to the primary style in filled and outlined variants. For more flexibility, take a look at the block patterns.
Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the bird |
Blockquote
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
Code
/**
* Add an alert message after primary open for 'page-sidebar-left' and 'archive' location.
*/
function add_alert_after_primary_open($location) {
if ($location == 'page-sidebar-left' || $location == 'archive') {
echo '<div class="alert alert-warning" role="alert">This is a warning alert for page-sidebar-left and archive!</div>';
}
}
add_action('bootscore_after_primary_open', 'add_alert_after_primary_open');Disable unsupported blocks
If a customer wants to edit content themselves, they will find (and use) many blocks and patterns in the library that are not supported and can quickly break the website design. In this case, it’s helpful to first disable all blocks, then enable only the supported blocks and patterns to prevent major design issues. Use a filter in child-theme’s functions.php to allow supported blocks only:
/**
* Disable unsupported blocks and patterns
*/
add_filter('bootscore/disable/unsupported/blocks', '__return_true');This will disable:
- All unsupported blocks (including those from third-party plugins)
- All patterns from wordpress.org and wordpress.com
- All patterns from WooCommerce
Re-enable more blocks
If more blocks are needed, you can re-enable specific ones. A complete list of available blocks can be found in the WordPress and WooCommerce block list reference.
/**
* Enable more blocks in child theme
*/
add_filter('allowed_block_types_all', function( $allowed_blocks, $editor_context ) {
// Additional blocks you want in child theme
$child_supported_blocks = [
'core/columns',
'core/column',
'woocommerce/single-product',
];
// Only modify if $allowed_blocks is already an array (it will be from parent filter)
if ( is_array( $allowed_blocks ) ) {
$allowed_blocks = array_merge( $allowed_blocks, $child_supported_blocks );
$allowed_blocks = array_unique( $allowed_blocks ); // remove duplicates just in case
}
return $allowed_blocks;
}, 20, 2); // Set priority 20 to run AFTER parent filter (which runs at 10)