Update #106 Upcoming Events, Block building, Plugins and tutorials

Is already June 2019, WordCamp Europe has come to an end, and I realized, I have been curating the Gutenberg News and Updates around the WordPress ecosystem now already for two years. WOW. “All good things take time” is a quote from my father who just turned 92 this week.

What have we been doing over the last month without a post? Well, between client work, organizer work for WordCamps US, my own travel to WordCamps – Boston is next, then WordCamp for Publishers – working on the JavaScript for WordPress Conference w/ Zac Gordon, and our local WordPress Meetup, there weren’t enough hours in the day.

It’s not because nothing happened in Gutenberg Land-ia. As a subscriber of our e News, you received your weekly Gutenberg fix.

And now without further ado here is the Table of Contents for this week’s post:

Podcast: Gutenberg Changelog and Live Q & As

The new podcast “Gutenberg Changelog” is now available on the podcast directories of Google Music, Apple iTunes, Stitcher and Spotify and, of course, via RSS for any other players and readers

Mark Uriane, designer at Automattic and core contributor, and I will be co-hosting a weekly show, talking through the Gutenberg news of the week. We plan to record on Friday afternoons and publish over the weekend. The intro-episode came out this week, just in time (JIT) for WordCamp Europe.
Due to travel and vacation we won’t be able to start with our weekly schedule until July 12th, 2019.
If you have stories, ideas and suggestions, or questions send them via email to changelog@gutenbergtimes.com.

I also started planning more Gutenberg Times Live Q & As via Zoom and YouTube. The next show will be about the AMP plugin bringing AMP Stories to Gutenberg and WordPress. Save the date: July 26th, at 2 pm EDT / 18:00 UTC for our show talking to AMP plugin team members Alberto Medina, Pascal Birchler and Cathi Bosco. Registration is already open.

Registration is open. Reserve your seat!

This show will be sponsored by Pantheon. Their team has also been looking into making AMP part of their hosting and development stack and help WordPress agencies succeed in the fight of speed, security and providing and excellent user experience.

If you subscribe to the eNews on Saturdays you will among the first people to learn about more scheduled shows. You can watch previous shows on YouTube via this Live Q & A archive page.

WordCamp and Conferences

Online conferences are all the rage now!

Schedule announced for JavaScript for WP Conference 📢

Gutenberg has its own track on July 12th, 2019 (Times are EDT)

  • 9:00 am Becoming a Core Contributor by Ajit Bohra
  • 10:00 am Growing JavaScript Skills with WordPress by Grzegorz Ziółkowski
  • 11:00 am JavaScript Hooks in WordPress by Adam Silverstein
  • 12: 00 pm Examples of JavaScript Hooks in the Real World
    by Ernest Smuga
  • 1:30 pm – Internationalization with Gutenberg by Pascal Birchler
  • 1:30 pm – The Gutenberg Plugin Landscape by Birgit Pauli-Haack
  • 2:30 pm – The Gutenberg Slot Fill Systems by Ryan Welcher
  • 3:30 pm – Breaking Apart Block Data by Kelly Dwan
  • 4:30 pm – Gutenberg Components Outside of the Editor by Igor Benic
  • 5:30 pm Testing Your JavaScript by Josh Pollock

Register Now for Free

Speaker Applications are open

Updates WordPress Core & Design

Riad Benguella’s full Changelog

Discussion on new Block Directory for Plugins

Design Team

Meta Team

Themes and Layouts for the Block Editor

Tutorial by Stephan Nijman
Published by Heart Internet
There are multiple levels of Gutenberg-readiness. Enabling Align-wide and Align-full, styling for the various blocks (columns, images, cover, gallery), custom color and font-size pickers for your customers to stay within the brands boundaries. With a ton of resources for theme developers and a list of block-ready themes for site owners. Written by Birgit Pauli-Haack

Block editor for content creators

Reusable Blocks as Templates
“Gutenberg. It’s real, it’s happening, and it’s terrifying because you don’t know how you’re going to do everything you do today. What if Mika Epstein told you that for the majority of the simple tasks out there, no only will you still be able to do them, they’ll be even easier?
Let Mika show you how with the magical, repeatable, Gutenberg block.”

Building blocks and extending Gutenberg

WordPress Data API

Zac Gordon’s talk at WordCamp Miami

Zac Gordon, Master educator, advocating for JavaScript Deeply has three courses for WordPress developers. Check them out.

On May 25, 2019, we shut down our Patreon page and sent a note to our faithful patrons in gratitude for the their ongoing support. On top of the publishing schedule for our eNews, blog posts and Live Q & A shows, I was not able to dedicate additional time to keeping the Patreon page up to date . Earlier this month the Gutenberg Times was accepted in Jetpack’s beta test for the recurring payments button. You can support us now right here.

