Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example code for a theme functions.php to enqueueing Gutenberg block CSS
<?php
/**
* Enqueue block editor CSS
*/
function jsforwpblocks_editor_scripts() {
// Make paths variables so we don't write em twice ;)
$editorStylePath = '/assets/css/blocks.editor.css';
// Enqueue optional editor only styles
wp_enqueue_style(
'jsforwp-blocks-editor-css',
get_stylesheet_directory_uri() . $editorStylePath,
['wp-blocks'],
filemtime( get_template_directory() . $editorStylePath )
);
}
// Hook scripts function into block editor hook
add_action( 'enqueue_block_editor_assets', 'jsforwpblocks_editor_scripts' );
/**
* Enqueue block editor CSS
*/
function jsforwpblocks_scripts() {
// Make paths variables so we don't write em twice ;)
$stylePath = '/assets/css/blocks.style.css';
$frontendStylePath = '/assets/css/blocks.frontend.css';
// Enqueue frontend and editor block styles
wp_enqueue_style(
'jsforwp-blocks-css',
get_stylesheet_directory_uri() . $stylePath,
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime( get_template_directory() . $stylePath )
);
// Enqueue frontend only CSS
if( !is_admin() ) {
wp_enqueue_style(
'jsforwp-blocks-frontend-css',
get_stylesheet_directory_uri() . $frontendStylePath,
[ 'wp-blocks', 'wp-element', 'wp-components', 'wp-i18n' ],
filemtime( get_template_directory() . $frontendStylePath )
);
}
}
// Hook scripts function into block editor hook
add_action( 'enqueue_block_assets', 'jsforwpblocks_scripts' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment