Update #101 Site building Research, building with Blocks

It’s been over two weeks since the last update and a lot has happened. A new Gutenberg version, a release candidate for WordPress 5.1, and report on the site building research results. There are also a ton of awesome update in the next WordPress version. Make sure to check out the Field Guide. This post is also about education listing online courses, conferences and WordCamps, around the block editor. Lots of blocks for content creators, bloggers and small biz site owners and plenty of links for developers who want to build blocks. Enjoy and let me know what you are working on and what cool sites you built with Gutenberg blocks. Have a fabulous week! — 💕 🤗 Birgit

Table of Contents

WordPress and Gutenberg Development News

WordPress 5.1 is scheduled to be released February 21, 2019.
It will come with Gutenberg version 4.8.

Gutenberg 5.0 (released last week) is available as plugin. It will require WordPress 5.x core version.

Site Building Research Results

Subscribe to the http://make.wordpress.org/design blog for more updates.

Gutenberg / Block editor at upcoming WordCamps

Two months after WordPress 5.0 was released, I can’t imagine WordCamps without talks about Gutenberg or the new block editor. As it’s now integrated into Core, any talk about creating content, designing sites or writing plugins will have to also be about the block editor. I also know a few people, you have not had the time to dive into the block editor parts of WordPress, and just went with the Classic Editor. After reading the Site building Research results, I understand more about this segments of site builder and coaches. The main reason, I list the WordCamp talks here is that we can collectively look them up on WordPress.TV later this year, and also maybe catch ’em on LiveStream, should there be one. There is some serious FOMO going on, too. The first WordCamp in 2019 for me will be WordCamp Atlanta on May 3 + 4, 2019. I am also looking at WordCamp Leigh Valley, Philly, NYC and Boston later this year. Who knows, maybe we run into each other! 👋 Waving at all the fabulous WordCamp organizers, who spend months of their spare time to put these phenomenal conferences together. Thank them when you meet one!

WordCamp Miami, March 15 – 17, 2019

WordCamp Nordic March 7 + 8, 2019, Helsinki, Finland

  • Gutenberg Best Practices For WordPress Developers That Had No Time to Learn JavaScript Deeply
  • Gutenberg Cloud: Your blocks in the cloud (for every CMS)

WordCamp Phoenix, February 15 – 17, 2019

Our Live Q & A Shows

Gutenberg Times Live Q & A Feb 8th. with Sarah Semark, Mark Urain and Sarah James
Cover: Josepha Haden, Daniel Bachhuber, Jon Desrosiers (Gutenberg Times live Q & A March 8th)

Join us on Friday March 8th, 2019 at 2pm ET / 19:00 UTC
Josepha Haden,
Daniel Bachhuber, and
Jon Desrosiers

Please also save the next dates:
Mar 22 / Apr 5 / May 10

Content Creation & Publishing with Blocks

Building Blocks

Online Courses & Conferences

Learn ReactJS from the ground up

Affiliate Links

Krong Siem Reap, Cambodia – Photo by Kevin Bluer on Unsplash

Mullenweg announced Gutenberg Roadmap

Progress on Nine Projects.

February 11, 2019.

  • #1 Navigation Menu is still in discussion on GitHub. (#13690)
  • #2 has been moved forward already for quite a bit. The latest Gutenberg release(5.0), incorporated the RSS widget. Mel Choyce publishes regular updates on this particular project
  • #3 is coupled with #2
  • #4 hasn’t started yet
  • #5 Partial integration in core is scheduled for the WordPress 5.1 release
  • #6 & #7 haven’t started yet
  • #8 hastn’t started yet. It is the one that’s most exciting to me, as the proliferation of blocks are getting a bit overwhelming.
  • #9 The Core is still discussing best methodology and taxonomy for ticket gardening. Jon Desrosiers published a proposal on how to handle punted tickets in the short term and also how to manage the other open tickets.

Updates for Gutenberg Phase 2

