automattic/block-experiments

A monorepo of Block Experiments

Block Experiments

A monorepo of block experiments by the fine folks at Automattic.

About

This repository holds a collection of blocks allowing a single place to develop, test, and package. Plus it allows a single place for user's to submit issues.

To make development easier, the build script allows for building and bundling all of the blocks together.

For packaging, each block can be generated as its own stand-alone plugin.

Development

1. Install node packages: yarn install

2. Run the development build with: yarn start (or) Run a production build with: yarn build

3. Once built, add copy this directory (or add a symlink) to your plugins directory.

4. Activate Block Experiments plugin, use blocks in Editor.

Development WordPress environment

By running the following, a docker container is launched.

$ npm i -g @wordpress/env
$ yarn env start

WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 59156

The development site will run at localhost and include a plugin loading all blocks.

See wp-env's Quick (tl;dr) instructions for credentials.

Adding a block

Add a directory to blocks, ensure your block has:

• your-block/index.php - the block plugin file to register your block
• your-block/src/index.js - the JS init file
• your-block/editor.scss - the editor SCSS file
• your-block/style.scss - the editor/front SCSS file

When registering your block, use these values so it works when used inside of the bundle:

register_block_type( 'jetpack/your-block-name', [
	'editor_script' => 'block-experiments',
	'style' => 'block-experiments',
	'editor_style' => 'block-experiments-editor',
] );

Packaging a Plugin

The plugin bundler takes a set of blocks and builds a WordPress plugin, suitable for inclusion on a standalone site or WordPress.com.

The bundler uses a JSON file to list the blocks to bundle. These JSON files are stored in bundler/bundles and look like:

{
	"blocks": [
		"block name"
	],
	"labs": true,
	"version": 0.1
}

The block names are listed under blocks, and the plugin version under version. If the bundle includes Tinker Labs blocks then set the labs to true so that the appropriate categories are also included.

Some blocks may require additional files, such as front end JS or CSS. These can be specified in manifest files, located in the block directory under index.json:

[
	"extra.js",
	"extra.css"
]

1. Set the plugin bundle to build: yarn plugin [bundle-name]

2. Build the plugin: yarn bundle

The plugin zip file can be found at: bundles/bundle-name.zip

Testing

You can test the Layout Grid with:

• yarn layout
• yarn jest

You can update the visual snapshots with:

• yarn jest -u

Releasing an individual block plugin

If you want to release an individual block then you can follow these steps:

• Update the block readme.txt file. For example bundler/resources/jetpack-layout-grid/readme.txt. Usually this involves adding an entry to the Changelog section (with date), and updating Tested upto as appropriate.
• Update the version number in the block JSON file. For example bundler/bundles/layout-grid.json.
• Run yarn plugin [bundle-name]. For example yarn plugin layout-grid.
• Run yarn bundle to produce the plugin zip file at bundles/bundle-name.zip

For the Layout Grid the plugin files can then be updated in the SVN repository:

https://plugins.svn.wordpress.org/layout-grid/

On WordPress.com the files need updating under gutenberg-blocks. Both locations need to be updated.

SVN Process

First check out the repo

mkdir dist/svn
cd dist/svn
svn co https://plugins.svn.wordpress.org/sketch --username oskosk

• Make sure you bump versions in readme.txt, and .json file . See #291 for an example of versions bump.

Build the plugin bundle and copy it over the SVN working copy excluding the assets directory.

cd ../.. # back to root of block-experimentes repo
yarn plugin sketch
yarn bundle
rsync -a plugin/a8c-sketch/ dist/svn/sketch/trunk --exclude=assets

Prepare to release

cd dist/svn/sketch
svn cp trunk tags/1.1.0
svn ci -m 'Release version 1.1.0'

block-experiments's Issues

Layout Grid: Wide Width Option

I love all the flexibility that the block provides, but I was wondering why there isn't the wide width option like the other container type of blocks. Would you consider adding it to the block?

The one thing that I'm having trouble is that if I use the full-width option with something that body text involves, the line-length obviously gets too long at some point with a large viewport. But the normal width tends to be too narrow in themes, especially if there are more than one columns.

I can work around with wrapping the Layout Grid with a wide group block, but I thought it'd be a welcoming addition for the Layout Grid block.

What do you think?

Layout grid: margin issues

We've observed some breakage in production (running Gutenberg 7.8) with some homepage templates using layout grid block.

Note how it's cutting out from left side:

Looks like there are two, possibly related issues:

• when selecting the layout grid, it jumps to have different margins than when it's unselected
• when inside "full width" group block (as opposed to "wide width"), the layout grid leaks outside the canvas

