Add CSS for relevant Jetpack Gutenberg blocks

[tylersticka]

In testing our new WordPress theme, I've noticed that Jetpack includes some complimentary Gutenberg blocks that seem quite useful. In most cases, they seem very close to working but may need some CSS tweaks to fit in our responsive containers.

Tasks per block

• Use a local environment with Jetpack installed and Gutenberg active to source markup for the block
• Use this markup to create a story similar to our Gutenberg stories (but maybe housed in a separate file/area so it's clear that these are Jetpack blocks)?
• Write necessary CSS (if necessary) so that the block will work within our pages

Setup tasks

• Determine method for including whatever CSS or JS is necessary for visualizing these stories. Ideally this would be a dependency we add to the project similar to what we're doing for the core Gutenberg blocks so we don't have to maintain it.

Blocks

This is not the full list, as not all blocks seem useful to us.

No need to create stories for blocks that work as-is without modification. Check those off and move on!

If there are major gotchas, hurdles or other issues with any of these blocks, we should make note of that and move on to the next simplest block. No reason to get hung up on any one of these.

• Image Compare Block (Does not appear to resize with container currently)
• Markdown Block (Needs space between adjacent block elements)

(I thought there'd be more than two we'd use prior to writing this issue. 😄)

[tylersticka]

I've updated this issue to remove two of the three to-dos. I wanted to provide some context for why that is.

First, the Image Compare Block. This appears to leverage Juxtapose. Since creating this issue, our own @Paul-Hebert has crafted a web component solution that debuted publicly in @grigs' recent article (with an explanatory article of its own coming soon).

At first glance, the pros of using the Jetpack block seemed to outweigh the cons: We get a nice UI, it's already done, it supports different axes, etc. But in doing more research, some issues started to emerge:

• The library they use appears to only be responsive when resizing up. If you start wide and resize to a narrow width, it breaks the layout.
• Using the block adds one CSS file (1.58 KB minified/gzipped) and one JS file (3.21 KB minified/gzipped). While these sizes are very reasonable, they're still quite a bit larger than what @Paul-Hebert pulled off with his web component.
• The block uses 12 DOM elements, whereas the web component only appears to use about seven.
• The block uses a slightly more expensive means of overlaying the images (altering width).
• The arrows used by WordPress are attractive, but they appear to be base64-encoded SVGs, which are expensive to store and process (and a personal pet peeve of mine as a professed SVG snob).

For those reasons, I've now flipped my opinion to using the web component as needed. Perhaps eventually we'll roll our own block for this, or find a way to customize the Jetpack output to use our web component instead!

That leaves only the Markdown Block left, and that block is entirely server-rendered, so there's no CSS or JS to import. This invalidates my original first to-do.