Every Friday, Mark Uraine publishes Updates for Gutenberg Phase 2 on the make/design blog. Here is the list:

Nine Projects for 2019

Dec 8th, 2019. A couple days after the WordPress 5.0 release, Matt Mullenweg posted on the make/core blog the 9 projects for 2019, highlighting what he outlined in his State of the Word at WordCamp US 2018

  1. Creating a block for navigation menus.
  2. Porting all existing widgets to blocks.
  3. Upgrading the widgets-editing areas in wp-admin/widgets.php and the Customizer to support blocks.
  4. Providing a way for themes to visually register content areas, and exposing that in Gutenberg.
  5. Merging the site health check plugin into Core, to assist with debugging and encouraging good software hygiene.
  6. Providing a way for users to opt-in to automatic plugin and theme updates.
  7. Providing a way for users to opt-in to automatic updates of major Core releases.
  8. Building a WordPress.org directory for discovering blocks, and a way to seamlessly install them.
  9. Forming a Triage team to tackle our 6,500 open issues on Trac.

WordPress 5.0 “Bebo” released on December 6th, 2018

December 6th, 2018. Today around 1:30pm ET, the core team released the WordPress 5.0 and with it the new block editor  as default editor for content creators. 

Putting the final touches on the WordPress 5.0 release:  Tammie Lister, Gary Pendersgast, Jonathan Desrosiers and William Earnhardt at WordCamp US  2018
Putting the final touches on the WordPress 5.0 release: Tammie Lister, Gary Pendergast, Jonathan Desrosiers and William Earnhardt at WordCamp US 2018

December 3rd, 2018.  Matt Mullenweg posted the new target date for the WordPress 5.0: December 6th, 2018, the same day PHP 7.3 will be released. WordPress 5.0 includes not only the new Block editor but also compatibility fixes for the new PHP version.

Based on the stability, testing, and reports on the release candidates for WordPress 5.0 so far, we are now targeting Thursday December 6th for public release and announcement. 5.0.1 will open for commits soon, and will be an area people can choose to focus on at the contributor day at WordCamp US in Nashville this Sunday.
As before, if new information arises that indicates the software is not stable, we will adjust or remove the target date.

Below Questions and Answers are taken from Matt Mullenweg’s  Gutenberg FAQs  as well as from his post about the new target date.

Do I have to switch to Gutenberg when WordPress 5.0 is released?

Not at all. When it’s released, you get to choose what happens. You can install the Classic Editor plugin today and when 5.0 is released, nothing will change. We’ve commited to supporting and updating Classic Editor until 2022. If you’d like to install Gutenberg early, you can do that now too. The Classic Editor plugin has been available for 13 months now, and Gutenberg has been available for 18 months. Both have been heavily promoted since August 2018, and more than 1.3 million .org sites have opted-in already to either experience, so nothing will change for them when they update to 5.0.

Is it terrible to do a release in December?

Some people think so, some don’t. There have been 9 major WordPress releases in previous Decembers. December releases actually comprise 34% of our major releases in the past decade.

What if I don’t want to update on that date, or I’m not ready?

That’s totally okay, there’s nothing that says you must update the moment there’s a new version released. You can push the button whenever you’re ready.

What if I want to upgrade but I’m not ready for Gutenberg?

No problem, install the Classic Editor plugin and 5.0 will be indistinguishable from 4.9.8 for your posting and editing experience, and you’ll still get the other improvements and fixes that have gone into 5.0. Classic Editor is supported until 2022, and now allows you to switch between Classic and Gutenberg on a per-user or per-post level.

November 30, 2018. WordPress 5.0 RC2  is scheduled for  today. Earlier this morning the team released Gutenberg 4.6.1.  “This brings plugin up to parity with RC2 packages”  noted Matias Ventura on the #core-editor Slack channel. 
Read also today’s status update on the Make.Core Blog

When will 5.0 be released?

Read Matt Mullenweg’s answer in his blog post: “WordPress 5.0: A Gutenberg FAQ

