From cf2c8b3164133cd871d8c047059847e13eca4d7b Mon Sep 17 00:00:00 2001
From: Ronald Bourret <rbourret@google.com>
Date: Wed, 5 Nov 2025 21:54:41 +0000
Subject: [PATCH] chore: Update turtle demo for v12

---
 examples/turtle-field-demo/field_turtle.js | 31 +++-------------------
 examples/turtle-field-demo/index.html      |  2 +-
 examples/turtle-field-demo/turtle.css      | 15 +++++++++--
 3 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/examples/turtle-field-demo/field_turtle.js b/examples/turtle-field-demo/field_turtle.js
index 7249d1754c..08213ebede 100644
--- a/examples/turtle-field-demo/field_turtle.js
+++ b/examples/turtle-field-demo/field_turtle.js
@@ -15,12 +15,6 @@ class FieldTurtle extends Blockly.Field {
   // (for backwards compatibility reasons serializable is false by default).
   SERIALIZABLE = true;
 
-  // The cursor property defines what the mouse will look like when the user
-  // hovers over the field. By default the cursor will be whatever
-  // .blocklyDraggable's cursor is defined as (vis. grab). Most fields define
-  // this property as 'default'.
-  CURSOR = 'pointer';
-
   // How far to move the text to keep it to the right of the turtle.
   // May change if the turtle gets fancy enough.
   TEXT_OFFSET_X = 80;
@@ -90,6 +84,9 @@ class FieldTurtle extends Blockly.Field {
     // textElement_ (text) we can call the super-function. If we only wanted
     // one or the other, we could call their individual createX functions.
     super.initView();
+    if (this.fieldGroup_) {
+      Blockly.utils.dom.addClass(this.fieldGroup_, 'turtleField');
+    }
 
     // Note that the field group is created by the abstract field's init_
     // function. This means that *all elements* should be children of the
@@ -97,26 +94,6 @@ class FieldTurtle extends Blockly.Field {
     this.createView_();
   }
 
-  // Updates how the field looks depending on if it is editable or not.
-  updateEditable() {
-    if (!this.fieldGroup_) {
-      // Not initialized yet.
-      return;
-    }
-    // The default functionality just makes it so the borderRect_ does not
-    // highlight when hovered.
-    super.updateEditable();
-    // Things like this are best applied to the clickTarget_. By default the
-    // click target is the same as getSvgRoot, which by default is the
-    // fieldGroup_.
-    const group = this.getClickTarget_();
-    if (!this.isCurrentlyEditable()) {
-      group.style.cursor = 'not-allowed';
-    } else {
-      group.style.cursor = this.CURSOR;
-    }
-  }
-
   // Gets the text to display when the block is collapsed
   getText() {
     let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
@@ -403,7 +380,7 @@ class FieldTurtle extends Blockly.Field {
     };
 
     const widget = document.createElement('div');
-    widget.className = 'customFieldsTurtleWidget blocklyNonSelectable';
+    widget.className = 'customFieldsTurtleWidget';
 
     const table = document.createElement('div');
     table.className = 'table';
diff --git a/examples/turtle-field-demo/index.html b/examples/turtle-field-demo/index.html
index 9a09bc6a24..5b3f67ee1d 100644
--- a/examples/turtle-field-demo/index.html
+++ b/examples/turtle-field-demo/index.html
@@ -116,7 +116,7 @@
       function toggleEnabled() {
         var blocks = workspace.getAllBlocks(false);
         for (var i = 0, block; (block = blocks[i]); i++) {
-          block.setEnabled(!block.isEnabled());
+          block.setDisabledReason(block.isEnabled(), 'Toggle block enabled');
         }
       }
 
diff --git a/examples/turtle-field-demo/turtle.css b/examples/turtle-field-demo/turtle.css
index 57fa88234f..398caaed6a 100644
--- a/examples/turtle-field-demo/turtle.css
+++ b/examples/turtle-field-demo/turtle.css
@@ -6,6 +6,9 @@
 
 .customFieldsTurtleWidget {
   width: 150px;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
 }
 
 .customFieldsTurtleWidget button {
@@ -42,7 +45,15 @@
   width: 100%;
 }
 
-.blocklySvg .blocklyNonEditableText text,
-.blocklySvg .blocklyEditableText text {
+.turtleField.blocklyEditableField {
+  cursor: pointer;
+}
+
+.turtleField.blocklyNonEditableField {
+  cursor: not-allowed;
+}
+
+.blocklySvg .blocklyNonEditableField .blocklyFieldText,
+.blocklySvg .blocklyEditableField .blocklyFieldText {
   fill: #000;
 }