Editor: Layer renaming

includes/Experiments.php

@@ -356,6 +356,17 @@ public function get_experiments(): array {
 				'group'       => 'editor',
 				'default'     => true,
 			],
+			/**
+			 * Author: @mariana-k
+			 * Issue: #9248
+			 * Creation date: 2022-05-12
+			 */
+			[
+				'name'        => 'layerNaming',
+				'label'       => __( 'Layer naming', 'web-stories' ),
+				'description' => __( 'Enable layer naming', 'web-stories' ),
+				'group'       => 'editor',
+			],
 		];
 	}
 

packages/elements/src/utils/getLayerName.js

@@ -33,15 +33,13 @@ import getDefinitionForType from './getDefinitionForType';
  * @return {string} Layer name.
  */
 function getLayerName(element) {
-  if (element.isBackground) {
-    return __('Background', 'web-stories');
-  }
-
-  /* TODO: Enable this when layers can have names:
   if (element.layerName) {
     return element.layerName;
   }
-  */
+
+  if (element.isBackground) {
+    return __('Background', 'web-stories');
+  }
 
   return getDefinitionForType(element.type).getLayerText(element);
 }

packages/story-editor/src/app/canvas/canvasProvider.js

@@ -55,6 +55,7 @@ function CanvasProvider({ children }) {
   const [eyedropperPixelData, setEyedropperPixelData] = useState(null);
   const [isEyedropperActive, setIsEyedropperActive] = useState(null);
   const [eyedropperCallback, setEyedropperCallback] = useState(null);
+  const [renamableLayer, setRenamableLayer] = useState(null);
 
   // IntersectionObserver tracks clientRects which is what we need here.
   // different from use case of useIntersectionEffect because this is extensible
@@ -217,6 +218,7 @@ function CanvasProvider({ children }) {
         boundingBoxes,
         clientRectObserver,
         onMoveableMount,
+        renamableLayer,
       },
       actions: {
         setPageContainer,
@@ -237,6 +239,7 @@ function CanvasProvider({ children }) {
         setEyedropperImg,
         setEyedropperPixelData,
         setMoveableMount,
+        setRenamableLayer,
       },
     }),
     [
@@ -256,6 +259,7 @@ function CanvasProvider({ children }) {
       eyedropperPixelData,
       boundingBoxes,
       clientRectObserver,
+      renamableLayer,
       getNodeForElement,
       setNodeForElement,
       setEditingElementWithoutState,
@@ -265,6 +269,7 @@ function CanvasProvider({ children }) {
       selectIntersection,
       onMoveableMount,
       setMoveableMount,
+      setRenamableLayer,
     ]
   );
   return (

packages/story-editor/src/app/rightClickMenu/constants.js

@@ -60,6 +60,7 @@ export const RIGHT_CLICK_MENU_LABELS = {
   DUPLICATE_ELEMENTS: (numElements = 1) =>
     _n('Duplicate Element', 'Duplicate Elements', numElements, 'web-stories'),
   LOCK_UNLOCK: __('Lock/Unlock', 'web-stories'),
+  RENAME_LAYER: __('Rename Layer', 'web-stories'),
   PASTE_IMAGE_STYLES: __('Paste Image Styles', 'web-stories'),
   PASTE_SHAPE_STYLES: __('Paste Shape Styles', 'web-stories'),
   PASTE_VIDEO_STYLES: __('Paste Video Styles', 'web-stories'),

packages/story-editor/src/app/rightClickMenu/items/index.js

@@ -15,3 +15,4 @@
  */
 
 export { default as LayerLock } from './layerLock';
+export { default as LayerName } from './layerName';

packages/story-editor/src/app/rightClickMenu/items/layerLock.js

@@ -49,12 +49,9 @@ function LayerLock() {
   }
 
   return (
-    <>
-      <ContextMenuComponents.MenuSeparator />
-      <ContextMenuComponents.MenuButton onClick={toggleLayerLock}>
-        {RIGHT_CLICK_MENU_LABELS.LOCK_UNLOCK}
-      </ContextMenuComponents.MenuButton>
-    </>
+    <ContextMenuComponents.MenuButton onClick={toggleLayerLock}>
+      {RIGHT_CLICK_MENU_LABELS.LOCK_UNLOCK}
+    </ContextMenuComponents.MenuButton>
   );
 }
 

packages/story-editor/src/app/rightClickMenu/items/layerName.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { ContextMenuComponents } from '@googleforcreators/design-system';
+import { useCallback } from '@googleforcreators/react';
+import { useFeature } from 'flagged';
+
+/**
+ * Internal dependencies
+ */
+import { RIGHT_CLICK_MENU_LABELS } from '../constants';
+import { useCanvas, useStory } from '../..';
+
+function LayerName() {
+  const { selectedElementIds } = useStory(({ state }) => ({
+    selectedElementIds: state.selectedElementIds,
+  }));
+  const { setRenamableLayer } = useCanvas(({ state, actions }) => ({
+    setRenamableLayer: actions.setRenamableLayer,
+    renamableLayer: state.renamableLayer,
+  }));
+  const enableLayerNaming = useCallback(() => {
+    setRenamableLayer({
+      elementId: selectedElementIds[0],
+    });
+  }, [setRenamableLayer, selectedElementIds]);
+
+  const isLayerNamingEnabled = useFeature('layerNaming');
+
+  if (!isLayerNamingEnabled) {
+    return null;
+  }
+
+  return (
+    <>
+      <ContextMenuComponents.MenuSeparator />
+      <ContextMenuComponents.MenuButton onClick={enableLayerNaming}>
+        {RIGHT_CLICK_MENU_LABELS.RENAME_LAYER}
+      </ContextMenuComponents.MenuButton>
+    </>
+  );
+}
+
+export default LayerName;

packages/story-editor/src/app/rightClickMenu/menus/foregroundMediaMenu.js

@@ -39,7 +39,7 @@ import { useStory, useLocalMedia } from '../..';
 import useVideoTrim from '../../../components/videoTrim/useVideoTrim';
 import useRightClickMenu from '../useRightClickMenu';
 import useLayerSelect from '../useLayerSelect';
-import { LayerLock } from '../items';
+import { LayerLock, LayerName } from '../items';
 import {
   DEFAULT_DISPLACEMENT,
   MenuPropType,
@@ -182,6 +182,7 @@ function ForegroundMediaMenu({ parentMenuRef }) {
         </ContextMenuComponents.MenuShortcut>
       </ContextMenuComponents.MenuButton>
 
+      <LayerName />
       <LayerLock />
 
       <ContextMenuComponents.MenuSeparator />

packages/story-editor/src/app/rightClickMenu/menus/shapeMenu.js

@@ -37,7 +37,7 @@ import {
   usePresetActions,
 } from '../hooks';
 import useLayerSelect from '../useLayerSelect';
-import { LayerLock } from '../items';
+import { LayerLock, LayerName } from '../items';
 import { useStory } from '../..';
 import useRightClickMenu from '../useRightClickMenu';
 import {
@@ -156,6 +156,7 @@ function ShapeMenu({ parentMenuRef }) {
         </ContextMenuComponents.MenuShortcut>
       </ContextMenuComponents.MenuButton>
 
+      <LayerName />
       <LayerLock />
 
       <ContextMenuComponents.MenuSeparator />

packages/story-editor/src/app/rightClickMenu/menus/stickerMenu.js

@@ -32,7 +32,7 @@ import {
 } from '../constants';
 import { useElementActions, useLayerActions } from '../hooks';
 import useLayerSelect from '../useLayerSelect';
-import { LayerLock } from '../items';
+import { LayerLock, LayerName } from '../items';
 import useRightClickMenu from '../useRightClickMenu';
 import {
   DEFAULT_DISPLACEMENT,
@@ -144,6 +144,7 @@ function StickerMenu({ parentMenuRef }) {
         </ContextMenuComponents.MenuShortcut>
       </ContextMenuComponents.MenuButton>
 
+      <LayerName />
       <LayerLock />
     </>
   );

packages/story-editor/src/app/rightClickMenu/menus/textMenu.js

@@ -37,7 +37,7 @@ import {
   usePresetActions,
 } from '../hooks';
 import useLayerSelect from '../useLayerSelect';
-import { LayerLock } from '../items';
+import { LayerLock, LayerName } from '../items';
 import { useStory } from '../..';
 import useRightClickMenu from '../useRightClickMenu';
 import {
@@ -156,6 +156,7 @@ function TextMenu({ parentMenuRef }) {
         </ContextMenuComponents.MenuShortcut>
       </ContextMenuComponents.MenuButton>
 
+      <LayerName />
       <LayerLock />
 
       <ContextMenuComponents.MenuSeparator />

packages/story-editor/src/components/canvas/useInsertElement.js

@@ -69,7 +69,9 @@ function useInsertElement() {
           }
         });
       }
+
       focusCanvas();
+
       return element;
     },
     [addElement, focusCanvas, setZoomSetting]

packages/story-editor/src/components/footer/layers/layers.js

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import { useState, useRef } from '@googleforcreators/react';
+import { useState, useRef, useEffect } from '@googleforcreators/react';
 import { __, sprintf } from '@googleforcreators/i18n';
 import { PLACEMENT } from '@googleforcreators/design-system';
 /**
@@ -29,6 +29,7 @@ import { LayerPanel } from '../../panels/design';
 import useLayers from '../../panels/design/layer/useLayers';
 import Popup, { NavigationWrapper } from '../../secondaryPopup';
 import { ToggleButton } from '../../toggleButton';
+import { useCanvas } from '../../../app';
 
 const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.bg.secondary};
@@ -43,6 +44,15 @@ function Layers() {
   const layersLength = useLayers().length;
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef();
+  const { renamableLayer } = useCanvas(({ state }) => ({
+    renamableLayer: state.renamableLayer,
+  }));
+
+  useEffect(() => {
+    if (renamableLayer) {
+      setIsOpen(true);
+    }
+  }, [renamableLayer]);
 
   return (
     <>

packages/story-editor/src/components/panels/design/layer/karma/layer.karma.js

@@ -119,6 +119,69 @@ describe('Layer Panel', () => {
     ).toBeTrue();
   });
 
+  it('should be able to rename a layer by clicking Enter', async () => {
+    await fixture.events.click(fixture.editor.sidebar.insertTab);
+    await fixture.editor.library.textTab.click();
+    await fixture.events.click(fixture.editor.library.text.preset('Title 1'));
+
+    const titleLayer = layerPanel.getLayerByInnerText('Title 1');
+
+    await fixture.events.click(titleLayer, { clickCount: 2 });
+    await fixture.events.keyboard.type('New Title Name');
+    await fixture.events.keyboard.press('Enter');
+
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'New Title Name')
+        ?.length
+    ).toBe(1);
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'Title 1')?.length
+    ).toBe(0);
+  });
+
+  it('should be able to rename a layer on blur (e.g. clicking on another layer)', async () => {
+    await fixture.events.click(fixture.editor.sidebar.insertTab);
+    await fixture.editor.library.textTab.click();
+    await fixture.events.click(fixture.editor.library.text.preset('Title 1'));
+
+    const titleLayer = layerPanel.getLayerByInnerText('Title 1');
+
+    await fixture.events.click(titleLayer, { clickCount: 2 });
+    await fixture.events.keyboard.type('New Title Name');
+
+    const bgLayer = layerPanel.getLayerByInnerText('Background');
+
+    await fixture.events.click(bgLayer);
+
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'New Title Name')
+        ?.length
+    ).toBe(1);
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'Title 1')?.length
+    ).toBe(0);
+  });
+
+  it('should be able to exit renaming a layer by clicking Esc', async () => {
+    await fixture.events.click(fixture.editor.sidebar.insertTab);
+    await fixture.editor.library.textTab.click();
+    await fixture.events.click(fixture.editor.library.text.preset('Title 1'));
+
+    const titleLayer = layerPanel.getLayerByInnerText('Title 1');
+
+    await fixture.events.click(titleLayer, { clickCount: 2 });
+    await fixture.events.keyboard.type('New Title Name');
+    await fixture.events.keyboard.press('Esc');
+
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'New Title Name')
+        ?.length
+    ).toBe(0);
+    expect(
+      layerPanel.layers.filter((layer) => layer.innerText === 'Title 1')?.length
+    ).toBe(1);
+  });
+
   it('should be able to duplicate elements with duplicate action', async () => {
     await fixture.events.click(fixture.editor.sidebar.insertTab);
     await fixture.editor.library.textTab.click();