In Inspector Panel: Gutenslider ‘s custom made dropdown menus have CSS glitch

  • Reproduction:

    1. In the WordPress Block Editor select a Gutenslider.
    2. In the inspector panel, open one of its settings which use your custom dropdown menus, e.g. the section “Divider” or “Arrows”.
    3. Look at the custom dropdown menu.

    Rendering glitches with those custom made dropdown menus:

    • ? The chevron-down icon which is supposed to be near the right edge of the dropdown menu is shown in the full panel width. Seems the CSS/JS messed up.
    • ?? The dropdown-menus in the “Divider” recovers to it’s intended “look and feel” after some 1-2 clicks.
    • ? The dropdown-menus in the “Arrow section” are forever broken.

    Environment: Safari 16.5 on macOS 11.7.6

    Video Recordings of the glitches in the Inspector Panel:

    ?? Video of the broken dropdown menu in the “Arrows” section

    —

    ?? Video of the broken dropdown menu in the “Arrows” section
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Gutenberg Slider

    (@gutenbergslider)

    Can you check if the error persists for you in the latest version?

    Thread Starter abitofmind

    (@abitofmind)

    The video recording shows a glitch which occurred in Gutenslider 5.10.1.

    • As of now this is still shown as the newest version in the plugin repository.
    • So yes the situation is unchanged.

    Or have you pushed a new plugin version and it yet did not make it to the WP.org repo and the WordPress auto-update mechanism of my website? (which so far works very reliable for years now)

    UPDATE: Also note that I use WordPress 6.2.2 (newest) plus the Gutenberg plugin v15.9.1 (frozen updates, as some crucial feature was dropped and not yet re-introduced in v16).

    • This reply was modified 1 year, 4 months ago by abitofmind.
    Thread Starter abitofmind

    (@abitofmind)

    One more note: I observed that the glitch can go away temporarily, but never completely.

    To temporarily get the correct behavior:

    • Open the Inspector, open section “Arrows” or “Dividers”.
    • When opening the first time in your current editing session, it always shows broken: The selected shape is shown correct, but the custom-dropdown-menu-icon is shown hugely below.
    • Change from none to a concrete shape. Or from the current selected shape to another shape. Then the glitch sometimes goes away. But not always. I have no idea what makes the precondition or difference.
    • But as soon as you SAVE, leave the Block Editor, and later open a new Block Editor instance, the glitch is again here, when re-opening the inspector.

    Sometimes I also observe a semi-correct state:

    • After opening the inspector, for a split second you see the huge icon, but a split second later the layout reflows and the custom dropdown menu is shown as intended.
    • Interesting extra info which may help you to track this down:

      This only occurs in the Inspector section “Arrows” (which my sliders use indeed). But not in “Dividers” (which I never use, just clicked around for testing this bug, never persisted it).

      Maybe it has to do with whether you already have at least one slider which actively uses arrows/dividers on your currently edited page or the website as a whole.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘In Inspector Panel: Gutenslider ‘s custom made dropdown menus have CSS glitch’ is closed to new replies.