Photos from Around the World

Featured Image: Photo by Amador Loureiro on Unsplash

Gutenberg at WordCamp Europe – Schedule Your LiveStream

It’s been two years since I took a first glimps at Gutenberg, the new block editor at WordCamp Europe 2017 during Matt Mullenweg’s talk. At this year’s WordCamp Europe, developers, designers and consultants will talk about the various aspects the block editor from block building and semantic content to the future of Gutenberg. I won’t make it to WordCamp Europe, so I will be watching as much as possible via the Live stream. Here is my schedule.

Scheduled Gutenberg talks and discussions at WordCamp Europe

Times are in local time in Berlin, find US EDT in parenthesis

Friday June 21, 2019


Affiliate Link


Saturday, June 22, 2019

And if you can’t get enough for educational material put the 2nd Annual Javascript for WordPress conference on your calendar! 8 hrs workshops, 40 Speakers and lots to learn on Contributor day.

98 Plugins for the new WordPress Block editor

Over the last 18 months, we have used and tested quite a few plugins providing Blocks beyond the default blocks of Gutenberg or add-ons to the workings of the block editor. Then I started making a list and it became a major undertaking! I was not able to test all plugins mentioned here. So use at your own risk.

We found plugins in the following categories:

Check the Changelog for recent updates

This list of Block editor plugins is not complete, but we are aiming for it. This is a very fast moving target, and I appreciate your help:

If you built or found a plugin that should be on this list, fill out the form on this page and we will add it during our next round of updates. We are exploring building a richer interface for our #280Blocks database. For now this list is it.

Here are the Quick Links to the various plugins sections of this list.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Wide Banner

All-in-one or one block at a time?

There are multiple reasons why a plugin developer would opt for a block collection rather then single purpose block plugins. Two stand-out: One is to make a companion plugin to a Theme, the other is development speed and maintainability. Once a developer starts creating blocks, doing it within the same plugin saves time creating and maintaining the underlying architecture, and she only has to upload one new update. Having it all in one block also simplifies promotion and support.

For the site-owner it’s not that clear cut, though. You might want to use four blocks from one set, and just one from the other set, and the rest will populate the block inserter view.

The block editor has this nice feature to narrow down the creators choice with the last used or often used blocks to be displayed first, and the powerful slash command that helps with the selection of blocks. Some people might get distracted by the vast amount of choices, once you installed two or more block collections. Some of the plugins provide you with a enable/disable feature so you can switch off the blocks you don’t need, and there is are also two plugins available that do this on a site wide basis rather then just for a the blocks of a particular plugin.

Single Purpose Blocks do one thing and only one thing, and do it well. My favorite is the Guidepost by Nick Hamze and the 360 Image by Kevin Bazira. Another reason is to provide a integration path for 3rd party services, like embedding Gumroad digital products, or connect with Mailchimp.

Contributors are discussing who they can make a block manager a built-in feature for WordPress Core. If you are interested you can follow along here.

The most intriguing idea for distributing Gutenberg blocks is Gutenberg Cloud, with a centralized place for blocks and the content creator can select just the blocks they need for a particular site. Gutenberg Cloud was created by Drupal Community members, and aims to o keep blocks CMS agnostic.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Block Suites provide you with a set of various blocks for your posts and pages. They are all bundled into a single plugin. You can have more than one collection installed. As always, make sure you test them for plugin conflict with existing plugins. For your post you can mix and mash blocks for different plugins. It’s actually quite cool.

30 Block Suites – Collections for your WordPress Site


ACF Blocks

Advanced Gutenberg

Advanced Gutenberg Blocks

Atomic Blocks

Blocks Kit

Bokez

CoBlocks

Cosmic Blocks

Demoify Blocks

Designer Blocks

Easy Blocks

Editor Blocks for Gutenberg

Elegant Blocks

Enhanced Blocks

Getwid

GhostKit

GutenBee

HT Blocks

Mega Blocks

This plugin was closed on May 9, 2019 and is no longer available for download.

Nelio Maps

Get this plugins on WordPress.org

Ninja Gutenberg Blocks

OtFm Gutenberg Spoiler

Otter Blocks

Premium Blocks

Qubely Blocks

Snow Monkey

Stackable

Stag Blocks

Ultimate Addons for Gutenberg

Ultimate Blocks

Ultra Blocks

WP Munich Blocks

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

29 Single Purpose Blocks Plugins

Single Purpose Blocks do one thing only, but that very well. Some are very specific in their focus, and some extend existing blocks with much more settings and configurations.

360 Image

360 Video

Accordion Block

