feat!: Use CSS to specify field cursors. (#8648)

core/css.ts

@@ -464,4 +464,17 @@ input[type=number] {
   z-index: 80;
   pointer-events: none;
 }
+
+.blocklyField {
+  cursor: default;
+}
+
+.blocklyInputField {
+  cursor: text;
+}
+
+.blocklyDragging .blocklyField,
+.blocklyDragging .blocklyIconGroup {
+  cursor: grabbing;
+}
 `;

core/field.ts

@@ -193,9 +193,6 @@ export abstract class Field<T = any>
    */
   SERIALIZABLE = false;
 
-  /** Mouse cursor style when over the hotspot that initiates the editor. */
-  CURSOR = '';
-
   /**
    * @param value The initial value of the field.
    *     Also accepts Field.SKIP_SETUP if you wish to skip setup (only used by
@@ -536,11 +533,9 @@ export abstract class Field<T = any>
     if (this.enabled_ && block.isEditable()) {
       dom.addClass(group, 'blocklyEditableField');
       dom.removeClass(group, 'blocklyNonEditableField');
-      group.style.cursor = this.CURSOR;
     } else {
       dom.addClass(group, 'blocklyNonEditableField');
       dom.removeClass(group, 'blocklyEditableField');
-      group.style.cursor = '';
     }
   }
 

core/field_checkbox.ts

@@ -35,11 +35,6 @@ export class FieldCheckbox extends Field<CheckboxBool> {
    */
   override SERIALIZABLE = true;
 
-  /**
-   * Mouse cursor style when over the hotspot that initiates editability.
-   */
-  override CURSOR = 'default';
-
   /**
    * NOTE: The default value is set in `Field`, so maintain that value instead
    * of overwriting it here or in the constructor.

core/field_dropdown.ts

@@ -70,9 +70,6 @@ export class FieldDropdown extends Field<string> {
    */
   override SERIALIZABLE = true;
 
-  /** Mouse cursor style when over the hotspot that initiates the editor. */
-  override CURSOR = 'default';
-
   protected menuGenerator_?: MenuGenerator;
 
   /** A cache of the most recently generated options. */
@@ -204,6 +201,11 @@ export class FieldDropdown extends Field<string> {
     if (this.borderRect_) {
       dom.addClass(this.borderRect_, 'blocklyDropdownRect');
     }
+
+    if (this.fieldGroup_) {
+      dom.addClass(this.fieldGroup_, 'blocklyField');
+      dom.addClass(this.fieldGroup_, 'blocklyDropdownField');
+    }
   }
 
   /**

core/field_input.ts

@@ -99,9 +99,6 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
    */
   override SERIALIZABLE = true;
 
-  /** Mouse cursor style when over the hotspot that initiates the editor. */
-  override CURSOR = 'text';
-
   /**
    * @param value The initial value of the field. Should cast to a string.
    *     Defaults to an empty string if null or undefined. Also accepts
@@ -148,6 +145,10 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
     if (this.isFullBlockField()) {
       this.clickTarget_ = (this.sourceBlock_ as BlockSvg).getSvgRoot();
     }
+
+    if (this.fieldGroup_) {
+      dom.addClass(this.fieldGroup_, 'blocklyInputField');
+    }
   }
 
   protected override isFullBlockField(): boolean {