We have had a stable RC1, which stands for first release candidate, and about to do our second one. There is only currently one known blocker and it’s cosmetic. The stability and open issues in the release candidates thus far makes me optimistic we can release soon, but as before the primary driver will be the stability and quality of the underlying software. We made the mistake prior of announcing dates when lots of code was still changing, and had to delay because of regressions and bugs. Now that things aren’t changing, we’re approaching a time we can commit to a date soon.

Matt Mullenweg answer in his blog post  Nov 29, 2018

November 23, 2018 WordPress 5.0 RC1 – the first release candidate was released about 4 days late.  On Nov 21, Matias Ventura wrote: “The date for 5.0 release is under consideration, given it’s not plausible for it to be the on 27th. “

Continue reading “Mullenweg announced Gutenberg Roadmap”

Update #100 – Courses, Tutorials, Blocks and more

One (1) Year of Gutenberg Times, 100 hand-curated Updates since June 2017, the 10th episode of our Live Q & A on YouTube. 45,000 visitors. These are all just numbers. All that matters is that you are here! Thank you. Leave a comment on any of the posts, and tells me more about yourself! 💕

The web gets really interesting when you can add animation and moving art to it. Now the Block editor can be used as an p5js script editor and provide instant preview. Very cool. Enjoy our conversation with Kim Scotland, Bob Dunn and Kori Asthon about how they converted their sites to the block editor and how businesses can take advantage of the new WordPress visual editor for product and affiliate links.

Our friends, Zac Gordon and Joe Casabona published updated or new courses for you. Take advantage of their discounts! Gutenberg is also the topic of three WPCampus sessions. Morten Rand-Hendrickson teaches you how to extend your Themes for the block editor.

And again, Blocks Galore. Cool blocks for your blogs, and great tips for developing plugins and themes for the block editor.

Table of Contents

Join us on Friday February 8th, 2019 at 2pm ET / 19:00 UTC for a discussion with the three Gutenberg designers Sarah Semark, Sarah James, and Mark Uraine, sharing information about their research into page building and Phase 2 of Gutenberg. Register Now!

Gutenberg-Times-Live Q & A Semark, James, Uraine

WordPress, Block Editor and Gutenberg Dev News

top

Online Events & Courses

Gutenberg at WPCampus on January 31, 2019


top

Using Block editor for Content Creators

top

Our eNews subscribers

  • Users, content creators, bloggers 43.10%
  • Site Developers & implementers 37.70%
  • Product (plugin/themes) developers 12.30%
  • Agencies or Consultants 6.90%

top

Plugins, Blocks & Themes development for WordPress 5.0

Wavemaker – This illustrates how waves (like water waves) emerge from particles oscillating in place. Move your mouse to direct the wave. Contributed by Aatish Bhatia, inspired by Orbiters by Dave Whyte.

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

📢 Now on available: Advanced Gutenberg Development  📢

top

Featured Image: Photo by Christian L on Unsplash

Update #99 Gutenberg Phase 2 Starting up, Finding Blocks and more.

Gutenberg Phase 2 starting up with call for contributors, navigation blocks ideas and research in page building. Watch our Live Q & A conversation about Supporting & Testing WordPress 5.0. Find also a few more tips & tricks on using Gutenberg for content creation and block building. Hope you learn things! 💕

Monday was Gutenberg Times 1-Year-Anniversary. It’s been a fun ride! An awesome 12 months of the site, for sure. 🎂🍰🤡 — Birgit Pauli-Haack

Live Q & A with Kori Ashton, Bob Dunn and Kim Scotland!

The next show is scheduled for January 25th, 2019 at 2pm ET / 19:00 UTC with
Bob Dunn (@BobWP)
Kori Ashton @KoriAshton and
Kim Scotland @TheBlogGenie

Please also save the next dates:
Feb 8 / Feb 22 / Mar 8 / Mar 22.

Table of Contents

Gutenberg & WordPress Development News

Using the new block editor

Live Q & A with Sheri Bigelow, Marius Jensen, Hristo Pandjarov, hosted by Birgit Pauli-Haack

