release: v11.2.2

.github/workflows/appengine_deploy.yml

@@ -42,7 +42,7 @@ jobs:
           path: _deploy/
 
       - name: Deploy to App Engine
-        uses: google-github-actions/deploy-appengine@v2.1.4
+        uses: google-github-actions/deploy-appengine@v2.1.5
         # For parameters see:
         # https://github.com/google-github-actions/deploy-appengine#inputs
         with:

.github/workflows/assign_reviewers.yml

@@ -16,6 +16,7 @@ jobs:
   requested-reviewer:
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       issues: write
     steps:
       - name: Assign requested reviewer

.github/workflows/conventional-label.yml

@@ -8,6 +8,7 @@ jobs:
   label:
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       pull-requests: write
     steps:
       - uses: bcoe/conventional-release-labels@v1

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_animations.ts

@@ -176,30 +176,38 @@ export function disconnectUiEffect(block: BlockSvg) {
   }
   // Start the animation.
   wobblingBlock = block;
-  disconnectUiStep(block, magnitude, new Date());
+  disconnectUiStep(block, magnitude, new Date(), 0);
 }
 
 /**
  * Animate a brief wiggle of a disconnected block.
  *
  * @param block Block to animate.
  * @param magnitude Maximum degrees skew (reversed for RTL).
- * @param start Date of animation's start.
+ * @param start Date of animation's start for deciding when to stop.
+ * @param step Which step of the animation we're on.
  */