Demonstration: https://cloudup.com/cj0vtSLUung

@andrewserong was wondering if it's related to the lighter Group block DOM introduced in WordPress/gutenberg#20586

Testing

• Start at https://wpcalypso.wordpress.com/new
• Pick e.g. Vesta template
• When landing at the editor of your new site, observe breakage

Convo p1587608359048500-slack-gutenboarding

cc @iamtakashi @ianstewart @johnHackworth

Layout Grid: `front.css` appears at the bottom of the HTML doc.

I’m not sure if this is intentional but while testing the Layout Grid plugin I noticed that the frontend stylesheet gets loaded into the footer of the doc instead of in wp_head() where I’d typically expect a stylesheet to appear. This isn’t a problem on its own, however if I wanted to override the stylesheet in a theme, I either have to load my overriding styles in the footer as well or use !important in the CSS itself, both of which aren’t ideal for best practices.

Looking at the following line, it seems the stylesheet should be enqueued in wp_head:

block-experiments/blocks/layout-grid/index.php

Lines 19 to 26 in 3ba0903

	add_action( 'wp_head', function() {
	wp_enqueue_style(
	'wpcom-layout-grid-front',
	plugins_url( 'front.css', __FILE__ ),
	[], // no dependencies
	filemtime( plugin_dir_path( __FILE__ ) . 'front.css' )
	);
	} );

But as you can see in this screenshot it actually appears at the end of the doc:

With themes, we usually enqueue stylesheets into the header on the frontend with 'wp_enqueue_scripts' ie:

add_action( 'wp_enqueue_scripts', function() {…});

Maybe the same or similar could be used to solve this?

Selecting an image sets focus on caption

This issue appears to be something the block-experiments plugin does, and not the master branch of Gutenberg.

Compare the master branch with the master branch and this plugin active:

• Insert an image. Add a caption or don't.
• Unselect the image.
• Click the image to select it.

Note how when this plugin is active, the caption gets focus, not the image.

Event: The placeholder 'Event Description' cannot be translated.

Starscape slider crops on right

The gradient slider in the starscape block crops the right circle:

Tested in Gutenberg 6.5 & Chrome.

Layout Grid: Remove, or fix positioning of breakpoint indicator

This indicator is off:

We should either improve the positioning of this, or if we can fix #56, remove it entirely.

Release Bauhaus with text domains

#39 added text domains to Bauhaus. Let's get these out in a new release.

Image Tools: Consider exploring more advanced SVG filters

(copying from another repo)

Working on the Image Filters I’ve run into a bit of a challenge.

The img element is kind of a weird one in the way it behaves, and the very best filters (google CSSgram) rely on literal overlays that leverage mix-blend-mode. But overlays run into trouble, because they have to be abs-positioned, which means the actual image becomes something else — it kind of has to be block level, or weird things happen:

https://codepen.io/joen/pen/vYYbwpL

However I found we can also use SVG filters to perform matrix filters on them:

https://codepen.io/joen/pen/dyyaELM?editors=1100

This means we don’t have to apply a wrapper to the img, we can just apply the filters directly. However for SVG filters to work we have to output actual markup in the document, for example this:

Even though this SVG is entirely invisible, it still needs to be output in the DOM both on the frontend and backend, or the filter won’t take.

Let's explore what's feasible here, as the filters we can make using only filter may be limiting.

Layout grid: loading front end CSS along with editor CSS breaks the grid

If you use the grid block in a front-end editor situation the CSS from editor.css overrides the CSS in front.css. Generally things work well, except that the editor.css changes the grid from display: grid to display: flex.

This should probably be included as part of #85

Add unit tests for various blocks

Some of the blocks here are used in fundamental page layouts. For example, the layout grid. As such it's important that any changes we make don't break or affect these layouts in any way.

We need to introduce some tests so that we can:

• verify the HTML output of the blocks
• verify the browser output of the blocks

In the case of the layout grid there are several options that behave differently depending on whether viewed on a desktop, tablet, or mobile, making it difficult to check manually.

A centre-aligned image shifts when it's selected

It's probably related to #68 & #69, please feel free to close if this is duplicated. When I select a small centre-aligned image, it shifts to the left for some reason.

Layout grid: improve resize validation experience

Sometimes you are unable to change an offset/span value because the grid validation prevents that particular combination. However, if you 'skip over' a few numbers then validation is possible.

We should try and improve this situation.

For example, this video shows that it's not possible to reduce the offset from 4. This is because 3 is not valid. However, 1 and 2 would be valid. Maybe we can detect this and skip from 4 to 2.