Block Gallery – Photo Gallery Gutenberg Blocks

Coming Soon & Maintenance Mode

Events Calendar Shortcode & Block

FAQ Blocks

FooGallery

Gosign – Masonry Post Block

GT3 Photo & Video Gallery Block

Illustrations Block

Info Blocks

Logo Carousel block
“This plugin was closed on May 23, 2019 and is no longer available for download.”

Listicles

MathML Block

Meow Gallery Block

Organic Profile Block

PDF Viewer

Pop-Up Block

Post Layouts

Pricing Table Block

“This plugin was closed on April 16, 2019 and is no longer available for download.”

Recipe Card Blocks

Simple Code Block

Social Share Buttons

Secure Blocks

Timeline Blocks

WordPress Download Manager

WPSeed Container Block

Video and Image Slider

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Courses for Developers - JavaScript for WordPress with Zac Gordon
Check ’em out now!

📢 Now on available: Advanced Gutenberg Development  📢

7 Block Plugins for eCommerce

In this eCommerce category, we list block that provide product blocks for both, eCommerce plugins as well as 3rd Party services.

BigCommerce

Dispensary Blocks

Easy Digital Downloads

Ecwid

Gumroad

WooCommerce Blocks

Product Blocks for WooCommerce

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

6 Blocks for 3rd Party Services

EmbedPress

Flow Platform Embed

Google Maps Gutenberg Block

Google Fonts for WordPress

Kona – Instagram Feed

Newsletter Block for Mailchimp

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

8 Layout and Page Design Plugins

Caxton

Grid Block

Grids

Gutenberg Blocks Design Library

Guten Post Layout

Kadence Blocks

Stylist

Drop Shadow Boxes

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

18 Tools for the Block Editor

Advanced Rich Text Tools

Animated Blocks

Archive Mapping and Post Selector Gutenberg Block

Block Background

Block Lab

Blockbuddy

BlockContext

Blocks CSS

Blocks CSS: CSS Animations for Gutenberg Blocks

Disable Gutenberg Blocks

EditorsKit (renamed from Block Options)

Fabrica Reusable Block Instances

Gutenberg Custom Fields

Gutenberg Manager

JSON Content Importer

Lazy Blocks – Gutenberg Blocks Constructor

Syntax Highligher

WPSiteSynch for Content

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

How we selected plugins for this list?

As a member of the Global Community Team and part of the organizer Team of WordCamp US, I subscribe to the four freedoms of WordPress and only list plugins that are 100% compatible with the WordPress GPL license.

This first edition also only lists plugins available in the repository, as they are easily downloaded and added to your site. Developers also went through the effort to have their plugin reviewed by the guardians of the ecosystem, the Plugin Review Team.

Some plugins we mention in our Update posts are only available on GitHub are mostly shared with fellow developers to show use cases, explore various ways for a problem solutions, or as examples to shorted the start-up ramp for new developers. Some are so specific and geared towards one custom solution, that it won’t make sense to make them available for a larger groups of site owners, but can provide some additional models for other developers. As soon they make it into the plugins respository, we will list them here, too.

What to do when you run into trouble?

If you at anytime in exploring any plugin you run into trouble, please use the Health Check and Troubleshooting plugin to narrow down the cause and then use the Support Forums associated with the particular plugin to get support and report a bug to the developers. They will be more than happy to help you out and appreciate any feedback.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Featured Image: Photo by Cobro on Unsplash

Changelog

  • June 3 Added Getwid
  • †May 24:
    • Added WPSiteSynch, Drop Shadow Boxes, Info Boxes.Removed: Logo Carousel block, Pricing Table Block, Mega Blocks
  • May 9: Added ACF Blocks
  • Apr 30: added Block CSS 4 Animations, Reusable Block Instances
  • Apr 11: added Grids
  • Apr 7: Added Listicles, Guten Post Layout, Enhanced Blocks
  • Mar 28: Added MathML Block, FlowPlayer embed, Footnotes, Dispensary Blocks, Product Blocks for Woo, Nelio Maps and Timeline
  • Mar 15: Added EmbedPress, BlockContext
  • Mar 10: added Block Options
  • Mar 9: added Accordion Block, Pop-Up Block
  • Mar 8: added Events Calendar Shortcode & Block
  • Mar 7: Ultimate Blocks, Grid blocks, Container Block
  • Mar 7, 2019: Initial list with 75 plugins

Building Blocks without Javascript? Yes, you can.

Not everyone is able or willing to build blocks in JavaScript just yet. I found three plugins who help with that.: Block Lab, ACF (Advanced Custom Fields) and Lazy Blocks.

