Gutenberg ?

[nitrokevin]

With Gutenberg getting closer to being released, I have to confess I need to do a lot more reading up on it. But is there anything that needs to change with foundationpress to fully support it?

[melek]

The short answer to your question is that FoundationPress as-is doesn't take advantage of Gutenberg, but theme developers using it absolutely can add code to do so. I certainly don't see FoundationPress themes breaking with Gutenberg.

Trying Gutenberg out on an unmodified FoundationPress package without any other plugins works fine, except extra wide image blocks (CSS classes alignfull and alignwide).

There is this article that individual theme developers could reference:
https://www.billerickson.net/getting-your-theme-ready-for-gutenberg/

I don't know much about it, maybe a positive step would be adding a way for FoundationPress to generate a gutenberg editor CSS file - perhaps automatically from the default stylesheet while providing gutenberg overrides for classes that break the editor.

[tillmariajuergens]

It might be interesting to implement custom blocks for the category layout to provide the grid system of foundation, especially when block nesting gets possible in Gutenberg (Gutenberg Issue #428).
But maybe it would be too much?

[derweili]

The short answer to your question is that FoundationPress as-is doesn't take advantage of Gutenberg, but theme developers using it absolutely can add code to do so. I certainly don't see FoundationPress themes breaking with Gutenberg.

Nothing is breaking but I think we should add styling for the new Gutenberg Blocks (like the buttons)

Trying Gutenberg out on an unmodified FoundationPress package without any other plugins works fine, except extra wide image blocks (CSS classes alignfull and alignwide).

The sidebar layout is not made for the fullwidth elements.

I don't know much about it, maybe a positive step would be adding a way for FoundationPress to generate a gutenberg editor CSS file - perhaps automatically from the default stylesheet while providing gutenberg overrides for classes that break the editor.

That's not as easy as generating the css for the TinyMCE Editor. Currently we are loading the whole app.css into the TinyMCE Editor. Unfortunately that's not possible with the Gutenberg Editor.

The gutenberg editor needs a separate stylesheet, with only the relevant styles to ensure the css only applies to the editor (not the WP backend menu, metaboxes…).

This means the gulp tasks and the css/sass file structures must be adjusted.

I'm not sure about the best way to do this. Maybe we should wait and watch how the WordPress default themes do it.

[derweili]

I have been a bit more busy at this topic.
There are some things we can do for a perfect Gutenberg suppport.

• Add a separate editor stylesheet with only the relevant css in it
• Update the gulp build process to support the separate editor css
• Basic typography styling for Gutenberg editor
• Register Foundation colors as a Gutenberg color palette with fully support in front- and backend
• Add Foundation button stylings to Gutenberg buttons
• Check every Gutenberg block for styling issues
  • Blockquote
  • Pullquote
  • File
  • Gallery
  • Verse
  • Table
  • Separator
  • Latest Posts, Archives, Categories
  • Latest Posts grid
  • Latest Comments
• Preserve support for the classic editor

These adjustements are not mandatory to support the Gutenberg Editor. FoundationPress is already supporting the Gutenberg Editor. But even if nothin is breaking in the new editor there ist still room for improvements to provide a perfect user experience in the Gutenberg Editor when FoundationPress

[derweili]

I already started with these adjustments

https://github.com/derweili/FoundationPress/tree/gutenberg

@olefredrik @colin-marshall what are your thoughts on this?

[derweili]

I continued to extend the FoundationPress Theme to fully support the Gutenberg Editor.
On the one hand I added styles to the Gutenberg Editor and on the other i added styles to support the Gutenberg blocks in the frontend.

To add styles to the Gutenberg Editor I added a separate editor.scss and added this file to the build process.
The Editor.scss includes the settings.scss and some basic foundation components. (typography, buttons, table).
These adjustments ensure that the typography in the editor matches the typography in the frontend.

Additionaliy to the editor.scss I added a gutenberg.php which is included into the function php.
This file adds support for the editor-color-palette which is used for many Gutenberg blocks.
I added the foundation color palette colors to the edior-color-palette.

To add styling for the Gutenberg blocks in the frontend, I added gutenberg.scss file where all the blocks are styled.

[olefredrik]

Ohoy! Great job @derweili 🎉 Awesome stuff!

[jeffdfarr]

How do you import local fonts using this structure? I can easily do Google fonts. I've tried referencing in the editor.scss file but I have to provide a relative path all the way back to wp-content and then get errors in the wp-tinymce.js file. Currently my fonts are outputted in the dist/fonts folder I have created.