release: Merge branch 'develop' into rc/v12.0.0

blocks/lists.ts

@@ -1046,22 +1046,19 @@ blocks['lists_split'] = {
 
   /**
    * Returns the state of this block as a JSON serializable object.
-   * This block does not need to serialize any specific state as it is already
-   * encoded in the dropdown values, but must have an implementation to avoid
-   * the backward compatible XML mutations being serialized.
    *
    * @returns The state of this block.
    */
-  saveExtraState: function (this: SplitBlock): null {
-    return null;
+  saveExtraState: function (this: SplitBlock): {mode: string} {
+    return {'mode': this.getFieldValue('MODE')};
   },
 
   /**
    * Applies the given state to this block.
-   * No extra state is needed or expected as it is already encoded in the
-   * dropdown values.
    */
-  loadExtraState: function (this: SplitBlock) {},
+  loadExtraState: function (this: SplitBlock, state: {mode: string}) {
+    this.updateType_(state['mode']);
+  },
 };
 
 // Register provided blocks.

core/block_svg.ts

@@ -246,7 +246,7 @@ export class BlockSvg
    *
    * @returns #RRGGBB string.
    */
-  getColourSecondary(): string | undefined {
+  getColourSecondary(): string {
     return this.style.colourSecondary;
   }
 
@@ -255,7 +255,7 @@ export class BlockSvg
    *
    * @returns #RRGGBB string.
    */
-  getColourTertiary(): string | undefined {
+  getColourTertiary(): string {
     return this.style.colourTertiary;
   }
 
@@ -1221,6 +1221,15 @@ export class BlockSvg
     }
   }
 
+  /**
+   * Returns the BlockStyle object used to style this block.
+   *
+   * @returns This block's style object.
+   */
+  getStyle(): BlockStyle {
+    return this.style;
+  }
+
   /**
    * Move this block to the front of the visible workspace.
    * <g> tags do not respect z-index so SVG renders them in the

core/clipboard.ts

@@ -83,7 +83,9 @@ function pasteFromData<T extends ICopyData>(
   workspace: WorkspaceSvg,
   coordinate?: Coordinate,
 ): ICopyable<T> | null {
-  workspace = workspace.getRootWorkspace() ?? workspace;
+  workspace = workspace.isMutator
+    ? workspace
+    : (workspace.getRootWorkspace() ?? workspace);
   return (globalRegistry
     .getObject(globalRegistry.Type.PASTER, copyData.paster, false)
     ?.paste(copyData, workspace, coordinate) ?? null) as ICopyable<T> | null;

core/contextmenu_items.ts

@@ -611,7 +611,9 @@ export function registerCommentDuplicate() {
 export function registerCommentCreate() {
   const createOption: RegistryItem = {
     displayText: () => Msg['ADD_COMMENT'],
-    preconditionFn: () => 'enabled',
+    preconditionFn: (scope: Scope) => {
+      return scope.workspace?.isMutator ? 'hidden' : 'enabled';
+    },
     callback: (scope: Scope, e: PointerEvent) => {
       const workspace = scope.workspace;
       if (!workspace) return;

core/field_dropdown.ts

@@ -29,7 +29,6 @@ import {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import * as parsing from './utils/parsing.js';
 import * as utilsString from './utils/string.js';
-import * as style from './utils/style.js';
 import {Svg} from './utils/svg.js';
 
 /**
@@ -293,7 +292,7 @@ export class FieldDropdown extends Field<string> {
 
     if (this.getConstants()!.FIELD_DROPDOWN_COLOURED_DIV) {
       const primaryColour = block.getColour();
-      const borderColour = (this.sourceBlock_ as BlockSvg).style.colourTertiary;
+      const borderColour = (this.sourceBlock_ as BlockSvg).getColourTertiary();
       dropDownDiv.setColour(primaryColour, borderColour);
     }
 
@@ -306,11 +305,6 @@ export class FieldDropdown extends Field<string> {
 
     if (this.selectedMenuItem) {
       this.menu_!.setHighlighted(this.selectedMenuItem);
-      style.scrollIntoContainerView(
-        this.selectedMenuItem.getElement()!,
-        dropDownDiv.getContentDiv(),
-        true,
-      );
     }
 
     this.applyColour();
@@ -469,21 +463,21 @@ export class FieldDropdown extends Field<string> {
    * Updates the dropdown arrow to match the colour/style of the block.
    */
   override applyColour() {
-    const style = (this.sourceBlock_ as BlockSvg).style;
+    const sourceBlock = this.sourceBlock_ as BlockSvg;
     if (this.borderRect_) {
-      this.borderRect_.setAttribute('stroke', style.colourTertiary);
+      this.borderRect_.setAttribute('stroke', sourceBlock.getColourTertiary());
       if (this.menu_) {
-        this.borderRect_.setAttribute('fill', style.colourTertiary);
+        this.borderRect_.setAttribute('fill', sourceBlock.getColourTertiary());
       } else {
         this.borderRect_.setAttribute('fill', 'transparent');
       }
     }
     // Update arrow's colour.
-    if (this.sourceBlock_ && this.arrow) {
-      if (this.sourceBlock_.isShadow()) {
-        this.arrow.style.fill = style.colourSecondary;
+    if (sourceBlock && this.arrow) {
+      if (sourceBlock.isShadow()) {
+        this.arrow.style.fill = sourceBlock.getColourSecondary();
       } else {
-        this.arrow.style.fill = style.colourPrimary;
+        this.arrow.style.fill = sourceBlock.getColour();
       }
     }
   }

core/field_input.ts

@@ -227,7 +227,7 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
 
     if (!this.isFullBlockField() && this.borderRect_) {
       this.borderRect_!.style.display = 'block';
-      this.borderRect_.setAttribute('stroke', block.style.colourTertiary);
+      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
@@ -430,8 +430,8 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
       borderRadius = (bBox.bottom - bBox.top) / 2 + 'px';
       // Pull stroke colour from the existing shadow block
       const strokeColour = block.getParent()
-        ? (block.getParent() as BlockSvg).style.colourTertiary
-        : (this.sourceBlock_ as BlockSvg).style.colourTertiary;
+        ? (block.getParent() as BlockSvg).getColourTertiary()
+        : (this.sourceBlock_ as BlockSvg).getColourTertiary();
       htmlInput.style.border = 1 * scale + 'px solid ' + strokeColour;
       div!.style.borderRadius = borderRadius;
       div!.style.transition = 'box-shadow 0.25s ease 0s';

core/icons/comment_icon.ts

@@ -129,7 +129,7 @@ export class CommentIcon extends Icon implements IHasBubble, ISerializable {
 
   override applyColour(): void {
     super.applyColour();
-    const colour = (this.sourceBlock as BlockSvg).style.colourPrimary;
+    const colour = (this.sourceBlock as BlockSvg).getColour();
     this.textInputBubble?.setColour(colour);
   }
 

core/icons/mutator_icon.ts

@@ -136,7 +136,7 @@ export class MutatorIcon extends Icon implements IHasBubble {
 
   override applyColour(): void {
     super.applyColour();
-    this.miniWorkspaceBubble?.setColour(this.sourceBlock.style.colourPrimary);
+    this.miniWorkspaceBubble?.setColour(this.sourceBlock.getColour());
     this.miniWorkspaceBubble?.updateBlockStyles();
   }
 

core/icons/warning_icon.ts

@@ -108,7 +108,7 @@ export class WarningIcon extends Icon implements IHasBubble {
 
   override applyColour(): void {
     super.applyColour();
-    this.textBubble?.setColour(this.sourceBlock.style.colourPrimary);
+    this.textBubble?.setColour(this.sourceBlock.getColour());
   }
 
   override updateCollapsed(): void {

core/menu.ts

@@ -255,10 +255,11 @@ export class Menu {
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
-      const el = this.getElement() as Element;
-      style.scrollIntoContainerView(item.getElement() as Element, el);
-
-      aria.setState(el, aria.State.ACTIVEDESCENDANT, item.getId());
+      const el = this.getElement();
+      if (el) {
+        aria.setState(el, aria.State.ACTIVEDESCENDANT, item.getId());
+      }
+      item.getElement()?.scrollIntoView();
     }
   }
 

core/renderers/zelos/path_object.ts

@@ -68,7 +68,7 @@ export class PathObject extends BasePathObject {
     // Set shadow stroke colour.
     const parent = block.getParent();
     if (block.isShadow() && parent) {
-      this.svgPath.setAttribute('stroke', parent.style.colourTertiary);
+      this.svgPath.setAttribute('stroke', parent.getColourTertiary());
     }
 
     // Apply colour to outlines.

core/shortcut_items.ts

@@ -18,7 +18,7 @@ import {KeyboardShortcut, ShortcutRegistry} from './shortcut_registry.js';
 import {Coordinate} from './utils/coordinate.js';
 import {KeyCodes} from './utils/keycodes.js';
 import {Rect} from './utils/rect.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
+import {WorkspaceSvg} from './workspace_svg.js';
 
 /**
  * Object holding the names of the default shortcut items.
@@ -131,7 +131,10 @@ export function registerCopy() {
       const selected = common.getSelected();
       if (!selected || !isCopyable(selected)) return false;
       copyData = selected.toCopyData();
-      copyWorkspace = workspace;
+      copyWorkspace =
+        selected.workspace instanceof WorkspaceSvg
+          ? selected.workspace
+          : workspace;
       copyCoords = isDraggable(selected)
         ? selected.getRelativeToSurfaceXY()
         : null;

core/trashcan.ts

@@ -394,6 +394,8 @@ export class Trashcan
       'transform',
       'translate(' + this.left + ',' + this.top + ')',
     );
+
+    this.flyout?.position();
   }
 
   /**

core/utils/style.ts

@@ -7,6 +7,7 @@
 // Former goog.module ID: Blockly.utils.style
 
 import {Coordinate} from './coordinate.js';
+import * as deprecation from './deprecation.js';
 import {Rect} from './rect.js';
 import {Size} from './size.js';
 
@@ -58,6 +59,7 @@ function getSizeInternal(element: Element): Size {
  * @returns Object with width/height properties.
  */
 function getSizeWithDisplay(element: Element): Size {
+  deprecation.warn(`Blockly.utils.style.getSizeWithDisplay()`, 'v11.2', 'v13');
   const offsetWidth = (element as HTMLElement).offsetWidth;
   const offsetHeight = (element as HTMLElement).offsetHeight;
   return new Size(offsetWidth, offsetHeight);
@@ -130,6 +132,7 @@ export function getViewportPageOffset(): Coordinate {
  * @returns The computed border widths.
  */
 export function getBorderBox(element: Element): Rect {
+  deprecation.warn(`Blockly.utils.style.getBorderBox()`, 'v11.2', 'v13');
   const left = parseFloat(getComputedStyle(element, 'borderLeftWidth'));
   const right = parseFloat(getComputedStyle(element, 'borderRightWidth'));
   const top = parseFloat(getComputedStyle(element, 'borderTopWidth'));
@@ -156,6 +159,12 @@ export function scrollIntoContainerView(
   container: Element,
   opt_center?: boolean,
 ) {
+  deprecation.warn(
+    `Blockly.utils.style.scrollIntoContainerView()`,
+    'v11.2',
+    'v13',
+    'the native Element.scrollIntoView()',
+  );
   const offset = getContainerOffsetToScrollInto(element, container, opt_center);
   container.scrollLeft = offset.x;
   container.scrollTop = offset.y;
@@ -180,6 +189,11 @@ export function getContainerOffsetToScrollInto(
   container: Element,
   opt_center?: boolean,
 ): Coordinate {
+  deprecation.warn(
+    `Blockly.utils.style.getContainerOffsetToScrollInto()`,
+    'v11.2',
+    'v13',
+  );
   // Absolute position of the element's border's top left corner.
   const elementPos = getPageOffset(element);
   // Absolute position of the container's border's top left corner.