https://cld.wthms.co/Ckgj0z

Layout grid css size

Hi - The front.css for layout grid is really big and I feel it could be made smaller.

The homepage of my personal site is 26kb. That includes all css and js (external included). The css for the layout grid is 60kb.

I know for a lot of sites the trend is to make things bigger but that's not sustainable. Performance is very important online if you want to reach the largest audience and I don't want to use a plugin that will triple the size of my homepage download.

Layout Block: grids misaligned

When testing this I was wondering if the blue line should be on the dotted line of the column?

Layout Grid: Content overflows when it's inside a Group block

(copied from elsewhere)

A group block is handy to add a background colour or give a sense of "section". When I add a Layout Grid block into a Group block, the overflow issue comes back. And a horizontal scroll starts to appear in the editor.

Yes, I'm aware of that Layout Grid block allows me to add background colours to its columns, but at the moment, it's not possible to have a background colour that spans edge-to-edge. (See no. 4 as an example)

I love the Layout Grid block as it works a lot better than Core's grid block. The block might have not been designed for being as an inner block, but it'd be nice if we can fix this.

Image blocks are out of date with latest master

The rich image tools in this plugin have become out of date with the image block markup shipping in the latest version of the plugin. A "Lighter DOM" effort there has been merged, which reduces the Image block in the editor to the same markup that exists on the frontend.

This version of the plugin adds an extra div, which breaks the layout.

As we are looking at donating the efforts to the core project itself, perhaps we should disable the older version of Image tools that exist in this plugin for the time being?

Image Compare - Improve Block Preview

The preview is not accurate, it shows the two images side-by-side and not a good representation of the block.

There isn't a way to trigger an action on Preview, so we can't call the library code that handles.

So we'll need the default state with two images, without calling the JS code, to look proper in Preview.

From chat with Joen:

I think we can and I think I might be able to make that happen — basically what happens is, as soon as you add image number 2, the JS is invoked to make the thing interactive, this replaces the so what you see in the preview is the placeholder but without that JS

I could very probably make it so that the two images look sort of stacked side by side in a representative preview in the “no js” state, which would work for the preview, and get replaced by the JS when present

Block Experiments

I hope you don't mind me posting here. I just wanted to pop in a and start a conversation. I really like what you all are doing here. I'm doing something sorta similar over at https://profiles.wordpress.org/sortabrilliant/#content-plugins . Creating blocks that no one has seen before. I've noticed that you've released a few things and are having as hard of a time as me getting installs.

I was wondering if you had any plans to get more installs. Making things is fun and I'll keep doing it but it would be really helpful if I could get more installs as I'm making things blind now and I'll love to get real user's feedback. I'm constantly surprised how people end up using things I make.

I thought maybe since we are both in the block R&D business we could help each other out.

Layout Grid: Explore responsive dropdown integration

Gutenberg 7.7 ships with a new responsive preview feature that lets you actually preview responsive breakpoint changes.

We should explore how the layout grid block can leverage this. Can the tabs in the sidebar invoke a particular breakpoint? Or can we contextually change the contents of the sidebar depending on which breakpoint is chosen by the user?

Image Tools: instant rotate while processing

It would be great if we could instantly rotate the image while the actual rotation happens in the background.

I've previously tried:

• CSS rotation - works, but the height is then wrong and the UI needs a lot of adjusting
• Canvas rotation - copy the image to a canvas and rotate it. Complicated

Firefox and CSS grid and cover block

There's a difference between how Chrome/Safari and Firefox displays a cover block inside a grid block.

This is based on an issue reported on this page where the bottom black box leaks outside the post in Firefox. I think I've narrowed the complicated page down to this codepen:

https://codepen.io/johngodley/pen/vYOYxJe

In Safari/Chrome the black box is about the same height as the yellow one. In Firefox the black box is a lot bigger.

The issue seems to be caused by wp-block-cover having a height: 100% when it follows something else that also has height. That seems to stretch the cover, and grid. Without that the height drops to the min-height: 430px.

Is there anything we can do to the grid block to prevent this?

Layout Grid: Allow overlapping of layers

Would be cool if we could use this block to create something like this design:

Starscape: Support custom gradients from Gutenberg 7.3.0

With custom gradients enabled in Gutenberg 7.3.0, setting one of the preexisting gradients causes the block to error out in the editor.

Layout Grid/Bauhaus: text domain doesn't match slug

I had the Bauhaus block bounce back because the Text Domain in the generated index.php file didn't match up with the slug, so I checked and it appears the same is true for the layout grid.

