Background element refactor (+ drop targets and fixes) #693

wassgha · 2020-03-22T10:35:23Z

Closes #25
Closes #683
Closes #644
Closes #631
Maybe closes #678 ?
Closes #739

This rethinks the background element as a first class citizen. The background element is either non-existent or one of the supported element types (shape, image, video), it is no longer given a preferential treatment in code.

Changes

Adds a shape style panel (to allow changing the background color of shapes)
Implements an effect that maintains an empty background (while rectangle shape) on pages by default
Removes the background color panel (replaced by shape color panel when the background is the default one)
Fixes White(null) background showing up as grey in preview #683 (ensure the same background color/element on the canvas, the preview and the output)
Remove need for a special treatment of the background element in the layers panel
Fix Lasso selection not working when background media set. #631 Lasso selection not working on the background element
Added a migration script

github-actions · 2020-03-22T10:37:55Z

Size Change: +118 B (0%)

Total Size: 433 kB

Filename	Size	Change
`assets/js/edit-story.js`	369 kB	+118 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`assets/css/edit-story.css`	241 B	0 B
`assets/css/stories-dashboard.css`	206 B	0 B
`assets/js/stories-dashboard.js`	63.4 kB	0 B

_{compressed-size-action}

assets/src/edit-story/migration/migrations/v0009_defaultBackground.js