Finding more Blocks #280blocks

Themes and Plugins Development for Gutenberg

xhttps://www.youtube.com/watch?v=nAjlvw5w7rw

Featured Image: Photo by Ivan Bandura on Unsplash

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

  • Jan 15: Remove inline comment residue from editing process. Thank you to  Mario Neuhold‏ @mrioa for alerting me to the oversight.
  • 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 #98 Getting used to the Block Editor, Learning Block Building, Plugins Getting Compatible

People paying more attention on using the new block editor and finding amazing hidden secrets. More and more developers explore learning how to build blocks and more an more plugins are getting compatible with the new editor. The most fun, I have had is finding new blocks and continue on my quest to find #280Blocks. What are your favorite blocks? Let me know in the comment section.

– Happy New Year! May 2019 be a happy, healthy and prosperous one for you and yours! 💕

Join us on Friday, January 11th, 2019 for a discussion about Supporting and Testing WordPress 5.0 with our brilliant and experienced guests: Marius Jensen, Sheri Bigelow and Hristo Pandjarov!

Cover Image: with headshot of Matias Jenson, Sheri Bigalow and Hristo Pandjarov

If you like our work on Gutenberg Times, consider becoming a Patron by contributing via Patreon


Table of Contents

Developing Gutenberg

One month after its release on December 5th, 2019,
WordPress 5.0.x was downloaded over 18 million times.

top

Using Gutenberg on your WordPress Site

Gutenberg Times Live Q & A with Mika Epstein, Nicola Heald and Zac Gordon

Raw Footage: Sorry, it starts quite abruptly – I messed up the YouTube integration with Zoom. I will add the missing pieces from the Zoom recording… — Birgit 🤔

Wow! I successfully selected and copied an image from *Photoshop Elements” directly into a (Gutenberg) block! I was surprised to hear it was possible during the show. Maybe I should not be surprised — also need to try out the styling for embeds discussed.

Lisa B Snyder on Twitter Dec 29, 2018

top

Finding Blocks #280Block

Our Update #96 lists a lot of blocks that received a mention during State of the Word.

Can there be too many Blocks? Danny Cooper thinks so and I agree.
Manage your Blocks with his plugin.

top

Plugins getting updated for WordPress 5.0

top

Developing For Blocks and extending WordPress

Brent Jett, design lead at Beaver Builder, published a series of articles taking you on a deep dive of developing for Gutenberg.


Jason Bahl’s talk is now on WordPressTV – link to code and slide deck is available here

top

Photos from around the World

Featured image: Photo by La-Rel Easter on Unsplash

WordCamp US: Gutenberg talks

WordCamp US 2018 took place in Nashville, TN early December 2018. As part of the organizing team, I was not able make it into the sessions.

Here is the list of talks about Gutenberg that interest me.  I added the video links with the live stream timestamps to each talk and if available also links to slide decks and code repositories.

Gary Pendergast : “The Future of WordPress is Gutenberg”

Andrew Taylor:“Holy BlockAMole: Tips on Learning Block Development”

Slides

Jason Bahl: “Gutenberg, GraphQL and Government: Building Blocks for the State of California”

Slides / Repo

Miina Sikk: How we extended Gutenberg core blocks to build in AMP support

Helen Hou-Sandi: Metaboxes Considered Harmful

Alexis Lloyd The evolution and future of publishing 

Alexis is the co-lead for Gutenberg’s Phase 2 together with Riad Benguella. 

Matt Mullenweg: State of the Word (Video & Slides)

Featured Image: Photo by David Needham, Volunteer photographer at WordCamp US 2017

Update #97 Using WordPress Block Editor Starting Gutenberg Phase 2, Building Blocks and more

🎄
🎅
🎁
🎊
🎉
🎆

Happy Holidays !
Peace and Understanding around the World!

