Last active
August 29, 2024 19:24
-
-
Save colorful-tones/22da9a7f6a1f5867903e5eff826567e1 to your computer and use it in GitHub Desktop.
Override core/navigation block styles without using `!important` (see comment below for implementation details)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Enqueues custom block styles for the theme. | |
* | |
* This function scans the styles folder in the theme to locate block styles. | |
* It then enqueues each block style using the `wp_enqueue_block_style` function. | |
* | |
* @url https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/ | |
*/ | |
function devrel_enqueue_custom_block_styles() { | |
// Scan our styles folder to locate block styles. | |
$files = glob( get_template_directory() . '/assets/styles/*.css' ); | |
foreach ( $files as $file ) { | |
// Get the filename and core block name. | |
$filename = basename( $file, '.css' ); | |
$block_name = str_replace( 'core-', 'core/', $filename ); | |
// Place the file in the assets/styles folder. | |
// Example: assets/styles/core-navigation.css | |
wp_enqueue_block_style( | |
$block_name, | |
array( | |
'handle' => "devrel-block-{$filename}", | |
'src' => get_theme_file_uri( "assets/styles/{$filename}.css" ), | |
'path' => get_theme_file_path( "assets/styles/{$filename}.css" ), | |
) | |
); | |
} | |
} | |
add_action( 'init', 'devrel_enqueue_custom_block_styles' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Enqueues custom block styles for the theme. | |
* | |
* This function loads additional block styles for specific blocks defined in the $styled_blocks array. | |
* It uses the wp_enqueue_block_style() function to enqueue the styles. | |
* | |
* @url https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/ | |
*/ | |
function devrel_enqueue_custom_block_styles() { | |
/* | |
* Load additional block styles. | |
*/ | |
$styled_blocks = array( 'navigation' ); | |
// Example: assets/styles/navigation.css. | |
foreach ( $styled_blocks as $block_name ) { | |
$args = array( | |
'handle' => "devrel-$block_name", | |
'src' => get_theme_file_uri( "assets/styles/$block_name.css" ), | |
); | |
wp_enqueue_block_style( "core/$block_name", $args ); | |
} | |
} | |
add_action( 'after_setup_theme', 'devrel_enqueue_custom_block_styles' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How do I modify the breakpoint(s) for the Navigation block?
Approach #1 – Just need to override a single block
Use the
functions.php
example above if you're really keen on just overriding one block with some CSS.functions.php
assets/styles/navigation.css
andExample CSS for
navigation.css
Approach #2 – Need to override multiple core blocks
Use the
functions-alternative-approach.php
example above if you foresee needing to override some other core blocks in your theme, and you don't want to just override a single block.functions-alternative-approach.php
in your theme'sfunctions.php
assets/styles/core-navigation.css
andExample CSS for
navigation.css