Support » Plugin: Atomic Blocks - Gutenberg Blocks Collection » Warning: Invalid DOM property `class`. Did you mean `className`?

  • Resolved rogerlos

    (@rogerlos)


    Atomic blocks is throwing some console warnings which would be cool to clean up when you folks get a chance.

    ‘class’ instead of ‘className’:

    Looking in blocks.build.js, there are 63 uses of wp.element.createElement("tag",{class:"foobar"}) when, according to the React console, it should be wp.element.createElement("tag",{className:"foobar"}).

    I suspect this is because whatever roll-up script does this isn’t smart enough to translate all of the uses of <JSX_tag class="foobar"> to be className in the properties array…which they might argue is correct since React uses <JSX_tag className="dork">.

    Arrays of choices without key set for each value:

    From blocks.build.js, here’s an example of something React gets cranky about:

    t=[{value:"left-aligned",label:s("Left Aligned")},{value:"right-aligned",label:s("Right Aligned")}]

    I’ve found unless you explicitly set keys for an array of options like that you’ll be told you’re doing it wrong. So:

    t=[{key:"a1",value:"left-aligned",label:s("Left Aligned")},{key:"a2",value:"right-aligned",label:s("Right Aligned")}]

    Honestly, I skip JSX altogether and just use config arrays…there are so many small exceptions to what I would assume the logical way to use “html” style tags, based on 30 years of using HTML tags, it’s just easier to pull back the curtain.

    Anyway, thanks for any attention you focus on the above.

Viewing 1 replies (of 1 total)
  • Plugin Author atomicblocks

    (@atomicblocks)

    Hi there,

    Thanks for the feedback. Where exactly are you seeing this issue being output? Is there a specific use case? In the editor or front end? A few more details would be helpful! Thanks in advance.

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