• Resolved Daniel Sturm

    (@dsturm)


    As I’m looking into using this plugin for better menus in FSE, I ran into an issue: I set up Submenu & overlay text and Submenu & overlay background in the core/navigation block, but the Dropdown Menu block doesn’t use these settings when rendering. Is this intentional?

    Currently I’m using this, to change the classes:

    add_filter('block_type_metadata', function ($metadata) {
    if ($metadata['name'] !== 'ollie/mega-menu') {
    return $metadata;
    }

    $metadata['usesContext'] ??= [];
    $metadata['usesContext'][] = 'overlayBackgroundColor';
    $metadata['usesContext'][] = 'overlayTextColor';

    return $metadata;
    }, 10);

    add_filter('render_block_ollie/mega-menu', function ($block_content, $block, $instance) {
    $menu_bg_color = $instance->context['overlayBackgroundColor'] ?? '';
    $menu_text_color = $instance->context['overlayTextColor'] ?? '';

    $menu_classes = '';
    if ( $menu_bg_color ) {
    $menu_classes .= ' has-background has-' . esc_attr( $menu_bg_color ) . '-background-color';
    }
    if ( $menu_text_color ) {
    $menu_classes .= ' has-text-color has-' . esc_attr( $menu_text_color ) . '-color';
    }

    // Find the menu container div (having class 'wp-block-ollie-mega-menu__menu-container') and add the new classes
    $processor = new \WP_HTML_Tag_Processor( $block_content );
    if ( $processor->next_tag(['class_name' => 'wp-block-ollie-mega-menu__menu-container' ]) ) {
    $processor->add_class($menu_classes);
    $block_content = $processor->get_updated_html();
    unset($processor);
    }

    return $block_content;
    }, 10, 3);
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Mike McAlister

    (@mmcalister)

    Hi there,

    The Submenu & overlay text is used for the default WP dropdown menus. When you build menus with Menu Designer, the color of the dropdown is dictated by the pattern that you’ve built as the drop down. Be sure to watch the full video walkthrough, it will explain it a bit more.

    Thread Starter Daniel Sturm

    (@dsturm)

    Hi @mmcalister ,

    Thanks for your response and thanks for this plugin!

    I understand this is by design. However, since we already have those core attributes for submenus, wouldn’t it be beneficial to use those settings as a default until the dropdown pattern explicitly defines alternative styles?

    Best

    Plugin Author Mike McAlister

    (@mmcalister)

    It actually gets a little trickier than that. Core writes those styles to dropdowns on the fly, so there’s no way for me to easily tap into that submenu and overlay color. I’ll take another look though, maybe there’s a clever workaround.

    Thread Starter Daniel Sturm

    (@dsturm)

    Hej @mmcalister,

    hmm, the filters I used (see above) did the trick for me and add the corresponding classes to the div.wp-block-ollie-mega-menu__menu-container. This will set the background-color explictly on the container and this might not be wanted if you have more than one child (and rounded corners / shadow for example). But for me this would reduce redundant style settings.

    Thread Starter Daniel Sturm

    (@dsturm)

    @mmcalister Okay, one issue with my approach is that it can interfere when using mega menus and „core“ submenus simultaneously. So the background and color for mega menus are placed on top of the colors of the submenus, which can look not quite the way as intended. So either the classes should not be set on the outer container, but the menu blocks. Or one needs to use CSS to force background / color to be reset, when a menu block has a custom color set.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Dropdown menu block should follow `Submenu & overlay …` settings’ is closed to new replies.