Theme Integration Guide

Stackable should fit themes generally well, but here are a few things that you can do to ensure that Stackable blocks would fit your theme's content area.

Theme's Content Width

Some functionality in Stackable uses your theme's content width. To ensure the width is easily detected, make sure you define it in the theme's functions.php file:

global $content_width;
$content_width = 640;<br>

Block Background Widths

One of the unique features in Stackable are Block Backgrounds. When Block Backgrounds are turned on, the block will go full width and you can control the width of the content to be centered, wide and full.

The inner widths are assigned different class names and you can target them via CSS:

.ugb-inner-block--center {
    --block-max-width: 600px;
}
.ugb-inner-block--wide {
    --block-max-width: 1100px;
}
.ugb-inner-block--full {
    --block-max-width: 1400px;
}
<br>

Adding More Font Picker Entries

You can modify the options of the Stackable font picker control using the JavaScript filter below.

wp.domReady( () => {
	wp.hooks.addFilter( 'stackable.font-family-control.options', 'my-theme', options => {
	  // Add our theme font options
		if ( ! options.some( option => option.id === 'theme-font' ) ) {
			options.unshift(
				{
					id: 'theme-font',
					title: __( 'Theme Fonts', i18n ),
					options: [
						{ label: __( 'My Value', i18n ), value: 'My CSS font family' },
					],
				}
			)
		}
		return options
	} )
} )
<br>

The value parameter will be used in the CSS generated to style parts of Stackable blocks:

font-family: "My CSS font family", sans-serif;<br>

Disabling Google Font Enqueuing

Stackable automatically enqueues all detected Google Fonts in our blocks. If you want to opt to disable Google Font enqueuing, you can use this PHP snippet.

// Disable all Google Font enqueuing
add_filter( 'stackable_enqueue_font', '__return_false' );
<br>

You can also choose to disable enqueuing only for specific fonts.

// Disable Google Font enqueuing for these values only
add_filter( 'stackable_enqueue_font', function( $do_enqueue, $font_name ) {
	if ( $font_name === 'Roboto' ) {
		return false;
	}
	return $do_enqueue;
}, 10, 2 );
<br>