Dynamically update block editor layout and styling

[tiagonoronha]

What does it do

There are two types of types of layout configuration in Storefront: with or without a sidebar.

Storefront is smart enough to automatically adapt its layout. If there are widgets in the main sidebar, then the content will adjust and display the sidebar. Otherwise, when there are no widgets in the sidebar, it will always display the full width layout.

On pages, it's also possible to use the full width template to allow the content to span the full width of the site.

This PR replicates this behaviour in the new blocks editor:

• When the layout is full width, the new alignment options wide and full are made available.
• If the page/post being edited has a sidebar, wide and full options are dynamically removed and any existing blocks with this alignment set will have it updated to default.
• Content width changes in the editor to replicate the size of content in the frontend.

How to test

1. Add widgets to the sidebar and confirm that they show up in the frontend
2. Create a new page and add some content to it.
3. Apply the 'full width' page template.
4. The size of the content area in the editor should increase.

Also:

1. While editing a page with a "full width" page template, add some blocks with wide and full alignment (cover image, columns, etc).
2. No switch back to the "default" page template.
3. The content size should decrease, and blocks set as wide/full should also been updated to default alignment.

Other

• Package.json updated to add babel as a dependency.
• Gruntfile.js updated with new babel task.
• New assets/js/src/editor.js is written in ES6 and then when building with Grunt converted to ES5 via babel to assets/js/editor.js. This is a bit confusing but allows us to write modern JavaScript while maintaining the current pipeline in Grunt.

[claudiulodro]

Great feature! Super useful. I love it.

The code for this looks good and the build pipeline works great. There are just a couple issues I noticed:

Issue 1

For some reason I get all the templates listed twice when trying to select a template. I'm on WP 5.0.2, and don't see anything immediately obvious that would be causing it. Some digging around determined that one template is e.g. `storefront/template-fullwidth.php` and the other is `template-fullwidth.php`. Can you reproduce this?

Issue 2

1. If the sidebar is active and you start with a full-width image on the full-width template:

2. Then switch to the default template:

3. Then switch back to the full-width template, the image is smaller than full-width and doesn't have the full-width attribute applied to it in the block editor or frontend. Same thing happens with the 'wide' image format.

[claudiulodro]

The content size should decrease, and blocks set as wide/full should also been updated to default alignment.

I see now that the second issue I posted is actually a feature. :) In that case, feel free to ignore that one. The double page templates in the list is my main concern.

[tiagonoronha]

@claudiulodro thanks for reviewing!

As for your first issue, it looks like you might have ran npm run deploy which will create a deployable storefront folder inside of the theme folder. I tested this theory and I see the duplicate templates. This is obviously not an issue as it only occurs if you've tried to do a deploy.

I decided to spend some more time on this and made the decision to stop updating the block attributes data. Now, it only changes the value in the DOM.

This way, if you have a block with wide or full value set, you can switch between having a sidebar or not and keep that value.

To test:

1. Add a widget to a sidebar.
2. Create a new post/page, and assign the "Full Width" page template to it.
3. Add a new block, such as an image, and set it to wide/full.
4. Switch back to the "Default template". The editor should resize and image should not be wide/full anymore.
5. Switch back to "Full Width", the block should keep the previously set wide/full value.

[claudiulodro]

Yep the double template issue was definitely that I must have run the deploy script at some point and had an extra copy of Storefront in the folder. Good sleuthing. Sorry for the wild goose chase. :)

The latest revision looks good. 👍 I think the latest behavior where it doesn't modify the image attributes when switching the page template is the way to go. It's much less confusing and will not cause issues when switching back-and-forth between the templates.