WordPress DC Gutenberg Meetup

Oh how I love my hometown WordPress DC Meetup group.  It’s been going for years and I have had the honor to speak a few times.

Tonight they did a special session for users (with some dev questions at the end)  on the new drag and drop, block editor for WordPress, code named Gutenberg.

I tried to give a very basic, high level talk, with a lot of time to answer folks questions about Gutenberg. Overall it went pretty well, although I had hoped for more folks getting started to ask some basic questions.  Turns out the majority of the folks build websites for others, so I don’t think Gutenberg was a new concept for everyone.

You can check out the slides from the talk below 🙂

I have been so involved with Gutenberg lately, with my Gutenberg Development Course and other related Gutenberg education projects that I forget that a lot of folks have not played with Gutenberg much or tested their sites with it.

Given this, it was an honor and super fun to speak on the topic at my hometown WordPress Meetup.  Thanks co-organizers Leland and Beth of inviting me 🙂

Learn More About Gutenberg

My buddy Joe Casabona and I have been doing courses on Gutenberg.  If you’d like a solid walk through of Gutenberg from a user or developer perspective, you should check out some of our sample content!

WordCamp London Gutenberg Workshop

For years I have wanted to make it to WordCamp London.  Since doing my study abroad at Cambridge, I have felt a second home in the UK.

This year I got to finally be in England for WordCamp London 2018.

The week before the Camp I did an informal Gutenberg workshop with the wonderful team from Pragmatic, a leading WordPress agency in the UK.  You can read my write from my Gutenberg Jam Session with Pragmatic here.

The Gutenberg Workshop

Originally I had hoped for a solid 3 hrs to introduce Gutenberg from a development perspective and give time to coding some blocks.  Instead I had 40 minutes for the “workshop” and did my best to do both of these things, but rather than code together, I just pointed a repo of example blocks and walked through what I could 🙂

Overall I think it went really well.  You can see the slides below and hopefully the video will go up on WordPress.tv in not too long.

We didn’t get much time for questions, but one of the coolest pieces of feedback was someone sharing they built their first plugin while listening to the session.  So cool 🙂

Checkout WordCamp London Next Year!

If you happen upon the UK next year and overlap with WordCamp London I would highly suggest you check it out!  WordCamp Brighton and Manchester are also on my list 😉

Thanks to all the organizers and volunteers for their work in putting on the event, and to the sponsors who made such a classy event possible for so little 🙂

Also, thanks to Bluehost (I have a special Bluehost discount page) for helping with some of my travel in getting to the event!

Learn More About Gutenberg

In 40 minutes, I only covered a bit of what my full Gutenberg Development Course covers so I would encourage you to check it out if you want to dig deeper into developing with Gutenberg.

Gutenberg Jam Session with Pragmatic

This week I had the opportunity to stop by Pragmatic, a leading WordPress UK agency to do an informal chat / workshop around Gutenberg.

What We Talked About

I didn’t want to take too much time going over things that I already covered in my Gutenberg Development Course.  But there were still some folks who hadn’t taken the course completely, so we did talk about a few things:

  • Core GB Architecture (where is the React abstraction, how is the Redux abstraction different than straight Redux)
  • How to access the globally available libraries within WordPress
  • What you need to do to get wp.element (React) on the frontend of the site
  • Approaches to creating blocks with rich frontend JavaScript
  • ACF vs Gutenberg && ACF to Gutenberg when appropraite
  • Using meta or API data in blocks
  • Migration possibilities for custom editing tools in the classic editor (or with ACF)
  • Tooling configurations and WordPress npm packages
  • Mmm, a bunch of other great things I can’t remember 😉

 

Sneak Peak of Theming with Gutenberg Course

I am currently working on a Gutenberg Theming course with my buddy Joe Casabona.  The course will likely be done at the end of the month and since Pragmatic does do a lot of custom WordPress themes I thought it would be good to talk through the various aspects of that course.

Love Me Some Pragmatic, Highly Recommend

I have gotten to know a number of Pragmatic employees over the last few years.  They are great folks and quite smart.  If you are looking to work at an enterprise level agency with great folks in lovely Brighton, UK, I highly suggest you check them out and keep a pulse on open job positions.

 

WordCamp Miami Gutenberg Workshop 2018

This year, WordCamp Miami continued it’s focus on providing resources around learning JavaScript for WordPress.  Not only did they have a dedicated JavaScript track like they have in the past, they also had a full day workshop on Gutenberg Development.

Brian Richards, Grzegorz (Greg) Ziółkowski, Josh Pollock and myself each did part of the workshop that broke down as follows:

  1. Future of WordPress Development – Grzegorz Ziółkowski
  2. Setup & Introduction to Gutenberg: Tooling And Terminology – Zac Gordon
  3. Creating Your Very First Gutenberg Block – Brian Richards
  4. Building Custom Gutenberg Blocks: From Static to Dynamic – Josh Pollock

You can still go back and watch the entire live stream here:

You can also find my slides to my portion of the workshop here:

 

You can also find the GitHub repo of example files for the workshop here.

Definitely Recommend the Next WordCamp Miami!!!

If you have a chance to make it to the next WordCamp Miami I highly suggest it!  It is always a great camp and they have a tendency to put a strong focus on teaching new and emerging technologies, like JavaScript and Gutenberg.

Guten Tag Events – A Gutenberg Community Series – The First 4 Sessions

Very excited I was when Ana Silva and Jenny Wong reached out to me about a UK WP Community led event series called Guten Tag.  They, along with some Core developers, Plugin developers, designers, managers, agencies and others to discuss the finer points of the roll out of Gutenberg and what it meant to everyone involved.

