We’re using Builder.io with a custom Next.js application and in trying to get links to both render the way we want styling wise, and to wrap all links with the next/link component (for routing/prefetching), I’m building a renderLink function to pass in to our BuilderComponents.
As part of working on this, I’m console.logging every link that gets passed into the renderLink function and this caused me to notice that if a link is included as part of a text block (i.e. NOT a separate linked block), it doesn’t seem to be getting passed to renderLink which means there’s no way for me to apply the logic and styling we want to those links.
Is this expected behavior, or is this an oversight? It seems like kind of a big deal to not have ALL links in the Builder content passed into renderLink, but it’s entirely possible I’m just missing something. TIA!
(EDIT: I can (and will) apply global CSS to the blocks using builder-text a and that solves the styling part, but it doesn’t solve the need to wrap with next/link.)
Hi Jason,
To confirm, you are referring to inline links inside of text block? If this is the case, I was able to verify that renderLink only gets applied to Link URLs added at the Builder block-level, and not inline links inside RTE. After speaking with the engineering team, this is actually expected behavior for now. I would be able to create a feature request for this, but as for now this would be considered expected behaviour.
Beyond that, any default styling from Builder can always be changed or overwritten within the Visual Editor itself, or you can customize styles in the Edit JS + CSS tab within the Data tab to add custom, targeted styles across your an entire content block. If you add a custom class to a component, you should still be able edit that component in the visual editor without issue or use the CSS editor to target that custom class for styling in the custom CSS window
@nicke920 Yes, that’s correct: inline links inside of text blocks. It feels really odd to me that inline links would be treated very differently from block-level links, but I can also see that it would require extra parsing of the content.
I’d love it if this could be an optional setting so that all links, anywhere in the Builder content, would go through renderLink so as to get the benefits of next/link (or equivalents in other frameworks).
FWIW, I’m in the process of adding a wrapper around BuilderComponent so we’ll have the global link styling we’re looking for in the Builder content. We have a kind of unique situation within our web site where our marketing designers and our UX designers don’t really see eye-to-eye on how basic things like links and buttons should be designed, so we can’t easily set a global CSS at the app level. I appreciate the feedback about using the custom components, but I think wrapping the BuilderComponent will make our lives easier as we migrate from our old CMS.
Thanks!