Icon + Text positioning and Icon list bug

  • dansart

    (@dansart)


    20 hours, 29 minutes ago

    Hei
    Great plugin! I found a few little bugs while testing.
    1. The alignment for Icon + Text does not work correctly. If it is set to None (max 645px wide) it will span the whole width of the screen. But only if it is not in a group. For all the other blocks, this is not an issue.

    2. When pressing enter after writing the text of a Icon List Item, the focus goes to the next lines icon, which is fine, but it is not clear, that this item is in focus. After selecting the icon, It is not clear to me, how to enter the text without using the mouse to click in the text placeholder.

    3. The color picker and thickness slider do not work for custom svg. I guess this is a limitation of the custom svg itself, but at least the color can be changed by using the fill css property in the Additional CSS as a workaround.

    Best, Daniel

Viewing 1 replies (of 1 total)
  • Plugin Author Evan Buckiewicz

    (@evanworks)

    2 hours, 27 minutes ago

    Hi Daniel,

    Thank you so much for the feedback. It really helped improve the plug-in.

    Will reply point by point.

    1. Alignment for Icon + Text not working correctly: Can you please let me know what theme you are experiencing this issue with? I tested with a few themes including TT5 and unfortunately I have not been able to reproduce the issue you described here.

    2. Managing focus for icon list item after enter: this was excellent feedback, I have updated the behavior to align with that UX on version 1.1.0 and above. Please let me know if it resolves on your end after updating.

    3. Color and Thickness Options for Custom SVGS: Yes, as you intuited there is a lot to consider here.

    Custom SVGs can come in tons of different configurations. There are some steps that would improve the experience of some custom SVGs while breaking others.

    The custom block options for Icon Color and Icon Thickness support the use of currentColor being applied to either the fill or stroke of specific elements within the SVG. This is to avoid unintentional overrides or SVG pattern breaking.

    There are ways to configure the custom SVG markup to opt into the settings by applying fill="currentColor" for fills and stroke="
    currentColor" for outlines. This also lets you keep specific overrides for certain parts of the SVG (for example areas that should stay a different color than the base at all times).

    Here is a quick demo snippet to help illustrate:

    <!--- setting a root level fill here to currentColor makes all child elements by default opt into the block color setting -->
    <svg fill="currentColor" ... >

         <!--- This path element opts out of being filled and applies an outline instead, that uses currentColor to inherit block color settings. --> 
         <path fill="none" stroke="currentColor" d="..."></path>

      <!--- This path element applies a custom fill color that does not get impacted by the block settings. --> 
         <path fill="#34d8eb" d="..."></path>

    </svg>

    I’d be curious to test a custom SVG that you are working with, to see if there are any opportunities to fortify the system. Feel free to send a sample over in this thread.

    Thanks again for the feedback. To summarise the follow-ups quickly:

    1. Let me know what theme you are using where you encounter the Icon + Text alignment issue
    2. Let me know if the update to version 1.1.0 has solved the List Item enter focus management on your end.
    3. Feel free to send over a sample custom SVG you are working with to help me take a closer look at some pain points you are running into.

    Glad you are enjoying the plug-in so far. I would also greatly appreciate a review, if you find the quality merits it.

    All the best,
    Evan

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.