Unknown: So welcome everyone totheme dot JSON in classic
themes. I'm your host, CynthiaNorman, and we have Catherine
here in the chat helping us withmonitoring your questions, we
will be waiting till the end ofour talk to address any concerns
questions you have on thistopic, and
rest assured that we will bemaking we're recording today
available to you within the shownotes after today, along with
the presentation here that I'llbe showing you,
all right, so with, withoutfurther ado, I will jump in.
So today's objectives after abrief introduction, I'm going to
introduce to you a use case thatI am in the middle of right now.
It actually started two yearsago, so it's quite a big project
that I'm involved in that Iwould like to share, just to
kind of illustrate how we canbring classic themes into modern
WordPress. Then I'll talk alittle bit about theme dot JSON
in a general, basic manner, andgive you a quick little demo
using a couple classic themes.Then I will walk you through the
process of adding theme, dotJSON to a classic theme, and
that will feel a little bit morehands on, and then we'll jump in
at the end. I my goal is toleave about 1015, minutes at the
end for questions and an opendiscussion.
So I am located in Ontario,Canada, and I work as a
freelance WordPress developer. Iprimarily work with WordPress
agencies, building WordPresssites, and I've been doing so
since 2019
previous to that, I was a Csharp programmer with a SAS
company.
For the past year or so, I'vebeen a content creator with the
training team over at LearnWordPress, and most recently, I
was able to publish with a teamof contributors over at Learn
WordPress, the intermediatetheme developer learning
pathway. And if you haven't hada chance to check out our new
way of presenting lessons overat Learn WordPress, do check
that out.
And finally, if you want to geta hold of me at any point after
today's talk, feel free to go tomy website, Cynthia norman.com,
and probably the quickest way toget a hold of me would be to DM
me in Slack, because I'm usuallythere almost daily. I so when
you registered for today'sevent, I had you answer this
question, do you have a classictheme you would like to convert
to a block theme? And a lot ofyou said yes, and some said
maybe.
But regardless, I felt that thiswas a topic that
theme authors are interested in,and your replies kind of
reaffirmed that to myself. So Iwas really happy to see those
replies. I'll tell you, though,in the last two years since I
started working on this idea ofconverting a classic theme to a
blog theme,
I'm at the point now where Iwould highly recommend you
actually consider stopping atthe hybrid stage. So taking your
classic theme
and adding theme dot JSON
would be one way to have ahybrid theme and be able to
benefit from modern WordPressblocks, and we'll get into some
of the details in a moment.
But it's just even if you hadthe budget and the time
converting classic themes to ablock theme is sometimes just
not possible. So just wanted tothrow that out there.
Now I am interested on a scaleof one to five, one being
nothing and five beingeverything. How much would you
say?
You already know about theme dotJSON, if you could just drop
that number into the chat andCatherine can let us know where
you're at with that topic. You
Hi, so I opened up the chathere. So just looking here,
I've got,
yeah, a lot of you are feelingquite comfortable, and some are
in the middle, great.
Okay, thank you for that. Andanother thing I wanted to
mention is
today's talk is about the blockeditor, not the site editor. So
the word editor gets thrownaround a little loosely, so I
wanted to distinguish thedifference. So we're talking
about going into posts or pagesand working with the block
editor.
Now I want to talk a little bitabout that use case I was
telling you about. So I'm partof a team, and as the developer,
I've got
a designer doing a redesign fora
client that has a custom theme,a classic custom theme that was
built in 2015
and this is a theme that bundledup the custom post typesonomy,
and they didn't use a plugin. Sochange the theme, break the
site.
I'm sure many of you arefamiliar with that concept.
However,
it's so custom
that, to be honest, it wouldn'thave mattered if it was in a
plugin, because it was just so Imean, every everything that they
do is wrapped around thesecustom post types. So they have
PHP templates, PHP files, andthey're using CMB two for their
meta boxes.
And since 2015 they've beenadding posts, and they were
clear on wanting to preserve allof their data.
Now the client adds the posts,and they're using the classic
editor, and pages are beingbuilt primarily by developers
and admins, and they're usingvisual composer,
and the styles were
created using SAS And a buildprocess.
So I came along two years agowondering how I could take that
redesign from the designer andtake modern WordPress and
take advantage of the blockeditor. So I decided to keep the
structure the same so all thePHP files, the custom post
types, taxonomy and meta boxes,are still there using CMB two. I
added a child theme. Now this istotally optional for adding
theme dot JSON. You can addtheme dot JSON to your root
theme files. And I also added anew style sheet in order, over
to I wanted to override the SAS.And you might be wondering, why
do I need a style sheet if I'madding theme dot JSON? So that
is, that's a work in progress.I'm still working on getting
those those styles into themedot JSON.
So one of the benefits for theclient is that they no longer
will be using the classiceditor. They'll be able to use
the block editor. And if youlook at their posts, you'll see
how like everything is like inone column. So I'm I'm
envisioning that their postswill will be so much more, you
know, esthetically pleasinggoing forward because of the
block editor, I'm also takingadvantage of unsynced and synced
WordPress patterns in order tobuild out those new pages
myself.
Right? And I wanted to point outthat there's this argument show
and rest that you're going towant to consider adding to your
PHP argument for the custom posttypes in order to be able to
work with them in the blockeditor. So as long as it's set
true,
I'll be providing them withtraining so that they'll know
how to use the block editor forcreating their their new posts
going forward. And like I said,
I will be transferring stylesinto theme. Dot JSON. My goal is
to eliminate the need for thethat the SAS files, completely
eliminate the need for thatadditional style sheet, and to
have all of my styles and themedot JSON. So like I said, this
is something I'm currentlyworking through, and I would
love to talk to like mindedtheme authors as to like what,
what you think about thesolution I came up with, and
hopefully later on, at the endof this session today, we can
brainstorm a little bit. So whatis theme dot JSON.
So like I was saying, I want tograb a classic theme to
illustrate what happens when weadd theme dot JSON to a classic
theme. Now I had to pick thisone here, resort vacation, which
I found on the WordPress themedirectory because they're not
using the function add themesupport. So you may have already
played around with that withinyour own theme by placing that
function within functions dotphp, I will say that
also that I couldn't
do a demo with 2020, or theother WordPress themes, because
they are using the Add themesupport function. So if you're
wanting to learn more aboutthat, certainly you'll find lots
of examples within those themes.
So that's why I chose this one,and also the other theme we'll
be looking at today is one thatI personally created a little
over four years ago. So I'mgoing to show you with theme dot
JSON added how we can remove theability for the user to select
custom colors, remove thedefault custom palette and add a
custom palette that is on brand.And just a quick note that
if we don't remove the abilityto select custom colors that's
coming from the theme, dot jsonfile within the WP includes
folder. So a lot of that is isalready preset there. So we're
basically reversing what'swhat's in there when we do
things
in this list here that I havefor you here for this quick
demo.
All right, so I'm just going toswitch over now to WordPress. So
here I've got the active theme,my classic theme, cat mom and I
just want to show you
kind of out of the boxWordPress, when we go in
on the right hand side here,this is what you'll see, is the
ability to choose a custom Colorthe default palette for both
text and the background, and youalso see quite a few settings
here under typography thatpeople can
mess around with and really getyour website off brand pretty
quickly. So that's that's one ofthe advantages, personally, I'm
feeling like we have, we cangain control of all of that by
adding theme dot JSON.
So if I switch over to thatresort theme that already has
theme dot JSON added, and I canshow you
quickly what that looks like.
So here we have something thatlooks a little different. We've
got
my own palette.
Custom palette added, and theability to choose that custom
color is gone and the defaultpalette is gone.
In order to do that, I'll showyou in VS code, you start off by
adding in theme dot JSON at theroot of your theme files, and
then you put in the schema. Isoptional the version,
if I'll talk about this in moredetail later, but the version
will either be two or threehere, and then settings when you
when you're working with
something like VS code here, youcan benefit from the schema, and
you can hover over and learnquite a bit
as you're working through butwe've Got settings color and
then the custom
property there set to false,removed the ability, the ability
for users to select a customcolor, and then the default
palette here set to false,remove that default palette, and
then Background was entirelyremoved so people can't change
the background colors.
And then we've got a custompalette here, which is an array
of those colors I just showedyou.
So
now I'd like to get into themore step by step
portion where we start fromscratch. We've got a classic
theme that, again, doesn't havea theme support in functions,
dot, PHP. And I wanted to makesure to point out that when
you're when you're startingfresh with your theme, dot JSON
file. You're going to want tochoose the most recent version
of the schema,
which is version threecurrently. However, that
requires WordPress 6.6 beinginstalled on your site, so if
you're still using 6.5
then I've shown you here how youwould do that. You specify your
version of WordPress, and theversion for the schema will be
two.
Version one didn't last verylong, so you'll either be going
with two or three. I'm
going to head back to WordPresshere, and I'm going to activate
the catwalk theme,
and then we're going to hop intoVisual Studio code and work
within that theme here. So youwould add your theme dot JSON,
and then really, you could openup your curly braces and just
put in the version.
And that would be your start.
However, adding the
schema is highly recommendedbecause it helps, like I was
saying, with giving you thoselittle hints and errors. For
instance, commas are veryimportant within JSON, if I just
enter in say I were to enter inmy settings
for removing,
I went like that,
that would throw an errorbecause of
you, some of you probablyalready know we have to have
that comment there.
And another thing I wanted topoint out is when you're working
within theme, dot JSON, so if Iwanted to add my custom palette
now
I would enter in the comma andgo like that, so when I open up
those quotes that I know what isavailable as a property under
Settings color,
so we see palette, right?
So I'm going to go ahead andjust copy paste what I've got
here prepared.
Okay, let's clean this up a bit.
Make sure there's no errors.
So now,
if I go I have to
always remember when you make achange in theme, dot JSON to
refresh or reload your yourWordPress.
Okay. So here we see the samething as I showed you with the
resort theme,
where we've got our custompalette and then we've lost some
settings. So you can see thepower of
adding theme dot JSON forstreamlining your design and
reducing overwhelm with your endusers and staying on brand,
because all of these, I mean,all of these here, you know,
appearance, letter spacing, thiscan really throw off your
design, as you can well imagine,
so you can either add settingsor remove them.
All right,
we are doing a well, I did wantto talk about some more
settings. So the next one Iwanted to show you is within
blocks and
just go
like this, and kind of show youhow you would be working through
so if I want
a new setting here, I start withmy comma, and, like I said, Open
quotes. And now I want blocks.So I'm wanting to start
addressing blocks specifically,which, again, just to reiterate,
if you go with ADD theme supportwithin functions of PHP, you
don't have the ability to
tackle those blocks specificallylike I'm showing you here. So
with you can see all of the coreblocks popping up here.
So I'm just going to show you anexample with
the heading block.
So you can, you can just presstab if you wanted. And then
another helpful thing here is,as soon as I enter a colon, I
can see where I need to. Nowjust press enter to get those
graces. So this because a lot ofpeople may have the sentiment
that it's difficult to work withJSON, so I'm just trying to show
you some little tips here I'vebeen learning as I've been
working with it myself.
So go here and I'm like, Okay,so now I want to address color,
so I enter the C and then tab,
and then next I want to put intext. So my goal here with this
is I'm wanting to disable colorsupport for heading blocks, so
the next thing would be text,
and to disable it. Instead ofhaving it as true, which it
defaults to, I just set it tofalse.
And I also want to remove theability to change the background
color, so background again,false.
So then once I
return to WordPress and reload,
then I should see,
now, if I go into that outlineview there, I've got a group
here
and a heading to show you. Sonow we don't have color support,
so pretty powerful stuff here,and
we can well imagine that.
I mean, we there are so manysettings you could go through.
There is a resource I wanted toshare with you. It's the
block the block handbook, soCatherine can help with that
link.
But let's just quickly go here.So this is at theme support. If
you're wanting to look that up,you'll find that within
WordPress developer resources,and this is the one here that I
wanted to to talk to you about.So if you're just getting
started, and you're wondering,because you're entering in your
settings, and then eventuallystyles, and it's going to feel
very different than adding CSS,right? It's, it's, it's, there's
a growth period, right for sure,
but these resources candefinitely get you started with
the options and then the
the scheme schemas, also have alot of really helpful
information for you.
So I wanted to point that out,and
we have time for one a few moreexamples. So I'm going to hop
back in to theme, dot JSON,
and now I wanted to show you ifI wanted to
add color support for the coregroup block.
So instead of having thatcomplete palette here, this
palette here within the group,say you wanted to provide a
separate set of colors. You cando that as well.
So I am just going to copy thatover from my notes,
so it's another
core block, but this one is coregroup.
So you can see here
that we're providing a custompalette, but we only want it
available within the groupblock. So I'm just going to
save, switch back to WordPress,
reload
and make sure to have my groupblock selected, and we should
see the color palette beingdifferent there,
right? So
we are doing good. We have
lots of time for discussion, and
I am anxious to hear from all ofyou and take a look at your
questions and have an opendiscussion, so I'm going to
open up the floor. Feel free toeither ask your question in the
chat or
unmute yourself. You
Does anybody want to share whatthey're dealing with currently
in terms of a classic theme thatyou're trying to
add theme dot JSON to and getinto that hybrid theme stage. So
okay, so we have a question
from Shelly. I am not clearwhere you add the rest. API,
oh, okay, so the I mentioned,the
I'll go back to that slide
right here. So the show in rest
that Okay, so
when you are writing out yourcustom post types, you have your
arguments and so that, so thatshow and rest equals true would
be added there. And
I, I.
Really can't say any more thanthat. If you, if you need more
detail, it's definitely not WPconfig. It's, it's when you're
when you're writing out,creating your custom post types
within your PHP files.
Okay, perfect. Shelly. Thank youfor the question. So Danielle,
can you control the options onspecific blocks that are not
core,
right?
Um, so we are overriding whentoday's talk is overriding the
theme dot, JSON file fromWordPress.
When we start bringing inblocks, third party blocks,
that for me, the first thing Iwould do is use PHP so I would
go into functions dot php,
so say I had a child theme, Iwould add functions php, and I
would be
working in there. I know there'sa lot of information available
on the Developer blog, there wasa recent post showing us how to
curate the WordPress
like block block editorexperience. And so there are a
lot of things we can do with PHPand JavaScript
for controlling when we go intothe inserter. So I'll switch
back to WordPress. So when I sayhere,
I'm actually kind of dealingwith the same thing, not cadence
blocks, but I introduced a thirdparty set of blocks, and I don't
actually want them to haveaccess to all those blocks, and
so that is something that I'mgoing to have to handle with
PHP, not theme, dot JSON.
So I hope that helps a bit.
Any other one wanting to sharetheir I think this might be the
developer blog. Okay, yes, thankyou. Catherine, yes. So those
are ways to curate
the editing experience. Ofcourse, they're talking in that
blog about theme dot JSON, andalso they get into all of the
ways we can remove blocks andhave a lot of control. Within
the inserter, we can gaincontrol over patterns, and also
within the media tab, we canremove open verse. So that is a
great topic for future workshop,I'm sure, because it's it's very
powerful. So it's along the samelines of streamlining that
editing experience, going beyondwhat we can do with theme dot
JSON. So
Okay,
any other questions
we have about 20 minutes left.
Okay, so at this point, I thinkwhat I'm going to do is I'm
going to show you the theme dotJSON that comes with
WordPress.
So if I go into the
WP includes folder
and then just
go to the root,
and you'll find theme dot JSON.So a lot of what you're going to
want to focus on is what iscurrently in settings, and what
do I want to reverse soappearance tools that has a lot
to do with the spacing, and youcan see the list there
of everything that is currentlyturned off.
Are using false.
So you may want to addappearance tools switch it to
true,
and then just go through thisfile here and make your
decisions as you're learningmore and more about the power of
theme dot JSON,
so you can see the custompalette here,
dimensions.
So there is a lot coming fromWordPress directly,
typography, and then we get intothe blocks,
and then some styles that are
already in place.
So at this point, I do want toreiterate that
we have
a new way of learning over at
Learn WordPress,
and I just want to show youthat,
just in case you haven't beenover there in a while. So we
have the the new look and feelto learn WordPress, and then we
have these learning pathways. Soif you're wanting to get a
better idea of
how to work with theme dot JSON,you could either go into the
beginner Wordpress developerlearning pathway. There's a
lesson there that you may findinteresting as an introduction.
So this one here,
and can give you a little bitmore of a complete picture of
working with global settings andstyles, and also the Create
block theme plugin is verypowerful. That's another topic
that I'm considering having asfor future workshop.
And the other thing I wanted topoint out is the intermediate
theme developer learningpathway, so you can just jump
in, and you can go to the moduleof interest and just dive in.
So if there are any otherquestions, we can
talk about them now We have
about 20 more minutes
by a group. I
i would love to hear from you ifyou have a classic theme and
you're
worried
at all about adding theme dotJSON,
certainly, if you have, oh,there's a question from Daniel,
when you first open a page forediting,
the
patterns pop up for selection.Can Can this be disabled? All
right, yes, so right, with theclassic, classic themes, we have
that, let's go over there tomake sure everyone knows what
you're referring to. So here,within here, we've got that
patterns. So yes, we can disablethat.
Go. Feel free Danielle, toremind remind me,
if I forget to add I, I'd liketo give you those specifics
within a comment below today's
show in the show notes, I'll addsome specifics to to say exactly
how, because that that's areally good question as well.
This is on 2024
i.
Sorry, Danielle,
were you replying? Or could youelaborate?
Oh, you're saying that, yeah,sorry. Did I answer your
question? Danielle, when you saythe patterns pop up.
Yeah. Was I right? Danielle,yeah, that's, that's one place
in the
2024 theme, not a classic theme,of course. But when you just
create a new page and it itstarts to load the editing
environment instead of lettingyou Yeah, see, that's actually
the desired behavior in 2024when you, when you do that, it
pops a window, a modal windowwith all the patterns on it,
and, oh yes, and ask you toselect one and and like to get
rid of that guy. Oh yes, yes,yes, yes, yes, yes, yes, you
can. I just don't know by heart,but I know that these things are
completely possible within blockthemes.
Yes,
thank you, yeah. So I wouldencourage you to take a look at
the the intermediate themedeveloper course, because
there's a lot of goodinformation there to give you
that that that kind of globalpicture of,
you know what our block themesall about, you know, to go way
beyond what we're talking abouthere today, which is, which is
Theme dot JSON,
but thank you for the question,
and I will also look that up foryou and drop that in as a
comment after today's talk. Anyother questions
I would like to hear from you
in terms of, okay, I thinkthere's a new message here from
Martina. I see theme dot JSON indifferent directories, WP
includes or under themes, trialthemes. What's the difference
here? So I
um, right? So within WPincludes, that's theme dot JSON
that ships with WordPress,
all right. And under themes,Child Themes.
Are you? So when you say yousee, could you elaborate there?
Are you talking about your own,your own website. You have a
classic theme that has a childtheme with theme, dot JSON,
is that correct? Martina,
because if you do, if you havetheme dot JSON
within child themes, that meansyou've got a block theme
you haven't. So I
yeah, in 2024 right? So that's ablock theme. 2024
is a block theme.
So you're, you're going to seeit in WP includes, which is
WordPress. And then
if we open up
here,
so I happen to have 2024 here asa theme. So being a block theme,
it has its own theme, dot JSON.
And if I add a child theme, thenI can have another theme, dot
JSON within my chat theme. Ithink it's important for me to
also mention that there's aprecedence going on here. So
I'm happy to do a futureworkshop on block themes, but I
want to focus on classic themes,adding theme dot JSON. It's
important to note that when youadd theme dot JSON to your
classic theme, so cat mom, herewould be a classic theme. My
style sheet is going to takeprecedence over my theme dot
JSON.
However, if someone is inWordPress and they're adding a
page or post and they're stylingthings, those user
styles are saved in thedatabase, and that's going to
override
my the.
Theme dot JSON, so there's thatprecedence to be fully aware of
as well.
So within a block theme, you youwon't have your style the style
dot CSS file is there in yourblock theme that's important to
note as well,
but it really has the onlyfunction of letting WordPress
know that this theme exists withthis header here.
So there are no styles comingfrom the style sheet here in
this block theme,
all of the styles are comingfrom this
theme. Dot json file here, sothere's settings, and then all
of the styles that you see whenyou've got 2024 active, they're
all coming from here. So I hopethat clarifies a few things.
Okay,
all right.
So
thank you so much everyone forjoining us today. If there are
no other concerns or questions,then I think it's safe to say
that
we're done today's topic. Butbefore you leave, if you
wouldn't mind letting me knowwhat future topics you're
interested in. This is my firstonline workshop. I am new to
this, and I would like to domore. So I am very interested in
knowing,
I mean, your questions are kindof helping me with targeting
what topics are of interest, butjust feel free to drop that in
the in the comment Before you goyou
Thanks, Laura, you
Yes, code completion, yes,working with JSON is definitely
a learning curve for us all.IntelliSense, yes and
Okay, some More about theme. DotJSON. I