In the case of Layout Grid, the Text Domain is prefixed jetpack-, whereas the slug is not. I suppose in the grid case, since the slug cannot be changed, the prefix should be removed. However, the slug hasn't been finalized yet for the Bauhaus block, so should it use the jetpack- prefix here?

Layout Grid: Grid not reserving the available width

It's likely this is happening with the recent update, but the grid is no-longer reserving the width specified in the setting. This is the content that I realised this.

On WP.com currently, and it used to look like this. The grid inside a group block uses all the space available.

But in my local install where I cloned this repo, it looks like this now. The grid is a lot narrow.

This is a test content that I copied from where I noticed this. Feel free to use it as a test content.

I hope I'm not doing anything dumb, but could you try to replicate the issue? Thanks in advance!

<!-- wp:group {"align":"full","style":{"color":{"background":"#fddeda"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#fddeda"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":2,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopSpan":4,"column3TabletSpan":8,"column3MobileSpan":4,"column4DesktopOffset":1,"className":"column1-desktop-grid__span-2 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-4 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-8 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-2 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-4 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-8 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":5} -->
<h5>Follow Me</h5>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Get new content delivered directly to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions -->
<div class="wp-block-jetpack-subscriptions">[jetpack_subscription_form show_only_email_and_button="true" custom_background_button_color="undefined" custom_text_button_color="undefined" submit_button_text="Subscribe" submit_button_classes="undefined" show_subscribers_total="false" ]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://facebook.com","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://instagrame.com","service":"instagram"} /-->

<!-- wp:social-link {"url":"https://linkedin.com","service":"linkedin"} /-->

<!-- wp:social-link {"url":"https://youtube.com","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->

Grid Block: Multiselect for blocks inside stopped working

Observe:

If you click and drag across blocks to select multiple blocks, only a single block is selected.

If you hold shift and use arrow keys to select, that still works.

It's possibly a conflict with onmouseup hijacking something it shouldn't.

@johngodley any insights?

Image tools: add duotone filters

(copying from another repo)

Add support for duotone filters, based on a suggestion by @pablohoneyhoney

https://duotone.shapefactory.co/

Codepen from @jasmussen showing this in action:

https://codepen.io/joen/pen/dyyaELM?editors=1100

Explore Zoom-cropping

In the Image Tools efforts that are currently proposed for the core project, a traditional cropping interface exists, complete with marching ants and resize handles:

It works like this:

• Click crop
• Resize and position
• Click apply
• The smaller, cropped image, now replaces the old

This interface is a classic mouse-first interface that requires some dexterity to manipulate, but is otherwise good. One downside is that you can crop the image so small that it won't even fit the UI. Another downside is that the resolution of the crop is dependant on the viewport width, i.e. you might have a giant 1600px image that is scaled down to fit the Image block which may only be 720px wide. The cropping then happens based on that scaled down version, making any crop smaller still.

Zoom-cropping, for lack of a better term, puts emphasis on keeping the block dimensions the same before or after the crop. Instead of resizing handles, you zoom and pan the image to apply the crop.

It is common on mobile, and can be combined with resize handles. Here's how it works on Android:

https://cloudup.com/c_Tpqjs9NBM

There are a couple of benefits to this interface:

1. With its heavy reliance on zoom as the default interface, it's less fiddly especially on mobile.
2. It can work for blocks that require "soft-crops", i.e. CSS crop. This could be videos for example.
3. It can be combined with the resize handles.

Layout grid: no gutter crops right block border

A grid with no gutter crops the right side of the block:

We should add a small gutter when showing in the editor.

Release Starscape with text domains

#39 added text domains to Starscape. Let's get these out in a new release.

Layout Grid: Missing Outermost Gutters in Editor

The outermost gutters seem gone now in the Editor, and the content inside bumps the edges of the browser screen. I don't think it's been like this for a long time...

The gutters appear fine on the front of the site.

Layout Grid: Remove the resizing that happens on-select

This was necessary for the pre g2 design of the editor where side UI could be cropped, but is no longer necessary, so we should remove it as it both shifts the layout, but also requires complex CSS hacks.

This does mean that sites not running the latest version of the plugin will have a slightly less optimal interface, but given the block defaults to having end gutters, side UI should still function.

Bauhaus styles don't show

When I create a Bauhaus block the initial placeholder doesn't show the choices:

This is in Gutenberg 6.5, so it's possible something may have changed.

Event: Add end-date

From our friend Justin:

One missing component I would like to see with this block is the ability to add both a start and end date. For multi-day events, users must provide that information in the description box, which would be acceptable for most use cases. However, the full event date would be better served via the “when” field.

Seems worth exploring!

Layout grid: look at classes added when adjusting columns

Look at the problem reported in Calypso:

Automattic/wp-calypso#40462

Layout Grid: Allow gridlines to be toggled

It can be pretty easy to get to a point where the gridlines are more distracting than helpful. For people creating patterns or themes, the Grid Layout guides are likely helpful.

However, for the end-user who is adding and using these patterns, the guides are somewhat cryptic (notice they don't line up to the actual columns) and distracting. At first glance, the guides appear to be a rendering bug and its not obvious when/why they appear — this all leads to confusion when previewing the output on the site's frontend.

I'd be nice to have a way to toggle the guides on an off, and for WPcom specifically, it might be nice to be able to turn them off by default.

Layout grid: Add background color option

I've been trying to create a block pattern with two sections side by side, each with its own background. The problem I'm encountering is that when the amount of content doesn't match, the two sections end up having different heights:

The pattern above was created with layout grid columns block, with group block nested inside each column to change the background color.

Ideally, both sections would have equal height, regardless of the amount of content. I think this could be fixed, if it were possible to set a background color on layout grid column (the same way columns block does).

Additionally it would be great to have a vertical alignment option (top, middle, bottom) for each column, the same way core columns block does.

Describe the solution you'd like

• add background color to layout grid columns
• add vertical alignment option (top, middle, bottom)

Layout Grid: Vertical alignment option

It'd be great if we allow controlling vertical alignments like the column block from core.

I wanted to make a block pattern like this:

But at the moment:

Layout Grid is so much better than the one from core, and I'd love to not give up all the advantages just because of the lack of vertical alignment :)

cc @ianstewart @alaczek

Layout Grid: Setting options for gutters

Currently, the gutter is fixed to 24px, but It'd be great if the user could increase/decrease the gutter size. If the setting allows them to set to 0, they could even have a gutterless grid that would be handy for media-oriented page layouts.

Block: Before/After comparison

This is a lovely block:

https://www.semplice.com/before-after

It should also be relatively simple. @mkaz I recall you having some code already for this? Should we look at polishing that up?

Layout grid: add background colour option

Add an option to set a background colour for the whole grid, as well as for individual columns.

Layout Grid: No visible + sign when adding a new block, Conflicting with Gutenberg Plugin

Originally reported on Automattic/wp-calypso#42540 and 9F6qB-p2

It appears that there are issues adding new blocks within an existing layout grid. There's also a conflict between the Gutenberg plugin and Layout Grid regarding styling as discovered by @edequalsawesome

.wp-block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
display:none
}

@serabi's notes:

Steps to reproduce

1. Add a Layout Grid block to the page.
2. Add a content block (such as an Paragraph or video block) at the top of the first Layout Grid column
3. Try to add a second block, below the first block. There is no plus sign. To add the second block, you need to hit enter or click on the block you've already added and select the option to add before or add after, or you need to click in the exact spot the plus sign would be, if it is visible.

Deactivating the Gutenberg plugin seems to help at this time.

Screenshot / Video

Context / Source

#user-report - see 2992383-zen

Internal discussion on Atomic Requests: 9F6qB-p2

Layout Grid: Push/resize columns when dragging towards them

At the moment when you resize one column close to another, we stop the sizing there and don't affect the other columns.

We should explore resizing the other columns as you resize adjacent columns, see how it feels.

Grid Block: Move device indication to toolbar

Instead of this:

Can we do this:

The button in the toolbar would be a dropdown that doubled as the breakpoint selector that sits in the sidebar.

Compile Frontend Dependencies

It would be nice to compile frontend dependencies, so 3rd party code can be added to the dependencies rather than being included in the repo (for example, twgl)

Layout grid: add css prefixes

Add css prefixes for MS-Edge and MSIE-11 support

Layout Grid: Option to remove gutters on outside

Having gutters on outside works most of the time, but sometimes, it'd be handy to have an option to remove the gutters on the outside.

For example, when a Layout Grid block is inside of a Group block with a background color, it ends up having extra side paddings because of the paddings from the Group block.

Also, you might want the images in the columns to stick to the browser edge...

What do you think?

Add Event Block to Plugin/Block Directory

This will involve adding a block.json file and adding it as a .org plugin

Layout grid: improve resize handles with small gutters

When the grid gutter size is set to a small value (or none) it can cause the resize handles to overlap:

As discussed in #36 we should either:

• Temporarily increase the gap size when the block is selected
• Adjust the handles so they sit on the inside of the block