Hello
Thanks Nicky for introducting me
I'm Jordan, also known as "Jd" in the community
Can everyone hear me well?
Because I tend to speak on a low voice, so if someone does not hear well, raise your hand
Today we will speak about Gutenberg
This is an update of my November 2022 presentation
at the WordPress Bulgaria Users Group meetup
Why Gutenberg?
Well, before that a little bit about me
I'm doing web development for 23 years
I have a boutique WordPress development studio
and I spend my time doing different things
from Air Quality to WordPress projects
Why Gutenberg and why it is so trendy?
The WordPress foundation and Automatic very actively
decided back in 2018 to push forward the new editor
That took a couple of years
and that's why presentation is called
"Long road" because we keep walking this road
Of course a presentation needs to start with a quote
This a quote from Lao Tsu
that Life is a series of natural and spontaneous changes.
This describes quite good what happens to Gutenberg
and the whole WordPress ecosystem
Some changes are top down,
others come organically down to top
This is part of the process.
I believe the guys at Automatic when
they started the Gutenberg development process
they've though that it will happen like this
But really the Gutenberg development
has turned like this
For good or bad
Before Gutenberg how developed projects?
I suppose that most of you have used Page Builders
Why have I crossed them out?
It's my opinion that these are infectious evil in the ecosystem
Yes, you can do quick websites with these
which however are unusablein the long run
Recently in my work
projects that require changesunder the hood
are quite frequent
The sites look the same
but from Page Builders we go to Gutenberg
I can talk a lot why it's not ok
to use Page Builders
What to do with these?
Struggle!
We struggle with Page Builders
and we get a result that with some future version
stops being the result that we initially wanted
and don't have any certainty what willhappen in the long run
Well here's Gutenberg
This is a short history timeline
of the project so far
The key releases are
with WordPress 5.0 when
Gutenberg made it to the WordPress core
and became the default editor
and January last year with version 5 something
the Site Editor came up
It was not very functional back then
but still it came up.
Last year and this year
there were minor improvements
It's like the Apple products upgrades -
minor incremental changes
but frequently
Version 6.0 was the one when the Full Site Editor
became Site Editor
and a couple of things that I'll talkin a bit were introduced
The upcoming 6.4 release that will be available in the end of November
Actually not in the end but next week
I'll talk about it in a bit
[Question to audience]
How many of you have not used Gutenberg?
How about the Classic Editor?
Page Editor?
Ok
Out of these that used Gutenberg, what made you use it?
Lighter performance
That you don't have much a choice now
Well all of the above are true
For me what really got me on board with Gutenberg
other than speed and performance
was the admin users experience.
They are usually left out when a websiteis developed
Everyone focuses on the frontend,
the public users, but for the admins -
"it is what it is..." :)
With Gutenberg to a great degree
you can easily manage the ways
the admin users interact with theWordPress backend,
how they input content, etc.
Unfortunately I couldn't screenshot andshow it to you (due to NDA)
but we created a backoffice system, which was based on user roles,
permissions and so on, whichwas Gutenberg based.
It turned out super great andactually Gutenberg was a great fit
for such solutions where you wantto specify admin actions.
And it is also very user friendly.
What you see on the adminis what you get on the frontend.
In stark contrast to Page Builderswhere you see blocks,
edit blocks
and eventually see what will turn out.
How to do Gutenberg?
There are two ways.
Use off-the-shelf things and develop our own.
In the WordPress plugins marketplace
or whatever it is called...
yeah, the repository...
There are many plugins that add blockswith different functionalities
for galleries, sliders, and whatnot.
If you need some kind of block quickly, without any particular needs or
specifications, you can find it there.
These are some of the more popular plugins that come up
with lots of blocks.
I repeat that when you need somethingquick and easy - here's the solution
All of these plugins have their own set ofissues and problems, especially when it
comes to optimization of the websitefor speed and performance.
I'm getting back to this point.
But these are specific issues which youhave to consider when building a website.
The other strong side of Gutenberg
is the patterns.
In WordPress 6.4 this will be even morevaluable and strong.
[question to audience]How many of you have used patterns?
Ok :)
The good thing about patterns,
out of my experience,
is that it's very easy to explainto clients
how to use them.
It's very flexible way to create templates that clients understand
and that they can edit and use.
Also there are community generatedpatterns that can be used.
So for some quite trivial and standard cases
you can use such patterns and layout a page that we need.
With version 6.4 all will be patterns.
The "reusable blocks" will become patterns too.
This is when we use a set of blocks and decide that we will use it
throughout the website.
The reusable blocks will be calledcustomized patterns or
something like that.
Here I've given an exampleon how to have such pattern.
The other way - we code!
We can do it, we have the skills, or
we hire people to do this for us.
Here also the road takes two directions.
One way is the ready made.
The other one is something our own.
When it's our own - there are two more directions.
We will use PHP or React.
Actually we use both.
Many people say "Gutenberg willkill PHP in the WordPress world".
Mmm... this talk about the death of PHP
in the Internet, in WordPress...
I have listened to it for the past 15 years or so
I have serious doubts that this will happen.
But...
We have two optionsfor creating blocks.
The first one is with PHP and plugins
like Advanced Custom Fields or some of the alike.
They give us a nice interface to the Gutenberg API.
And actually if someone can't writeReact or Javascript or simply
doesn't want to...
just want to write PHP..
this someone can create a block.
Because this is an update to the 2022presentation,
in the past year, specifically for ACF, they managed to integrate quite well
many of the new APIs that come with Gutenberg
as a part of the core... also with 6.4
that comes up.
Blocks that are created with PHP in that way look almost like and
have native feel like the onesthat are created with React.
The difference is that is that muchWYSIWYG in the admin.
That block at the end, the ACF blockis made for using fields,
set of fields that are filled out, not editing as a focus.
The other option is tocode it in React.
The documentation for developingsuch kind of blocks
has gotten much better in the last year.
Last year was total tragedy.
Now we have some proper documentation.
Especially at developer.wordpress.org
So you can go there, read the docsand start.
Also there are a lot of starter tools now.
Boilerplate tools that allow us to startfrom somewhere and build upon.
Here I've given an examplewhat the structure of a simple block is.
Alright, ok.
So we've created a block.One way or the other...
We start using it.
But we will eventually need to expand the scope and upgrade.
We will use Gutenberg
great, nice, but...
not always!
Why?
The thing, with which WordPresswas famous about for,
its backwards compatibility,
is no more.
We move to newer PHP versions asminimum requirements.
With WordPress 6.4 the minimum versionof PHP will be 8.0.
Though that it will still work with PHP 7.4.
Older things will probably stop working.
But who knows...
Generally..
the backwards compatibility takes air.
"Debug yourself" approach - this is aboutthe documentation.
I mentioned that documentation coveragehas improved, but
many things are still missing.
What I mean?
I will show a couple of websites
that help us decide whatwe can use in a website,
whether components, controls orgood practices.
For me, and I suppose also for you,is the thing that
I miss the most is the slow introduction of some features,
at the expense of others thatare on the development roadmap.
One of these features that I reallywant to see sooner in the WordPress core,
I don't whether this will happen beforeWordPress version 10,
is the multilingual feature.
As the saying goes "yes, but far from it"...
Anyhow... talking about components.
[question to audience]:How many of you use React and know it?
Ok, good number of people here.
The React component are the blocksthat we build our Gutenberg blocks from.
One of these websites that I mentioned
a bit ago, that are very useful, is wp-gb.com
They have descriptions on the differentcomponents that you can use.
Sliders, selectors, autocompletes, so forth.
This is something that is missingfrom the official documentation.
Or is in a different place, like for example
the GitHub repo of the Gutenberg project.
Not on the official website.
By the way the presentation will be available afterwards in the meetup group
so you can see yourself, I've put links to all resources.
Going back to what I mentioned aboutour work as WordPress developers
and our task to facilitate the peoplethat will use the admin of WordPress
and make their lives easier.
When we choose the right controlsthere are way less user errors
while managing the website'scontent.
I suppose you have similar experienceswhen you create great things
and afterwards some admin user goesand does wrong things.
And then you ask yourself "Why? What happened here?"
So yeah, through components, we create nice things!
Accessibility!
Esmo, where's he?
He is the expert on this topicand can tell a lot about accessibility.
In the last year the Gutenberg projecthave quite progress on this.
In the beginning, especially in the 5 versions and
in the early 6 versions the accessibilityin the admin panel was a tragedy.
Currently - great progress!
I mention a couple of times about WordPress 6.4
It will be release on November 11 I think.
The things that will be new are not that "wow".
One these things is the new "Font API".
This is very adequate for us as EU citizens where GDPR is active.
Why? Because if we use Google fonts, wecan download them and use them locally.
Why GDPR? Because Google fonts havesome privacy issues.
Last year in France there was a casewhen a big company was fined
many millions because of Google fonts use.
So... this is a solution that can savesome euros :)
Another new feature
Block hooks
I suppose that for the people that havedealt with WooCommerce one way or another
the hooks concept is something very familiar.
With 6.4 there will be hooks to the blocks.
Example doing some actionwhen a block is inserted in a page,
or in a post, or rendered in thefrontend.
I'm curious the most about this new feature.
This might enable many things to happen easily.
Another thing which is not 6.4,an old feature,
is the extending of blocks.
What extending of a block is?
It is taking a block, its features, whether from
the core blocks or other and we can do a
"cover" version of a block.
In this slide I've shown styles, which is another way to manage how
the blocks can be rendered and behaveon the frontend.
But with the extend of the blocks, forexample extending the "query loop" block,
where we can add supplementary thingslike altering the query.
My team and I use this on daily basis this technique.
So..
I mentioned WooCommerce.
With Gutenberg now to a great extendwe can do
very nice WooCommerce websites.
With very little PHP.
This is a screenshot from a real project.
This project is not live yet.
You can see the archive page and a single page
The WooCommerce team at Automatic and the WooCommerce contributors have made quite a
progress on the WooCommerce blocks ofGutenberg.
There are things to be fixed, but overall it's good.
I repeat - a WooCommerce website, withSite Editor is really easily doable.
We have so far 2 projects in productionthat work in that way.
Going back to speed and performance..
Almost out-of-the-boxthe websites have great
results on Google Page Speed.
So this helps the website optimzationa lot!
Talking about Gutenberg...it goes hand-in-hand with the
Site Editor.
Like it or not, but it is that way.
In the beginning when I saw itI told myself "WTF, they are going
crazy. Things are getting in WIX direction"
That type of way of managing content.
I was totally skeptical about it.
Now I'm the other way around it,180 degrees change.
Why?
At the beginning it was horrible.Now it is great!
You saw the WooCommerce example.
Things can be easily managed viathe Site Editor.
Specific example, again with WooCommerce, is that you can manage the
listing pages for different categories, with different layouts.
Back in the old daysyou needed to
do this with PHP,
with conditions.
Now everything is native andis in the core.
Another website that we can useas reference and help in
developing Gutenberg and Site Editor projects.
Very nice resource!
I've found it by chance but I thinkthat it is quite valuable for you.
Talking about themes...
When we develop something for WordPress,
it is either a plugin, or theme, or both.
WordPress themes can carryfunctionalities. They are not only
styling.
Currently there is this, let's call it"segmentation" between the
types of themes that we can develop.
The first type of themes are the purelyGutenberg and Site Editor themes.
The other ones are the "Classic" themes.
I don't like this name, but these are the "old", PHP based themes.
They follow the standard WordPresstemplate hierarchy.
They are something that eventuallywill be phased out and deprecated
at some point.
And last but not least are the"Hybrid" themes.
And like anything hybrid thing,
it is something like another thing,
but like also something else,
but at the end like nothing.
The good thing about these however,
especially when you need to refactor an old project
is that you can move some of the thingsto Site Editor, some can be left
as "old" templates, classic theme style.
This works, but for more php-intensive projects.
I repeat - this is like the electric cars.
You have not "best of both worlds", but "worst of both worlds".
So...
A short stats "Should we use Gutenberg in 2023 and beyond?"
So this how my presentation ends.
I'll be happy to take questions or comments,
as well as if someone from the audience wants to share experience.