Discussion on Portable Text and applying marks to headers in the Sanity editor to align with front-end styles.
18 replies
Last updated: Nov 2, 2021
T
Hey Everyone,
I have a question around Portable Text and marks. We current have our Header stylings setup with a bolded font-weight. We are wondering if, upon selecting a heading style that has a bolded font weight, we can programmatically apply mark decorators to the same text so we can show that the text is bolded?
I have a question around Portable Text and marks. We current have our Header stylings setup with a bolded font-weight. We are wondering if, upon selecting a heading style that has a bolded font weight, we can programmatically apply mark decorators to the same text so we can show that the text is bolded?
Nov 2, 2021, 12:41 AM
J
Since it’s bold already, there’s no difference to show.
However, if you write a serializer you can decide a bold header means whatever you want…
https://www.sanity.io/docs/presenting-block-text#ac67a867dd69
However, if you write a serializer you can decide a bold header means whatever you want…
https://www.sanity.io/docs/presenting-block-text#ac67a867dd69
Nov 2, 2021, 12:45 AM
T
Yeah..... The idea solution would be for a us to create the Heading style without it being a bold font weight and then have them bold it as a choice. But.... clients haha.
What we are really trying to achieve is simply aligning the CMS with the front end. So that a header that is 50px and bold shows as that in the editor. (Only in the editor, the front end works perfectly).
What we are really trying to achieve is simply aligning the CMS with the front end. So that a header that is 50px and bold shows as that in the editor. (Only in the editor, the front end works perfectly).
Nov 2, 2021, 12:48 AM
J
You can just set the font-weight of h1, h2, etc to “normal” in CSS and use bold as normal.
Nov 2, 2021, 12:51 AM
T
Hey Josh, I might not be explaining it very clearly. We have essentially shot ourselves in the foot by setting up the serialiser on the front end with a different style than what is displaying in the Portable text editor.
Nov 2, 2021, 1:06 AM
T
But I have just found that we can extend the styles field in sanity to include block editor rendering block. so I think this will solve it 🙂
Nov 2, 2021, 1:07 AM
T
Thanks for your prompt reply too mate
Nov 2, 2021, 1:07 AM
It sounds like you may have a solution already, but are you saying you want an
h3to also have
strongapplied to it in the studio?
Nov 2, 2021, 1:14 AM
T
Hey Geoff. Yes pretty much exactly that. We just want the Studio editor to mirror the front end styles.
So another, perhaps future example, could be that a style is not "h1" but "title" and a "title" style has bold, italics and a different font. It would be great to display all of this inside the portable text field in Sanity. Which I think the what extending the rendering block should be able to do? e.g
So another, perhaps future example, could be that a style is not "h1" but "title" and a "title" style has bold, italics and a different font. It would be great to display all of this inside the portable text field in Sanity. Which I think the what extending the rendering block should be able to do? e.g
...
Nov 2, 2021, 3:11 AM
Yes, you’re absolutely right and there’s nothing tying you to using semantic element names (as we see with
normal, for example). The
valueis really just a connector between your studio and your output (e.g., your serializer on the front end). You could even do variations like:
export default {
name: "content",
title: "Content",
type: "array",
of: [
{
type: "block",
styles: [
{ title: "Normal", value: "normal" },
// ...,
{ title: "H3", value: "h3" },
{ title: "H3 Strong", value: "h3Strong", blockEditor: { render: ({ children }) => <h3><strong>{children}</strong></h3> } },
// ...,
},
]
}Nov 2, 2021, 3:16 AM
Yes, you’re absolutely right and there’s nothing tying you to using semantic element names (as we see with
normal, for example). The
valueis really just a connector between your studio and your output (e.g., your serializer on the front end). You could even do variations like:
export default {
name: "content",
title: "Content",
type: "array",
of: [
{
type: "block",
styles: [
{ title: "Normal", value: "normal" },
// ...,
{ title: "H3", value: "h3" },
{ title: "H3 Strong", value: "h3Strong", blockEditor: { render: ({ children }) => <h3><strong>{children}</strong></h3> } },
// ...,
},
]
}Nov 2, 2021, 3:16 AM
T
Thanks
Thanks again for your help
user A
! That's great. We Might submit a few code snippets into the community after this project with some of the stuff we have been doing around portable text which is pretty exciting.Thanks again for your help
Nov 2, 2021, 3:19 AM
T
Oh
user A
one more question, unrelated to portable text. When creating a document preview, is it possible to grab the published status of a document? One of our clients is looking for a way to change the icon if a document is a draft vs published.Nov 2, 2021, 3:21 AM
If you’re on a recent enough version of the studio, those indications are there already. Would that suffice or are you looking to do something different with the statuses?
Nov 2, 2021, 3:28 AM
If you’re on a recent enough version of the studio, those indications are there already. Would that suffice or are you looking to do something different with the statuses?
Nov 2, 2021, 3:28 AM
T
Hey Geoff, we were looking to do something a bit more visual as our client is looking to quickly identify drafts amongst a lot of content. Although I am aware drafts also automatically appear at the top of the documents list as well.Not a super high priority for us. We have just found it useful for clients, when populating or migrating content into Sanity for the first time, to add some visual symbols for when content is still missing e.g a recipe missing ingredients will have a certain emoji in the preview. Having the draft vs published status would just allow us to create another layer of context to this system.
Nov 2, 2021, 3:35 AM
You can use async in
mediainside
preview.prepare(), which might give you a bit more capability (vs. adding something to the
titleor
subtitle, for example). I’ll try to think more about this and/or ask a colleague and will get back to you.
Nov 2, 2021, 3:57 AM
T
Thanks Geoff. Yeah we are using the media section to sometimes add regional flags or big red x / green tick images haha. Thanks for checking in with your colleague 🙂
Nov 2, 2021, 3:59 AM
T
Thanks Geoff. Yeah we are using the media section to sometimes add regional flags or big red x / green tick images haha. Thanks for checking in with your colleague 🙂
Nov 2, 2021, 3:59 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.