So WordPress 5.0.2 came out with massive performance improvements to the block editor especially for posts with many, many blocks. I tested it here on a post with 94 blocks and it was wrap speed compared to before. Hat Tip to the Dev Team!
I ordered 2 sets of the Gutenblox.fun Jenga issued by XWP. All proceeds go to the WordPress Foundation. Marcus Kazmierczak of the Documentation team published a tutorial for programmers to get started on WordPress JavaScript. Join us next week for the next Gutenberg Times Live Q & A. Discover more news below.

Hopefully you can fully unplug and be with your families and friends. Be present, be in the moment, look up! — Yours, Birgit 💕

Continue reading “Update #97 Using WordPress Block Editor Starting Gutenberg Phase 2, Building Blocks and more”

Update #96 WordPress 5.0 release, WordCamp US, #280Blocks and more.

Last week was probably the busiest week in WordPress community: WordPress 5.0 was released and WordCamp US happened. Also in Nashville, the inaugural Automattic Design Awards were announced. And by the time, I thought I was finished, 5.0.1 came out with a security patch all the way back to version 3.7.28. As I can’t keep track of it all alone, we followed -up on all-things Gutenberg during WordCamp US in our Live Q & A on Friday (12/14)  with Mel Choyce, Chris Van Patten and Joshua Wold.

WordPress 5.0 was released with a nice little video and Jeff Paul’s Field Guide provides all the additional information on the changes for developers, designers and consultants.

At WordCamp US the talks were live streamed and volunteers on the WordPress TV team are working on getting them sliced and uploaded to WordPress.tv. Matt Mullenweg’s State of the Word is already on YouTube. In my previous post on Gutenberg Talks at WordCamp US, I added the time stamp links to the live stream videos for you to review.

During State of the Word, Matt Mullenweg showed off some of the work that has been done with Gutenberg and we followed up with a #280Blocks section and links to plugins offering Custom Blocks for content creators. The same with displayed Themes. There is even more to read, but that’s it for today.


Table of Contents

Gutenberg & WordPress Development News

WordPress 5.0 Released, Block editor now default.

#WCUS SOTW & Recap Posts

Design Award for Work with Blocks

Themes for the new block editor

Block Plugins shown in SOTW and more #280blocks

Using Gutenberg

More Photos…

Featured image: “Nashville, TN Airport” by Birgit Pauli-Haack

How to Create a Copy of Your WordPress site to test it for Gutenberg

Why Bother?

With WordPress 5, the new block editor, codenamed Gutenberg made its way into the core of WordPress. Some of you might heed to the calls of caution. Every new feature has some teething problems and unless you want to spent some of your time troubleshooting update issues, the prudent thing for you to do is to resist and to install the Classic Editor plugin.

At Pauli Systems, we have been using Gutenberg in production for many, many months for new site projects. And from experience, I can tell you, once you get into the habit of working with Gutenberg you will prefer it, and it will be hard to go back to the old editor. However, for content heavy and complex sites, we go the route of caution ourselves. For most of our long time clients we will wait for later versions of WordPress 5.0 to start the implementation process. We estimate it’ll happen in February or March 2019.

If you business depends on your website being up and making you money, you, too, want to hold off and install the Classic Editor, or just wait with the update. You also need to have a safe space to test your site for Gutenberg readiness. We show you here how to create the safe space.

There are quite a few options for you.

Local install a local development suite like Local by FlyWheel or Desktop Server by ServerPress. Both have easy installs for Mac and Windows. We use them, for instance, to quickly create new WordPress instances for clean out-of-the-box testing of plugins in combination with Gutenberg. Both applications require some RAM and CPU time on your machine, though.

Managed hosting companies, like WPEngine or Pressable, provide you with easy “Clone-your-site” features, some for free some will charge additionally, depending on your contract.

What’s a small business DIY site owners, a blogger on shared hosting to do? The fine folks of Pantheon, provide staging sites for free and you can use them as long as you need it. We walk you through the process in this post.