* master: Background element refactor (+ drop targets and fixes) (#693)

dvoytenko · 2020-03-24T21:02:05Z

assets/src/edit-story/app/story/effects/usePageBackgrounds.js

+    if (!currentPage || currentPage?.backgroundElementId) {
+      return;
+    }
+    const element = createNewElement('shape', {


If we update the model itself, I think it'd work better in the story reducer rather than a disconnected effect. For one, we wouldn't have history problems with this approach. This might be an important thing to fix right away.

dvoytenko · 2020-03-24T21:04:47Z

assets/src/edit-story/components/canvas/selectionCanvas.js

@@ -57,6 +57,7 @@ const Lasso = styled.div`
 function SelectionCanvas({ children }) {
  const {
    actions: { clearSelection },
+    state: { selectedElements },


Can we use selectedElementIds instead? They are updating a lot less often.

dvoytenko · 2020-03-24T21:13:01Z

assets/src/edit-story/components/panels/layer/layer.js

 function Layer({ layer }) {
  const { LayerIcon, LayerContent } = getDefinitionForType(layer.type);
  const { isSelected, handleClick } = useLayerSelection(layer);
  const { handleStartReordering } = useLayerReordering(layer);
+  const {


Hmm. I'm seeing the background showing up in the layer panel now, even when not specified. Can you clarify if this some additional issue fixed?

dvoytenko · 2020-03-24T21:18:14Z

assets/src/edit-story/components/canvas/frameElement.js

@@ -87,7 +88,9 @@ function FrameElement({ element }) {
        if (!isSelected) {
          handleSelectElement(id, evt);
        }
-        evt.stopPropagation();
+        if (!isBackground) {


Why is this? Could you add a comment in code. This seems like an important behavior involving background elements. As such, I'm also wondering if it'd be safer to roll it all inside the handleSelectElement? Otherwise we're fragmenting the behavior a bit between two places. It used to be easier with a simple stopPropagation, but this could be more nuanced.

dvoytenko · 2020-03-24T21:22:27Z

assets/src/edit-story/components/panels/layer/useLayerReordering.js

    actions: { arrangeElement, setSelectedElementsById },
  } = useStory();

+  const isBackground = currentPage.backgroundElementId === elementId;


Don't we already have element.isBackground?

dvoytenko · 2020-03-24T21:29:02Z

assets/src/edit-story/components/panels/pageBackground.js

-    [updateCurrentPageProperties]
-  );
-  return (
-    <SimplePanel name="pagebackground" title={__('Page', 'web-stories')}>


We don't need the page background color anymore? Is there a semantical meaning in the background color? Is there technical meaning? E.g. if an image is used as the background and has some transparency, shouldn't the background color show through?

I checked and it appears to be so in Figma. The page background color is customizable even if the background media is set.

dvoytenko · 2020-03-24T21:40:31Z

assets/src/edit-story/components/panels/shapeStyle.js

+  const backgroundColor = getCommonValue(selectedElements, 'backgroundColor');
+
+  return (
+    <SimplePanel name="style" title={__('Style', 'web-stories')}>


We need to confirm whether a shape is allowed to be a background per our rules: i.e. can we put a simple shape (rect or star) and click "Use as background" on it. If we do, we should probably disallow "Remove as background" for auto-background-shape. Otherwise it'd simply be recreated immediately.

Confirming further, would we allow isFullbleed customization for the auto-background-shape? If not, does this PR already disable it?

dvoytenko · 2020-03-24T21:40:46Z

assets/src/edit-story/components/panels/shapeStyle.js

+        <Color
+          hasGradient
+          value={backgroundColor}
+          isMultiple={backgroundColor === ''}


There's no longer isMultiple

dvoytenko · 2020-03-24T21:41:52Z

assets/src/edit-story/components/panels/shapeStyle.js

+    <SimplePanel name="style" title={__('Style', 'web-stories')}>
+      <Row>
+        <Color
+          hasGradient


So, there might be a difference here slightly with page background color. See #739. It looks like we may want to remove opacity from the background shape, but not a non-background shape.

dvoytenko · 2020-03-24T21:47:09Z

assets/src/edit-story/components/panels/shared/flipControls.js

@@ -36,12 +36,14 @@ function FlipControls({ value, onChange }) {
    <>
      <Toggle
        title={__('Flip horizontally', 'web-stories')}
+        aria-label={__('Flip horizontally', 'web-stories')}


We could probably default title for aria-label as well?

swissspidy · 2020-03-30T20:05:55Z

@wassgha Was this migration script somehow never added? 🤔

Initial refactor of the background element

caf08c0

googlebot added the cla: yes label Mar 22, 2020

wassgha added 2 commits March 22, 2020 04:21

Removed need for special treatment of the background in the layers panel

6496812

Fixes lasso not working on the background element

7b28950

wassgha marked this pull request as ready for review March 22, 2020 11:31

wassgha requested review from barklund, dvoytenko and swissspidy as code owners March 22, 2020 11:31

swissspidy added the Type: Enhancement New feature or improvement of an existing feature label Mar 22, 2020

wassgha added 2 commits March 22, 2020 13:54

Added migration script

522d0e4

Fixed integration test (a11y issue)

2fe69f7

swissspidy reviewed Mar 23, 2020

View reviewed changes

assets/src/edit-story/migration/migrations/v0009_defaultBackground.js Show resolved Hide resolved

wassgha added 3 commits March 23, 2020 17:15

Merge branch 'master' into background-element

7fa5a16

Fixed background selection issue

5bc4cc4

Added test for migrating color

c2348e7

wassgha requested a review from swissspidy March 24, 2020 01:04

wassgha added 2 commits March 23, 2020 22:21

Merge branch 'master' into background-element

c99b3b8

Fixed e2e test

67efbbb

swissspidy mentioned this pull request Mar 24, 2020

Page background should allow opacity #739

Closed

Fixed infinite loop

07847bc

swissspidy approved these changes Mar 24, 2020

View reviewed changes

wassgha merged commit 92dbc97 into master Mar 24, 2020

wassgha deleted the background-element branch March 24, 2020 18:35

obetomuniz added a commit that referenced this pull request Mar 24, 2020

Merge branch 'master' into add/text-highlighting

b647074

* master: Background element refactor (+ drop targets and fixes) (#693)

dvoytenko reviewed Mar 24, 2020

View reviewed changes

barklund mentioned this pull request Mar 25, 2020

Issue when reordering layers #764

Closed

swissspidy mentioned this pull request Mar 30, 2020

New aspect ratio 2:3 #872

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Background element refactor (+ drop targets and fixes) #693

Background element refactor (+ drop targets and fixes) #693

wassgha commented Mar 22, 2020 •

edited

Loading

github-actions bot commented Mar 22, 2020 •

edited

Loading

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

dvoytenko Mar 24, 2020

swissspidy commented Mar 30, 2020

Background element refactor (+ drop targets and fixes) #693

Background element refactor (+ drop targets and fixes) #693

Conversation

wassgha commented Mar 22, 2020 • edited Loading

Changes

github-actions bot commented Mar 22, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

swissspidy commented Mar 30, 2020

wassgha commented Mar 22, 2020 •

edited

Loading

github-actions bot commented Mar 22, 2020 •

edited

Loading