Bud Kraus: To I will ask some questions.And Laura, could you? Well, you'll be
around to answer, to read the questionsto me.
Laura: Yes.
Bud Kraus: Okay, yeah.
Laura: That's what I'll I'll be doing,yeah.
Bud Kraus: And the other thing, or readthe answers. And the other thing is on
my screen, I see this meeting is beingrecorded. Yeah, we got that a closed
caption transcript. Is there a way toget rid of that?
Laura: Just click on it.
Bud Kraus: No. It says, If I click onit, it says, Leave meeting. So I don't
want to do that.
Laura: I don't know what you're saying.
Bud Kraus: Yeah, well, I just have tolive with it. Maybe it'll go away. All
right, one more little thing here. We'llget underway, folks. Okay, so, yeah,
we're going to be looking at what's newin WordPress 6.6 it sounds like some of
you had experience with this, and that'sgreat. I'll be interested in hearing
what you have to say, too. You know, Ihave my sort of opinionated take on
things, but everybody who works withWordPress seems to have some kind of an
opinionated take, which is good. Yeah.My name is Bud Kraus. I am a WordPress
content creator, and word for WordPressbusinesses which what does that mean?
I'm a technical writer. I create a lotof articles for web hosts and other
WordPress businesses. I do instructionalvideos, educational videos. What's new
in WordPress, 6.6 video stuff like that.I don't I'm a very reluctant website
developer. I only do it unless you begme to do it and you pay me too much
money. And so that never happens. So letme get this UI just keeps popping up
over here, and I've got to get this outof the way. Okay, I'm, yeah, I'm an
instructor, so I do teach WordPress, andin fact, I'm teaching it tomorrow for
two days. And if anybody wants to hireme to teach WordPress, you know, I'm
there. And the other thing is, I am anew podcaster. More about that later.
But I have a podcast called, seriously,bud, so we'll do that later on. Now, oh,
before we continue any further, I haveto tell you, I'm a person with a vision.
I'm visually impaired, so it takes me alittle while sometimes to see what's on
the screen or understand what I'mlooking at. So bear with me. I promise
we'll get through this together. It'llbe fine. Alright. So what are we looking
at today? The big picture of WordPress,6.6 you know, like all WordPress major
releases now, this is the second ofthree major releases this year. And you
know, all major releases, includingminor releases. But certainly major
releases have improvements toaccessibility, bug fixes, security holes
have been patched things that you don'tsee, you know, usually in front of your
eyes, but it's under the hood to improvethe WordPress experience, it focuses
more on what is already in WordPress,instead of a lot of new features. So
that's kind of good, because I thinkWordPress really needs to, you know,
personally, take a step back and fixwhat's already there and make it better.
This release, yeah, if you're, if you'rea site designer or even a content
creator, I guess this release is morefor you. I think there are some good
things in there. Quite frankly, we'regoing to get into, I'll demonstrate some
of that stuff, and then it opens thedoor to the new WP admin, and we'll talk
a little bit more about that as I do mydemonstration, a very much part of the
Gutenberg Project phase threecollaboration, which seems to be a
little muddled, I think, and what'sgoing on, but anyway, alright. And as
far as demonstrations go, I'm going todo a couple. Now I'm going to obviously
show you WordPress 6.6 with a TT four,let's say 2024 theme installed and no
plugins, so just straight TD four. Okay,now what am I going to show you? Synced
pattern overrides or a pair partiallysynced paired overrides. Is a million
names for this thing, but yeah,definitely show it to you. The Grid
block, which somebody mentioned, isreally cool, and I think ultimately
going to be a big difference in howpeople make websites, Wordpress,
websites down the road and negativemargins finally came to a WordPress and
what do we have here? An update to thepost editor, which I see some people
don't like. I get it, we'll talk aboutit. And as I mentioned, some of the new
and improved. Well, it's new improveduser experiences, particularly in the
site editor, and here I'm referring towhat they call improved data views. I
don't like that word, but anyway, that'swhat it is. Okay, I'm doing too much
editorializing. I've noticed, but Ican't help it sometimes. All right, for
you site builders out there, this iswhat I'm not going to demonstrate, okay,
just a few things, really, of no. TwoOne is the fact that you can now put an
entire image in your as a pagebackground. Okay, nice. I'm not going to
demonstrate that you can also the savingand publishing operations are now going
to be that are now the same across theentire site. I didn't see that so much,
but I read about it. So whether you'reworking in the site editor, or just in,
you know, a page or a post editor, bythe way, site editor, in case you don't
know, I'm referring to those blackthemes where, you know, the entire site
can be made with blocks, not just thecontent area, but headers, footers,
sidebars, and the entire site itself canbe navigation, whatever can be built
with blocks. That's, of course, when I'mtalking about when I say a black theme,
as compared to the good old classicthemes, okay, and the classic name,
speaking of which, and now, has a easierway, or now as a redirect to the
patterns page, meaning that whetheryou're using a classic theme or a block
theme, whenever you click on thepatterns page, it will look the same no
matter what kind of theme that you'relooking that you're working with.
Alright, I'm not going to show youthose, so that's out now, by the way, if
there's any questions you can ask alongthe way, and Laura, I assume you're
still with me, yes, and you want tointerrupt and say, Hey, but you know,
this is a good time to answer thisquestion. That's good with me. Okay.
Laura: I will.
Bud Kraus: Thank you. Alright, okay,changes mostly for devs. I'm not a dev,
by the way. I sort of could talk likeone and sort of think like one and but
don't get confused. I'm not a developer,although I beginning to write like one,
but I'm definitely not a developer.Okay, the custom fields and black
bindings API have been up, have beenchanged or updated. And what does this
mean? It means if you're a developer, atheme developer, you can now add custom
fields and meta boxes more easily in theinspector. What's the inspector? It's
the right sidebar, so when you you know,you click on, let's say a black in the
right sidebar. Well, that's what I'mtalking about. Alright? Now, black style
variations. Now you may be familiar withlike global style variations. Now, theme
developers have an option to add ablocks a style variation on a per black
basis. Okay, sounds confusing, but theyhave that ability, okay, color and
topography presets for themes. Again,you may not see any of this, but it now
allow, you know, developers, themedevelopers now have an easier way to do
these kinds of things, custom aspectratio. So this is for images and
featured images and the cover blockimage developers now can set their own
aspect ratios for those kind of images.What do we have here? A revised CSS
specificity, meaning a more efficient,elegant way to write CSS, or without?
Yeah, I think it's the best way todescribe it without getting into more
detail on that. Okay, a a class for thelist block, meaning that up until now,
there was no assigned class in the codefor for list blocks. So now that there
is which means it's easier for people tostyle this blocks with code um. There is
a fixing for pad, a fix for padding. Sosome blocks had a problem in that the an
interior block, you know, let's say achild block would not stretch across the
full width of its parent elementcontainer. And now that fix has been in
place, so that it's possible now for ainside element, a child element, to be
100% the width of its parent element.Okay, that's good. HTML and
interactivity APIs have been updated.They were first introduced, I think in
six, five. I'm not 100% sure about thattheme. Jason is now version three. Now
me, I have to say, I am really gettinginto what theme Jason is all about. And
I love it, and it's fascinating. So it'sall about, really the essence of what
black themes are. Black, yeah, but it'sa very important component to a black
theme. And six, six is dropping supportfor or Yes, drop support for seven, oh,
and seven one. And, in case you don'tknow, seven, 6.6 was released about, I
don't know, a week or two weeks ago. Ithink it was July 16, so it's already
out there. Okay, so let's have a look.Alright, you thought I was going to talk
the whole time? Well, I am. So anyquestions to this point? Comments,
aggravations, questions, anythinganybody want to to say while I'm
fiddling around here? And getting to theright screen,
Laura: We just had one question fromElena. She was saying, is WordPress 6.6
stable enough for us to upgrade to? AndI just answered Yes. There is an update
for six point 6.1 that just took care ofsome security bugs and a couple bug
fixes to the block editor, so I put thatlink to that release in there. Yeah. But
if you do find any kind of bugs, youknow, please let them know. There's,
there's a pick a ticket at the bottom ofthat article to let the developers know
if there's any issues. So
Bud Kraus: Yeah, now I've also Laura andcorrect me if I'm wrong with 661 that is
the update. The update to six six alsoincluded some kind of fix that dealt
with Link colors. I'm not sure aboutthat. I don't know. I heard some issue
that dealt with links. Anyway, the late,the most current version now, is not
just six, six, but 661, or six point 6.1okay. And yes, they're stable. And yes,
you can definitely use them now forproduction sites. Of course, if you're
not sure, always use a staging site totest Alright, yeah.
Laura: The the thing you you're talkingabout is the link text decoration,
underline. Kyle was saying that peopledidn't like that the links had
underlines. It was a little confusing,so we changed that. They they have that
as a fix.
Bud Kraus: Okay, all right, so let'stake a look at the partially synced
pattern. Shall we in fact, the way I'mgoing to do this is I've already created
one, but I'm going to start fromscratch, and by creating one, let's just
go over to over here. We're going toedit this, yeah, and I have it right
over here. I'm going to just take thisout all together. Let's just kill this.
I'm sorry I didn't do this before. Ishould have done this. So let's just
save this over here, and let's also goback to here. And I should have taken
this out already, sorry. And, and I'llexplain what a partially synced pattern
is, or a pattern override, or whateveryou want to call it. There's no good,
obviously there's no good, easy term todescribe it. I think pattern override is
probably because it's I think actuallypartial pattern override is the best way
to describe it, because that's what itis. So I'm going to look at parents,
editor, excuse me. And again, I'm using2024, as probably looks pretty familiar
if I go over here to patterns, mypatterns, alright, so this is the one
that I created before. I'm just going toget rid of it, you know? And well, let's
just do it. I can just delete it thisway, actually, yeah, I don't want to
duplicate. Um, no, I'm sorry I am in thewrong place. So let's go over to
parents, and yes, I'm going to delete.And actually, what we're looking at, and
I'll just save a little time, is theability now to block delete patterns.
Okay, we didn't have that before, butnow, if you want to delete your
patterns, you can, and you probably havelearned that you cannot directly edit
the patterns that come with the theme.You have to make a copy of it and then
make your changes if you want to make ifyou want to edit patterns. Well, I don't
want to even get into that, but I justdid so we're going to get rid of that,
and we'll start from scratch. Now, whenyou're creating a pattern, whether it's
one of these pattern overrides orregular pattern, or it there's, there's
a couple ways you can do it. It sort ofdepends on if you're not, if you're
using a classic theme. Well, there's notgoing to be any style editor. There's
not going to be a site editor, likewhere we are now. So you're going to
have to create the pattern within eitherthe page or post editor. Well, here I'm
in the Style Editor, so I'm going to doit this way. I'm just going to click on
here and create a pattern. Add a newpattern, alright? And we'll give it a
name. Let's call this author black,which is what I had before. Author
black, okay? And categories, well, Icould assign it either to an existing
category. It came with my theme orsomething else. I'm just going to leave
it alone. Here is the mission critical,right? Here, you got to make it a synced
pattern, alright? So that's how you haveto start it. Very important, leave it as
a synced pattern, and we're going toadd, alright? Right? And now we're going
to, we're going to create it. So wish Icould get this thing out of the way.
Huh? This thing is really bugging me.This message that I'm getting here about
the maybe just give me once. Just giveme one second here. If you don't mind,
anybody have any question while I'mtrying to figure out how to hide this
thing? Hide?
Laura: No, we'll have a question comingup after you. Jean, Jean's asking. Are
you going to discuss the revised CSS inwhat way? Revised uh, that would be a
good You mean the I'll get gene to justspecify. So keep going and and we'll get
more information.
Bud Kraus: I think I know where you'regoing with it. And the answer is
probably not, um, okay, so let's just doit this way. All right. So what I'm
going to do is, let's start with a groupblack, group black, and inside the group
black, we'll do a 5050, column. And inhere I'm going to insert an image, okay,
but I'm not really going to insert animage. I'm just going to leave it blank.
Alright, just like this, and blankmeaning an image placeholder. It's going
to be really speed up the workflow,because every time I use this pattern, I
don't have to swap out an image, I justhave to place the image. I just have to
replace the image with the image place,which is what you're seeing over here,
and then over here I'm going to insert aheading. Let's just do that. We'll make
it nice and easy. I'm just going toleave with the word heading as so. And
then after that, I'm going to put in aparagraph. And I think I have, why do I
have three columns here? I don't wantthree columns. Oh, I know why. Let's
change the student black, and let mejust see what I have. Oh, this thing is
really annoying.
I can't get to because this thing iscovering up my,
Laura: what is covering up your screen?
Bud Kraus: My, what this this messageabout this meeting is being recorded,
and then it says a closed captioningtranscript is being generated. But I
can't get rid of that.
Laura: Should be able to say, okay,like, is there an okay, or an x to x out
of there you
Bud Kraus: go. You just, I just did it,right? I thought it was Lee, and then it
said, Leave meeting. Okay, but you'reabsolutely right. Okay, so let's we got.
We fixed the problem, all right. And nowthat I did that, I want to, I just want
to convert this to, let's now that, allright, let me just do this. Let's get
rid of all this. Sorry, folks. I'm goingto start again. And it was just really
confusing what I had here. Now we'll be,we'll be good. All right, group. Here we
go. You know, live demonstrations. Youknow how it works. So we have this. And
now over here in this, why am I? Youjust don't know why I have row. I just
Alright, why I'm having such troublesheading and I should have two columns. I
don't know. I don't have two columns. Ihave a group. I know what it is. I need
to make two columns in my group. I knowwhat it is I need to do. I'm not
inserting a column.
All right. Hold on. We'll get there.There we go. Now we're going to do it
all right. All right, the first columnover here, there. It All right, and I'm
going to insert, why am I having so muchtrouble here? Um
Laura: You're live. You know it alwayshappens.
Bud Kraus: Yeah, live demonstrations.What are you going to do? Okay, we got
that. We're getting there. And now,yeah, okay, what? Don't you not use
this? That's what it seems like. Andthen an image, and then a paragraph,
right? And I'm going to put in sometext. That I already have over here.
Let's just take this out over here and Iput this text in over here. Go back to
over here. Maybe I should also do a fullscreen, Laura, what do you think would
that be?
Laura: It looks good. I have my view asa as full screen, so if anyone else
needs to click on their view and theycan go and change that. So right now.
Bud Kraus: so we're making progress,we've got one column and yeah, and
inside the column block we've got animage, and inside the other column where
we have heading an image in paragraph,perfect. Okay, so what I want to do is
just so that this will show up a littlebetter, I'm going to put a background
color over here, and let's just do thisover here. Let me just use this over
here. Okay, perfect. So voila. Allright, we we're making some progress.
Now, what I want to do, though, is,remember, I still have a a synced
pattern, but I want to take two parts ofthe two blocks inside two elements,
okay, the image. I want to change thatso I just clicked on that, and I want to
go over here into the I don't know whatthey call this over here, but right over
here. This is what's new. Make sure Icut this right here. Did I get that
right?
Laura: So that's the that's the stylesof that particular block. You have the
setting, which is the little gear icon,and then the half moon is your styles.
Bud Kraus: There, we go, right, right.I'm sorry, did I not yet. So I'm over
here in the inspector, in the imageblock, and I'm in over here with the
settings, okay, and although I did clickon this over here, really, this is what
I meant. And right over here, underAdvanced, there's something new now
called override, and I want to enablethe override for the image block. I'm
going to click on that, and I'm going tojust call this main image. Okay, so you
have to name the override for theelement, right? So I do that. And now
for heading, I'm going to do the samething over here. I'm going to click this
and over here, under Advanced. Here wego, somewhere down here, advanced, same
thing, enable override, and let's justsay, just call it heading. All right.
Call it whatever you want. All right.Now we can use this, but first gotta
save it right? Remember, I just createdthis whole pattern override in the site
editor, but I could have done the samething while working inside of a page or
a post. Alright, so let's speaking ofpages and posts. Let's do that. So we're
going to go over here, and now I havethese posts right over here remade, and
we're going to start using it. So righthere, and we're just going to stick it
in right over here. Now I'm going to doit this way. First, I'm just going to go
over here to patterns. My patterns righthere. My patterns here is my pattern.
Okay? And I'm just going to click onthis. Alright. Now you see this is one
of the reasons why I don't put an imagein there, pro tip, right? Because that,
you know, normally you're going to say,I'll put an image in there as a
placeholder. No, don't do that, becausethen you gotta take the image out, put a
new image in. In this case, just clickon this, go to the Media Library. Go get
Sheila. Don't forget your alternativetext. Okay, and let's go to heading. And
we'll just put in a heading. So we'llsay, like, we'll say, Boy, I don't know
what I'm doing today. Saying hi to S, H,e, i, l, a, say hi to Sheila. Okay, and
that's fine, and I'm going to save thisright now. A couple of things about
this. One is you can see the only thingI was able to change is the image and
the headache. I cannot change theparagraph text, not like this, all
right, it's locked in. But could Ireally not save it? Yes, it's locked I
just said that. But so let's go to, I'lltell you what. Let's Let's disable,
let's get rid of the top toolbar. Andnow you'll see, here is the group. Now,
here's a really important thing overhere, because I can reset it needs to
start all over again. Or let's now I'min the image. I don't want to be in the
image black, so let me just make sureI'm in the right block. Here we go.
Alright. So now I'm in right the blackthat I created. Right? And two very
important options here, reset, whichmeans start again with the whole thing,
which I don't want to do, okay? Or Icould edit the original. Now, if I make
a change in the original, well, we'regoing to get to that in a minute. What I
do want to do is we're going to get toediting original in a second. But when I
I'm sorry, I should I know it says Bill,I'm rushing. So sorry, get them Reaper.
It's okay. What I do want to do, though,is show you that, yes, I can edit this
separately, and that means all you haveto do is just go over here. Remember,
this is a synced pattern, even thoughit's partially synced, all you have to
do is go to detach and now any change Imake here would not affect anything
other than this black. So for example,you might say I want to change the
style, or I want to change the contentof this black. Well, it's just now a
regular globe fashion group, lock,right? It's not, it's not part, it's not
a it's not a pattern anymore, whichmeans all I have to do is go into here,
you know, and oops, and over here. Andif I want to change, let's say the
background. Well, you know, very simple.You would just change the background of
the here we go, the background of theblack. And this will only affect right
over here, the background over here. Andof course, I can change the heading and
so forth. I'm not going to do that, butyou get the idea. Here's the key. If you
want to just edit that whole syncpattern, you have to detach it, just
like you've always done. Okay, nothingchanged. That's that's been around, but
let's save this, alright, and let's justdo the opposite, which is, let's go to
Sheila, and let's add bill in here, tomake my life a little confusing this
time, though, instead of going directlyinto the inserter, just do this. And I
think I'm just going to type in, but isit author block, right the one that I
created? Author black, right here? Okay,yep. And here it is, alright again, I
didn't change when I did what I didbefore by detaching I didn't change the
synced pattern. Oh, I just detached itfrom the synced pattern. Here's that
synced pattern again, or moretechnically correct, the partially
synced pattern. I'm going to put in animage over here, right? Let's do, oh,
I'd like this one over here. And thenwe're going to put in like for here.
We'd say, say hi to bill or bud. Doesn'tmatter, okay, because that's me. And
again, same thing that I showed youbefore, but this time, let's do this.
Let's go into Edit original. And now I'min, well, the place where I can edit the
original. Now if I make a change here.This would it. This will change all
instances of using this block throughoutthe site. I'm not going to do it, but
that's suffice to say, That's exactlywhat's going to happen here, that if I
use this block, let's say 10 times, Ican change here, the style and the
content within right over here. Now it'sit will change the style. Let's say you
wanted to change the style for all ofthe for all instances which where this
block is used and it's still synced tothis block. Then of course, it will
change that style just the way syncedpatterns work. Okay, I think that's
probably enough for that I want to do.Hopefully you're not terribly confused.
You know, if you know how to use syncedpatterns, this is just a wrinkle to
synced patterns, if you will. But whatit's great about is that you can change
the content very easily. Now, across thesite, what you can't do is really you
can, yeah, I mean, you can really doanything you want now with this. So
that's a very nice thing to have, is theability to change every instance of it,
wherever you use it on the site. Anyquestions about that? Before I talk
about the grid block, hopefully I'llhave things going a little bit smoother,
because that wasn't exactly one of mysmoother demonstrations, but any any
questions up to now?
Laura: No, you can keep moving.
Bud Kraus: How about that CSS questionwhile I'm getting ready?
Laura: Okay, so if you want to see budmentioned that in his 6.6 list, I was
wondering what the revised CSS wastrying to find the correct advanced CSS
panel to use can be a challenge, andeasily making link states would be
great.
Bud Kraus: Yeah, this is not that okay.What I mentioned a little bit ago. So is
not what you are referring to. Thequestion I think you're asking, Laura,
let me and correct me if I'm wrong, is,is there an easier, better way to add
CSS using the right sidebar inspector?Is that kind of the question.
Laura: I know that she she had thisquestion yesterday in my workshop, and I
had showed her to put it into the globalstyles under Advanced CSS, so that, I
think that's what, when she saw that youhad that on your list, that what that
pertain to when you met revise CSS?
Bud Kraus: No, that's not, that's a dip.That's this is sort of a developer thing
that deals with CSS specificity and howthey've changed. They made some changes
to make it easier or more efficient andmore a more proper way of targeting the
HTML code. This is not anything to dowith UI. Okay, you're not going to see
anything at all in the user interfacefor what I mentioned. As far as me use I
just going to sort of make a anotherpoint, which is, as far as me using CSS
in WordPress through the UI, I don't doit anymore. I hardly ever do it anymore,
and they're trying to get us. I don'ttake your pick here, but the the
movement is towards, you know, no codeor low code. So I don't think that using
WordPress default for adding CSS, is allthat good? I mean, for that, there are
just other ways of doing it, eitherthrough code snippet plugin or through
your style that CSS file, or throughtheme JSON, or through whatever.
Laura: Well, they also don't want you tohave to go into the is the style css
file too. So to keep it all on the onthe front end or within your dashboard,
Bud Kraus: that is the movement Correct.That is the direction that WordPress has
gone. You know, for better or worse,it's still possible to use code. If
that's not the issue. The issue is thatthey're sort of turning making it more
difficult in some ways, to add CSS,because they're saying you don't need
to. I mean, that's, you know. All right,that's a whole nother discussion. Let's
get on to the grid block.
Laura: All right. Um, one more questionabout the pattern that popped up from
Wolfgang in the patterns list, there isan export as JSON. Is there an import.
Could you import a pattern?
Bud Kraus: I don't think, if I recall itwithout looking I don't think there is
correct. Say somebody wants to correctme on that. I don't think so. I think
the only Laura, do you have any insighton this one? I
Laura: don't, yeah, because I'm Ihaven't used patterns a lot.
Bud Kraus: Which is funny, they want,you know, the direction is patterns,
right? And nobody's really sort of usingthem. I don't know about nobody, but,
you know, I think, yeah, I don't knowthe answer to you're saying what? I
don't know the answer to that. Off thetop of my head, no, but whoever
suggested that that's something that, ifyou know how to make a suggestion to the
developers as a feature, that I have afeeling I think that's on the list, but
I can't say that with certainty, butthat's not a bad idea, because I think
I've come across that myself and saying,why can't I import this?
Laura: And, yeah, I mean, because, youknow, as a developer designer, you're
going to have like, those patterns thatyou can reuse, so you're going to have
like, your own library. And I know thatsome people create like a plugin, a
plugin with their patterns, but I wouldthink that you'd be able to add a file.
Bud Kraus: You know how it might bedone? There's a WordPress Importer
plugin that may be a way that you can doit. I don't know that with certainty. I
really sorry that. I feel like I shouldknow this, but I don't so, or if I did,
I forgot because I can't remembereverything anymore, but I don't think,
by natively, by default, that you can soAlright, let's take a look at the grid
block, or the glue, I'm sorry, the gridblock. And if you're familiar with CSS,
which it seems like a bunch of peopleare here, then you know we're talking
about, you know, grid layout, the gridspecifications of CSS. And let's take a
look at how WordPress is implementingthe. Now I am not an expert on the grid
block in CSS, but I mean, so let's takea look. We're going to go to pages over
here, and let's just start a page. I'vealready done a grid block over here, but
let's just start a page over here, andwe're going to just put in the grid
block, okay, and G by.
And it turns out the grid block is avariation of the group black. How do I
know over here? Here's the group black,the row, the column, all that. But now
you have the grid block over here. Yes,it's its own block, but it's still a
variation of the group black, and soit's a container that holds other child
elements, or other elements. And let's,let's just do, let's say, for example,
I'm going to just start right off overhere. I really like this block this. Now
remember, this the first iteration ofthe grid block. So it isn't exactly what
I call fully formed, but it's, it's apretty good it's a pretty interesting
idea, that's for sure. And I'm going toput in an image over here. We're going
to use Sheila again. Okay. Oh, and thenlet's put in some Lorem text over here.
Sorry, we'll just grab some of thisLorem text and come back to here, and
I'm just going to now, here is the theboundary for the grid block. And right
over here, I'm just going to put in aparagraph. I guess that's like this,
like so right next to that, anotherparagraph, yeah, too much over there. I
don't want to put it over there. Surethis is not my day. Okay? And then over
here, put in. And right over here, I'mjust going to put in this, this black
over here, just to make some color. Overhere, I'll put in a background color.
Okay, and then after that, let's see.Let's go over to the grid block like so,
and put in another block. Let's doanother image in so. Uh here, and this
is what I will look like at WordCamp. USif you come to Portland, make sure you
say hi, so you'll know, oh yeah, I sawyou with your picture. And then finally,
I'll just put in another paragraph. I'mjust playing around, just to get a
little feel for how this works. Allright, so let's highlight the whole
thing. You can see here is the gridblock. It's got five elements inside.
Now, what I love about this, what makesthis really elegant, is that, from a
coding and development standpoint, isthat if you look at the grid block over
here, and we'll see in a second, therearen't any columns or anything like
that. There's no interior block. It'sjust the grid block. And then the five
elements, the two images and the threeparagraphs that I put in, if you if
you're familiar with Elementor, youknow, Elementor went to a very similar
system of container and grid and allthat kind of stuff, like, I don't know,
two years ago or so. This is verysimilar to that concept, which in
essence, they just cut out a, if youwill, a middle block that is columns.
And so I really like this a lot. Now,what about playing with it? What about
actually doing something with it? Well,here's what's really great. You can take
this right over here and we can justmove this actually works. So Wow. So now
what I'm doing with the image is I'mspanning these two columns over here and
this row over here. So let me click onthis and give you a little more insight
into that. So I clicked on that, and ifI go over to is it advanced? I always
forget. No, I'm sorry I have to lookover here. Yeah, I go over here, here,
right over here. This is new dimensions.Column, spanning, row spanning. Hey, are
there any people here that used to dotable based layout right column, span,
row span. Remember those bad old days,like, like, 20 years ago? I'm one of
those people that taught this stuff. Iyou know was horrible. Don't worry,
we're not going back to those days. Butit's the same idea that is, here's an
image that spans two columns, like Isaid, right over here, and one row span
over here. It can either be one or zero.It doesn't matter. So in addition to
dragging and dropping, you can do thesettings over here as well. For each
block, I just like the dragging anddropping because it's just more fun. And
if I want to like for. Example, let'ssay I want to change this position over
here this so I can always still go backover here, right? This is not anything
new. You can Wow, so I can do it thatway. Or I could have flip flopped. I'm
using the toolbar over here. In thiscase, I'm going to just drag this over.
I'm going to do this like so, all right,and then maybe drag, okay, like this.
I'm going to move this to like this,alright, so you get the idea that you
can just do a lot of like, reallyinteresting, and if you don't like this,
is kind of like, I don't like this. SoI'm going to see if I can drag this. I
don't know why I can't do it, butanyway, you get the idea. You can just
move these around by dragging anddropping. Now you don't have to drag and
drop. You can absolutely go over hereinto any one of these. Again, you can go
into the settings or where it saysdimensions, and you can, you know, add
what you want or or edit right overhere. This is one and one because it's
just, and it's just spanning one columnover here, and then row spanning one row
over here. It's a little tricky ifyou're not, if you, if you didn't do
table based layout back in the battledays. Well, it's okay, but if you did,
this will sound really familiar. Butwhat about mobile? Okay, because I'm
really concerned about that. How is thisgoing to play? And I'm going to go over
here to these different options overhere, mobile and for this is pretty,
sort of good. I mean, it's doesn't looktoo bad. Of course, it's a very simple
design, very simple, but kind of proofof concept. But, you know, you can, you,
you get the idea. Now, I can't changethis. You know, using Gutenberg, is
advanced mobile design, not there yet. Imean, it will get there, but it's not
there yet. So I can't, like, change thestacking order real easily for mobile
and things like that. But like I said, Iknow it's going to get there. I'm going
to, like, just go back to let's see overhere, if I want to, well, let's take a
look at something else here. And that'sso I'm in the right over here, I'm in
the grid block. Here's something that'sreally important again, grid block over
here, there's two types, and for now, Iwould say leave it in auto, because it
works much better than mobile. Automeans that the that by default, right
over here, the minimum column widths are12 rems, root EMS, not rapid eye
movements, and you can just even changeit like so. So this deals with the
dimension by default of the minimum.What are we doing the minimum columns,
minimum column widths, and if you wantto make it smaller, okay, or bigger, get
the idea. You can make all kinds ofadjustments. Now, this applies, of
course, to the entire grid. Now, can youdo nested grid blocks? I suppose, I'm
sure you can. I'm sure this is, youknow, this is a very good tool for more
advanced design, and I'll just leave itat that again, first iteration, lots
more to come, I think on the grid block,because I think it's just so I think
this is really good. This is a reallygood development for the black editor.
All right, let's try to finish up. Iknow I don't want to go forever, and I'm
sure you don't want to, but we
Laura: do have a question Shonn. Shonnwas asking, Can you have more than three
columns?
Bud Kraus: Yes. Okay, so very goodquestion. And by the way, do ask
questions? Because I always tell peopleI forget half the stuff that I know I'm
going to demonstrate. But, and youalways get the best out of me. I think
when, when you ask questions. So if I goto manual, you know you can change the
number of columns. You can see overhere, I'm changing them. Let's see I
have five. I have like, let's see sevencolumns. Now. Let's get rid of all the
UI stuff, and we can get a better lookat this. I think, yeah, I don't know if
I have seven columns, or maybe I have tochange. You do have the ability to
change wide width and full width insideof the it's, to me, it's looking like
there's three and, well, I don't know,123, it's kind of hard to tell. One way
to do it is to let's have a look. Oh, Isee. Okay. Well, 12345, and boy, let's
just take a look here. Yeah, now youhave 12345, it looks like five. And if I
go back, no, I've got this hold on asecond. I've got this zoom UI that just
got in the way again, but just okay, butI gotta get rid of it. I floating. Okay,
right. All right, all right. I want togo back and just take a quickie look
again. Here we go. Let's go into theagain. If I look at list view, where's
my list view?
Laura: Kyle says, if you set the widthof a column and it will fill as many as
will fit.
Bud Kraus: Ah, so there's only fiveright? Hold on a second again. Just a
quick little show you that veryimportant concept here is, even though
we've changed things around, we stillonly have those five interior blocks.
Okay, if you go to let's go over hereand let's go into so I had seven, yeah,
I don't know I had five one, so each onewould be one like this, right? I'm sorry
say that again, please.
Laura: You can set the width of acolumn, and it will fill as many as will
fit, right?
Bud Kraus: But that's an auto, okay,like this. That's not in the manual,
Yep, yeah, alright, let's roll on,because we could go on and, you know,
but I recommend if you're not using thisexperiment with it, because I think it's
just, you know, alright, let's get thisguy out of here. Alright. So, yeah,
Laura: We are at, you have eight minutesleft. So do you have one more thing to
show?Bud Kraus: Yeah, I have eight minutesleft. I That's all I need. Okay, so
we're going to leave. It's funny howthat always works out. Um, negative
margins. Also something that's fordesigners and really nice, and that is
so you now have the ability, again, withthe CSS you're talking about, changing
the position or the moving, in essence,if you will, a block easily, so that, in
this case, it'll overlap this image overhere, which is a really nice effect.
Couldn't do this until six, easily.Alright? Now you can do it easily, sort
of. So here I am, in the in the in theparagraph block. I'm going to click on
dimensions, I'm going to click onmargin, and then over here. And, boy,
this is always so hard to find the threedots over here, and then look for margin
over here, and I will go over here toedit the left margin, all right, and for
the left margin. Now, if I do this,okay, I'm applying the margin and a
positive with a positive number, okay,and you can't do this with negative. You
can't use a slider for negative. Fornegative, you have to. Oh, boy.
Laura: Just click, click on the thelittle icon at the end of the slider.
Bud Kraus: Over here. No, right here.And for that, you just have to put in a
negative number. So let's say negative,I don't know, 70, okay. And you can
change pixels. You can use rems, ems, nopercentages, ems, rems, the whole bit.
Okay, all these different units ofmeasurement. But what's nice is
something like this, which was verydifficult before, you'd have to, like,
hand codes things. And now you could dothis. So I expect to see a lot of
websites with overlapping content likethis. Now the question might be, what
about changing the Z index, the order,the stacking order of these objects?
Stay tuned, I guess. All right, yeah,not so simple. I you know, could that
happen? Sure it will. It's going to haveto happen.
Laura: Can you do me a favor? I did findthe answer to Wolfgang's question about
you can import patterns? Can you go toappearance and go to the site editor and
go go to patterns and then over in theblue box in the upper right hand corner,
click on, add new pattern. There youhave. Import pattern from JSON.
Bud Kraus: There you go. I'm so sorry. Ididn't know that. You know?
Laura: I mean, like I said, I don't usepatterns a lot, so I haven't, and that
might be something newer.
Bud Kraus: I'm going to look into thisbecause I'm like, getting to be a big
JSON, like, freak, yes, you know, I'llbe like, the fourth person in WordPress
to understand what it means, I have along ways to go before I can make that
claim. I. Right? So I'm sorry I didn'tknow that.
Laura: And then we had one last questionfrom Sue how, how do you place the text
underneath the image? Well,
Bud Kraus: That's what I was getting at,which is there is no easy way to change
elements, meaning exactly what you justasked. Okay? So not yet. I think it's
coming, but the it just, you know, Ishouldn't say that. My hunch is I'm not
going to do it because I'm running outof time, is that you can put, I don't
know this. I shouldn't say this, but ifyou changed the margin on the image
instead. Now that it might do it, if youdidn't, yeah, that would probably do it.
So you can, instead of changing themargin on the paragraph, like you just
saw, if you change the margin on theimage, that might overlap the paragraph.
So there maybe doable. I don't know, butcheck, you might want to check into
that. Okay, sounds logical. Um.
Laura: I am going to put in a couple oflinks to Learn WordPress to find any
information. Also, the replay will be onWordPress TV. We'll also put the link in
the meetup comments.
Bud Kraus: Wait a minute, I'm done? Iguess so, right. I wanted to show one.
Do I have time for like, one quickie?
Laura: Uuuu
Bud Kraus: No time
Laura: The. Yeah, It's only, like, threeminutes. Well, alright.
Bud Kraus: I'm going to use it Okay,unless people have questions. Are the
questions to answer? No, we're good. Noquestions. Okay, did Did everybody see
this? Okay? Because I know a lot ofpeople here are are familiar. But look,
and if not, I'm going to end with this,which is, of course, pages now are in
the site editor, and I suspect allcontent types will eventually be in the
page editor, which gives us the view ofwhat the WP admin is going to look like
in the future. And here's an examplewith pages. It's a total revamp. I love
this idea where it's not overlapping thecontent, okay, that it's right over
here, and you can, you know, you canlook at whether published and the
different statuses over here of thecontent. You can add a page. You can do
all kinds of filtering here. This isvery akin to just like when you see the
page list of pages in WP admin today,except this is what it's going to look
like, or be something like this in thefuture. And with that, I've used all my
time, so I'm sorry I screwed upeverything today, just about but oh, oh
no, no, oh no, no, no, no, no. One lastthing, no, no, no, no, no, not yet. Or
we got one last little quickie. Now, I'mnot going to spend time Summing up,
because there's no reason to that, andwe don't have time. But see you at
WordCamp US, right? Yeah,
Laura: I put the link in there.
Bud Kraus: You know, I'm going to bewearing the hat. And last thing, I have
a podcast. It's called Seriously Bud,and it's, it's a, it's an unexpected
conversation each week with somebody inthe WordPress community. It's not your
typical WordPress, you know, Tech Talk,because I don't do it. It's just life
stories about people that you may knowor not know and want to know in the
WordPress world. So check that out. It'savailable on any place that you get your
podcasts. So that's it, and thank youfor your time.
Laura: Monica had a question. I don'tknow the answer. I might have to get
back to her. Where can you storepatterns that you create so that you can
add them to different jobs? That's wherewe were saying that you'd almost have
to, like, create your own files and thenand export those, and then be able to
import them. And then, like I said, somepeople will create, like, a their own
plugin for that kind of thing, but tocreate maybe a separate file of your
kind of to go to patterns, that'ssomething that you'd have to create
yourself.
Bud Kraus: right?
Laura: All right.
Bud Kraus: No, easy.
Laura: Thank you everyone. I appreciatethis. Thank you very much, Bud. We do
have a survey that the Learn WordPressonline. We'd really love to see what
you're interested in for the future. Andwe're, you know, getting ready to do our
2025 goals for the training team. Andwould really love to see where what you
all would like. We also have ourlearning path. So if you know anyone
that is a new user, or if you would liketo kind of freshen up on your skills. We
also have the learning pathways that haslaunched for our beginner and
intermediate users and our beginnerdevelopers too, and that's a multi video
course that we've put out so. Thank youagain, everyone, and look for our next
workshop. Okay, thank you again, Bud.
Bud Kraus: Thank you. Take care.