This post has three sections:

  • Detailed instruction, you should read before starting. We show you also screen shots and videos. The videos tie it all together, illustrate the flow, and help avoid problems. 
  • Found Trouble, you see instructions are easy to follow, mistakes can be readily corrected, and the videos are important for a smooth migration.
  • The short of it – Bare bones instructions to perform the migration when the you are ready. 

How much time is involved?

  • To read this post, you probably need about 5 minutes. It’s mostly text, screenshots and 3 mini-videos of 30 to 40 seconds videos.
  • Getting everything set-up is as complicated as logging in to your live site as an admin.
  • Starting the process and letting the robots do the rest of the work, will cost you probably another 5 minutes.
  • Then another two minute to check back if the migration process is finished.
  • Total 12 minutes.

A few ‘accidental techies’ at nonprofits tested these instructions and the whole process.  We incorporated their feedback to improve these instructions. You can do it too! Let me know how it went in the comment section. 

“The videos are really helpful and you should watch them before you start on this journey!”

Mary Rack

Why Pantheon?

Pantheon has a heart for WordPress site owners and provides free staging development space, knowing you can’t experiment or improve a site without having a safe space that doesn’t interfere with your organization’s live website. And you can use it without a change of the hosting for your live site. But of course, if you like it, you should stay. I have been using Pantheon way longer that they were a sponsor of Gutenberg Times.

What will happen throughout this migration process? An overview.

Knowledge prerequisites

  • You need to be able to open browser in new tabs and navigate a multi-tab browser window
  • You need to have administrator permissions on your site
  • You need to have one of the browser tabs logged in as administrator at current website.

This process takes three steps:

  1. First you tell Pantheon which site you want to migrate and what CMS you are using.
  2. Then you install a plugin that copies the site, connects it with the new space at Pantheon, and installs the site on the development server at Pantheon.
  3. Finally, you log into the staging site with the same credentials as your live site.

Most of the process happens in the background, and it can take about an hour for a fairly large site. But don’t worry: neither your browser nor your site will be “bogged down” during the time it takes. Just leave the browser tabs open. Everything will happen in background, and you can stop by at your Pantheon dashboard to see if the migration has finished.

If this is the first time you are done something like this, you might wonder if it will change anything on the existing site. The answer is No. It will need to know your live site’s URL, and it will help you install a plugin on that live site. But it will change nothing else, and your visitors won’t notice anything different.

You might also fear that this is a technical process that is over your head. Don’t worry!  If you are able to fill out online forms, you can do this. And if you are stuck, Pantheon has a Live Chat to connect you with a technician. Or you can just ping me and we’ll figure it out together.

After the migration you can test and play around on your staging site to you heart’s content.  That won’t mess up your live site. In fact, that’s the whole point of this exercise!

How long you might ask can the staging site be hosted on Pantheon?  You will rejoice to read that it can stay on Pantheon as long as you need it. And it will do so at no charge.

One more thing: Make sure that on one of your browser tabs you are already logged in with your administrator account on your WordPress site. I’ll help with the seamless background processing Pantheons support through their migrations process.

So, are you ready? Let’s go!

Create an Account With Pantheon

Head on over to Pantheon and sign-up for an account

If you already have an account, now is the time to login. 

For your Sign-up all you need is your

  • First name
  • Last name
  • Company name 
  • Work email address and
  • a password.

No credit card, no long form to fill out or decisions to be made. When Pantheon writes “You only pay when your site launches”, it means you pay only when you connect your site to a public domain name, the url changes from “dev-some-thing.pantheo.io” to “mydomainname.org”.

Once you are on your dashboard, you can start with the migration.  

Select “Migrate Existing Site”.

It will be a 3-step process, as indicated on the top of the screen.

 

Watch this short video before you start. It’ll helps you get comfortable. When you watch it the second time, I want you to watch the the “Site-Url” changing while typing to see the context

And then there they slip in another step: Install and Authenticate. It’s ok. It’s easy.

 

Install the Migration plugin on Your Live Site

Next you’ll click on “Install on /wp-admin” See in below video what will happen once you do:-)

