[QUESTIONS] create trait like video trait

The video component is a great demonstration in and of itself. Can be found at grapesjs repo root > src > dom_components > model > ComponentVideo.js. Here's some example code with the bare minimum necessary code:

      var domComps = editor.DomComponents;
      var dType = domComps.getType('default');
      var dModel = dType.model;
      var dView = dType.view;

      domComps.addType('testBlock', {
          model: dModel.extend({
            init() {
              const traits = [this.getProviderTrait(), this.getOption1Trait()];
              this.set('traits', traits);
              this.listenTo(this, 'change:provider', this.updateTraits);
            },
            updateTraits() {
              var prov = this.get('provider');
              var traits = [];
              switch (prov) {
                case 'traitOption1':
                  traits = [this.getProviderTrait(), this.getOption1Trait()];
                  break;
                case 'traitOption2':
                  traits = [this.getProviderTrait(), this.getOption2Trait()];
                  break;
                default:
                  break;
              }
              this.loadTraits(traits);
              this.em.trigger('component:toggled');
            },
            getProviderTrait() {
              return {
                type: 'select',
                label: 'Provider',
                name: 'provider',
                changeProp: 1,
                options: [
                  { value: 'traitOption1', name: 'traitOption1' },
                  { value: 'traitOption2', name: 'traitOption2' }
                ]
              }
            },
            getOption1Trait() {
              return {
                type: 'text',
                label: 'Option1',
                name: 'option1',
                changeProp: 1,
              }
            },
            getOption2Trait() {
              return {
                type: 'text',
                label: 'Option2',
                name: 'option2',
                changeProp: 1,
              }
            }
          }, {
            isComponent: function(el) {
              if(el.tagName == 'DIV'){
                return {type: 'testBlock'};
              }
            },
          }),

          view: dView,
      });

You can test this out by adding a simple div to the Block Manager

      editor.BlockManager.add('testBlock', {
        label: 'Block',
        type: 'testBlock',
        content: `<div>Test block</div>`
      });

The important parts are this.listenTo(this, 'change:provider', this.updateTraits); in the type init() function to listen for changes to the main trait and making sure changeProp is set to 1 on the traits, otherwise change:provider won't pick up the updates.

Okkay,Thank you very much, I understand