Hooks for how GenerateBlocks finds the blocks on a page, builds their CSS and prints it. On the front end, GenerateBlocks looks through the page content, collects each block’s CSS, and prints it inline in the document head.
For the design tokens and global CSS that GenerateBlocks Pro prints, see Global styles and design tokens.
Jump to
- Finding blocks
- Building the CSS
- Printing the CSS
- Container width and the editor
Finding blocks
generateblocks_do_content
GB Free
The generateblocks_do_content filter changes the content GenerateBlocks scans for blocks when it builds the page’s CSS. By default that is the current post’s content. Add the content of any other source, such as a template or a widget area, so its blocks get their CSS too.
Parameters: $content (string, block markup). Default: the current post’s content, when it has blocks.
add_filter( 'generateblocks_do_content', function( $content ) {
$banner = get_post( 123 ); // Replace 123 with the ID of your own post.
return $banner ? $content . $banner->post_content : $content;
} );Related: generateblocks_modify_block_data Guide: Style Selectors
generateblocks_modify_block_data
GB Free — GenerateBlocks Pro uses it to add its blocks.
The generateblocks_modify_block_data filter changes the list of blocks GenerateBlocks found in the content. The list is keyed by block short name, such as text or element, and each value is an array of the blocks’ attributes. A block that isn’t in the list doesn’t get its CSS built, so use this filter, together with generateblocks_dynamic_css_blocks, to add CSS support for a block of your own.
Parameters: $data (array keyed by block short name), $block (array, the parsed block). Default: the blocks found so far.
add_filter( 'generateblocks_modify_block_data', function( $data, $block ) {
if ( 'my-plugin/card' === ( $block['blockName'] ?? '' ) ) {
$data['my-card'][] = $block['attrs'] ?? [];
}
return $data;
}, 10, 2 );Related: generateblocks_dynamic_css_blocks Guide: Style Selectors
generateblocks_dynamic_css_blocks
GB Free — GenerateBlocks Pro uses it to add its blocks.
The generateblocks_dynamic_css_blocks filter changes which blocks GenerateBlocks builds CSS for. It maps a block short name to a class name. The class needs a static get_css( $attributes ) method, and extending GenerateBlocks_Block gives you that along with the block ID tracking.
Parameters: $blocks (array of short name => class name). Default: text, element, media, shape, query, looper, query-page-numbers and loop-item. With GenerateBlocks Pro, the accordion, tabs, navigation, menu, site header and carousel blocks are added, and the form blocks when forms are enabled.
add_filter( 'generateblocks_dynamic_css_blocks', function( $blocks ) {
$blocks['my-card'] = 'My_Plugin_Block_Card';
return $blocks;
} );Related: generateblocks_modify_block_data, generateblocks_block_css Guide: Style Selectors
generateblocks_process_block_css
GB Free
The generateblocks_process_block_css action fires for each block with a uniqueId that GenerateBlocks found on the page, just before it builds the block’s CSS. Use it to load assets only on pages that use a block.
Parameters: $args (array with block_short_name, attributes and current_filter). Default: none. It is an action.
add_action( 'generateblocks_process_block_css', function( $args ) {
if ( 'looper' === $args['block_short_name'] ) {
wp_enqueue_script( 'my-looper-enhancements' );
}
} );Related: generateblocks_dynamic_css_blocks Guide: Style Selectors
Building the CSS
generateblocks_block_css
GB Free — GenerateBlocks Pro also uses it.
The generateblocks_block_css filter changes the CSS of one block as it is built. By default the CSS is the block’s saved css attribute.
Parameters: $css (string), $args (array with attributes (the block’s attributes) and block_name (the block’s name, such as generateblocks/text)). Default: the block’s css attribute.
add_filter( 'generateblocks_block_css', function( $css, $args ) {
if ( 'generateblocks/text' === $args['block_name'] ) {
$css .= '.gb-text{overflow-wrap:anywhere;}';
}
return $css;
}, 10, 2 );Related: generateblocks_css_output Guide: Style Selectors
generateblocks_css_data
GB Free — since GenerateBlocks 1.6.
The generateblocks_css_data filter adds CSS to the grouped CSS data, which is printed in one pass. The CSS is grouped by screen size: main for all screens, then desktop, tablet, tablet_only and mobile, each wrapped in its media query when it is printed. The legacy blocks use it, and you can use it for CSS of your own. Add to the data with generateblocks_group_css_data(), which needs all five groups.
Parameters: $css_data (array, empty by default). Default: an empty array.
Each group maps a selector to an array of CSS declaration strings.
add_filter( 'generateblocks_css_data', function( $css_data ) {
return generateblocks_group_css_data(
$css_data,
[
'main' => [ '.my-banner' => [ 'color:#fff;' ] ],
'desktop' => [],
'tablet' => [],
'tablet_only' => [],
'mobile' => [ '.my-banner' => [ 'padding:10px;' ] ],
]
);
} );Related: generateblocks_media_query, generateblocks_css_output Guide: Style Selectors
generateblocks_media_query
GB Free
The generateblocks_media_query filter changes the media queries the grouped CSS data is wrapped in. It only affects CSS added through generateblocks_css_data, not the screen sizes you set in a block’s styles.
Parameters: $queries (array of name => media query). Default: desktop is (min-width: 1025px), desktop_tablet is (min-width: 768px), tablet_only is (max-width: 1024px) and (min-width: 768px), tablet is (max-width: 1024px) and mobile is (max-width: 767px).
add_filter( 'generateblocks_media_query', function( $queries ) {
$queries['mobile'] = '(max-width: 600px)';
return $queries;
} );Related: generateblocks_css_data Guide: Style Selectors
Printing the CSS
generateblocks_css_output
GB Free — since GenerateBlocks 0.1.
The generateblocks_css_output filter changes the final CSS string before it is printed. Each block’s CSS is added to this filter at priority 10 as the blocks are processed, so use a later priority, such as 20, if your callback should run after those additions.
Parameters: $css (string). Default: the compiled CSS for the blocks found on the page.
add_filter( 'generateblocks_css_output', function( $css ) {
return $css . ':root{--my-accent:#ff5500;}';
}, 20 );Related: generateblocks_dynamic_css_priority, generateblocks_block_css Guide: Style Selectors
generateblocks_do_inline_styles
GB Free — GenerateBlocks Pro uses it for forms and pattern previews.
The generateblocks_do_inline_styles filter makes GenerateBlocks print a block’s CSS in a <style> element next to the block, instead of adding it to the page’s CSS in the head. Use it when you render blocks outside the normal page flow, for example in an AJAX response or a REST preview, where the head has already been printed.
Parameters: $override (bool), $args (array with content (the block’s HTML) and data (the block’s data)). Default: false.
add_filter( 'generateblocks_do_inline_styles', '__return_true' );
$html = do_blocks( $block_markup );
remove_filter( 'generateblocks_do_inline_styles', '__return_true' );Related: generateblocks_css_output Guide: Style Selectors
generateblocks_dynamic_css_priority
GB Free — GenerateBlocks Pro also uses it.
The generateblocks_dynamic_css_priority filter sets the priority of the wp_enqueue_scripts callback that prints the page’s block CSS. A higher number prints it later.
Parameters: $priority (int). Default: 25.
add_filter( 'generateblocks_dynamic_css_priority', function( $priority ) {
return 100;
} );Related: generateblocks_css_output Guide: Style Selectors
Container width and the editor
generateblocks_global_container_width
GB Free — since GenerateBlocks 1.7.
The generateblocks_global_container_width filter changes the global container width value, which sets the --gb-container-width CSS variable and the editor’s default width.
Parameters: $width (string, a CSS length). Default: the GeneratePress Container width setting in pixels when GeneratePress is active, otherwise the GenerateBlocks container width setting in pixels.
add_filter( 'generateblocks_global_container_width', function( $width ) {
return '1200px';
} );Related: generateblocks_should_set_container_width Guide: Style Selectors
generateblocks_should_set_container_width
GB Free — since GenerateBlocks 2.5.
The generateblocks_should_set_container_width filter chooses whether GenerateBlocks sets the global container width. When it returns false, GenerateBlocks hides the setting and stops printing the --gb-container-width fallback, so another plugin can manage that variable itself, as GenerateBlocks Pro Design Tokens does. The saved setting isn’t changed.
Parameters: $should_set (bool). Default: true.
add_filter( 'generateblocks_should_set_container_width', '__return_false' );Related: generateblocks_global_container_width, generateblocks_design_token_prefix Guide: Style Selectors
generateblocks_enable_core_additional_css
GB Free — since GenerateBlocks 2.3.
The generateblocks_enable_core_additional_css filter chooses whether WordPress 7.0’s core Additional CSS field shows on GenerateBlocks blocks. It is hidden by default, because the blocks have their own CSS editing.
Parameters: $enabled (bool). Default: false.
add_filter( 'generateblocks_enable_core_additional_css', '__return_true' );Related: generateblocks_css_output Guide: Style Selectors