Add Waves Block 🌊

[ajlende]

Summary

After chatting with @pablohoneyhoney, the motion background idea is getting simplified, both from a UX and a code perspective. Part of the simplification involves splitting it into two types of blocks: color effects, and image effects. This PR is for the waves color effect.

Changes from motion background

• Render directly to a canvas (no more multiple blocks per canvas)
• Remove image selection, only do colors/gradients
• Add gradient fallback for devices without hardware acceleration (or JS disabled)
  • Gradient fallback
  • Investigate rendering to image for fallback
• Add controls for minimum height like the cover block
• Use InnerBlocks like the cover block
• Respect prefers-reduced-motion ( thanks for the suggestion @talldan :) )
• Fix bug where effect doesn't show until refreshing page
• Try to provide some sort of color contrast a11y
• Rename 'Gradient' to 'Color' in settings panel
• Use theme colors for default colors
• Provide better effect defaults
• Further design feedback
• New design assets (icon, etc.)

Screenshots

Walkthrough

Fallback when hardware acceleration or JavaScript is disabled

When prefers-reduced-motion setting is enabled

Outdated screenshots

When prefers-reduced-motion setting is enabled

Fallback when hardware acceleration is disabled

Plugin Bundle

a8c-waves-2020-05-21.zip

Outdated bundles

a8c-color-effects-2020-05-14.zip

[ajlende]

@pablohoneyhoney feel free to add any design critique or ideas here. I've been adding things to the checklist in the description as I think of them.

[ajlende]

It doesn't seem like I can do much for color a11y right now. WordPress/gutenberg#13862 is open, and the solution for the Group block doesn't seem to apply since text color is entirely controlled by the InnerBlocks.

[pablohoneyhoney]

Can we further reduce the limits of the distortion? @ajlende