Creating a Team member block was the simple use case for my test. I made notes, screenshots and videos along the way. Last week, with the generous help from Sarah Gooding, the write-up was published on the WPTavern.

More Tools for Block Building in PHP

With the wider reach of the article, others chimed in and shared their discoveries and opinions as well. Here are two:

PHP vs. Twig, I’ve used Twig within ACF blocks, often in conjunction with the Timber plugin. The PHP file that is used to display the block just needs to gather the data for the Twig template and then render it. It adds a bit more complexity (and two files, a PHP and a Twig, per block) but as Twig is pretty easy for folx to mess with, it’s been a good solution for me.

David Dashifen Kees on the WPTavern

(…) a viable PHP-only option for creating a block is Carbon Fields.

A quick comparison:

  • Carbon Fields has no UI within the admin area, which means that the creation of a block is only accomplished via code in a plugin or theme.
  • The creation of the block itself is very easy and follows the same pattern that the rest of the library uses to create meta boxes, widgets, theme options panels, etc.

wrote Steve Ryan in his comment


Featured image: Photo by Matthew T Rader on Unsplash

What does ‘Gutenberg-ready’ mean for WordPress themes?

This week on Heart Internet.

“The new Blocks include baseline support in all themes, enhancements to opt-in to and the ability to extend and customize.”

Gutenberg Handbook, Theme Support chapter

That’s how the developer handbook for the block editor of starts its Theme Support chapter.

In other words, there are a few features the block editor offers, that might not be available yet for your theme and your site, so it’s not pure binary, works or doesn’t work.

There are multiple levels of Gutenberg-readiness.

It goes from enabling Align-wide and Align-full styling for the various blocks (columns, images, cover, gallery), to include styling for each core block to providing custom color and font-size pickers for your customers content creators, so they stay within the brands boundaries.

In this article, I’ll talk about all these different ways your theme can interact with the block editor. We’ll talk about stylesheets, CSS specificity and layout. There are voices, and mine is among them, that building blocks are the domains of plugins. Themes provide the glue between features and front-end, and a site owner should be able to switch out their theme without losing content or composition. Of course, like everything else in life, the edges are blurry and the block editor is still in its infancy.

In my guest blog post at Heart Internet, we will look at

  • Block styles
  • Align-wide and align-full
  • Custom colour palettes
  • Block font sizes

I also share a lot of resources and a list of Gutenberg-ready themes.

Head on over to HeartInternet site and read the full article

Featured Image: Photo by Cristina Gottardi on Unsplash

Update #105 ACF Blocks – AMP Stories – Accessibility Report & Gutenberg 5.6

Wow! A lot has happened since the last round-up post. Where to begin? I just returned from WordCamp Atlanta and among other things, I listened to every Gutenberg related talk: Micah Wood, Rich Tabor and Victor Ramirez. They did a terrific job helping content creators, developers, publishers and consultants dive deeper into the most significant change in WordPress since Custom Post Types. The possibilities are endless.

There has been a lot more going in the last four weeks, and I hope you come back to this post multiple times to take it all in.

Some highlights:

  • The Accessibility Report via WPCampus was published.
  • ACF came out with its 5.8 version providing a non-JavaScript way to built blocks at scale.
  • Building AMP Stories will be possible soon, check out the Alpha version of the AMP plugin
  • After Drupal, another CMS OctoberCMS is testing the waters in using Gutenberg as editor, and there is a Laravel plugin called Laraberg.
  • Two more version of Gutenberg plugin 5.5 and 5.6 came out.

These are only five of the 30+ other notable blog posts, plugins, themes and tutorials around the block editor listed. Enjoy! I am so glad you are here! — Yours, Birgit 💕

PS: Tell me what you enjoy or are missing, or what cool things you are working on. Or anything really. Leave a comment or write an email to pauli@gutenbergtimes.com

Table of Contents

Using Gutenberg for Content Creators, Editors and Bloggers

Andrea Zoellner:
Empower Your Storytelling With Gutenberg:
How to use blocks to boost your communication
WordCamp Orange County 2019

WPCampus releases results of the Gutenberg accessibility audit

“An inaccessible editing experience has real and significant consequences for many people in our community. The findings provided by Tenon are serious, and deserve to be considered with thought and care.” wrote Rachel Cherry on WPCampus.


Plugins for Gutenberg

Rohit Motwani: Adapt or dine – How to make your plugin Gutenberg compatible and WooComerce QandA

Themes for the Block editor

Building Blocks Tutorials, Slide-decks and more

WordPress Design & Development News

Gutenberg Beyond WordPress

Update #104 RichText Live Coding, Teaching Gutenberg to Content Editors and WordPress Team News