The first day of free online sessions took place this Monday, March 5th.

#1 An exploration of the mental and technical transition for developers to embrace Gutenberg

Screen Shot 2018-03-06 at 1.03.24 PM.png

With: Gary Pendergast, Jenny Wong, Matt Haines-Young & Omar Reiss

A discussion based on the experience of developers who are already working with Gutenberg.

The roundtable will focus on exploring the barriers preventing people from adopting Gutenberg in their projects, and reviewing the mental and technical transitions that need to occur for developers to embrace the project in their professional environments.

 

#2 Fireside chat with Gutenberg team members

Screen Shot 2018-03-06 at 1.05.55 PM.png

With: Mark Wilkinson, Matías Ventura, Miguel Fonseca & Tammie Lister

A session exploring the reasons behind the Gutenberg feature plugins’ existence and the problems it aims to solve.

We’ll be asking the Gutenberg core team what common concerns they hear from the community, and how far Gutenberg is from being merge proposal ready.

 

#3 : An exploration of the future of Page Builders with Gutenberg

Screen Shot 2018-03-06 at 1.07.50 PM.png

With: David Lockie & Robby McCullough

A session exploring the relationship between the WordPress page builder market and the Gutenberg Project. We’ll be asking Page builders how they see Gutenberg affecting their business, users, and what steps they are taking towards the future.

 

#4 : Practical How-To: Staying up-to-date with Gutenberg

Screen Shot 2018-03-06 at 1.10.14 PM.png

With: Zac Gordon

We are inviting various people across the community to share practical solutions to getting to grips with the new Gutenberg editor.

In this session, Zac Gordon is going to share how he stays on top of the noise and shifts through all the chatter to find the latest Gutenberg information.

 

Get Noticed of Upcoming Sessions

I highly encourage you subscribe for future events, get on the UK Slack Channel, and look for the #gutentagWP hashtag on Twitter.

This is a community driven event, so if you have ideas for other sessions, please reach out and let me know and I can help connect you with everyone.

 

How I Follow Changes in Gutenberg Development

There is a great community series on Gutenberg starting called Guten-Tag.  One of the first sessions I am doing with this series is on “How to Stay Up to Date on Changes in Gutenberg.”

This has been a really relevant topic for me because I have released a course on Gutenberg Development, a Live Gutenberg Q&A, and have worked with some other educators on Gutenberg related development.  So staying up to date on the rapid changes with Gutenberg has been super important.

Luckily, it has gotten easier and easier.  In this post I want to outline a few places where you can go to stay up to date on the latest changes in Gutenberg Development.  This is what I have used, but I know it is not comprehensive, so if you notice things missing, please post them up in the comments!

Slack Channels

There are a few important Slack channels to follow to stay up to date on Gutenberg:

  • #core-js – This channel deals with JavaScript in general in WordPress Core.  It has a good deal of overlap with Gutenberg
  • #core-editor – This channel is specific to changes and discussions around the Gutenberg Editor
  • #core-customize – As Gutenberg expands into the Customizer I would highly suggest following this channel as well

While these channels are great for reading and following changes, it can also be a good place to ask your questions if you are not sure about how something works in GB.

Make WordPress Blog

The make.wordpress.org blog has great regular posts on Gutenberg.

  • Check the sidebar for official meeting times in Slack
  • “What’s new in Gutenberg” posts – Look for posts coming out every other week outlining the latest changes in Gutenberg from the last sprint
  • Any other posts related to Gutenberg.  There are a few other posts on Gutenberg that are different than the What’s new posts
  • Changes to Customizer – This is also a place you can find out more about the changes in the Customizer to Gutenberg.

Github

The best thing about the Gutenberg repo on Github is that you can track all of the issues and changes happening to the plugin.

You can also post up issues if you notice bugs in Gutenberg.

Twitter

A number of great accounts on Twitter have popped up to help you track changes in Gutenberg.

  • @zgordon and @jcasabona – We are both doing courses on GB and share a number of updates
  • @riadbenguella @gziolo @andrew_duthie @matias_ventura @karmatosed – Good Core Gutenberg Developers to follow
  • @thegutes @GutenbergHub @gutenbergtimes – Twitter accounts dedicated to GB
  • #Gutenberg #gutentag-events #gutentagWP- It is a good idea to follow the #Gutenberg related hastag

 

Did I Miss Anything?

How do you stay up to date on Gutenberg Development?

Folks mentioned this one as well 🙂

How to Use wp.i18n.__() to Allow for Translation of Your Gutenberg Block Text

While working on my Gutenberg Development Course I was really happy to find out that the core developers ported over much of the internationalization features we are familiar with on the PHP side into a client side library available as wp.i18n.

Example of __() in Action

 

Since wp.i18n is available in the global scope, you can access it directly without needing to officially “import” anything.  In this example we are pulling out the __ function from the wp.i18n library it exists within.

Notice when we call the function, we do not need to pass in a second parameter with the text domain for our plugin or theme.  This will be automatically sorted out for you.

Additional Internationalization Functions
We also have access to some other helpful internationalization functions that you may recognize from the PHP side.

  • wp.i18n.__()
  • wp.i18n._x()
  • wp.i18n._n()
  • wp.i18n._nx()
  • wp.i18n.sprintf()

Most of the time you only need __(), but if you are familiar with these other functions already in PHP or just want to dig deeper, you can explore the core library readme file here.

Learn More About Gutenberg Development

If you would like to learn more about building with the new editor in WordPress, please check out my Gutenberg Development Course 🙂