Skip to content

Instantly share code, notes, and snippets.

@colorful-tones
Last active August 29, 2024 19:24
Show Gist options
  • Save colorful-tones/22da9a7f6a1f5867903e5eff826567e1 to your computer and use it in GitHub Desktop.
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)
/**
* 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' );
/**
* 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' );
@colorful-tones
Copy link
Author

colorful-tones commented Apr 18, 2024

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.

  1. Drop the code in functions.php
  2. Create assets/styles/navigation.css and
  3. Place only the CSS you want to override. You can source the Navigation block's SCSS here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/style.scss. Bring over only what you need and leave the rest to core.

Example CSS for navigation.css

@media (min-width:700px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		background-color: inherit;
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}
}

@media (min-width:700px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

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.

  1. Drop the code in functions-alternative-approach.php in your theme's functions.php
  2. Create assets/styles/core-navigation.css and
  3. Place only the CSS you want to override. You can source the Navigation block's SCSS here: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/style.scss. Bring over only what you need and leave the rest to core.

Example CSS for navigation.css

@media (min-width:700px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		background-color: inherit;
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}
}

@media (min-width:700px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment