Replace xmodule_[display|edit] with standard XBlock CSS classes

[kdmccormick]

Background

Every built-in XBlock marked with uses_xmodule_styles_setup = True gets two CSS classes:

• xmodule_<display|edit> and
• xmodule_<display|edit>_<ClassName>.

This adds complexity to the edx-platform XBlock runtime and makes the builtin block CSS messier. Before extracting this CSS to xblocks-contrib, we should turn get rid of these CSS classes and the uses_xmodule_styles_setup option. We should instead use the standard xblock CSS classes:

• xblock
• xblock-{view_name}
• xblock-{view_name}-{block_tag}

For all display views (author, public, and student), we should add two more new CSS classes to every xblock:

• xblock-display
• xblock-display-{block_tag}

These two new classes will help us keep the builtin block CSS brief. Otherwise, we'd have to repeat xblock-student_view, xblock-author_view, and xblock-preview_view throughout the CSS file.

Tasks

In the xblock renderer function wrap_xblock, remove the if-clause which adds the xmodule_* classes, and add the two new xblock-display* classes.

In every builtin block CSS file, use find-and-replace to switch from the xmodule_ CSS classes to the xblock- CSS classes. There should be absolutely no visible changes for end users.

Search for use_xmodule_styles_setup, xmodule_edit, and xmodule_display. Ensure that there are no remaining references. Update tests as necessary.

Partial Implementation

This PR takes care of updating the rendered classes. It also updates ProblemBlock's CSS. All the other builtin block CSS files still need fixing.

• refactor: Drop xmodule CSS classes in favor of standard xblock CSS classes #35834