Happy Weekend! The first Quarter of 2019 is almost done. On Monday, we’ll upgrade a website with several editors to the Block editor. I’ll report back next weekend how it went. It’s the best preparation for our upcoming Live Q & A with WordPress trainers and educators who made it their business to help site owners, bloggers and editors with their content production skills in WordPress. It’s going to be a great event and hope we’ll have lots of questions from you! For developers interested in extending the RichText Component of the block editor, we host a live coding demo session with a developer of the Gutenberg team and Zac Gordon. If you are deep-dive Javascript developer you’ll find this quite enlightening.

We also have plenty of News from the WordPress Teams: Core, Javascript, Editor and Design. I also still catch-up with all the fabulous block plugins people create to make the Block editor experience unique. There are also Theme news and articles on how to use the block editor in various scenarios.

Thank you all for the Get Well wishes! Be well and enjoy the Spring! 💕 — Birgit

PS: This week WordPress 5.2 Beta 1 was released there is plenty to like about this next version. It comes with Gutenberg 5.3 and brings part of the Health Check plugins into Core. Make sure you help testing this first beta. The final release is scheduled for April 30, 2019.

Table of Contents

Live Q & A – Times Two

Live Coding For the Block Editor with Zac Gordon, JS For WordPress and Grzegorz (Greg) Ziółkowski, Core Contributor to Gutenberg

Hacking on and Extending Components Like and the Block Toolbar

Using Gutenberg: Blocks & Themes

New Plugins For the WordPress Block Editor

The block plugins mentioned here the new additions to our Big Plugin List for the WordPress Block editor, categorized for Block collection, single purpose blocks, blocks for eCommerce, for 3rd party integration and tools for the block editor.

Building Blocks and Themes

Guest Posts on JavaScript for WordPress site

Zac Gordon, coach and teacher at JavaScript for WordPress invited students to write tutorials for the site. They are very insightful and geared towards other learners.

Don’t miss out on the Live Coding Experiment with Zac Gordon, JS For WordPress and Grzegorz (Greg) Ziółkowski, Core Contributor to Gutenberg “Hacking on and Extending Components Like and the Block Toolbar” 📢 💞

News from the WordPress Teams

top

Featured image: From Above by Birgit Pauli-Haack

Update #103 – Block Development for WordPress, Managing Blocks, Themes for Gutenberg and upcoming Live Events

Howdy, howdy! And again, another three weeks came and went. I am back from Portland, OR and mostly recovered from the flu, that kept me in bed for three days. We have a lot of catching up to do! Let’s get to it!

The team released two more versions of Gutenberg 5.2 and 5.3. The latest version brings you the first version of a Block Manager and nested blocks for your Cover block, you can now use as your built-in Call-to-Action block with buttons and all. That and many more fixes and features you can read about out on the MakeBlogs for the design and core teams.

Last weekend, also WordCamp Miami happened with some great JavaScript and Block editor presentations! You’ll find goodies below: from best practices, block explorations and content creation to deep-dive into the new wp.data API.

I also found some great more block plugins for different verticals and purposes. Don’t miss the recording of this week’s Freelancer panel on Live Q & A and sign up for our upcoming events in the first week of April! — Enjoy, Birgit 💕

Table of Contents

From the Make Blogs: WordPress Dev News

top

Upcoming Gutenberg Live Events

Live Coding For the Block Editor with Zac Gordon, JS For WordPress and Grzegorz (Greg) Ziółkowski, Core Contributor to Gutenberg

Hacking on and Extending Components Like and the Block Toolbar

top

More Blocks for your Content and Site building #280Blocks

top

Themes for the Block Editor

top

Developing for the Block Editor

top

Photos From Around the World

top

Featured Image: Airport Newark, JS by Birgit Pauli-Haack

The Secret Manual – Hidden Features and Gotchas in WordPress Gutenberg

For content creators, change in daily routine is fatal to productivity. This is especially true during the transition to Gutenberg since it still contains a few “gotchas” that may stymie people and interrupt workflow. I list a few here, along with some workarounds to assist users during active development. Gutenberg will be updated as soon as issues are resolved or refactored.

Now it’s one to the reason for this post: to alert content creators to the hidden features of Gutenberg that streamline writing workflow. As we all know, each time we learn a new software or tool we tend to judge it at our “beginners level”.  We may even throw in the towel before we reach mastery. And that applies to the current editor.

And if you depend on the website for your livelihood, I recommend creating a copy of your site on a staging site before upgrading to WordPress 5.0

This post assumes that you have already gotten your feet wet with Gutenberg and WordPress 5.0 If you haven’t I suggest that you read one of these excellent resources under the Beginner’s Guides to Gutenberg

