chore: Rename editable block component (#4489)

## Description

ref #3994

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -21,7 +21,7 @@ import {
 } from "@webstudio-is/design-system";
 import {
   collectionComponent,
-  editableBlockComponent,
+  blockComponent,
   rootComponent,
   showAttribute,
   WsComponentMeta,
@@ -34,7 +34,7 @@ import {
 } from "@webstudio-is/icons";
 import {
   $dragAndDropState,
-  $editableBlockChildOutline,
+  $blockChildOutline,
   $editingItemSelector,
   $hoveredInstanceSelector,
   $instances,
@@ -424,7 +424,7 @@ const canDrag = (instance: Instance, instanceSelector: InstanceSelector) => {
       return false;
     }
 
-    if (parentInstance.component !== editableBlockComponent) {
+    if (parentInstance.component !== blockComponent) {
       return false;
     }
   }
@@ -453,16 +453,16 @@ const canDrop = (
   // Allow dropping into the parent only
   const isSameParent = dragSelector[1] === dropSelector[0];
 
-  const isDropTargetEditableBlock =
+  const isDropTargetBlock =
     isSameParent &&
-    instances.get(dropSelector[0])?.component === editableBlockComponent;
+    instances.get(dropSelector[0])?.component === blockComponent;
 
   if ($isContentMode.get()) {
-    return isDropTargetEditableBlock && dropTarget.indexWithinChildren > 0;
+    return isDropTargetBlock && dropTarget.indexWithinChildren > 0;
   }
 
-  if (isDropTargetEditableBlock && dropTarget.indexWithinChildren === 0) {
-    // We want Templates to be the first child of the editable block
+  if (isDropTargetBlock && dropTarget.indexWithinChildren === 0) {
+    // We want Templates to be the first child of the content block
     return false;
   }
 
@@ -631,7 +631,7 @@ export const NavigatorTree = () => {
                 buttonProps={{
                   onMouseEnter: () => {
                     $hoveredInstanceSelector.set(item.selector);
-                    $editableBlockChildOutline.set(undefined);
+                    $blockChildOutline.set(undefined);
                   },
                   onMouseLeave: () => $hoveredInstanceSelector.set(undefined),
                   onClick: () => selectInstance(item.selector),

apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx

@@ -19,7 +19,7 @@ import { ResizeHandles } from "./resize-handles";
 import { MediaBadge } from "./media-badge";
 import { applyScale } from "./outline";
 import { $scale } from "~/builder/shared/nano-states";
-import { EditableBlockChildHoveredInstanceOutline } from "./outline/editable-block-instance-outline";
+import { BlockChildHoveredInstanceOutline } from "./outline/editable-block-instance-outline";
 
 const containerStyle = css({
   position: "absolute",
@@ -76,7 +76,7 @@ export const CanvasTools = () => {
           <CollaborativeInstanceOutline />
           <TextToolbar />
 
-          <EditableBlockChildHoveredInstanceOutline />
+          <BlockChildHoveredInstanceOutline />
         </>
       )}
     </>

apps/builder/app/builder/features/workspace/canvas-tools/outline/editable-block-instance-outline.tsx

@@ -1,10 +1,10 @@
 import { useStore } from "@nanostores/react";
 import {
-  $editableBlockChildOutline,
+  $blockChildOutline,
   $instances,
   $isContentMode,
   $registeredComponentMetas,
-  type EditableBlockChildOutline,
+  type BlockChildOutline,
 } from "~/shared/nano-states";
 import {
   Box,
@@ -23,7 +23,7 @@ import {
   Text,
   iconButtonSize,
 } from "@webstudio-is/design-system";
-import { EditableBlockChildAddButtonOutline } from "./outline";
+import { BlockChildAddButtonOutline } from "./outline";
 import { applyScale } from "./apply-scale";
 import { $scale } from "~/builder/shared/nano-states";
 import { PlusIcon } from "@webstudio-is/icons";
@@ -33,8 +33,8 @@ import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import type { DroppableTarget, InstanceSelector } from "~/shared/tree-utils";
 import type { Instance, Instances } from "@webstudio-is/sdk";
 import {
-  editableBlockComponent,
-  editableBlockTemplateComponent,
+  blockComponent,
+  blockTemplateComponent,
 } from "@webstudio-is/react-sdk";
 import {
   extractWebstudioFragment,
@@ -47,7 +47,7 @@ import {
 import { shallowEqual } from "shallow-equal";
 import { MetaIcon } from "~/builder/shared/meta-icon";
 
-export const findEditableBlockSelector = (
+export const findBlockSelector = (
   anchor: InstanceSelector,
   instances: Instances
 ) => {
@@ -59,7 +59,7 @@ export const findEditableBlockSelector = (
     return;
   }
 
-  let editableBlockInstanceSelector: InstanceSelector | undefined = undefined;
+  let blockInstanceSelector: InstanceSelector | undefined = undefined;
 
   for (let i = 0; i < anchor.length; ++i) {
     const instanceId = anchor[i];
@@ -69,40 +69,37 @@ export const findEditableBlockSelector = (
       return;
     }
 
-    if (instance.component === editableBlockComponent) {
-      editableBlockInstanceSelector = anchor.slice(i);
+    if (instance.component === blockComponent) {
+      blockInstanceSelector = anchor.slice(i);
       break;
     }
   }
 
-  if (editableBlockInstanceSelector === undefined) {
+  if (blockInstanceSelector === undefined) {
     return;
   }
 
-  return editableBlockInstanceSelector;
+  return blockInstanceSelector;
 };
 
 const findTemplates = (anchor: InstanceSelector, instances: Instances) => {
-  const editableBlockInstanceSelector = findEditableBlockSelector(
-    anchor,
-    instances
-  );
-  if (editableBlockInstanceSelector === undefined) {
+  const blockInstanceSelector = findBlockSelector(anchor, instances);
+  if (blockInstanceSelector === undefined) {
     toast.error("Editable block not found");
     return;
   }
 
-  const editableBlockInstance = instances.get(editableBlockInstanceSelector[0]);
+  const blockInstance = instances.get(blockInstanceSelector[0]);
 
-  if (editableBlockInstance === undefined) {
+  if (blockInstance === undefined) {
     toast.error("Editable block instance not found");
     return;
   }
 
-  const templateInstanceId = editableBlockInstance.children.find(
+  const templateInstanceId = blockInstance.children.find(
     (child) =>
       child.type === "id" &&
-      instances.get(child.value)?.component === editableBlockTemplateComponent
+      instances.get(child.value)?.component === blockTemplateComponent
   )?.value;
 
   if (templateInstanceId === undefined) {
@@ -125,7 +122,7 @@ const findTemplates = (anchor: InstanceSelector, instances: Instances) => {
       .filter((child) => child !== undefined)
       .map((child) => [
         child,
-        [child.id, templateInstanceId, ...editableBlockInstanceSelector],
+        [child.id, templateInstanceId, ...blockInstanceSelector],
       ]);
 
   return result;
@@ -136,29 +133,27 @@ const getInsertionIndex = (
   instances: Instances,
   insertBefore: boolean = false
 ) => {
-  const editableBlockSelector = findEditableBlockSelector(anchor, instances);
-  if (editableBlockSelector === undefined) {
+  const blockSelector = findBlockSelector(anchor, instances);
+  if (blockSelector === undefined) {
     return;
   }
 
-  const insertAtInitialPosition = shallowEqual(editableBlockSelector, anchor);
+  const insertAtInitialPosition = shallowEqual(blockSelector, anchor);
 
-  const editableBlockInstance = instances.get(editableBlockSelector[0]);
+  const blockInstance = instances.get(blockSelector[0]);
 
-  if (editableBlockInstance === undefined) {
+  if (blockInstance === undefined) {
     toast.error("Editable block instance not found");
     return;
   }
 
-  const index = editableBlockInstance.children.findIndex((child) => {
+  const index = blockInstance.children.findIndex((child) => {
     if (child.type !== "id") {
       return false;
     }
 
     if (insertAtInitialPosition) {
-      return (
-        instances.get(child.value)?.component === editableBlockTemplateComponent
-      );
+      return instances.get(child.value)?.component === blockTemplateComponent;
     }
 
     return child.value === anchor[0];
@@ -256,10 +251,7 @@ const TemplatesMenu = ({
                   templateSelector[0]
                 );
 
-                const parentSelector = findEditableBlockSelector(
-                  anchor,
-                  instances
-                );
+                const parentSelector = findBlockSelector(anchor, instances);
 
                 if (parentSelector === undefined) {
                   return;
@@ -322,19 +314,19 @@ const TemplatesMenu = ({
   );
 };
 
-export const EditableBlockChildHoveredInstanceOutline = () => {
-  const editableBlockChildOutline = useStore($editableBlockChildOutline);
+export const BlockChildHoveredInstanceOutline = () => {
+  const blockChildOutline = useStore($blockChildOutline);
   const scale = useStore($scale);
   const isContentMode = useStore($isContentMode);
 
   const timeoutRef = useRef<undefined | ReturnType<typeof setTimeout>>(
     undefined
   );
   const [buttonOutline, setButtonOutline] = useState<
-    undefined | EditableBlockChildOutline
+    undefined | BlockChildOutline
   >(undefined);
 
-  const outline = editableBlockChildOutline ?? buttonOutline;
+  const outline = blockChildOutline ?? buttonOutline;
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -353,7 +345,7 @@ export const EditableBlockChildHoveredInstanceOutline = () => {
   const rect = applyScale(outline.rect, scale);
 
   return (
-    <EditableBlockChildAddButtonOutline rect={rect}>
+    <BlockChildAddButtonOutline rect={rect}>
       <Flex
         css={{
           width: "min-content",
@@ -399,6 +391,6 @@ export const EditableBlockChildHoveredInstanceOutline = () => {
           </IconButton>
         </TemplatesMenu>
       </Flex>
-    </EditableBlockChildAddButtonOutline>
+    </BlockChildAddButtonOutline>
   );
 };

apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "@nanostores/react";
 import {
-  $editableBlockChildOutline,
+  $blockChildOutline,
   $hoveredInstanceOutlineAndInstance,
   $hoveredInstanceSelector,
   $instances,
@@ -26,7 +26,7 @@ const isDescendantOrSelf = (
 export const HoveredInstanceOutline = () => {
   const instances = useStore($instances);
   const hoveredInstanceSelector = useStore($hoveredInstanceSelector);
-  const editableBlockChildOutline = useStore($editableBlockChildOutline);
+  const blockChildOutline = useStore($blockChildOutline);
   const outline = useStore($hoveredInstanceOutlineAndInstance);
   const scale = useStore($scale);
   const textEditingInstanceSelector = useStore($textEditingInstanceSelector);
@@ -37,9 +37,7 @@ export const HoveredInstanceOutline = () => {
   }
 
   if (isFeatureEnabled("contentEditableMode") && isContentMode) {
-    if (
-      shallowEqual(editableBlockChildOutline?.selector, hoveredInstanceSelector)
-    ) {
+    if (shallowEqual(blockChildOutline?.selector, hoveredInstanceSelector)) {
       return;
     }
   }

apps/builder/app/builder/features/workspace/canvas-tools/outline/outline.tsx

@@ -72,7 +72,7 @@ type OutlineProps = {
   variant?: "default" | "collaboration" | "slot";
 };
 
-export const EditableBlockChildAddButtonOutline = ({
+export const BlockChildAddButtonOutline = ({
   rect,
   children,
 }: {

apps/builder/app/builder/shared/commands.ts

@@ -32,8 +32,8 @@ import {
 import { selectInstance } from "~/shared/awareness";
 import { openCommandPanel } from "../features/command-panel";
 import { builderApi } from "~/shared/builder-api";
-import { findEditableBlockSelector } from "../features/workspace/canvas-tools/outline/editable-block-instance-outline";
-import { editableBlockTemplateComponent } from "@webstudio-is/react-sdk";
+import { findBlockSelector } from "../features/workspace/canvas-tools/outline/editable-block-instance-outline";
+import { blockTemplateComponent } from "@webstudio-is/react-sdk";
 
 const makeBreakpointCommand = <CommandName extends string>(
   name: CommandName,
@@ -71,7 +71,7 @@ const deleteSelectedInstance = () => {
 
   if ($isContentMode.get()) {
     // In content mode we are allowing to delete childen of the editable block
-    const editableInstanceSelector = findEditableBlockSelector(
+    const editableInstanceSelector = findBlockSelector(
       selectedInstanceSelector,
       instances
     );
@@ -80,19 +80,19 @@ const deleteSelectedInstance = () => {
       return;
     }
 
-    const isChildOfEditableBlock =
+    const isChildOfBlock =
       selectedInstanceSelector.length - editableInstanceSelector.length === 1;
 
     const isTemplateInstance =
       instances.get(selectedInstanceSelector[0])?.component ===
-      editableBlockTemplateComponent;
+      blockTemplateComponent;
 
     if (isTemplateInstance) {
       builderApi.toast.info("You can't delete this instance in conent mode.");
       return;
     }
 
-    if (!isChildOfEditableBlock) {
+    if (!isChildOfBlock) {
       builderApi.toast.info("You can't delete this instance in conent mode.");
       return;
     }

apps/builder/app/canvas/features/build-mode/editable-block-template.tsx renamed to apps/builder/app/canvas/features/build-mode/block-template.tsx

@@ -7,7 +7,7 @@ import {
 import * as React from "react";
 import { $isDesignMode, $selectedInstanceSelector } from "~/shared/nano-states";
 
-export const EditableBlockTemplate = React.forwardRef<
+export const BlockTemplate = React.forwardRef<
   HTMLDivElement,
   WebstudioComponentSystemProps & { children: React.ReactNode }
 >(({ ...props }, ref) => {

apps/builder/app/canvas/features/build-mode/editable-block.tsx renamed to apps/builder/app/canvas/features/build-mode/block.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "@nanostores/react";
 import {
-  editableBlockTemplateComponent,
+  blockTemplateComponent,
   idAttribute,
   selectorIdAttribute,
   type AnyComponent,
@@ -14,7 +14,7 @@ import {
   $selectedInstanceSelector,
 } from "~/shared/nano-states";
 
-export const EditableBlock = React.forwardRef<
+export const Block = React.forwardRef<
   HTMLDivElement,
   { children: React.ReactNode } & WebstudioComponentSystemProps
 >(({ children, ...props }, ref) => {
@@ -36,7 +36,7 @@ export const EditableBlock = React.forwardRef<
     const templateInstanceId = instance.children.find(
       (child) =>
         child.type === "id" &&
-        instances.get(child.value)?.component === editableBlockTemplateComponent
+        instances.get(child.value)?.component === blockTemplateComponent
     )?.value;
 
     if (templateInstanceId === undefined) {