Skip to content

/ gutenberg

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cover Block: Duotone feature crashes editor when attempting to edit unlinked padding. #31766

Closed
bph opened this issue May 12, 2021 · 1 comment
Closed

Cover Block: Duotone feature crashes editor when attempting to edit unlinked padding. #31766

bph opened this issue May 12, 2021 · 1 comment
Assignees
@ajlende
Labels
[Block] Cover [Status] In Progress [Type] Bug

Comments

@bph
Copy link
Contributor

@bph bph commented May 12, 2021 •
edited

Description

I wanted to test the new padding feature on the cover block, then i uploaded an image and added the duotone overlay but then I wanted to edit it again and the editor crashed.

Step-by-step reproduction instructions

  1. Add a post
  2. Add a Cover block
  3. Add a background image
  4. add padding to the cover block
  5. unlink the sides
  6. set bottom to 45 and top to 25
  7. select duotone.
  8. try to edit the padding again.

A better video. The crash happens when editing padding after duotone is enabled.
https://recordit.co/VhT8aaWaTt

Error message:

- TypeError: e.forEach is not a function
    - at Vc (http://fse-testing.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=8e360919cbf98891d83938131507d2b8:10:8971)
    - at http://fse-testing.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=8e360919cbf98891d83938131507d2b8:10:11210
    - at we (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:84:293)
    - at He (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:97:464)
    - at zj (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:228:406)
    - at Th (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:223)
    - at tj (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:152)
    - at Te (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:151)
    - at http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
    - at unstable_runWithPriority (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260)

WordPress information

  • WordPress version: 5.7.1
  • Gutenberg version: 10.6
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? TT1-Blocks

Device information

  • Device: Desktop
  • Operating system: OS 10.15.7
  • Browser: Chrome 90.0.4430.93
@bph bph changed the title Cover Block: Padding feature crashes editor Cover Block: Padding or duotone feature crashes editor May 12, 2021
@bph bph changed the title Cover Block: Padding or duotone feature crashes editor Cover Block: Duotone feature crashes editor together with padding... May 12, 2021
@bph bph changed the title Cover Block: Duotone feature crashes editor together with padding... Cover Block: Duotone feature crashes editor when attempting to edit unlinked padding. May 12, 2021
@ajlende
Copy link
Contributor

@ajlende ajlende commented May 12, 2021 •
edited

I was able to reproduce the issue with fewer steps:

  1. Add cover block
  2. Set image background
  3. Apply any duotone filter
  4. Hover over the padding input

The error comes from duotone and, when unminified, reads:

Uncaught TypeError: colors.forEach is not a function
    at getValuesFromColors (duotone.js:34)
    at duotone.js:232
    at renderWithHooks (react-dom.82e849f1.js:14938)
    at updateFunctionComponent (react-dom.82e849f1.js:17169)
    at beginWork (react-dom.82e849f1.js:18745)
    at HTMLUnknownElement.callCallback (react-dom.82e849f1.js:182)
    at Object.invokeGuardedCallbackDev (react-dom.82e849f1.js:231)
    at invokeGuardedCallback (react-dom.82e849f1.js:286)
    at beginWork$1 (react-dom.82e849f1.js:23338)
    at performUnitOfWork (react-dom.82e849f1.js:22289)

What's strange is that the colors are coming through as an Object despite being an Array in the code editor and when the values are set with setAttributes in duotone.

Both duotone and padding use the style attribute, so something that padding is doing may be resetting the duotone attribute to be an Object instead of an Array.
@ajlende ajlende mentioned this issue May 13, 2021
Merged
7 of 7 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ajlende ajlende

Labels
[Block] Cover [Status] In Progress [Type] Bug
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

Fix duotone padding crash
2 participants
@bph @ajlende