navigation-link: Detect and style current menu item when id attribute…

… not set #26

includes/navigation-link.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Overrides core/navigation-link
+ * Overrides core/navigation-link.
  *
  * @param $attributes
  * @param $content
@@ -9,6 +9,7 @@
  */
 function fizzie_render_block_core_navigation_link( $attributes, $content, $block ) {
     $attributes = fizzie_fiddle_nav_atts( $attributes );
+    $block->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;
+}

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;