Add motion background block

[ajlende]

Checklist

• 🎁 WebGL Block Template
• 👾 Shared canvas for unlimited blocks (versus max 8-32 using multiple canvases)
• 🖱 Mouse position interaction
• 🖲 Scroll position interaction
• ⏱ Time uniforms
• 🖼 Image upload
• 😎 Cool looking shades... er... shaders
• 🔤 Text Heading
• 📦 Plugin/Block Directory Assets

Name Ideas

• Liquid Image
• Paint Mixer

Static Screenshots

* Waves is just a custom image and low complexity

Add Block

Gradient Colors

Mouse Interaction & Animation Speeds

Image Upload

Curling Complexity

Bundle

a8c-motion-background.zip (2020-02-20)

a8c-motion-background.zip (2020-03-10)

[pablohoneyhoney]

Can we add GIFs here or a link to play with it?

[ajlende]

I was just working on GIFs before the meeting. They'll be ready shortly 🙂

[ajlende]

@jasmussen This is one of the "hacky things" I had to do to get layering to look good.

In order to allow for more than 2-32 blocks (depending on the device/browser/heuristics for maximum number of webgl contexts), I have a single canvas for all the blocks. In order for text and UI elements to draw on top of it, the canvas is placed underneath the #editor div. However, themes like Twentytwenty have a background color applied to the .editor-styles-wrapper div which is rendered by React inside the #editor div. Since React owns it and I don't have access to React from here, this is the best I could think of.

One possibility if we want to change the editor might be to have a place for things like this in the React DOM that components can render into with a portal; although, I don't know how practical that would be.

[jasmussen]

Ah, I suspect this is what's causing the gray background I just mentioned. That was in TwentyTwenty.

I've no problem with hacks per se, but we'll probably want to find a workaround here, as editor-styles-wrapper is the equivalent of the document root for the theme. It is a class that exists to attach editor styles to, so it is expected for themes that style the editor to put background colors and other things here. Here's more, but the gist is that if you load editor-style.scss in using add_editor_style, the following:

body {
background: red;
}

gets rewritten / transcoded into the following:

.editor-styles-wrapper {
background: red;
}

Is there an upstream patch we can consider to enable webGL blocks like this?

[jasmussen]

Took this for a spin today.

REALLY good work. While there are a few ifs and buts, you've put this together exceptionally well, with great taste for the overall functionality. Nice work.

A couple of things. I get a gray background:

This is in a G2 branch, which may be the cause of it, but a color is set on the editor-styles-wrapper element:

The initial state was missing some plasma for me:

It seems like that's because it's missing some gradients?

It also did not work with just colors:

I also couldn't get it to work with an Image. But I suspect it's possibly my local dev environment that's throwing a wrench in the wheels, but I'm sure you'll let me know.

Other than that, we'll want a new block icon — I can provide one, unless Pablo wants to jump in.

As a followup or future iteration, it would be interesting to explore moving some of those sidebar options into a button on the toolbar. I imagine a button that holds a gradient swatch, and when you click it you get either a modal dialog or a dropdown, whichever holds the content, and you can pick your plasma from there. Something to think about.

[ajlende]

@jasmussen The gray background is an artifact of G2. The block should be working properly behind that gray background, so for now you can just remove the gray background to see the animated background. I'll have to update my background hack when G2 lands.

.block-editor-editor-skeleton__content {
	background: transparent !important;
}

Edit: Looks like it actually comes from WordPress/gutenberg#19082

[ajlende]

And I agree about moving the gradient options to a toolbar. The gradient that's getting mixed isn't actually a liner gradient which is why I didn't want to use the existing gradient picker. Instead it's 4 colors in the corners of a rectangle that are blended with gamma so the colors don't get muddy. Having a preview of the un-mixed gradient might be helpful, but it would require some creative workarounds for drawing on top of the UI too.

[ajlende]

@pablohoneyhoney I got it working again after the changes from WordPress/gutenberg#19082 broke my background hack. The fix I merged into this branch is the one that doesn't require changes to Gutenberg (i.e. WordPress/gutenberg#20483).

The UX is a little weird because the only way I could layer a canvas underneath the UI was from within a block. So now you have a canvas provider block that allows the motion-background as an inner block.

And the code is a little weird because I have to calculate positioning slightly differently in the editor which required a bunch of code duplication.

I still think Gutenberg requires some changes to overcome the awkward UX—we can discuss them on WordPress/gutenberg#20483—but I'm going to squash and merge this for now to document an approach that works prior to any Gutenberg changes that might happen. We can also continue to iterate on the UI and default values in another PR.