block-content-to-react icon indicating copy to clipboard operation
block-content-to-react copied to clipboard

Unknown props should be passed as attributes to the container, or don't use a container at all

Open xiata opened this issue 4 years ago • 3 comments

Right now, SanityBlockContent handles the className attribute, but not, for example handle style attribute (very common attribute, surprised me className was accepted but not style). It's confusing that in cases of single nodes, <SanityBlockContent> does not render a container <div> element, but when multiple nodes it does, and when it does render a container, unknown attributes to <SanityBlockContent> are not passed along to the container to render them as attributes.

Please do one of the following:

  • Just render to a fragment and leave container-handling to the user. This is a breaking change, obviously, altering element nesting significantly.
  • Render a container if and with unknown attributes are passed along to <SanityBlockContent>. Breaking change in the sense that attributes that were specified but were ignored will no longer be ignored.

xiata avatar Jun 16 '20 19:06 xiata

There should be an option to render an array of fragments.

miracle2k avatar Jul 31 '20 16:07 miracle2k

I think render an array of fragments is the solution. you can wrap BlockContent in a container if you need to, but if you don't, then an array of fragments is the ideal solution. Specially for us using CSS in JS I now need to target the container instead of the children I'm expecting.

andrevenancio avatar Nov 16 '20 13:11 andrevenancio

Just ran into this and hopping in here to say this as well!

My use case was targeting all of the child elements with CSS styling - doing a full bleed layout using CSS Grid. But because there is a container div this interrupts my ability to use Grid on all of the child elements easily on the page.

ehowey avatar Aug 29 '21 13:08 ehowey

Closing this, as the new @portabletext/react library is the successor to this module. Please see https://github.com/portabletext/react-portabletext

rexxars avatar Jan 31 '23 01:01 rexxars