There is also a whole team working on an official user manual for the Block editor. Until that’s published, it’s all a bit fragmented. If you are a technical writer and would like to lend a hand, join the #docs channel on the WordPress Slack 


Table of Contents

Beginner’s Guides to Gutenberg

With Gutenberg 4.4 you can now edit the permaling in the document panel of the sidebar.

Once you save your draft, you can modify the permalink by clicking into the title section. There you will see the permalink editing space above the title. Developers and designers discuss on Github on how to improve this feature’s discoverability.

For users using an older version of Gutenberg on their sites (pre-4.4)

Please note that there is no permalink created for a new post until you have clicked Save draft at least once (Marius Jensen, Support Forum)

Slash Command to Trigger the Block Inserter

Probably the most useful tool hiding in Gutenberg is the Slash Command. It’s also my favorite.  Using slash command invokes the Block Inserter including its search, so you don’t need to interrupt your writing flow to hunt for your mouse to add a quote or a list via the keyboard.
Begin by starting a new line with Enter. Then hit the “/” key and start typing the name of the block. “/l” gives you the list as a choice. Selecting it and typing your first list item is really cool.  Or you could just use one of the keyboard shortcuts below

But “/” + i gives you an image block, “/”

The introduced keyboard shortcuts also allow for the following combination

⌥⌘T Insert a new block before the selected block(s).

⌥⌘Y Insert a new block after the selected block(s).

Customize Your Workspace

Since version 3.8 there are three features to customize your writing workspace. The Unified Toolbar, the Spotlight mode and the Fullscreen mode. You can use all three together or each one alone. Some people are a bit taken aback by everything’s being block, especially each paragraph. “Spotlight mode” helps with that.

Top Toolbar (former Unified Toolbar)

And it can seem awkward for each paragraph block to have its own formatting toolbar that pops up on hover and covers text above. The Gutenberg team implemented a solution for this called Top Toolbar – which was just renamed from ‘Unified Toolbar.’

Switch it on in the Editor Settings menu, and reach it via the ellipsis menu (3 dots) in the top right corner. The Block Options menu is also available from the toolbar on top of the screen.

Spotlight Mode

This process is refined by a “Spotlight Mode”. The editor grays out the canvas except for the block you are editing. It also delays the visual clues about separate blocks while in writing mode in the editor, making it less distracting.But that has the down-side of making the features for individual blocks even harder to discover. But you can easily switch it off again by returning to feature mode.  

Full Screen Mode

With 3.8, Gutenberg now also has a full screen mode  You can switch it on and pretty much remove the top admin toolbar as well as the left admin menu. Once you remove the editor sidebar, all that stays on your screen is the Top Unified Tool bar and your content.

Full Screen Mode, Spotlight Mode and Unified Toolbar.

Disable Publishing two-step 

I personally like the Publishing two-step process. As soon as I hit the publishing button, the post will automatically shared on various social networks (via JetPack or other RSS to Social integration.

The Publish Two-Step has saved me more times that I care to admit.

On the 2nd publishing step you will also find JetPack’s Publicize area to modify the post to the social networks connected. It’s actually on the second step so you might not want to remove it if you are using it.

You are able to switch that off using one of the two methods.

One way is under the “Editor Settings menu”, you open via the 3 dots in the top right corners.

Or you can also disable it the first time you see it happening in “Are you ready to publish?” Screen. On the bottom of the screen uncheck “Always show pre-publish checks”. And it won’t bother you again.

Keyboard Shortcuts

New line as command line

Gutenberg developers also introduced a new concept:  new line as your command line.

By hitting enter in a paragraph, you can write another line or execute a few shortcut commands:

  • `/` slash command to insert a block
  • `>` to start a quote directly,
  • `##` to start a heading, (in a post’s body you start heading hierarchy i with <h2>)
  • `1.` to start an ordered list (also ‘1)’ )
  • `-` to start a list.
  • Using backticks ` at the beginning or the end` of a string adds code formatting to your string. (the same key as the ~ key)

I also learned a few more very helpful shortcuts,

  • ⇧⌥⌘M Switch between Visual Editor and Code Editor.
  • ⌘K Convert the selected text into a link.
  • ^⌥S Remove a link.

Since the focus is now on block based editing, I was surprised to notice that there is no keyboard shortcut to switch to HTML editing on the block level. And that is where I do most of my HTML tweaks. Turns one I am not alone. I filed a GitHub issue and it seems to be on the docket to be added.

More Keyboard Shortcuts can be accessed, via at the Editor Settings Menu

I apologize that the shortcuts are all in MAC notation. If you open the Gutenberg editor on your machine, you’ll be able to look up the shortcut combinations your specific operating system. 

Copy/Paste from Anywhere

