How can I enable a "settings" and "editor" tab in my studio view for a custom XBLock?

Development
1

On many of the standard question types in openedx, I am able to see a “settings” button and an “editor” button:

image
image1825×564 30.2 KB

I’m hoping to organize my custom xblock so that it has this separation between settings and content. However, I don’t really understand how to do that. Currently, all of my xblock settings appear in the editor along with the content. My xblock does inherit from XBlockWithSettingsMixin and StudioEditableXBlockMixin, and generally I am able to have settings in my xblock that persist appropriately. Right now, I’m just trying to get a simple setting, which I have set up as:

#Adding in a random string setting that does nothing at the moment
    random_string_setting = String(
    help="Model used for grading",
    default="qwen",
    scope=Scope.settings  # Change this from Scope.content to Scope.settings
    )
    
    editable_fields = ['random_string_setting']

My studio view also has that setting in it:

def studio_view(self, context):
        print("********++++++++++**********++++++++++*******")
        course = get_course_by_id(self.course_id)  # pylint: disable=no-member            
        api_key = course.other_course_settings.get("openaiApiKey")
        if api_key is not None:
            model_names = ['qwen','nemo','gpt-4o','gpt-4o-mini']
        else:
            model_names = ['qwen','nemo']
        print(course.other_course_settings.get("openaiApiKey"))
        
        html = self.render_template("static/html/grading_xblock_studio.html",{'self':self,"question":self.question_description,'model_names':model_names,'random_string_setting':self.random_string_setting})
        frag = Fragment()
        frag.add_content(html)
        #frag = Fragment(html.format(self=self,question=self.question_description,random_thing=34))
        frag.add_css(self.resource_string("static/css/grading_xblock.css"))
        frag.add_javascript(self.resource_string("static/js/src/grading_xblock.js"))
        frag.initialize_js('GradingXBlockStudio')
        
        return frag

However, I’m now stuck trying to figure out how to get it to show up anywhere other than my main fragment. I’m wondering if this isn’t so much an xblock thing as a setup for my template?

2

As far as I know, there is no official API to get those tabs to appear for your custom XBlock settings. I seem to remember doing it before, and so I’m pretty sure you could find a way to “hack” into it and get those tabs working, but it could break at any time, especially with the ongoing conversion of the Studio UI to the new MFE/React version.

If it would be acceptable, I recommend you just implement your own tabs widget within the settings area that you have full control over. You can also see how the Drag and Drop v2 XBlock works; it has kind of a “wizard” style flow that walks you through three steps. It’s not great but it is something :stuck_out_tongue:

3

Thanks! I was sort of afraid that this wasn’t possible. I’ll probably just do what you suggest and implement it myself.

1 Like