Invalid DOM property `class`. Did you mean `className`?

  • Hey
    Just trying out this plugin for a project with a ton of icons. I’ve installed it on a fresh WordPress 6.0.2, on inserting the block in to the page I get an immediate console error:

    Warning: Invalid DOM propertyclass. Did you meanclassName?
    svg
    SVG@https://xxx/wp-includes/js/dist/primitives.js?ver=cadf5cfaabdb15c8c8fc440547afe919:253:11
    To@https://xxx/wp-content/plugins/icon-block/build/index.js?ver=4e94e149ff1e32dee417:1:196287
    fieldset
    div
    Placeholder@https://xxx/wp-includes/js/dist/components.js?ver=76c5a4c54d97b02824ed3d3b164c2811:69648:11
    Io@https://xxx/wp-content/plugins/icon-block/build/index.js?ver=4e94e149ff1e32dee417:2:5111
    div`
    etc etc

    Also, not sure if related to the above, but I can’t seem to bulk select the block (i.e. select the icon and another block, or drag hold cursor over page and select multiple blocks at once). For my use case, I would like to select the icon and a heading, then make it a group (rather than make a group, drag in the icon, drag in the heading). Unless there is another way you would suggest to orientate an icon next to a heading.

    Thank you

    • This topic was modified 2 years, 1 month ago by James Hunt.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter James Hunt

    (@bonkerz)

    Probably the “class” here – https://github.com/ndiego/icon-block/blob/70f42a7250bb0e3550cfeffdf21e9de0ebad1faf/src/placeholder.js#L42

    Once opening up the select icon modal, there’s also a few more errors in console

    Warning: Invalid DOM property stroke-width. Did you mean strokeWidth?
    Warning: Invalid DOM property fill-rule. Did you mean fillRule?
    Warning: Invalid DOM property clip-rule. Did you mean clipRule?

    Cheers

    Plugin Author Nick Diego

    (@ndiego)

    Hi James,

    Thanks for reaching out. Strangely, I am not able to replicate these errors on my end. I have tried Chrome and Safari using a fresh install of 6.0.2. That said, the placeholder class should definitely be className. ???♂?

    I will get this fixed in a minor release later today.

    Concerning the selection issue, I was able to replicate this when first selecting the Icon, holding shift, and then trying to select another block, such as a Heading. If you instead select the Heading first, hold shift, and then select the Icon, it works. Quite strange. I will look into this, but it might be related to a selection issue in the Editor itself. Thanks for catching this issue.

    As for placing an Icon next to a Heading, I personally always use a Row block. I also find the List View to be very helpful in block selection/manipulation. You can even multiselect and group blocks from there.

    Let me know if I can answer any additional questions.

    Best,
    Nick

    Thread Starter James Hunt

    (@bonkerz)

    Thanks for fast reply.

    For the errors, try when WordPress debug mode define( 'WP_DEBUG', true ); is turned on – without that they don’t show.

    For the selecting, still can’t get it to work (on Mac) (even fired a fresh install up on instawp.io and same there). But yes using the List View is a great workaround and does work, thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Invalid DOM property `class`. Did you mean `className`?’ is closed to new replies.