Variables not showing on inspector when I extend Unity UI button

Question

Variables not showing on inspector when I extend Unity UI button. I wanted to add some extra functionality to unity button, and to do this i just extaned this button and wanted to have 2 fields. But noticed that those fields are not available in unity inspector, unless i change to debug Code:

public class PlayPauseButton : Button
{
    [SerializeField] private Image playGraphic;
    [SerializeField] private Image pauseGraphic;
    
    private bool _isPlaying;
}

I was expecting to see the variables on inspector, on normal mode. I can view them on debug but it can be a bit tricky

Answer 1

Try to make folder named 'Editor' on Assets and PlayPauseButton Script into Editor folder! :D

I got hint in https://niclasgleesborg.home.blog/2019/05/23/extend-ui-button-behaviour-in-unity-and-create-a-custom-inspector/

Answer 2

For examle I take my project ui extensions. I needed to add a variable to contentSizeFitter.

This code I'll use for ContentSizeFitter

[RequireComponent(typeof(LayoutGroup))]
public class Zdy_ContentSizeFitter : ContentSizeFitter
{
    private LayoutGroup layoutGroup;

    [SerializeField] private ContentSize_Element contentSizeElement;

    protected override void Start()
    {
        base.Start();
        layoutGroup = GetComponent<LayoutGroup>();
    }

    ...
   
}

We will add this variable in inspector

private ContentSize_Element contentSizeElement;

1. Create folder named "Editor anywhere like this:

2. Create Extension Editor Script in this folder like this:

3. Сreate a script that includes these methods:

public override void OnInspectorGUI()
protected override void OnEnable()
protected virtual void DrawConfigInfo()

4. Do like me) :

[CustomEditor(typeof(Zdy_ContentSizeFitter))]
public class Zdy_ContentSizeFitterEditor : ContentSizeFitterEditor
{

        private SerializedProperty contentSizeElement;

        public override void OnInspectorGUI()
        {
            this.serializedObject.Update();

            this.DrawConfigInfo();
            this.serializedObject.ApplyModifiedProperties();

            base.OnInspectorGUI();

        }

        protected override void OnEnable()
        {
            base.OnEnable();
            this.contentSizeElement = this.serializedObject.FindProperty("contentSizeElement");

        }

        protected virtual void DrawConfigInfo()
        {
            EditorGUILayout.PropertyField(this.contentSizeElement);

        }
    }    

And now we can see this variable in inspector:

"ContentSizeFitterEditor" we take from UnityEditor.UI;

In your case we should inherit from "ButtonEditor" Like this:

using UnityEditor;
using UnityEditor.UI;

public class Zdy_ContentSizeFitterEditor : ButtonEditor

For an in-depth study of this issue, it is better to follow the link in the previous answer))

And you can check out this link here is an example with a button