Auto-apply bold mark decorator when selecting heading styles in Portable Text

Unfortunately, you can't programmatically apply mark decorators (like strong) when a heading style is selected in the Portable Text editor. Marks and block styles are intentionally separate concepts in Portable Text, and there's no built-in mechanism to automatically link them together. This separation is by design—it keeps your content structure flexible and prevents coupling presentation logic to content structure.

The Right Solution: Customize Block Style Rendering

The best approach is to customize how heading styles appear in the editor using the component property. This gives your content editors a visual representation that matches your front-end styling without actually modifying the underlying data:

import React from 'react'

const BoldHeadingStyle = (props) => (
  <span style={{ fontWeight: 'bold' }}>{props.children}</span>
)

export default {
  name: 'content',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'Normal', value: 'normal' },
        { 
          title: 'Heading 1', 
          value: 'h1',
          component: BoldHeadingStyle
        },
        { 
          title: 'Heading 2', 
          value: 'h2',
          component: BoldHeadingStyle
        },
        // ... more heading styles
      ]
    }
  ]
}

This approach keeps your data clean (no redundant strong marks on headings) while giving content editors a WYSIWYG experience that matches your front-end rendering. You can see a complete example of customizing block styles in the official documentation on customizing the Portable Text Editor.

Why This Matters

Keeping marks and block styles separate actually gives you more flexibility:

• Clean data: Your headings don't carry redundant bold marks that duplicate their inherent styling
• Multi-platform rendering: The same content can render appropriately across web, mobile, and other platforms
• Easier maintenance: You can change heading styles globally without needing to update mark data

Alternative: Create Style Variations

If you genuinely need both bold and non-bold versions of headings as distinct options, you can create separate style definitions:

styles: [
  { title: 'Normal', value: 'normal' },
  { 
    title: 'H2', 
    value: 'h2',
    component: (props) => <h2>{props.children}</h2>
  },
  { 
    title: 'H2 Bold', 
    value: 'h2Bold',
    component: (props) => <h2 style={{ fontWeight: 'bold' }}>{props.children}</h2>
  },
]

Then handle both values appropriately in your front-end serializer. Remember, the value property is just a connector between Studio and your output—it doesn't have to be a semantic HTML element name.

The component customization gives you complete control over the visual presentation in the editor while maintaining the architectural benefits of Portable Text's structured approach. This is the recommended way to show editors that text is bolded when using heading styles with bold font-weight, without programmatically applying strong mark decorators to the underlying data.