Kjell just published an awesome article on how to create a block-driven theme using Sketch & Gutenberg. He’s provided a set of Sketch symbols, as well as a library file, for the community to use and expand upon.
Here’s a quick taste of the workflow in Sketch.
Kjell wanted to test the limits of design using only CSS, so he set out to create a theme that didn’t conform to the typical block style that we’ve seen so far.
I encourage you to check out the post and read it all the way through. You can also download the Sketch files directly from Github.
Here’s what his 2nd, more creative theme design looks like:
Creating Reusable Blocks, Improved
The process of creating reusable blocks includes 2 fewer steps, greatly improving efficiency.
The user selects a block and clicks Convert to Reusable Block.
The reusable block is created and is immediately in editing mode. The title of the block is selected, allowing the user to start typing the title straight away.
The user clicks Save to rename their reusable block.
Button Text Wrapping
There used to be an issue with the button text overflowing outside of its container. You can see in the following two screenshots that this has been fixed. Longer button text will now wrap onto a new line.
Video & Audio Upload Buttons
You always had the ability to insert audio & video files in multiple ways:
- Insert from a URL
- Choose from your Media Library
- Upload a new file
However, that third choice (uploading a file) wasn’t obvious. First you had to click “Add from Media Library,” and then switch to the Upload tab, and upload your file.
Now there is an upload button directly on the initial block screen, making it easy to directly upload a new file.
Gutenberg 2.4 Final Word
The best place to learn about all the new features & fixed bugs in Gutenberg 2.4 is from the official release post.
Oh, and the Cover Image block got it’s very own icon, distinguishing itself from its boring cousin, the Image block. Be free, Cover Image!