This feels like a local news teaser: Your World will change for ever.
News at 11

Seriously, what will happen is that the “Install on / wpadmin” Points to a page on your live site’s plugin page and once you click “Install Now” in the right corner of the screen, it will initiate the plugin install on your site. Then you have to active it. 

Once installed and activated, you will first connect the plugin to your Pantheon site. Next add the “Machine Token” from your earlier screen (the tab is still open in your browser).  Finally click on “Migrate”

Now we wait.

Copying and migrating is all done by means of the Blog Vault tool which Pantheon provides for this process.

You will be able to follow the process which will take between a few minutes and an hour.

That  part is as interesting as watching grass grow or paint dry. It has a zen kind of way to it, so if you need a break from an otherwise hectic day, this is a good way to calm your nerves.

You can leave the tab/window open and get back to your Pantheon screen and click on “Confirm Migration Progress”

We’ll come back to this after the process is finished.

At any time, you are free to stop the migration process either on this screen via “Cancel Site Migration” or from the screen on your site which displays the Blog Vault screen.  Just click on “Cancel Migration.”

You also don’t need to wait for a “block your browser” tab. You can just continue your other work. The fine folks at Pantheon give you permission: “You don’t have to wait here – we’ll email you when your site is ready.”

Depending on how large your site is, and how many posts and plugins it has, the migration may take more than hour or two. Keep an eye out for that email:-)

And be aware that each server site has its own time-out settings. Don’t worry about that. If the process stalls for any reason, go back to either your live site or to your pantheon dashboard and restart the process. It will begin where it left off on time-out.

Migration is Complete. 

Congratulations! You did it!

Pantheon Dashboard

Click on “Visit the Site Dashboard”. You may feel a little overwhelmed as a new comer. Ignore the techie stuff and just concentrate on the grey buttons.

When you click on “Visit Development Site” you’ll see the public view of the copy of your site. You might want to bookmark this page, so you can easily return to it or share the URL with your team members or bosses or your consultant.  

Click on “Site Admin”  to enter the WordPress Dashboard of your staging site.

You can even use your customary username & password: since this is a copy of your live site, it also copied all users with their credentials.

Next steps:  testing your site for Gutenberg

Are you able to take it from here? Need more assistance? Let us know in the comment section or via the Contact Us – page


The Short of it

Preparation: On one of your browser tabs log in with your administrator account on a WordPress site.

  1. Create a Pantheon Account. (Or log in if you already have one. )
    1. Enter your
    2. First name
    3. Last name
    4. Company name
    5. Work email address
    6. A password
  2. Select “Migrate Existing Site”.
  • Enter the existing site URL
  • Select that site’s CMS ( click on WordPress)

 “Step 1. Install the Migration Plugin” (Important: Do not close this page. You will use it later.)

Check your wp-admin page: (The Pantheon plug-in may already be on it.)

If the Pantheon plug-in is NOT on your wp-admin page, click on download the plugin. When the plug-in is there, click on the button in the grey box Install on /wp-admin

“Step 2.  Paste This Information into the Migration Plugin”

  • See 2 boxes with entries: “Pantheon Site Name” & “Your Machine Token”.
  • Paste those entries into the Migration Plugin Blog Vault.
  • Click on “I agree” box.
  • Click on “Migrate” box.

Wait. It may take an hour or more.  When finished you will receive an email with further instructions.

PostScript: Found Trouble

A note from Mary Rack who went before you and ran into minor trouble 

I started the migration process after reading the explanations and studying the screen prints, but without viewing the videos. That was a mistake. Those videos are important.

I followed instructions blindly, and made tabs of some pages, but I had trouble finding the right tabs later.  Fortunately, when I could not locate the one with the “machine token” when it was needed, I recalled reading that I could create a new one if I failed to save the original.

I had been rattled, but was relieved by that recollection. I created a new machine token easily, and finished with no more mishaps.

Had I viewed the videos, I suspect I would have had no trouble returning to the original token’s location.