Customizing Stackable Using Code Snippets

To customize Stackable’s functionality in the Block Editor, you can use a third party plugin called Code Snippets. This plugin can help you run code PHP, JavaScript and CSS snippets on your site.

Once you’ve activated Code Snippets, you will see a Snippets tab on the sidebar of your WordPress dashboard. Just click Add New, and a new page will open wherein you can input the title of your snippet and the code itself.

This code can be your starting point in customizing Stackable. You can use this as your template:

<?php
add_action( 'admin_footer', function() {
    echo <<<JS
<script>
if ( wp ) {
    // Add custom JavaScript that customizes Stackable here.
}
</script>
JS;
} );
?

You can go ahead and modify this code according to what you wish to customize by adding the custom Javascript here.

For example, if you want to add your own custom font in Stackable’s font picker, here’s how you can do it:

add_action( 'admin_footer', function() {
    echo <<<JS
<script>
if ( wp ) {
    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',
                    options: [
                        { label: 'D-Din Condensed', value: 'd-din condensed' },
                    ],
                }
            )
        }
        return options
    } )
}
</script>
JS;
} );

Or if you want to remove all the System Fonts from Stackable's font picker, you can add this:

add_action( 'admin_footer', function() {
    echo <<<JS
<script>
if ( wp ) {
    // Remove all system fonts from the picker.
    wp.hooks.addFilter( 'stackable.font-family-control.options', 'my-theme', options => {
        return options.filter( ( { id } ) => id !== 'system-fonts' )
    } )
}
</script>
JS;
} );

You can enter this code in the PHP tag in the Code Snippets plugin. Make sure to also set the following settings:

1. Priority to 100 to ensure that all the necessary libraries have been loaded when your code runs.
2. Choose Only run in Administration area to make your code snippet run in the Block Editor only alongside Stackable.

Afterwards, just click Save Changes and Activate.

Now, if you navigate to your Posts or Pages, you will find the font D-Din Condensed in our Font Picker. 🎉