Matt Mullenweg’s favorite hidden feature is the parser built into Gutenberg that allows for copy/paste of content from various tools, like Evernote, Google Docs, Microsoft Word, etc. Here is a little matrix on what works across the various platforms:

Reusable Blocks 

Reusable Blocks offer a whole new level of content development. With Gutenberg version 3.9, you can now save a combination of blocks as one reusable block,  which you can also export and import on other sites. Why is this a big deal?

For instance you can build landing pages with certain disclaimers, calls to action and campaigns. You can make the wording, the combination between heading, image or cover image and CTA button available to your users, for their use on their own posts and pages.

The new Gutenberg release also provides ways to manage your reusable blocks: You can delete them, export reusable blocks, and even import Gutenberg blocks from other sources.

There is a power feature for the Donate Now button: If its link changes, you need to change it on just one page, and that updates all other instances on your site.

In other words, reusable blocks are not templates. They are “content + design” blocks. And, if you need to change things in one spot, but don’t want to change other instances, you simply convert it to a standalone block before making the changes. Just use the “Convert to Standalone Block” link in the Block Options menu.

How to align an Image?

We often add an image to break up dense text in a long paragraph, and it must be aligned so the text wraps either left or right of the image.  

This may be the biggest transition hurdle for new Gutenberg users. I never found it easy in the old editor, and it’s still a bit quirky in the new editor.

But I am content to switch out one bad UI with the another bad UI. Coming from the early days of HTML coding, I know about the hazard of image floating n web design. So I don’t have high expectations and am happy that it works at all.  Resizing the image is easier but the default experience is still not great.

The biggest change is that just putting the cursor on the top of the paragraph where you want the image to align doesn’t work. You need to add the image block above the paragraph that will be aligned with the image.  

Follow these steps to align an image:

  1. Use the “Inserter” above the pharagraph.
  2. From the “Inserter” select “image block”.
  3. Upload or select an item from the media library.
  4. Use the left or right align button from the block toolbar.
  5. Use the blue dot handles to resize the image.

Or you can drag and drop an image – again – above the paragraph, and align and resize it to fit.

How Gutenberg makes it much easier is that it’s truly WYSIWYG! You don’t have to switch from editing to preview to see if your image aligns well. You see it right in your editor.

There is a whole series of two blog post about this on WPTavern to solve one thing. A clearly Jeff Chandler didn’t have this secret manual:-) 

WooCommerce Products and Gutenberg

WooCommerce is still working with the current editor. The post type “product’ is not yet ready for Gutenberg. Earlier this year, there was a test period, and since 3.4 it was reverted back to the classic editor. “Since WooCommerce is not optimised for the Gutenberg editor we’ve decided to keep the old editor for now so sites do not break when WordPress 5.0 is released. Products are not content focussed, so using Gutenberg with our meta box placed awkwardly at the bottom is not ideal.” Source: GitHub Issue #20201

WooCommerce’s plugin has four different product views, is a rudimentary Product view. Later in the year WooCommerce devs will refactor products using the Gutenberg framework and tools, they announced…

Job Thomas, Happiness Engineer posted a few notes regarding WooCommerce and WordPress 5.0 on the plugins support forum. That’s definitely a good space to watch for WooCommerce users.

PootlePress released their premium plugin Storefront Blocks. The various views in grids, sliders, masonry or carousels are very slick and impressive. Take a look for yourself.

Formatting Multiple Text Blocks

Highlighting a few paragraphs and making them bold or in italics doesn’t work yet, unless you use the Classic Editor block. It’s one block at a time. Note: There is a GitHub issue where the foundation of multiple block behavior is discussed. It is a prerequisite to something as simple as formatting a paragraph and a list in italics. Here is the feature discussion, if you want to chime in

Posts are now locked for other users

If you are working in a team of editors, you are familiar with the post lock feature in the current editor. If one of your peers is right now editing a post, you are not able to access it for editing; you have options for read only or to take over the post.

“Title” is not a block

It looks like a block, behaves like a block, but it’s not a block. The post title holds a lot of weight, especially in backwards compatibility,  plus in other places of WordPress for category pages, for the RSS feed, and many little things. Gutenberg is not modifying how the post title works.

White space around the editor

The editor is “opinionated” regarding the space it occupies. Depending on the size of the screen, you might find “too much” white space on the side of your content.

The opinion from the design is that there is an optimal width for reading on screen, and if the display space is larger it is much harder to keep track of the lines. It adheres to a max-width.

A few people mentioned this in the forums, and the team is giving it another review. (1483)

If you feel the same way when you look at your editing screen, you could use the plugin (???) To fix it for yourself.