-function disconnectUiStep(block: BlockSvg, magnitude: number, start: Date) {
+function disconnectUiStep(
+  block: BlockSvg,
+  magnitude: number,
+  start: Date,
+  step: number,
+) {
   const DURATION = 200; // Milliseconds.
-  const WIGGLES = 3; // Half oscillations.
-
-  const ms = new Date().getTime() - start.getTime();
-  const percent = ms / DURATION;
+  const WIGGLES = [0.66, 1, 0.66, 0, -0.66, -1, -0.66, 0]; // Single cycle
 
   let skew = '';
-  if (percent <= 1) {
-    const val = Math.round(
-      Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude,
-    );
+  if (start.getTime() + DURATION > new Date().getTime()) {
+    const val = Math.round(WIGGLES[step % WIGGLES.length] * magnitude);
     skew = `skewX(${val})`;
-    disconnectPid = setTimeout(disconnectUiStep, 10, block, magnitude, start);
+    disconnectPid = setTimeout(
+      disconnectUiStep,
+      15,
+      block,
+      magnitude,
+      start,
+      step + 1,
+    );
   }
 
   block

core/block_svg.ts

@@ -243,7 +243,7 @@ export class BlockSvg
    *
    * @returns #RRGGBB string.
    */
-  getColourSecondary(): string | undefined {
+  getColourSecondary(): string {
     return this.style.colourSecondary;
   }
 
@@ -252,7 +252,7 @@ export class BlockSvg
    *
    * @returns #RRGGBB string.
    */
-  getColourTertiary(): string | undefined {
+  getColourTertiary(): string {
     return this.style.colourTertiary;
   }
 
@@ -1172,6 +1172,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/bubbles/text_bubble.ts

@@ -16,7 +16,7 @@ import {Bubble} from './bubble.js';
  * A bubble that displays non-editable text. Used by the warning icon.
  */
 export class TextBubble extends Bubble {
-  private paragraph: SVGTextElement;
+  private paragraph: SVGGElement;
 
   constructor(
     private text: string,
@@ -48,43 +48,52 @@ export class TextBubble extends Bubble {
    */
   private stringToSvg(text: string, container: SVGGElement) {
     const paragraph = this.createParagraph(container);
-    const spans = this.createSpans(paragraph, text);
+    const fragments = this.createTextFragments(paragraph, text);
     if (this.workspace.RTL)
-      this.rightAlignSpans(paragraph.getBBox().width, spans);
+      this.rightAlignTextFragments(paragraph.getBBox().width, fragments);
     return paragraph;
   }
 
-  /** Creates the paragraph container for this bubble's view's spans. */
-  private createParagraph(container: SVGGElement): SVGTextElement {
+  /** Creates the paragraph container for this bubble's view's text fragments. */
+  private createParagraph(container: SVGGElement): SVGGElement {
     return dom.createSvgElement(
-      Svg.TEXT,
+      Svg.G,
       {
         'class': 'blocklyText blocklyBubbleText blocklyNoPointerEvents',
-        'y': Bubble.BORDER_WIDTH,
+        'transform': `translate(0,${Bubble.BORDER_WIDTH})`,
+        'style': `direction: ${this.workspace.RTL ? 'rtl' : 'ltr'}`,
       },
       container,
     );
   }
 
-  /** Creates the spans visualizing the text of this bubble. */
-  private createSpans(parent: SVGTextElement, text: string): SVGTSpanElement[] {
+  /** Creates the text fragments visualizing the text of this bubble. */
+  private createTextFragments(
+    parent: SVGGElement,
+    text: string,
+  ): SVGTextElement[] {
+    let lineNum = 1;
     return text.split('\n').map((line) => {
-      const tspan = dom.createSvgElement(
-        Svg.TSPAN,
-        {'dy': '1em', 'x': Bubble.BORDER_WIDTH},
+      const fragment = dom.createSvgElement(
+        Svg.TEXT,
+        {'y': `${lineNum}em`, 'x': Bubble.BORDER_WIDTH},
         parent,
       );
       const textNode = document.createTextNode(line);
-      tspan.appendChild(textNode);
-      return tspan;
+      fragment.appendChild(textNode);
+      lineNum += 1;
+      return fragment;
     });
   }
 
-  /** Right aligns the given spans. */
-  private rightAlignSpans(maxWidth: number, spans: SVGTSpanElement[]) {
-    for (const span of spans) {
-      span.setAttribute('text-anchor', 'end');
-      span.setAttribute('x', `${maxWidth + Bubble.BORDER_WIDTH}`);
+  /** Right aligns the given text fragments. */
+  private rightAlignTextFragments(
+    maxWidth: number,
+    fragments: SVGTextElement[],
+  ) {
+    for (const text of fragments) {
+      text.setAttribute('text-anchor', 'start');
+      text.setAttribute('x', `${maxWidth + Bubble.BORDER_WIDTH}`);
     }
   }
 

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/comments/rendered_workspace_comment.ts

@@ -208,8 +208,14 @@ export class RenderedWorkspaceComment
   private startGesture(e: PointerEvent) {
     const gesture = this.workspace.getGesture(e);
     if (gesture) {
-      gesture.handleCommentStart(e, this);
-      this.workspace.getLayerManager()?.append(this, layers.BLOCK);
+      if (browserEvents.isTargetInput(e)) {
+        // If the text area was the focus, don't allow this event to bubble up
+        // and steal focus away from the editor/comment.
+        e.stopPropagation();
+      } else {
+        gesture.handleCommentStart(e, this);
+        this.workspace.getLayerManager()?.append(this, layers.BLOCK);
+      }
       common.setSelected(this);
     }
   }

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/css.ts

@@ -353,6 +353,7 @@ input[type=number] {
 
 .blocklyScrollbarBackground {
   opacity: 0;
+  pointer-events: none;
 }
 
 .blocklyScrollbarHandle {

core/field_dropdown.ts

@@ -29,6 +29,7 @@ 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';
 
 /**
@@ -290,7 +291,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);
     }
 
@@ -303,6 +304,11 @@ export class FieldDropdown extends Field<string> {
 
     if (this.selectedMenuItem) {
       this.menu_!.setHighlighted(this.selectedMenuItem);
+      style.scrollIntoContainerView(
+        this.selectedMenuItem.getElement()!,
+        dropDownDiv.getContentDiv(),
+        true,
+      );
     }
 
     this.applyColour();
@@ -461,21 +467,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

@@ -226,7 +226,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
@@ -429,8 +429,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

@@ -126,7 +126,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 {