fix!: set full block field status explicitly (#9840)

* fix!: set full block field status explicitly

* chore: grammar

packages/blockly/core/field.ts

@@ -441,15 +441,19 @@ export abstract class Field<T = any>
   /**
    * Defines whether this field should take up the full block or not.
    *
-   * Be cautious when overriding this function. It may not work as you expect /
-   * intend because the behavior was kind of hacked in. If you are thinking
-   * about overriding this function, post on the forum with your intended
-   * behavior to see if there's another approach.
+   * This is typically only done for certain kinds of fields and in certain
+   * renderers. You should only override this if you're sure your field will
+   * render correctly in zelos and other renderers that support full-block
+   * fields.
    *
-   * @internal
+   * Blocks that contain only a single field that is a full-block-field
+   * have a special appearance in some renderers and their behavior is
+   * unique, because we pretend that the field is a whole block in some cases.
+   * This is hacky and you should use caution when attempting to do anything
+   * with this method.
    */
   isFullBlockField(): boolean {
-    return !this.borderRect_;
+    return false;
   }
 
   /**
@@ -928,7 +932,7 @@ export abstract class Field<T = any>
     const xOffset =
       margin !== undefined
         ? margin
-        : !this.isFullBlockField()
+        : this.borderRect_
           ? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING
           : 0;
     let totalWidth = xOffset * 2;
@@ -939,7 +943,7 @@ export abstract class Field<T = any>
       contentWidth = dom.getTextWidth(this.textElement_);
       totalWidth += contentWidth;
     }
-    if (!this.isFullBlockField()) {
+    if (this.borderRect_) {
       totalHeight = Math.max(totalHeight, constants!.FIELD_BORDER_RECT_HEIGHT);
     }
 
@@ -1036,7 +1040,7 @@ export abstract class Field<T = any>
       throw new UnattachedFieldError();
     }
 
-    if (this.isFullBlockField()) {
+    if (!this.borderRect_) {
       // Browsers are inconsistent in what they return for a bounding box.
       // - Webkit / Blink: fill-box / object bounding box
       // - Gecko: stroke-box
@@ -1054,7 +1058,7 @@ export abstract class Field<T = any>
         xy.y -= 0.5 * scale;
       }
     } else {
-      const bBox = this.borderRect_!.getBoundingClientRect();
+      const bBox = this.borderRect_.getBoundingClientRect();
       xy = style.getPageOffset(this.borderRect_!);
       scaledWidth = bBox.width;
       scaledHeight = bBox.height;

packages/blockly/core/field_dropdown.ts

@@ -208,6 +208,21 @@ export class FieldDropdown extends Field<string> {
     this.isInitialized = true;
   }
 
+  /**
+   * This is hacky way of determining if a dropdown field is a full-block field or not.
+   * The constants that control the border rect are the same ones that determine how we
+   * render full-block dropdown fields. It's a full-block field if it doesn't have the
+   * border rect (and it's a simple reporter block).
+   *
+   * @returns true if this field should be treated as a full-block field
+   */
+  override isFullBlockField(): boolean {
+    return (
+      !this.shouldAddBorderRect_() &&
+      !!this.getSourceBlock()?.isSimpleReporter()
+    );
+  }
+
   /**
    * Whether or not the dropdown should add a border rect.
    *

packages/blockly/core/field_input.ts

@@ -166,7 +166,15 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
   override initView() {
     const block = this.getSourceBlock();
     if (!block) throw new UnattachedFieldError();
-    super.initView();
+
+    if (!this.isFullBlockField()) {
+      // Full-block fields don't get the border-rect element.
+      this.createBorderRect_();
+    }
+    this.createTextElement_();
+    if (this.fieldGroup_) {
+      dom.addClass(this.fieldGroup_, 'blocklyField');
+    }
 
     if (this.isFullBlockField()) {
       this.clickTarget_ = (this.sourceBlock_ as BlockSvg).getSvgRoot();
@@ -254,10 +262,9 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
     if (!this.fieldGroup_) return;
 
     if (!this.isFullBlockField() && this.borderRect_) {
-      this.borderRect_!.style.display = 'block';
+      this.borderRect_.style.display = 'block';
       this.borderRect_.setAttribute('stroke', block.getColourTertiary());
     } else {
-      this.borderRect_!.style.display = 'none';
       // In general, do *not* let fields control the color of blocks. Having the
       // field control the color is unexpected, and could have performance
       // impacts.