Add front end padding to column blocks.

[kjellr]

Fixes #517.

This PR seeks to add some padding to our alignfull columns so that they match up more closely with the editor.

Appearance in editor:

Note: this is based on the columns appearance seen in the #575 branch. That happens to correct a bug that inserts too-wide margins on the columns block. As a result, it might be helpful to wait until that PR is merged to text/merge this one.

Current appearance in front end:

Updated appearance in front end:

Note: This does not line up exactly. But that's mostly because the editor seems to add inconsistent margins on the left and right side of the columns block when it's full-screen. I've filed a Gutenberg bug for that (WordPress/gutenberg#11869), but in the meantime we don't want to replicate that error.

---

This also adds padding to smaller screens:

Before:

After

[jasmussen]

Thank you for working on this.

However since you made this, I have refactored aspects of the columns block in Gutenberg upstream, in WordPress/gutenberg#11904. This PR might not be necessary anymore, not sure. In any case, I tested this PR against that branch, since that's going to be the baseline going forward.

TwentyNineteen master compared with 11904:

Editor:

Preview:

TwentyNineteen THIS BRANCH compared with 11904:

Editor:

This branch:

As you can see, comparing to 11904 this branch is actually a small regression.

Sorry for those headaches.

Does it do anything to the frontend appearance of columns?

[jasmussen]

Worth noting as mentioned also in the upstream PR, the additional left and right padding that's present in the editor is intentional, even though it means the preview is not 1:1 correct: https://github.com/WordPress/gutenberg/compare/improve/columns?expand=1#diff-49ac41bc72e24e343a451fe254801c0fR16

[kjellr]

Interesting, thanks — I've weighed in on the upstream PR, and will hold off until we see what happens there.

[kjellr]

I gave this a re-test, and I think it's still a good improvement to include on our end. It only effects the front-end, and just adds a little padding so that text columns don't bump against the side of the viewport. It also happens to make the front-end look a little like the editor, but that's mostly a side effect.

Before:

After:

(@jasmussen looking at your front-end screenshots above, I wonder if there was a caching issue or something —  I don't see this PR's changes reflected in them).

[jasmussen]

If these rules do not affect the upstream refactor of columns, ship it! It's totally okay to be opinionated about what "fullwide" for a particular block.

[kjellr]

🎉 Thanks!