How to use typography controls multiple times.

[himanshudhakan]

https://prnt.sc/tZXyY6qDh7oQ

I want to add separate typography controls for product title, description and etc.

[t-hamano]

Hi @himanshudhakan,

According to your screenshot, there are multiple texts in one carousel block. So you want to set the typography for each text individually?

Unfortunately, block.json allows only one opt-in for each control. As far as I know, there are two approaches that would solve this.

• Hierarchize the block. This would allow you to apply typography plus other styles to each block (text) individually. The structure will probably look something like this:
  • Product Carousel Block
    • Product Title Block
    • Product Description Block
    • Product Price Block
• Add your own typography panel. This may require a little more work, but will have the advantage of being treated as a single block.

[himanshudhakan]

Hi, @t-hamano Thanks for your reply.

I have started with the second approach as you mentioned. Please tell me if it's correct or not, code as below.

Output:- https://prnt.sc/WtPXUr3ONtz-

el( InspectorControls , { group: 'styles' },
el( PanelBody, { title: __( 'Title Styles' ), initialOpen: true },
el( FontSizePicker,
{
value: attributes.TitleStyle.FontSize,
onChange: function( NewFontSize ) {
attributes.TitleStyle.FontSize = NewFontSize;
props.setAttributes( { TitleStyle: attributes.TitleStyle } );
},
}
),
el( __experimentalFontAppearanceControl,
{
key: 'wpmozp-product-carousel-titleapp',
value: {
fontStyle: attributes.TitleStyle.FontAppearance.fontStyle,
fontWeight: attributes.TitleStyle.FontAppearance.fontWeight
},
onChange: function( NewFontAppearance ) {
attributes.TitleStyle.FontAppearance = NewFontAppearance;
props.setAttributes( { TitleStyle: attributes.TitleStyle } );
},
}
),
el( __experimentalLetterSpacingControl,
{
value: attributes.TitleStyle.LetterSpacing,
onChange: function( NewLetterSpacing ) {
attributes.TitleStyle.LetterSpacing = NewLetterSpacing;
props.setAttributes( { TitleStyle: attributes.TitleStyle } );
},
}
),
el( __experimentalTextDecorationControl,
{
value: attributes.TitleStyle.Decoration,
onChange: function( NewDecoration ) {
attributes.TitleStyle.Decoration = NewDecoration;
props.setAttributes( { TitleStyle: attributes.TitleStyle } );
},
}
),
),
)

[t-hamano]

I think such an approach is fine.

[himanshudhakan]

Okay, @t-hamano Thank you for help.