The new WordPress block-based “Gutenberg” editor is coming to WordPress soon. I’ve given a few talks about developing for Gutenberg. In this post I round up three talks, in three categories, that I think can give you a good overview of developing for Gutenberg.
For local WordPress and Laravel development, I tend to use a Docker-based solution, most of the time. Depending on the project, I either use Lando or docker-compose. This post is about Lando.
Lando, is no DesktopServer. DesktopServer gives you a simple GUI for creating WordPress sites. Lando has no user interface, you do everything from the command line. That’s good or bad, depending on what you need.
Here is how I create new sites for local development using Lando.
Optional step, but it’s best before going further to add phpunit, MailHog and xdebug. MailHog intercepts all emails coming from the application and provides a webmail-like UI for reading the caught emails.
I love xdebug, I can’t imagine PHP development without it.
In order to run tests “The WordPress Way” you need phpunit installed globally. I disagree with this approach, but Lando makes it pretty simple to do, so fuck it. Here is a .lando.yml file that adds all of these things:
This article is about setting up local sites for general plugin development. We also use Lando for local development of the Caldera Forms site. CalderaForms.com is hosted on Pantheon. We git commit the Lando config file in the repo for the site. That way we have a shared environment and can pull database and file changes using Lando’s CLI, thanks to their Pantheon integration.
I’ve developed a reputation at my company for declaring tasks “easy” that end up being very difficult or impossible. I deserve it.
This happens for two reasons. One reason is I underestimate the understanding that the person has more experience and knowledge then I think. The other is I don’t take the time to think through how to solve the problem before declaring it easy.
Let’s stick with option one, short post.
Multi-Tasking Is Hard AF
I’m writing this on my way to the office. I take the bus, which is great as it ads 4 extra walks to my day. It’s raining, I don’t have a small umbrella for the umbrella pocket in my bag. I don’t have a light-weight jacket with a hood.
I’m doing better when I first started going to an office — after over 5 years if working from home. I now check the bus schedules before I leave and I’m almost always on time for the bus. I even check the weather — hey I brought a hoodie today 🙂
So I’m New At This…
I’m doing something new, and I’m trying to be kind to myself as I stumble through it. I do wonder if I work too much as a way to avoid doing the things I’m uncomfortable with.
I used moving to Pittsburgh as my excuse to start leaving the house more. It gave me tons of anxiety at first. That anxiety lead to silly mistakes, which made the experience and anxiety worse. It’s easy to stay caught in that feedback loop.
The thing that’s great about my job is I spend a large part of my day writing code. Something I’m good at. Something that gives me a great sense of calm to do.
Sometimes I catch myself listing steps for household tasks… Clean up after meal, reduce mess : put dishes in sink, rinse dishes, put dishes in dishwater, push in chair, wipe down table…
I’ve taken the first rule — in my mind — of programing to heart. Before you write code, understand the problem and map a solution.
I know that taking a structured approach to self-improvement is not a revolutionary new approach to life. But being mindful of how I have to approach things that others may think are simple as a complete novice, I think that helps
I don’t think you can find that empathy for beginners by doing the thing you’re good at. I think it comes through struggling through the rest.
The good thing about this theory is it works better if when I make mistakes I don’t go to putting myself down right away and instead be forgiving of my own lack of skill or experience.
Gutenberg, the new WordPress post editor is coming soon and its a big change. Change makes people scared, that’s natural. Not all of that fear, in my opinion, matches up with the reality of what Gutenberg actually does and does not do. But, its a big change with some very real risks.
What WordCamp Montreal Taught Me
I attended WordCamp Montreal recently. Besides how great the vegan food was in Montreal I had two big takeaways:
First, industry veterans are excited about the possibility of Gutenberg and are also very worried about the transition. I think some of that is people still not understanding that Gutenberg WordPress 5.0 doesn’t change existing content. But also, there are some valid concerns there.
My other big set of takeaways was from a talk by Jer Clarke about Buddhism and WordPress. This was a great talk. It was not heavy on WordPress content but did make light of the how everything including WordPress changes.
It reminded me of how many times I’ve told people something like, “I used to be so stressed about technical debt and not having enough time for everything I want to build and not making enough money. Now, I’ve got technical debt, not enough time and not enough money.” Then they look at me as if I have something else to add, and I don’t. I’m just more at peace with the fact that these things are happening and less attached to worrying about them.
I still break down and cry, but way less often. I also meditate and exercise every day. I think it helps.
What About The Gutes?
Yes, Gutenberg is a big deal. My big concern, as someone whose business is based on WordPress’ huge market share, is that Gutenberg will lead to a shrinking size of the available customers for me.
Also, Squarespace. Also the rise in Laravel-backed CMS and CMS-like tools like Nova. Also, serverless static site platforms like Netlify are getting more CMS-like features.
I’m a big fan of the scenario where distributed web apps backed by an Etherum-like blockchain.
Some Disappointing Things Will Happen
I’ve been very concerned about what happens when folks, who chose WordPress based on its promise of backwards compatibility, have to chose between paying to fix problems created by Gutenberg and paying for a new site.
A lot of people own websites that they do not maintain.
I wonder why we in the community are so attached to supporting those who do not expect to have to support their own sites. That’s their free choice, and if they leave WordPress when faced with this responsibility is that such a bad thing?
I Don’t Know Anything
Or maybe everything will go better than we fear. Maybe Gutenberg really is what WordPress needs to stay relevant.
I have no fucking clue. But I do know that, right now using WordPress, without Gutenberg, to create content is painful. Fearing what happens when you update is scary. These are all know threats to the WordPress ecosystem. They are are real and scary.
Things are changing and that’s difficult and scary.
Also, the sky is blue and no one is forcing you to update. Classic editor or staying on 4.x might be the best solution for existing sites.
I don’t know, but I so hope it goes well. I really want to keep going back to WordCamp Montreal every year, the began food is great.
One of my current goals is to write five short blog posts a week using Gutenberg, I want to learn this important new feature of WordPress and be a better contributor. In addition, I want to improve my writing practice by practicing more.
I didn’t set out to write most of my content about Gutenberg, but I should not be shocked that’s what happened. After a few days, I had a few concerns about the experience of authoring content in Gutenberg. I’m used to writing mainly in Google Docs and Google Keep or Twitter. Sometimes in Simple Note and occasionally WordPress.
Turns out that a lot of these concerns I had are being addressed. The solutions are there, but not obvious. Here are a few tips I’ve learned to improve the content writing experience. When I’m writing, not editing, Gutenberg can feel like it is in the way, but there are good features that exist or are being worked on to solve this.
One thing that bothered me a lot about writing with Gutenberg In my first week of my new Gutenberg challenge was adding a heading block. I found that having to go to block inserter to add the heading really upset my writing flow.
On Twitter, Kevin pointed out that you can use a slash command to bring up the block inserter.
To insert a heading block, just start typing /heading brings up a mini block inserter. It’s way faster.
I’m using Gutenberg on two sites right now: this site and the CalderaWP handbook site. On the handbook site this week I was documenting setting up local development for CalderaForms.com and needed to use code formatting on some words in a sentence.
There is no obvious way to add <code> or <pre> to selected words in paragraph or list block. This made writing those docs a pain, I had to add the HTML in the code editor. Yes there is a code block, but switching blocks upsets my flow and sometimes I want to put code in a sentence.
Cool feature, not easily discovered. I wish I knew how to make that obvious, as its really cool.
Hide The Sidebar
In the top right menu is a gear icon. Click that to close the Gutenberg sidebar when you’re writing. It’s better that way.
Use The Document Outline Tool
The document outline tool — i in a circle icon on top right — shows you your heading structure for the document. It makes it easier to see bad heading structure and to jump around a large document.
Another thing that is great about this tool is if you’re writing a listicle that promises ten time-saving tips or whatever, you can use it to count your time-saving tips as you go.
If you’ve never created a Gutenberg block before, or just need to make a quick block, wp-cli — the official command line tool for WordPress — can help. The wp scaffold command can create a plugin and add a block to it. Here is an example:
# create a plugin called books
wp scaffold plugin books
# create a block with the name "book" and the title "Book" in the plugin books
wp scaffold block book --title="Book" --plugin=books
This gives you a plugin with one block. Brian Richards’ section of the WordCamp Miami workshop we gave this year is about creating similar blocks, with or without wp-cli and then adding capabilities to them. The example code from that talk and the slides are likely good next steps if you’re just learning Gutenberg block development.
This Is Super Basic
I’m a big fan of using ES6 and webpack and yarn and JSX…
In preparation for our Gutenberg-powered future, now that the API is pretty stable, now is a great time to build your first block. If this helped, @ me on Twitter with the Github link to what you built 🙂
In this case, Zac and I honestly didn’t know enough about Gutenberg when we came up with the topic to know exactly what it would be about. We had some theories when we discussed it in this video a few months ago:
Because this talk will be streaming, some people may have issues viewing the code. Also, I used Carbon.sh to generate screenshots of example code to ensure they looked good. That means you can’t cut and paste from the examples, or read them with a screen reader, which is sub-optimal.
So, here is an image gallery of the code samples with links to the actual code it is based on. Now you can see the practical, real world application of these concepts.
When we launched, I had built a quick Slack webhook integration to send warnings and errors into Slack channel — and therefore my phone. I also have Laravel Log Viewer. Still I missed having real time log viewing.
Before starting you need to find the URL and port for your Papertrail log destination. You can use this link while logged into find it. I then put that URL and port in the .env variables “PAPERTRAIL_URL” and “PAPERTRAIL_PORT”.
Then I used the register method of my application service provider to add a new “SyslogUdpHandler” handler, which reading the Monolog source tells me is “for logging to a remote syslogd server” which I assume Papertrail is because this works.