diff --git a/includes/navigation-link.php b/includes/navigation-link.php index f0ab3fc..bcc2b7e 100644 --- a/includes/navigation-link.php +++ b/includes/navigation-link.php @@ -1,6 +1,6 @@ context = fizzie_fiddle_block_context( $attributes, $block ); $html = gutenberg_render_block_core_navigation_link($attributes, $content, $block); return $html; } @@ -54,3 +55,27 @@ function fizzie_fiddle_nav_atts( $attributes ) { unset( $attributes['id'] ); return $attributes; } + +/** + * Fiddles the block context to set the current menu item's background color. + * + * fizzie_fiddle_nav_atts() changes the url attribute + * and also sets the className to include current-menu-item when relevant. + * gutenberg_render_block_core_navigation_link() no longer uses className from $attributes. + * But it does set the class attribute from the backgroundColor, which + * normally applies to the menu as a whole. + * + * Note: I'm not quite sure where Gutenberg does get its className from; but it does... + * and this can be applied as well. + * + * + * @param $attributes + * @param $block + * @return mixed + */ +function fizzie_fiddle_block_context( $attributes, $block ) { + if ( isset( $attributes[ 'className'] ) ) { + $block->context['backgroundColor'] = implode( ' ', $attributes['className'] ); + } + return $block->context; +} \ No newline at end of file diff --git a/style.css b/style.css index 829181a..36093e5 100644 --- a/style.css +++ b/style.css @@ -141,7 +141,7 @@ header { } .wp-block-navigation ul li { - padding-right: 4px; + padding-right: 2px; } .wp-block-navigation .wp-block-navigation-link__content, @@ -154,7 +154,8 @@ header { .wp-block-navigation .wp-block-navigation-link__label:hover, .wp-block-navigation .wp-block-navigation-item__label:hover, .wp-block-navigation-link.current-menu-item > a .wp-block-navigation-link__label, -.wp-block-navigation-link.current-menu-item > a .wp-block-navigation-item__label { +.wp-block-navigation-link.current-menu-item > a .wp-block-navigation-item__label, +.wp-block-navigation-link.has-current-menu-item-background-color > a .wp-block-navigation-item__label { color: #792b0c; } @@ -323,7 +324,9 @@ p.wp-block-site-tagline { .wp-block-navigation .wp-block-navigation-link__content:hover, .wp-block-navigation .wp-block-navigation-item__content:hover, -.wp-block-navigation .current-menu-item > a { +.wp-block-navigation .current-menu-item > a, +.wp-block-navigation .has-current-menu-item-background-color > a +{ background: #ffffff; border: 1px solid var( --wp--preset--color--woo-deep-purple, #baba54 ); margin: 0 auto;