resolveFields not working

[gcosta815]

Can anyone help me with this? I don't see the fields in the Puck editor when trying to use resolveFields:

import React from "react";
import ColorPicker from '../CustomFields/ColorPicker';
import { CustomFieldRenderProps } from '../CustomFields/CustomFieldsHelper';
import getThemeData from 'Helpers/ThemesUtils';
import { TextAlign, 
         fontFamilies, 
         fontSizes, 
         paddingValues, 
         styleOptions, 
         alignOptions, 
         StyleOption, 
         blocksCategories} from "lib/definitions";

export interface HeadingProps {
  text: string;
  fontFamily?: { option: string, customFont: string };
  globalFontFamily?: string;
  fontColor?: { option: string, customColor: string };
  globalFontColor?: string;
  isServerRender?: boolean;
  version?: string;
  size: string;
  align: TextAlign;
  padding: string;
}

const Heading = {
  label: "Heading Block",
  resolveFields: (data: any) => {
    const fields = {
      text: {
        type: "text" as const,
      },
      size: {
        type: "select" as const,
        options: fontSizes,
      },
      fontFamily: {
        type: "object",
        objectFields: {
          option: {
            type: "select" as const,
            options: styleOptions,
          },
          customFont: {
            type: "select" as const,
            options: fontFamilies,
          }
        }
      },
      align: {
        type: "radio" as const,
        options: alignOptions,
      },
      padding: {
        type: "select" as const,
        options: paddingValues,
      },
      fontColor: {
        type: "object",
        objectFields: {
          option: {
            type: "select" as const,
            options: styleOptions,
          },
          customColor: {
            type: "custom",
            render: ({ value, onChange }: CustomFieldRenderProps) => (
              <ColorPicker 
                name="Custom color" 
                value={value} 
                onChange={onChange} 
              />
            ),
          }
        }
      }
    };
    return fields;
  },
  defaultProps: {
    text: "Default Heading",
    fontFamily: { option: StyleOption.Global, customFont: "Arial" },
    fontColor: { option: StyleOption.Global, customColor: "#000000" },
    size: "2rem",
    align: "center",
    padding: "10px",
  },
  category: () => blocksCategories.Typography,
  render: ({ 
    text,
    fontFamily,
    globalFontFamily,
    fontColor,
    globalFontColor,
    isServerRender = false,
    version = 'retail',
    size,
    align,
    padding
  }: HeadingProps) => {

    if (!isServerRender) {
      const { themeData } = getThemeData(version);
      globalFontFamily = themeData ? themeData.fontFamilyName : undefined;
      globalFontColor = themeData ? themeData.fontColor : undefined;
    }
    
    const textStyle = {
      fontFamily: fontFamily?.option === StyleOption.Custom ? fontFamily.customFont : globalFontFamily,
      fontSize: size,
      textAlign: align,
      paddingTop: padding,
      paddingBottom: padding,
      lineHeight: "0.1em",
      color: fontColor?.option === StyleOption.Custom ? fontColor.customColor : globalFontColor,
    };

    return (
      <h1 style={textStyle}>
        {text}
      </h1>
    );
  },
};

export default Heading;`

[chrisvxd]

@gcosta815 sorry for the delay - did you find a solution to your problem? It's not immediately obvious what the issue is for me.