Blokk - WordPress Theme

A block-based starter theme for WordPress.

Basically a bare-bones theme to build off and create awesome themes with!

Created for WordPress 5.9+

Directory List

• _blokk: Blokk core theme files.
• _src: Source files such as SCSS, JS and JSON files.
  • js: Javascript files
  • scss: SCSS files
• assets: Images, compiled JS, etc
  • css: Stylesheets
  • js: Compiled JS files, block config and 'WP Sides' sidebars
• inc: Theme patterns and other included .php files
  • patterns: Custom patterns
• parts: Parts to use within your pages
• templates: Page templates

Enqueue stylesheets & scripts

Blokk uses a custom filter to enqueue files via a multidimensional array.
The filter can be found in the 'functions.php' file in the theme's root directory.

There are several parameters which you can use with each array item. They require either the 'file' or 'url' and 'type' to use.

Name	Description
file	Location of a local file to enqueue.
url	The URL of a file to enqueue.
type	Whether it's a stylesheet or a script file. It only accepts 'stylesheet' or 'script' as values.
footer **	To load the file at the bottom of the page.
version **	The version number of the file.
media **	Add a value to the 'media' attribute that can be used for the stylesheets.
deps **	Assign dependencies to the file. It has to be an array.

** = optional

add_filter('blokk-enqueued', function($enqueued){
    
    // The theme's main JS file
    $enqueued['theme'] = [
        'file' => 'assets/js/theme.min.js',
        'type' => 'script',
        'footer' => true
    ];

    return $enqueued;

})

Note: If you use 'google-fonts' or 'adobe-fonts' as an $enqueued key, it'll load the appropriate preload tags into the page as well.

Blokk specific actions and filters

Enable the rendering of the SVG filters supplied by theme.json

add_filter( 'blokk-enable-global-svg-filters', '__return_true' );

Custom page template post state messages

You can display messages for pages using specific page templates. It'll be next to the page's title link on the 'Edit' page.

add_filter('blokk-custom-template-post-states', function() {
    return [
        'page-no-title' => 'This page does not display the page title'
    ];
});