Is your Editor window too small?

  • Get the plugin Add Admin CSS  by @coffee2code https://nptp.us/2wuZWiL
  • Go to Settings
  • Copy/Paste:
    `.edit-post-visual-editor .editor-post-title__block,
    .edit-post-visual-editor .editor-block-list__block {
    max-width: 1024px;
    }`

Keep in mind though, that usability studies have shown that a content window is between  480 and 600 pixels. For easier reading it’s actually half the size. That’s BTW is helpful to have a graphic to the right for the first section of your blog post. That’s one aspect. The other is that with Gutenberg you are aiming at a 100% WYSIWYG. So what you see in the editor should be the same thing that is visible to your visitors on the front end. If you make the editor screen too wide, a few things will wrap differently for your visitors. Quite a few writers found this tip helpful.

Grammarly doesn’t work well

“Grammarly considers block a separate text box, meaning if you create a 25-paragraph post, you have 25 separate text boxes Grammarly is trying to check. This forced me to disable Grammarly on my site.” Jonathan Bailey in “WordPress’ Gutenberg: A Practical Review”

REST-API conflicts

Marius Jensen has published a few issues that he and his team of volunteer forum helpers identified. Quite a few of them have to do with another fairly new module that made it into Core recently, the REST-API. Gutenberg development is based heavily on the REST-API so during developing Gutenberg, the collaboration with the REST-API made it better as well. At the foundation of this, it’s a programming issue, but it will bubble up to become quirks a content creator will need to be aware of:

Categories and tags are not showing up

Some security related plugins may have disabled all, or parts of, the REST API. This is used by Gutenberg to fetch all the data used to display content in the editor, so if you are missing fields, check if you have a security plugin enabled.  If so, see if it has an option for the REST API.

Updating Failed Message

If you are receiving a Updating Failed message when trying to save a post or page, check if you are using the services provided by CloudFlare. We are currently working with them to address a problem which blocks the Gutenberg save function. A workaround is available while we find a solution to this.

Anti-Virus Software

It’s been reported that some antivirus software may also block REST API requests. So if your antivirus software offers an application firewall, this may prevent you from saving posts. We are looking into this.

Blank Editing Screen

Some users may experience a blank editing screen. If this happens, a first step to testing should be to just hit refresh in your browser. It may be a “race-condition” that we’ve identified and are working on fixing.

Changelog

  • Dec 14: Removed the section: When will WordPredd 5.0 be released. WordPress 5.0 was released December 6th, followed by 5.0.1 on December 13 for security updates.
  • Nov 16: added shout-out to today’s Live Q & A + Screenshot of Permalink editing in Document panel of the sidebar of the editor
  • Nov 12: added link to WooCommerce Sticky Post on Plugins Forum page and fixed a few more typos. – bph

Update #102 – Tips and Tricks for developers & designers, on building blocks and themes

Howdy! It’s been about three weeks since the last Update post. I have been handicapped a bit. First, by a self-inflicted deep cut into my left thumb with a construction tool, #StitchesRUs. Then a needed vacation with dear friends, which ended in an clumsy sidewalk tumble. I am still working mostly from my couch with an elevated left leg, laptop on a pillow. It’s healing slowly and I hope, I’ll be in good shape when I head out to Portland, OR next week.
Our eNews subscribers received their recommended reading fix with our weekend edition. You, too, can subscribe here. In the meantime, WordPress 5.1 was released. (Field Guide) as well as Gutenberg 5.1.

Mark Uraine keeps us all updated on the progress of Gutenberg Phase 2 and allows you to track the many discussions on Classic Widget Block, Navigation Menus, Section Block, to name a few.

Speaking of Navigation Menu block, Susan Semark from the Research team has been busy and posted a first proposal, an Accessibility Video walk-through and is planning a usability study.

I collected quite a few more links for you, content creators, designers, developers and consultants.

Learn about the mechanics on how to contribute to the Gutenberg development.

Few more blocks for publishing and eCommers, discussions on a future Core Block Manager, reviews of existing Block Collections. Also, find tips and tricks for building blocks as well as for creating themes for the block editor or making them Gutenberg ready.

Thanks for visiting and enjoy the collection. — Birgit 💕

🎥 💬 Don’t miss the Live Q & A this week Friday with Josepha Haden, Daniel Bachhuber and Jon Desrosiers. We’ll be talking about leadership in the times of change. 📢 📅

Table of Contents

Gutenberg & WordPress 5.x design and development news

Block Editor for Content Creator

Riad Benguella started a GitHub issue to discuss a core implementation. Chime in there, if you are interested. There was also some discussion in today’s #core-editor chat.

Building Blocks

Creating Themes for Gutenberg

Photos from Around the World

Featured Image: Photo by Sérgio Rola on Unsplash